get_coo.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/get_coordinate.css">
   7         <title>WITs-coordinate</title>
   8 </head>
   9 <body onLoad="main()">
  10         <header>
  11                 <a href="./index.html">Go to WITs-home</a>
  12                 <h2>Get coordinate</h2>
  13         </header>
  14         <main>
  15
  16                 <div class="container">
  17                         <div class="row">
  18                                 <div class="col-md-6" id="coordinate_canvas_block">
  19                                         <h2>Display</h2>
  20                                         <div id="current_coordinate">
  21                                                 [Mouse over in canvas]
  22                                         </div>
  23                                         <form name="image_form" onSubmit="return false;">
  24                                                 <!--Microscope magnification ×<input type="number" name="magnification_microscope" value="1"><br>-->
  25                                                 length of pixel <input type="number" name="pixel_length" placeholder="is none" step="0.001">
  26                                                 <select id="order1">
  27                                                 <option value="3">mm</option>
  28                                                 <option value="6">μm</option>
  29                                                 <option value="9">nm</option>
  30                                                 <option value="10">Å</option>
  31                                         </select>
  32                                         </form>
  33                                         <canvas id="coordinate_canvas"></canvas>
  34                                         <div id="manipulation_area">
  35                                                 <h2>Manipulate Display</h2>
  36                                                 <form name="form1" onSubmit="return false;">
  37                                                         <input type="file" name="image" accept="image/*" onChange="loadFile(this.files)">
  38                                                         <p>
  39                                                         Scaling × <input type="number" name="magnification" value="1.00" min="1.00" step="0.01" style="width: 50px;" onChange="scaling()"><br>
  40                                                         Move x <input type="number" name="movex" value="0" onChange="moving()"><br>
  41                                                         Move y <input type="number" name="movey" value="0" onChange="moving()"><br>
  42                                                         <input type="button" name="reset" value="Reset manipulation" onClick="reseting()"><br>
  43                                                 </p>
  44                                         </form>
  45                                 </div>
  46                                 </div>
  47                                 <div class="col-md-6">
  48                                         <div id="table_area">
  49                                         <h2>Coordinate list</h2>
  50                                         <form name="list_form" onSubmit="return false;">
  51                                                 <font>-CSV format Upload-</font>
  52                                                 <input type="file" value="Upload" onChange="upload_csv(this.files)">
  53                                                         <br>
  54                                                         <font>-STAR format Upload-</font>
  55                                                 <input type="file" value="Upload" onChange="upload_star(this.files)">
  56                                                 <br>
  57                                                 <font>unit [</font>
  58                                                 <select id="order2">
  59                                                         <option value="3">mm</option>
  60                                                         <option value="6">μm</option>
  61                                                         <option value="9">nm</option>
  62                                                         <option value="10">Å</option>
  63                                                 </select>
  64                                                 <font>]</font>
  65                                                 <input type="button" value="All clear" onClick="all_clear()">
  66                                         </form>
  67                                         <div id="table">
  68                                                 <table id="coordinate_table">
  69                                                         <thead id="coordinate_table_thead">
  70                                                                 <tr>
  71                                                                         <th id="number">No.</th>
  72                                                                         <th id="coordinate_x">x</th>
  73                                                                         <th id="coordinate_y">y</th>
  74                                                                         <th id="coordinate_z">z</th>
  75                                                                         <th id="button">button</th>
  76                                                                 </tr>
  77                                                         </thead>
  78                                                         <tbody id="coordinate_table_tbody">
  79                                                         </tbody>
  80                                                 </table>
  81                                         </div>
  82                                         <form name="download_form" onSubmit="return false;">
  83                                                 <font>-CSV format Download-</font><br>
  84                                                 <input type="text" id="filename" placeholder="filename" >.txt&nbsp;
  85                                                 <input type="button" value="Download" onClick="download()">
  86                                                         <a id="download_link"></a><br>
  87                                                         <font>-STAR format Download-</font><br>
  88                                                 <input type="text" id="filename_star" placeholder="filename" >.txt&nbsp;
  89                                                 <input type="button" value="Download" onClick="download_star()">
  90                                                 <a id="download_link_star"></a>
  91                                             </form>
  92                                     </div>
  93                         </div>
  94                 </div>
  95         </div>
  96         </main>
  97         <footer>
  98                 <p></p>
  99         </footer>
 100         <!--script-->
 101         <script type="text/javascript" src="JS/coordinate.js"></script>
 102 </body>
 103 </html>