em_control.html

   1 <!DOCTYPE html>
   2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4         <meta charset="utf-8">
   5         <link rel="stylesheet" href="CSS/bootstrap-grid.css">
   6         <link rel="stylesheet" href="CSS/em_control.css">
   7         <title>WITs-controlEM</title>
   8 </head>
   9 <body>
  10         <header>
  11                 <a href="./index.html">Go to WITs -home</a>
  12         <h2>Control Electron Microscpy</h2>
  13         <h3></h3>
  14         </header>
  15         <main>
  16                 <div class="container">
  17                         <div class="row">
  18                                 <div class="col-md-6">
  19                                         <h3>EM display<div id="em_name"></div></h3>
  20                                         <div style="height: 550px;">
  21                                                 <canvas id="em_canvas" width="512" height="512" style="z-index:0; position: absolute"></canvas>
  22                                 <canvas id="canvasGuide" width="512" height="512" style="z-index:1; position: absolute"></canvas>
  23                         </div>
  24                         <div style="text-align:center;">
  25                                 <h3 style="text-align: center;">map</h3>
  26                                 <canvas height="200" width="200" id="canvasMap"></canvas>
  27                         </div>
  28                                 </div>
  29                                 <div class="col-md-6">
  30                                         <div id="setting">
  31                                                 <h3>Setting</h3>
  32                                                  image size:
  33                                 <select id="size" name="size" onchange="LogCollect()">
  34                                         <option value="0">full</option>
  35                                         <option value="1">half</option>
  36                                         <option value="2">quarter</option>
  37                                 </select>
  38
  39                                 binning:
  40                                 <select id="binning" name="binning" onchang="LogCollect()">
  41                                         <option value="1">1</option>
  42                                         <option value="2">2</option>
  43                                         <option value="4">4</option>
  44                                 </select>
  45
  46                                 exptime:
  47                                 <input type="number" id="exptime" name="exptime" onchang="LogCollect()">
  48                                         </div>
  49                                         <div id="stage_control">
  50                                                 <h3>Stage control</h3>
  51                                                 <form name="movestage" id="movestageid" action="">
  52                                         <div class="form-group">
  53                                                 moving distance
  54                                                 <input type="number" name="movingdistance" id="movingdistance" value="1" onchange="setStage()">nm</input>
  55                                                         </div>
  56                                                         <div class="form-group">
  57                                                 move x
  58                                                 <input type="number" name="movex" id="movex" value="0" step="100" onchange="setStage() ; canvasMapDraw() ; LogCollect()">nm
  59                                                 <input type="button" id="clickMoveyLeft" value="←" onclick="clickMove('Left') ; LogCollect()">
  60                                                 <input type="button" id="clickMoveyRight" value="→" onclick="clickMove('Right') ; LogCollect()">
  61                                         </div>
  62                                         <div class="form-group">
  63                                                 move y
  64                                                 <input type="number" name="movey" id="movey" value="0" step="100" onchange="setStage() ; canvasMapDraw() ; LogCollect()">nm
  65                                                 <input type="button" id="clickMovexUp" value="↑" onclick="clickMove('Up') ; LogCollect()">
  66                                                 <input type="button" id="clickMovexDown" value="↓" onclick="clickMove('Down') ; LogCollect()">
  67                                         </div>
  68                                 </form>
  69                                 <form name="moveza" id="moveza" action="">
  70                                         <div class="form-group">
  71                                                 move z(keep magnificance)&nbsp;&nbsp;
  72                                                 <input type="number" name="movez" id="movez" value="0" onchange="setStage() ; LogCollect()">nm<br><br>
  73                                                 change current(keep stage)&nbsp;&nbsp;
  74                                                 <input type="number" name="movea" id="movea" onchange="objcontrol('obj',current.value) ; LogCollect()">%&nbsp;&nbsp;
  75                                                 Current lenz:<span id="obj"></span>
  76                                         </div>
  77                                 </form>
  78                                 <form action="">
  79                                         spot size
  80                                         <input type = "number" name = "sps" id = "SpotSize" onchange="setSpotSize() ; LogCollect()">
  81                                 </form>
  82                                 <p>
  83                                         magnification absolute value
  84                                         <input type = "number" name = "magA" id = "magnificationA" onchange = "setMagnificationA() ; LogCollect()">
  85                                 </p>
  86                                 <form action="">
  87                                         magnification relative value
  88                                         <input type = "number" name = "magR" id = "magnificationR" onchange = "setMagnificationR() ; LogCollect()">
  89                                 </form>
  90                         </div>
  91                                         <div id="take_photo">
  92                                                 <h3>Take photo</h3>
  93                                                 <input type="button" id="wsConnectBtn" onclick="wsConnectionSwitch(); LogCollect()" value="websocket start">
  94                                 <input type="button" id="apiConnectBtn" onclick="apiConnectionSwitch(); LogCollect()" value="API start">
  95                                         </div>
  96                                         <div id="save_photo">
  97                                                 <h3>Save photo</h3>
  98                                                 File name：<input id="namephoto" placeholder="myphoto">.tiff &nbsp;&nbsp;&nbsp;
  99                                                 <button onclick="CanvasSave('em_canvas')">Save</button><br>
 100                                 <a id="DL_link_canvas"></a>
 101                                         </div>
 102                                         <div id="em_condition">
 103                                                 <h3>Electron Microscopy Condition</h3>
 104                                                 File name：<input id="name1" placeholder="date">.txt&nbsp;&nbsp;&nbsp;
 105                                 <button onclick="SaveEmConditionFile()">Save</button>
 106                                 <a id='DL_link_condition'></a>
 107                                 <br>
 108                                 LogFile name：<input id="logname" placeholder="log">.txt&nbsp;&nbsp;&nbsp;
 109                                 <button id="logsave">Save</button><br><br>
 110                                                 <table border=1>
 111                                                         <tr>
 112                                                                 <th>TEM</th><td><span id="tem"></span></td>
 113                                                         </tr>
 114                                                         <tr>
 115                                                                 <th>Position</th>
 116                                                                 <td>
 117                                                                         <span id="Position"></span>
 118                                                                         <b>x=</b><span id="currentx"></span><br>
 119                                                                         <b>y=</b><span id="currenty"></span><br>
 120                                                                         <b>z=</b><span id="currentz"></span><br>
 121                                                                         <b>a=</b><span id="currenta"></span><br>
 122                                                                 </td>
 123                                                         </tr>
 124                                                         <tr>
 125                                                                 <th>SpotSizeIndex</th><td><span id="SpotSizeIndex"></span></td>
 126                                                         </tr>
 127                                                         <tr>
 128                                                                 <th>MagIndex</th><td><span id="MagIndex"></span></td>
 129                                                         </tr>
 130                                                         <tr>
 131                                                                 <th>Obj</th><td><span id="Obj"></span></td>
 132                                                         </tr>
 133                                                         <tr>
 134                                                                 <th>BeamTiltX</th><td><span id="BeamTiltX"></span></td>
 135                                                         </tr>
 136                                                         <tr>
 137                                                                 <th>BeamTiltY</th><td><span id="BeamTiltY"></span></td>
 138                                                         </tr>
 139                                                         <tr>
 140                                                                 <th>Speed</th><td><span id="Speed"></span></td>
 141                                                         </tr>
 142                                                 </table>
 143                                 <input type="button" onclick="nowCondition()" value="currentConditon">
 144                                         </div>
 145                                 </div>
 146                         </div>
 147                 </div>
 148         </main>
 149         <footer>
 150                 <p></p>
 151         </footer>
 152         <!--script-->
 153         <script src="JS/jquery-1.7.2.min.js"></script>
 154         <script type="text/javascript" src= "JS/userSetting.js"></script>
 155         <script type="text/javascript" src= "JS/log.js"></script>
 156         <script type="text/javascript" src= "JS/realtimeCamera.js"></script>
 157         <script type="text/javascript" src= "JS/em.js"></script>
 158         <script type="text/javascript" src= "JS/drawImage.js"></script>
 159         <script type="text/javascript" src= "JS/map.js"></script>
 160 </body>
 161
 162 </html>