test/view/mds/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="UTF-8">
   5     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
   6     <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   7     <script src="bootstrap/js/bootstrap.min.js"></script>
   8     <script src="js/config.js"></script>
   9     <script src="js/model.js"></script>
  10     <script src="js/view.js"></script>
  11     <script src="js/service.js"></script>
  12     <script src="js/controller.js"></script>
  13     <script src="js/event.js"></script>
  14     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  15     <link href="css/mystile.css" rel="stylesheet">
  16   </head>
  17   <body>
  18     <!-- container -->
  19     <div class="container">
  20
  21       <!-- title -->
  22       <div class="row" id="title">
  23         <h1>Minimam Dose System</h1>
  24       </div>
  25
  26       <!-- main -->
  27       <div class="row" id="main">
  28
  29         <!-- left side -->
  30         <div class="col-md-6">
  31           <canvas id="camera_screen" width="512" height="512"></canvas>
  32         </div>
  33
  34         <!-- right side -->
  35         <div class="col-md-6">
  36           <!-- mds -->
  37           <div class="col-md-12" style="background-color : #AAEEDD">
  38             <!-- mode button -->
  39             <div style="margin:10px 10px 10px 10px">
  40               <button id="search_button" button type="submit" class="btn btn-default btn-lg">search</button>
  41               <button id="focus_button" button type="submit" class="btn btn-default btn-lg">focus</button>
  42               <button id="exposure_button" button type="submit" class="btn btn-default btn-lg">exposure</button>
  43             </div>
  44             <!-- mds params -->
  45             <div class="col-md-9">
  46               <table class="table" style="background-color : white; margin : 10px 10px 10px 10px" >
  47                 <tbody>
  48                   <tr>
  49                     <td>Magnification</td>
  50                     <td id="mag">5800</td>
  51                   </tr>
  52                   <tr>
  53                     <td>Spot size</td>
  54                     <td id="spot">5</td>
  55                   </tr>
  56                   <tr>
  57                     <td>Intensity</td>
  58                     <td id="int">40</td>
  59                   </tr>
  60                   <tr>
  61                     <td>Beam shift</td>
  62                     <td id="shift">X: 1 Y: 1</td>
  63                   </tr>
  64                   <tr>
  65                     <td>Defocus</td>
  66                     <td><button button id="plus_defocus_button" type="submit" class="btn btn-default">+</button></td>
  67                     <td id="defocus">0 nm</td>
  68                     <td><button button id="minus_defocus_button" type="submit" class="btn btn-default">-</button></td>
  69                     <td><button button id="reset_defocus_button" type="submit" class="btn btn-default">reset</button></td>
  70                   </tr>
  71                 </tbody>
  72               </table>
  73             </div>
  74             <!-- exe button -->
  75             <div class="col-md-3">
  76               <button id="start_button" button type="submit" class="btn btn-default btn-lg">start</button>
  77               <button id="getparams_button" button type="submit" class="btn btn-default btn-lg">get params</button>
  78               <button id="512_button" button type="submit" class="btn btn-default">512</button>
  79               <button id="256_button" button type="submit" class="btn btn-default">256</button>
  80             </div>
  81           </div>
  82           <!-- camera -->
  83           <div class="col-md-12" style="background-color:yellow; margin: 10px 10px 10px 0px">
  84             <div style="margin: 10px 10px 10px 10px">
  85               <!-- camera params -->
  86               <div id="settings">
  87                 <div class="col-md-3">
  88                   image size:
  89                   <select id="size" class="form-control" height="30"  name="size">
  90                     <option value="0">full</option>
  91                     <option value="1">half</option>
  92                     <option value="2">quarter</option>
  93                   </select>
  94                 </div>
  95
  96                 <div class="col-md-3">
  97                   binning:
  98                   <select id="binning" class="form-control" name="binning">
  99                     <option value="1">1</option>
 100                     <option value="2">2</option>
 101                     <option value="4">4</option>
 102                   </select>
 103                 </div>
 104               </div>
 105               <!-- expose button -->
 106               <div class="col-md-3">
 107                 <button id="expose_button" type="submit" class="btn btn-default btn-lg btn-primary">expose</button>
 108               </div>
 109               <!-- save picture button -->
 110               <div class="col-md-3">
 111                 <button id="savePic_button" type="submit" class="btn btn-default btn-lg btn-primary">save</button>
 112               </div>
 113             </div>
 114           </div>
 115           <!-- xy stage -->
 116           <div class="col-md-3">
 117             <div>
 118               <center> <button id="plusY_button" button type="submit" class="btn btn-default">▲</button></center>
 119             </div>
 120             <div>
 121               <button id="minusX_button" button type="submit" class="btn btn-default">◀</button>
 122               <button id="plusX_button" button type="submit" class="btn btn-default" style="margin-left:20px">▶</button>
 123             </div>
 124             <div>
 125               <center><button id="minusY_button" button type="submit" class="btn btn-default">▼</button></center>
 126             </div>
 127             <div id="stageCurrentParams" class="col-md-3"></div>
 128           </div>
 129           <!-- z stage -->
 130           <div class="col-md-3">
 131             Z axis
 132             <div>
 133               <center> <button id="plusZ_button" button type="submit" class="btn btn-default">▲</button></center>
 134             </div>
 135             <div>
 136               <center> <button id="minusZ_button" button type="submit" class="btn btn-default">▼</button></center>
 137             </div>
 138           </div>
 139           <!-- auto fix xy stage settings -->
 140           <div class="col-md-3">
 141             <input id="fixXStage" class="form-control">
 142             <input id="fixYStage" class="form-control">
 143             <button id="fixSetButton" class="btn btn-default">set</button>
 144           </div>
 145         </div>
 146
 147       </div>
 148
 149     </div>
 150   </body>
 151 </html>