getc.html

   1 <!DOCTYPE html>
   2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4     <meta charset="utf-8">
   5     <title>WITs</title>
   6     <link rel="stylesheet" href="CSS/bootstrap-grid.css">
   7     <link rel="stylesheet" href="CSS/get_c.css">
   8 </head>
   9 <body onload="main()" style="text-align: center;">
  10     <div class="container">
  11         <div class="row">
  12             <div class="col-md-7">
  13                 <h3>canvas1</h3>
  14                 <div style="text-align: left">
  15                     <form id="canvas1_unit" onSubmit="return false;">
  16                         pixel length
  17                         <input type="number" name="pixel_length" placeholder="is none" step="0.001">
  18                         <select name="order">
  19                             <option value="3">mm</option>
  20                             <option value="6">μm</option>
  21                             <option value="9">nm</option>
  22                             <option value="10">Å</option>
  23                         </select>
  24                     </form>
  25                 </div>
  26                 <div id="current_coordinate_on_canvas1" style="text-align:right">
  27                     [Mouse over in canvas]
  28                 </div>
  29                 <canvas id="canvas1" style="background-color:black;"></canvas>
  30                 <p style="text-align:right;">
  31                     Import :
  32                     <input type="file" onChange='loadFile(this.files,"canvas1")'>
  33                 </p>
  34             </div>
  35             <div class="col-md-5">
  36                 <h3>table1</h3>
  37                 <div style="text-align:left">
  38                     <form id="table1_unit" onSubmit="return false;">
  39                         <font>table unit [</font>
  40                         <select name="order">
  41                             <option value="3">mm</option>
  42                             <option value="6">μm</option>
  43                             <option value="9">nm</option>
  44                             <option value="10">Å</option>
  45                         </select>
  46                         <font>]</font>
  47                         <input type="button" value="clear" onClick="clearTable_canvas1()">
  48                         <input type="button" value="delete" onClick="deleteTable_canvas1()">
  49                     </form>
  50                     <form id="table1_mort" onSubmit="return false;">
  51                         <font>Choose marker or target</font>
  52                         <select name="m_or_t">
  53                             <option value="marker">marker</option>
  54                             <option value="target">target</option>
  55                         </select>
  56                     </form>
  57                 </div>
  58                 <div class=row>
  59                 <div class="col-md-6">
  60                     <table id="canvas1_marker" class="coordinate_canvas1">
  61                         <thead class=coordinate_thead>
  62                             <tr>
  63                                 <th>marker</th>
  64                             </tr>
  65                         </thead>
  66                         <tbody id="canvas1_marker_tbody" class=coordinate_tbody>
  67                         </tbody>
  68                     </table>
  69                 </div>
  70                 <div class="col-md-6">
  71                     <table id="canvas1_target" class="coordinate_canvas1">
  72                         <thead class=coordinate_thead>
  73                             <tr>
  74                                 <th>target</th>
  75                             </tr>
  76                         </thead>
  77                         <tbody id="canvas1_target_tbody" class=coordinate_tbody>
  78                         </tbody>
  79                     </table>
  80                 </div>
  81                 </div>
  82             </div>
  83         </div>
  84         <hr>
  85         <div class="row">
  86             <div class="col-md-7">
  87                 <h3>canvas2</h3>
  88                 <div style="text-align: left">
  89                     <form id="canvas2_unit" onSubmit="return false;">
  90                         pixel length
  91                         <input type="number" name="pixel_length" placeholder="is none" step="0.001">
  92                         <select name="order">
  93                             <option value="3">mm</option>
  94                             <option value="6">μm</option>
  95                             <option value="9">nm</option>
  96                             <option value="10">Å</option>
  97                         </select>
  98                     </form>
  99
 100                 </div>
 101                 <div id="current_coordinate_on_canvas2" style="text-align:right">
 102                     [Mouse over in canvas]
 103                 </div>
 104                 <canvas id="canvas2" style="background-color:black;"></canvas>
 105                 <p style="text-align:right;">
 106                     Import :
 107                     <input type="file" onChange='loadFile(this.files,"canvas2")'>
 108                 </p>
 109             </div>
 110             <div class="col-md-5">
 111                 <h3>table2</h3>
 112                 <div style="text-align:left">
 113                     <form id="table2_unit" onSubmit="return false;">
 114                         <font>table unit [</font>
 115                         <select name="order">
 116                             <option value="3">mm</option>
 117                             <option value="6">μm</option>
 118                             <option value="9">nm</option>
 119                             <option value="10">Å</option>
 120                         </select>
 121                         <font>]</font>
 122                         <input type="button" value="clear" onClick="clearTable_canvas2()">
 123                         <input type="button" value="delete" onClick="deleteTable_canvas2()">
 124                     </form>
 125                     <form id="table2_mort" onSubmit="return false;">
 126                         <font>Choose marker or target</font>
 127                         <select name="m_or_t">
 128                             <option value="marker">marker</option>
 129                             <option value="marker_ast">marker*</option>
 130                             <option value="target_ast">target*</option>
 131                         </select>
 132                     </form>
 133                 </div>
 134                 <div class=row>
 135                     <div class=col-md-4>
 136                         <table id="canvas2_marker" class="coordinate_canvas2">
 137                             <thead class=coordinate_thead>
 138                                 <th>marker</th>
 139                             </thead>
 140                             <tbody id="canvas2_marker_tbody" class=coordinate_tbody>
 141                             </tbody>
 142                         </table>
 143                     </div>
 144                     <div class=col-md-4>
 145                         <table id="canvas2_marker_ast" class="coordinate_canvas2">
 146                             <thead class=coordinate_thead>
 147                                 <th>marker*</th>
 148                             </thead>
 149                         <tbody id="canvas2_marker_ast_tbody" class=coordinate_tbody>
 150                         </tbody>
 151                         </table>
 152                     </div>
 153                     <div class=col-md-4>
 154                         <table id="canvas2_target_ast" class="coordinate_canvas2 ">
 155                             <thead id="canvas2_target_ast_tbody" class=coordinate_thead>
 156                                 <th>target*</th>
 157                             </thead>
 158                             <tbody class=coordinate_tbody>
 159                             </tbody>
 160                         </table>
 161                     </div>
 162                 </div>
 163             </div>
 164         </div>
 165     </div>
 166     <script type="text/javascript" src="JS/getc.js"></script>
 167 </body>
 168 </html>