wits_fei.html

   1
   2 <!DOCTYPE html>
   3 <html lang="en">
   4     <head>
   5         <meta charset="utf-8">
   6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
   7         <meta name="viewport" content="width=device-width, initial-scale=1">
   8         <title>Websystem Integrated Tems</title>
   9         <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
  10         <link href="fonts/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet">
  11         <link href="CSS/bootstrap-3.1.1.min.css" rel="stylesheet">
  12         <link href="CSS/lollies.min.css" rel="stylesheet">
  13         <link href="CSS/custom.css" rel="stylesheet">
  14         <script type ="text/javascript" src="JS/practice.js"></script>
  15         <script type="text/javascript"  src="JS/file.js"></script>
  16         <script type="text/javascript" src="JS/option.js"></script>
  17         <script src="JS/jquery-1.7.2.min.js"></script>
  18         <script type="text/javascript" src="JS/canvas.js"></script>
  19         <script type="text/javascript" src="JS/emcontrol.js"></script>
  20         <script type="text/javascript" src="JS/ajax.js"></script>
  21
  22  <!--       <script type="text/javascript" src="JS/gamepad.js"></script> -->
  23         <!--[if lt IE 9]>
  24                 <script src="js/html5shiv-3.7.0.js"></script>
  25                 <script src="js/respond-1.4.2.js"></script>
  26         <![endif]-->
  27     </head>
  28     <body onload="filemethod();filemethod2();filemethod3();firsttab();gamepad();emnamecatch('fei');tilt();emcondition('request')">
  29         <header id="main-header">
  30             <div class="container">
  31                 <div class="row">
  32                     <div class="col-md-3 spacer"></div>
  33                     <div class="col-md-6">
  34                         <!-- LOGO 4️--><b>W</b>ebsystem <b>I</b>ntegrated <b>T</b>ems
  35                         <div id="logo"><a href="/"><img src="image/fei.png" /></a></div>
  36                     </div>
  37                     <div class="col-md-3 spacer"></div>
  38                 </div>
  39             </div>
  40         </header>
  41         <nav id="main-nav">
  42             <div class="container">
  43                 <div class="row">
  44                     <div class="col-md-12">
  45                         <!-- NAVIGATION -->
  46                         <div class="navbar navbar-default" role="navigation">
  47                             <div class="navbar-header">
  48                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  49                                     <span class="sr-only">Toggle navigation</span>
  50                                     <span class="icon-bar"></span>
  51                                     <span class="icon-bar"></span>
  52                                     <span class="icon-bar"></span>
  53                                 </button>
  54                             </div>
  55                             <div class="navbar-collapse collapse">
  56                                 <ul class="nav navbar-nav nav-justified">
  57                                     <li id="mtab1"><a href="#" onclick="cngTab('1');FocusTab('mtab1');tabcheck()">About JEM-2100</a></li>
  58                                     <li id="mtab2"><a href="#" onclick="cngTab('2');FocusTab('mtab2');tabcheck()">Single Particle Analysis</a></li>
  59                                     <!--<li id="mtab3"><a href="#" onclick="FocusTab('mtab3')">Tomography</a></li>-->
  60                                     <li class="dropdown" id="mtab3">
  61                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="FocusTab('mtab3')">Tomography<b class="caret"></b></a>
  62                                         <ul class="dropdown-menu">
  63                                             <li><a href="#" onclick="cngTab('3');tabcheck()">1 Eucentric Height</a></li>
  64                                             <li><a href="#" onclick="cngTab('4');tabcheck()">2 Take photo</a></li>
  65                                         </ul>
  66                                     </li>
  67                                     <li id="mtab4"><a href="#" onclick="cngTab('5');tabcheck();FocusTab('mtab4')">MDS</a></li>
  68                                     <li id="mtab5"><a href="#" onclick="FocusTab('mtab5')">Information</a></li>
  69                                     <!--        <li id="mtab6"><a href="#" onclick="FocusTab('mtab6')"></a></li>
  70                                             <li id="mtab7"><a href="#" onclick="FocusTab('mtab7')" >Nav Item7</a></li>-->
  71                                     <li class="dropdown" id="mtab8">
  72                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="FocusTab('mtab8')">Option<b class="caret"></b></a>
  73                                         <ul class="dropdown-menu">
  74                                             <li class="dropdown">
  75                                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="bgColChangeDefault()">Change background<b class="caret"></b></a>
  76                                             <li><a href="#" onclick="bgColChangeWhite()">White</a></li>
  77                                             <li><a href="#" onclick="bgColChangeGrey()">grey</a></li>
  78                                     </li>
  79                                     <li><a href="select.html">Change EM</a></li>
  80                                     <li><a href="#">Something else here</a></li>
  81                                     <li class="divider"></li>
  82                                     <li class="dropdown-header">Nav header</li>
  83                                     <li><a href="#">Separated link</a></li>
  84                                     <li><a href="#">One more separated link</a></li>
  85                                 </ul>
  86                                 </li>
  87                                 </ul>
  88                             </div>
  89                         </div>
  90                     </div>
  91                 </div>
  92             </div>
  93         </nav>
  94         <div id= 'introduce'>
  95             <div class="content-block">
  96                 <div class="container">
  97                     <div class="row">
  98                         <div class="col-md-12">
  99                             <h1>You can control FEI tecnaiG^2 spirit from this site.</h1>
 100                             <p>The JEM-2100 is a multipurpose, 200 kV analytical electron microscope. Variety of versions is provided to adapt user’s purposes. The JEM-2100, which incorporates an integrated PC system for various functions with excellent cost performance, supports research and development in wide scientific fields, for biology to materials researches.
 101 Excellent LaB6 electron gun promises excellent performance with a reasonable cost.
 102 Ultrahigh TEM resolution as high as 0.19 nm (in UHR configuration)　enables us to perform an observation at atomic resolution.
 103 STEM (Scanning Transmission Electron Microscope: option) function integrated in PC control system enables us to see a scanning image of a sample at nanometer resolution.
 104 EDS (Energy Dispersive X-ray Spectrometer) with a 0.28sr of solid angle (in HR configuration with a 50mm2 detector) performs highly sensitive analysis at nanometer resolution.
 105 Highly stable specimen stage enables us to perform a long term observation and analysis.</p>
 106
 107                         </div>
 108                     </div>
 109                 </div>
 110             </div>
 111         </div>
 112         <div id= 'eucentricheightcontents'>
 113             <div class="content-block">
 114                 <div class="container">
 115                     <div class="row">
 116                         <div class="col-md-12">
 117                             <h1>Eucentric Height</h1>
 118                         </div>
 119                     </div>
 120                     <div class="row">
 121                         <div class="col-md-6">
 122                             <div id="viewArea">
 123                                 <img class="animatedEntrance" src="http://placehold.it/720x850/21b2eb/058dcd" />
 124                             </div>
 125                         </div>
 126                         <div class="col-md-6">
 127                             <br>
 128                             <br>
 129                              <h2>Control Electron Microscopy</h2>
 130                             <p>
 131                                 <!--
 132                             <form name="test">
 133                                 <input type="file" id="exsample" onchange="SaveFileContents()"/>
 134                                 <span id="con"></span><br>
 135                                 <span id="change">/////Value of File/////</span>
 136                             </form>
 137                                  -->
 138                             <p>
 139                             <form name="eucentric" id="eucentricid" action="">
 140                                 <div class="form-group">
 141                                     <label>max tilt</label>
 142                                     <input type="number" name="maxtilt" id="maxtiltid" onchange="SaveFileContents()" onclick="SaveFileContents()">nm
 143                                 </div>
 144                                 </p>
 145                                 <p>
 146                                 <div class="form-group">
 147                                     <label>speed   </label>
 148                                     &nbsp;&nbsp;
 149                                     <input type="number" name="speed" id="speed" onchange="SaveFileContents()" onclick="SaveFileContents()">nm
 150                                 </div>
 151                                 </p>
 152                                 <p>
 153                                 <div class="form-group">
 154                                     <label>z-shift</label>
 155                                     &nbsp;&nbsp;
 156                                     <input type="number" name="zshift" id="zshift" onchange="SaveFileContents()" onclick="SaveFileContents()">nm
 157                                 </div>
 158                                 </p>
 159                             </form>
 160                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 161                             <button type="submit" class="btn btn-default" id="submit" onclick="SaveFileContents()">Start</button>
 162                             &nbsp;&nbsp;
 163                             <button type="submit" class="btn btn-default" id="submit">Stop</button>
 164                             <br>
 165                             <br>
 166                             <p>
 167                         <!--        Save condition<br>
 168                             <form name="save" id="saveid">
 169                                 Condition：<textarea id="text" rows="1" cols="55"></textarea><br>
 170                                 File name：<input id="name" placeholder="mytext">.txt<br>
 171                                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="TextSave()" class="btn btn-default">Save</button><br>
 172                                 <a id='DL_link'></a>
 173                             </form>
 174                         -->
 175                             </p>
 176                         </div>
 177                     </div>
 178                 </div>
 179             </div>
 180         </div>
 181         <div id='form'>
 182             <div class="form-block">
 183                 <div class="container">
 184                     <div class="row">
 185                         <div class="col-md-6 col-sm-6">
 186                             <img src="http://placehold.it/720x850/21b2eb/058dcd" />
 187                         </div>
 188                         <div class="col-md-6 col-sm-6">
 189                             <form method="post" id="custom_form" name="custom_form">
 190                                 <div class="form-group">
 191                                     <label >Name</label>
 192                                     <input  type="text" id="name" name="name" class="form-control">
 193                                 </div>
 194                                 <div class="form-group">
 195                                     <label >Email</label>
 196                                     <input type="text" id="email" name="email" class="form-control" >
 197                                 </div>
 198                                 <div class="form-group">
 199                                     <label >Message</label>
 200                                     <textarea type="text" id="message" name="message" class="form-control"></textarea>
 201                                 </div>
 202                                 <div class="form-group">
 203                                     <label>Captcha (case sensitive)</label>
 204                                     <div id="spambox">
 205                                         <div class="spam"></div>
 206                                     </div>
 207                                 </div>
 208                                 <button type="submit" class="btn btn-default" id="submit">Submit</button>
 209                             </form>
 210                         </div>
 211                     </div>
 212                 </div>
 213             </div>
 214         </div>
 215         <div id= 'singleparticlecontents'>
 216             <div class="content-block">
 217                 <div class="container">
 218                     <div class="row">
 219                         <div class="col-md-12">
 220                             <h1>Single particle analysis</h1>
 221                         </div>
 222                     </div>
 223                     <div class="row">
 224                         <div class="col-md-6">
 225                             <div id="viewArea">
 226                                 <!--<img class="animatedEntrance" src="http://placehold.it/720x850/21b2eb/058dcd" />-->
 227                                 <br>
 228                                 <br>
 229                                 <canvas id="canvasOne" width="540" height="605"></canvas>
 230                             </div>
 231                         </div>
 232                         <div class="col-md-6">
 233                             <!-- <h2>Control Electron Microscopy</h2>-->
 234                             <p>
 235                             <form name="test2">
 236                                 <input type="file" id="exsample2" onchange="SaveFileContents()"/>
 237                                 <span id="con2"></span><br>
 238                                 <span id="change2">/////Value of File/////</span>
 239                             </form>
 240                             <br>
 241                             <p>
 242                                 <label>Step1. Search particle</label>
 243                             </p>
 244                             Control mode select:&nbsp;&nbsp;<a onclick="switchkey('1');controlmodeselect('key')"><span id="key">Key(ex.↑↓→←,wsad,hjkl)</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="switchkey('0');controlmodeselect('formmode')"><span id="formmode">Form</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="switchkey('2');controlmodeselect('gamepad')"><span id="gamepad">Gamepad</span></a>
 245                             <form name="movestage" id="movestageid" action="">
 246                                 <div class="form-group">
 247                                     move x
 248                                     <input type="number" name="movex" id="movex" value="0" onchange="canvasApp()">nm
 249                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current x:<span id="currentx"></span>
 250                                 </div>
 251                                 <div class="form-group">
 252                                     move y
 253                                     <input type="number" name="movey" id="movey" value="0" onchange="canvasApp()">nm
 254                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current y:<span id="currenty"></span><br><!--<span id=stage></span>-->
 255                                 </div>
 256                             </form>
 257                             <p>
 258                                 <label>Step2. Set Focus</label>
 259                             </p>
 260                             <form name="moveza" id="moveza" action="">
 261                                 <div class="form-group">
 262                                     move z(keep magnificance)
 263                                     &nbsp;&nbsp;
 264                                     <input type="number" name="movez" id="movez" value="0" onchange="canvasApp()">nm<br><br>
 265                                     change current(keep stage)
 266                                     &nbsp;&nbsp;
 267                                     <input type="number" name="current" id="current" onchange="objcontrol('obj',current.value);emcondition('request')">%&nbsp;&nbsp;Current lenz:<span id="obj"></span>
 268                                 </div>
 269                             </form>
 270                             <p>
 271                                 <label>Step3. Take Photo</label>
 272                             </p>
 273                             Use MDS:&nbsp;&nbsp;<input type="radio" name="mdsselect" value="usemds">&nbsp;Yes&nbsp;&nbsp;<input type="radio" name="mdsselect" value="no">&nbsp;No
 274                             <form name="save" id="saveid">
 275                                 Save Photo
 276                                 &nbsp;&nbsp;
 277                                 File name：<input id="namephoto" placeholder="myphoto">.tif
 278                                 &nbsp;&nbsp;&nbsp;<button onclick="CanvasSave('canvasOne')" class="btn btn-default">Save</button><br>
 279                                 <a id="DL_link_canvas"></a>
 280                             </form>
 281                             <br>
 282                             <p>
 283                                 <label>Electron Microscopy Condition</label>&nbsp;&nbsp;&nbsp;&nbsp;
 284                                 <!--<input type="button" value="push" onClick="emcondition('request')"></input>--><br>
 285                                 <form name="save" id="saveid">
 286                                 File name：<input id="name1" placeholder="mytext">.txt
 287                                 &nbsp;&nbsp;&nbsp;<button onclick="ConditionFileSave()" class="btn btn-default">Save</button>
 288                                 <a id='DL_link_condition'></a>
 289                             </form>
 290                             <div id="condition" style="width:340px; height:250; padding:10px; border:6px outset">
 291                                 TEM:<span id="tem"></span>
 292                                 Position:<span id="Position"></span>x=<span id="GonioX"></span>,y=<span id="GonioY"></span>,z=<span id="GonioZ"></span>,a=<span id="GonioA"></span><br>
 293                                 SpotSizeIndex:<span id="SpotSizeIndex"></span>
 294                                 MagIndex:<span id="MagIndex"></span>
 295                                 Obj:<span id="Obj"></span>
 296                                 BeamTiltX:<span id="BeamTiltX"></span>
 297                                 BeamTiltY:<span id="BeamTiltY"></span>
 298                                 Speed:<span id="Speed"></span>
 299                             </div>
 300                             </p>
 301                             <!--<p>
 302                                 <label>Save condition</label><br>
 303                               Todays:<span id="daysdata">a</span>
 304                             <form name="save" id="saveid">
 305                                 File name：<input id="name" placeholder="mytext">.txt
 306                                 &nbsp;&nbsp;&nbsp;<button onclick="ConditionFileSave()" class="btn btn-default">Save</button>
 307                                 <a id='DL_link_condition'></a>
 308                             </form>
 309                             </p>
 310                             -->
 311                         </div>
 312                     </div>
 313                 </div>
 314             </div>
 315         </div>
 316         <div id= 'tomography'>
 317             <div class="content-block">
 318                 <div class="container">
 319                     <div class="row">
 320                         <div class="col-md-12">
 321                             <h1>Tomography</h1>
 322                         </div>
 323                     </div>
 324                     <div class="row">
 325                         <div class="col-md-6">
 326                             <div id="viewArea">
 327                                 <!--<img class="animatedEntrance" src="http://placehold.it/720x850/21b2eb/058dcd" />-->
 328                                 <canvas id="canvastomo" width="540" height="605"></canvas>
 329                                 <div id="condition" style="width:340px; height:250; padding:10px; border:6px outset">
 330                                     TEM:<span id="tem2"></span>
 331                                     Position:<span id="Position2"></span>x=<span id="GonioX2"></span>,y=<span id="GonioY2"></span>,z=<span id="GonioZ2"></span>,a=<span id="GonioA2"></span><br>
 332                                     SpotSizeIndex:<span id="SpotSizeIndex2"></span>
 333                                     Brightness:<span id="MagIndex2"></span>
 334                                     Obj:<span id="Obj2"></span>
 335                                     BeamTiltX:<span id="BeamTiltX2"></span>
 336                                     BeamTiltY:<span id="BeamTiltY2"></span>
 337                                     Speed:<span id="Speed2"></span>
 338                                 </div>
 339
 340                             </div>
 341                         </div>
 342                         <div class="col-md-6">
 343                             <!-- <h2>Control Electron Microscopy</h2>-->
 344                             <p>
 345                             <form name="test2">
 346                                 <input type="file" id="exsample" onchange="SaveFileContents()"/>
 347                                 <span id="con"></span><br>
 348                                 <span id="change">/////Value of File/////</span>
 349                             </form>
 350                             <br>
 351                             <p>
 352                                 <label>Step1. Search particle</label>
 353                             </p>
 354                             Control mode select:&nbsp;&nbsp;<a onclick="switchkey('1');controlmodeselect('key2')"><span id="key2">Key(ex.↑↓→←,wsad,hjkl)</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="switchkey('0');controlmodeselect('formmode2')"><span id="formmode2">Form</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="switchkey('2');controlmodeselect('gamepad2')"><span id="gamepad2">Gamepad</span></a>
 355                             <form name="movestagetomo" id="movestageid" action="">
 356                                 <div class="form-group">
 357                                     move x
 358                                     <input type="number" name="movex" id="movex" value="0" onchange="canvastomo()">nm
 359                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current x:<span id="currenttomox"></span>
 360                                 </div>
 361                                 <div class="form-group">
 362                                     move y
 363                                     <input type="number" name="movey" id="movey" value="0" onchange="canvastomo()">nm
 364                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current y:<span id="currenttomoy"></span>
 365                                     <br><span id ="stagetomo"></span>
 366                                 </div>
 367                             </form>
 368                             <p>
 369                                 <label>Step2. Set Focus</label>
 370                             </p>
 371                             <form name="moveztomo" id="moveztomo" action="">
 372                                 <div class="form-group">
 373                                     move z(keep magnification)
 374                                     &nbsp;&nbsp;
 375                                     <input type="number" name="movez" id="movez" onchange="canvastomo()" value="0">nm<br>
 376                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current z:<span id="currenttomoz"></span>
 377                                     <br><br>
 378                                     change current(keep stage)
 379                                     &nbsp;&nbsp;
 380                                     <input type="number" name="currentromo" id="currenttomo" onchange="objcontrol('obj',currenttomo.value);emcondition('request')">%<br>
 381                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current lenz:<span id="objtomo"></span>
 382                                 </div>
 383                             </form>
 384                             <p>
 385                                 <label>Step3. Setting</label>
 386                             </p>
 387                             <form name="setting" id="setting" action="">
 388                                 <div class="form-group">
 389                                     About Tilting&nbsp;&nbsp;:&nbsp;&nbsp;
 390                                     <input type="radio" name="tilting" value="standard" onclick="tilt()" checked="checked">&nbsp;standard&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="standard"><input type="number" name="standardnum" id="standardnum" value="0" min="-90" max="90" step="1" style="width:100px;" onchange="canvastomo()">°</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 391                                     <input type="radio" name="tilting" value="saxtorn" onclick="tilt()">&nbsp;saxtorn&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="saxtorn"><input type="number" name="tiltingnum" id="tiltingnum" value="0" step="1" style="width:100px;" onchange="tilt();canvastomo()">°*cos<span id="angurar">x</span>°</span><br>
 392                                     About tracking&nbsp;&nbsp;:&nbsp;&nbsp;
 393                                     Traccking&nbsp;&nbsp;every&nbsp;&nbsp;<select name="tracking">
 394                                         <option value="1">one sheet</option>
 395                                         <option value="2">two sheets</option>
 396                                         <option value="4">four sheets</option>
 397                                         <option value="8">eight sheets</option>
 398                                     </select>
 399                                 </div>
 400                             </form>
 401                             <p>
 402                                 <label>Step3. Take Photo</label>
 403                            <!-- </p>
 404                             Use MDS:&nbsp;&nbsp;<input type="radio" name="mdsselect" value="usemds">&nbsp;Yes&nbsp;&nbsp;<input type="radio" name="mdsselect" value="no">&nbsp;No-->
 405                             <form name="save" id="saveid">
 406                                 Save Photo
 407                                 &nbsp;&nbsp;
 408                                 File name：<input id="namephoto2" placeholder="myphoto">.tif
 409                                 &nbsp;&nbsp;&nbsp;<button onclick="CanvasSave('canvastomo')" class="btn btn-default">Save</button><br>
 410                                 <a id="DL_link_canvas"></a>
 411                             </form>
 412                             <br>
 413                             <p>
 414                                 <label>Electron Microscopy Condition</label>&nbsp;&nbsp;&nbsp;&nbsp;
 415                                 <!--<input type="button" value="push" onClick="emcondition('request')"></input>--><br>
 416                             <form name="save" id="saveid">
 417                                 File name：<input id="name" placeholder="mytext">.txt
 418                                 &nbsp;&nbsp;&nbsp;<button onclick="ConditionFileSave()" class="btn btn-default">Save</button>
 419                                 <a id='DL_link_condition'></a>
 420                             </form>
 421
 422                             </p>
 423                             <!--
 424                             <p>
 425                                 <label>Save condition</label><br>
 426                                 Todays:<span id="daysdata">a</span>
 427                             <form name="save" id="saveid">
 428                                 File name：<input id="name" placeholder="mytext">.txt
 429                                 &nbsp;&nbsp;&nbsp;<button onclick="ConditionFileSave()" class="btn btn-default">Save</button>
 430                                 <a id='DL_link_condition'></a>
 431                             </form>
 432                             </p>
 433                             -->
 434                         </div>
 435                     </div>
 436                 </div>
 437             </div>
 438         </div>
 439         <div id= 'mds'>
 440             <div class="content-block">
 441                 <div class="container">
 442                     <div class="row">
 443                         <div class="col-md-12">
 444                             <h1>Minimum Dose System</h1>
 445                         </div>
 446                     </div>
 447                     <div class="row">
 448                         <div class="col-md-6">
 449                             <div id="viewArea">
 450                                 <!--<img class="animatedEntrance" src="http://placehold.it/720x850/21b2eb/058dcd" />-->
 451                                 <br>
 452                                 <br>
 453                                 <canvas id="canvasmds" width="540" height="605"></canvas>
 454                             </div>
 455                         </div>
 456                         <div class="col-md-6">
 457                             <!-- <h2>Control Electron Microscopy</h2>-->
 458                             <p>
 459                             <form name="test3">
 460                                 <input type="file" id="exsample3" onchange="SaveFileContents()"/>
 461                                 <span id="con3"></span><br>
 462                                 <span id="change3">/////Value of File/////</span>
 463                             </form>
 464                             <br>
 465                             <p>
 466                                 <label>Step1. Search particle</label>
 467                             </p>
 468                             Control mode select:&nbsp;&nbsp;<a onclick="switchkey('1');controlmodeselect('key3')"><span id="key3">Key(ex.↑↓→←,wsad,hjkl)</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="switchkey('0');controlmodeselect('formmode3')"><span id="formmode3">Form</span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="switchkey('2');controlmodeselect('gamepad3')"><span id="gamepad3">Gamepad</span></a>
 469                             <form name="movestagemds" id="movestagemds" action="">
 470                                 <div class="form-group">
 471                                     move x
 472                                     <input type="number" name="movex" id="movex" value="0" onchange="canvasmds()">nm
 473                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current x:<span id="currentmdsx"></span>&nbsp;&nbsp;&nbsp;&nbsp;shift place &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="shiftplace()" value="Shift">
 474                                 </div>
 475                                 <div class="form-group">
 476                                     move y
 477                                     <input type="number" name="movey" id="movey" value="0" onchange="canvasmds()">nm
 478                                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current y:<span id="currentmdsy"></span><br><span id="api"></span><span id="stagemds"></span>
 479                                 </div>
 480                             </form>
 481                             <p>
 482                                 <label>Step2. Set Forcus</label>
 483                             </p>
 484                             <form name="moveza" id="movezmds" action="">
 485                                 <div class="form-group">
 486                                     move z(keep magnificance)
 487                                     &nbsp;&nbsp;
 488                                     <input type="number" name="movez" id="movez" value="0" onchange="canvasmds()">nm<br><br>
 489                                     change current(keep stage)
 490                                     &nbsp;&nbsp;
 491                                     <input type="number" name="current" id="current" onchange="objcontrol('obj',current.value);emcondition('request')">%&nbsp;&nbsp;Current lenz:<span id="objmds"></span>
 492                                 </div>
 493                             </form>
 494                             <p>
 495                                 <label>Step3. Take Photo</label>
 496                             </p>
 497                             replace&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="replace()" value="replace">
 498                             <form name="save" id="saveid">
 499                                 Save Photo
 500                                 &nbsp;&nbsp;
 501                                 File name：<input id="namephoto" placeholder="myphoto">.tif
 502                                 &nbsp;&nbsp;&nbsp;<button onclick="CanvasSave('canvasmds')" class="btn btn-default">Save</button><br>
 503                                 <a id="DL_link_canvas"></a>
 504                             </form>
 505                             <br>
 506                             <p>
 507                                 <label>Electron Microscopy Condition</label>&nbsp;&nbsp;&nbsp;&nbsp;
 508                                 <!--<input type="button" value="push" onClick="emcondition('request')"></input>--><br>
 509                                 <form name="save" id="saveid">
 510                                 File name：<input id="name" placeholder="mytext">.txt
 511                                 &nbsp;&nbsp;&nbsp;<button onclick="ConditionFileSave()" class="btn btn-default">Save</button>
 512                                 <a id='DL_link_condition'></a>
 513                             </form>
 514                             <div id="condition" style="width:340px; height:250; padding:10px; border:6px outset">
 515                                 TEM:<span id="tem3"></span>
 516                                 Position:<span id="Position3"></span>x=<span id="GonioX3"></span>,y=<span id="GonioY3"></span>,z=<span id="GonioZ3"></span>,a=<span id="GonioA3"></span><br>
 517                                 SpotSizeIndex:<span id="SpotSizeIndex3"></span>
 518                                 MagIndex:<span id="MagIndex3"></span>
 519                                 Obj:<span id="Obj3"></span>
 520                                 BeamTiltX:<span id="BeamTiltX3"></span>
 521                                 BeamTiltY:<span id="BeamTiltY3"></span>
 522                                 Speed:<span id="Speed3"></span>
 523                             </div>
 524                             </p>
 525                             <!--<p>
 526                                 <label>Save condition</label><br>
 527                               Todays:<span id="daysdata">a</span>
 528                             <form name="save" id="saveid">
 529                                 File name：<input id="name" placeholder="mytext">.txt
 530                                 &nbsp;&nbsp;&nbsp;<button onclick="ConditionFileSave()" class="btn btn-default">Save</button>
 531                                 <a id='DL_link_condition'></a>
 532                             </form>
 533                             </p>
 534                             -->
 535                         </div>
 536                     </div>
 537                 </div>
 538             </div>
 539         </div>
 540         <!-- SCRIPTS -->
 541         <script src="JS/jquery-1.7.2.min.js"></script>
 542         <script src="JS/bootstrap-3.1.1.min.js"></script>
 543         <script src="plugins/backstretch/backstretch-2.0.4.min.js"></script>
 544         <script src="plugins/camera-slider/camera-slider-1.3.4.min.js"></script>
 545         <script src="plugins/camera-slider/easing-1.3.min.js"></script>
 546         <script src="plugins/fancybox/fancybox-1.3.4.pack.js"></script>
 547         <script src="plugins/fancybox/klass-1.0.min.js"></script>
 548         <script src="plugins/fancybox/photoswipe-3.0.5.min.js"></script>
 549         <script src="plugins/hover-animations/transform2d.min.js"></script>
 550         <script src="plugins/hover-animations/hover-animations-1.0.min.js"></script>
 551         <script src="plugins/match-height/match-height-0.5.1.min.js"></script>
 552         <script src="plugins/validation/validation-2.2.min.js"></script>
 553         <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
 554         <script src="JS/lollies.min.js"></script>
 555         <script src="JS/custom.js"></script>
 556     </body>
 557 </html>