testing/MCTXWeb/public_html/data.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2
   3 <!--Current Experiment section is pretty much working, still working out the previous experiments bit-->
   4 <!--Basically, the download links and graph links automatically update depending on what is selected in the drop-down menus-->
   5 <!--Some dodgy javascript is involved but it sort of works-->
   6 <!--The HTML5 "download" attribute is used to force downloads, but that's not compatible with IE (it just views the files in IE)-->
   7 <html>
   8   <head>
   9     <title>MCTX3420 Web Interface</title>
  10     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11     <!--[if lte IE 8]>
  12       <script language="javascript" type="text/javascript" src="static/excanvas.min.js"></script>
  13     <![endif]-->
  14     <script type="text/javascript" src="static/jquery-1.10.1.min.js"></script>
  15     <script type="text/javascript" src="static/jquery.flot.min.js"></script>
  16     <script type="text/javascript" src="static/mctx.gui.js"></script>
  17
  18     <link rel="stylesheet" type="text/css" href="static/style.css">
  19     <link rel="stylesheet" type="text/css" href="static/nav-menu.css">
  20     <script type="text/javascript">
  21       runBeforeLoad().done(function() {
  22         $(document).ready(function() {
  23         });
  24       })
  25
  26       //function to load appropriate graph image depending on drop-down menu
  27       function graphLoad(graphid, folder, newgraph) {
  28         document.getElementById(graphid).src = folder + "/" + newgraph + ".png";
  29       }
  30       //function to load appropriate graph image depending on drop-down menu
  31       function graphLoad2(graphid, newgraph) {
  32         var exp = document.getElementById("expselect").value;
  33         document.getElementById(graphid).src = exp + "/" + newgraph + ".png";
  34       }
  35       //function to create appropriate experiment links depending on drop-down menu
  36       function expLoad(expclass, folder, newlink) {
  37         var elems = document.getElementsByClassName(expclass);
  38         for (i = 0; i < elems.length; i++) {
  39           var elem = elems[i];
  40           elem.href = folder + "/" + newlink;
  41         }
  42       }
  43       //function to update experiment links links depending on drop-down menu
  44       function expLoadTotal(folder) {
  45         expLoad('s1', folder, 'strain1');
  46         expLoad('s2', folder, 'strain2');
  47         expLoad('s3', folder, 'strain3');
  48         expLoad('s4', folder, 'strain4');
  49         expLoad('p1', folder, 'pressure1');
  50         expLoad('p2', folder, 'pressure2');
  51         expLoad('d', folder, 'all.zip');
  52       }
  53     </script>
  54   </head>
  55
  56   <body>
  57     <div id="header-wrap">
  58       <div id="header">
  59         <div id="leftnav">
  60           <a href="http://www.uwa.edu.au/" target="_blank">
  61             <img alt = "The University of Western Australia"
  62                  src="static/uwacrest-text.png">
  63           </a>
  64           <span id="title">Exploding Cans</span>
  65         </div>
  66         <div id="rightnav">
  67           <span id="welcome-container">
  68           </span>
  69           <span id="date">
  70             <script type="text/javascript">getDate();</script>
  71           </span>
  72           <div id="logout-container">
  73             <form action="#">
  74               <div>
  75                 <input type="button" id="logout" value="Logout">
  76               </div>
  77             </form>
  78           </div>
  79         </div>
  80         <div class="clear"></div>
  81       </div>
  82     </div>
  83     <!-- End header -->
  84
  85     <div id="content-wrap">
  86       <noscript>
  87         <div class="widget centre">
  88           <div class="title">JavaScript required</div>
  89           This website requires JavaScript to function correctly.
  90           Please enable JavaScript to use this site.
  91         </div>
  92       </noscript>
  93
  94       <div id="content">
  95         <div class="widget" id="sidebar-show">&gt;</div>
  96         <div id="sidebar">
  97           <div class="widget">
  98             <div id="sidebar-hide">&lt;</div>
  99             <div class="title">Navigation menu</div>
 100             <div id="sidebar-menu" class="nav-menu">
 101               <ul>
 102                 <li><a href="index.html"><span>Home</span></a></li>
 103                 <li><a href="control.html"><span>Experiment control</span></a></li>
 104                 <li><a href="graph.html"><span>Experiment graphs</span></a></li>
 105                 <li><a href="values.html"><span>Experiment data (live)</span></a></li>
 106                 <li><a href="data.html"><span>Experiment data</span></a></li>
 107                 <li><a href="pintest.html"><span>Pin debugging</span></a></li>
 108                 <li class="last"><a href="help.html"><span>Help</span></a></li>
 109               </ul>
 110             </div>
 111           </div>
 112         </div>
 113         <!-- End sidebar -->
 114
 115         <div id="main">
 116           <div class="widget">
 117             <div class="title">Experiment Data</div>
 118             <b>Current Experiment</b>
 119             <table>
 120               <tr>
 121                 <!--I have no idea how we'll end up storing all the experiment data on the Beaglebone so these currently just link to a bunch of dummy files-->
 122                 <td>View Sensor Data</td>
 123                 <td></td>
 124                 <td><a href="current/strain1">Strain 1</a></td>
 125                 <td><a href="current/strain2">Strain 2</a></td>
 126                 <td><a href="current/strain3">Strain 3</a></td>
 127                 <td><a href="current/strain4">Strain 4</a></td>
 128                 <td><a href="current/pressure1">Pressure 1</a></td>
 129                 <td><a href="current/pressure2">Pressure 2</a></td>
 130               </tr>
 131               <tr>
 132                 <!--uses the download attribute to force downloads, only compatible with some browsers. Other users will just have to right-click and Save File As-->
 133                 <td>Save Sensor Data</td>
 134                 <td><a href="current/all.zip" download><input type="button" value="Download All"></a></td>
 135                 <td><a href="current/strain1" download><input type="button" value="Strain 1"></a></td>
 136                 <td><a href="current/strain2" download><input type="button" value="Strain 2"></a></td>
 137                 <td><a href="current/strain3" download><input type="button" value="Strain 3"></a></td>
 138                 <td><a href="current/strain4" download><input type="button" value="Strain 4"></a></td>
 139                 <td><a href="current/pressure1" download><input type="button" value="Pressure 1"></a></td>
 140                 <td><a href="current/pressure1" download><input type="button" value="Pressure 1"></a></td>
 141               </tr>
 142               <tr>
 143                 <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
 144                 <td>Dilatometer</td>
 145                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 146                 <td><a href="nowhere">View Data</a></td>
 147               </tr>
 148               <tr>
 149                 <td>Camera Data</td>
 150                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 151                 <td><a href="nowhere">View Data</a></td>
 152               </tr>
 153               <tr>
 154
 155                 <td>Graphs</td>
 156                 <td>
 157                   <form>
 158                     <select onChange="graphLoad('g1', 'current', this.value)">
 159                       <!--link this to graphs functionality, currently just loads a placeholder image-->
 160                       <!--graphs could just plot the data over entire time range of the experiment-->
 161                       <option value="nograph">Choose to view</option>
 162                       <option value="graph1">Strain 1</option>
 163                       <option value="graph2">Strain 2</option>
 164                       <option value="graph3">Strain 3</option>
 165                       <option value="graph4">Strain 4</option>
 166                       <option value="graph5">Pressure 1</option>
 167                       <option value="graph6">Pressure 2</option>
 168                     </select>
 169                   </form>
 170
 171                 </td>
 172               </tr>
 173             </table>
 174             <img src="current/nograph.png" id="g1">
 175             <p><b>Previous Experiments</b></p>
 176             <table>
 177               <tr>
 178                 <td>Select Experiment</td>
 179                 <td>
 180                   <!--Upon selecting experiment, modify all the download links-->
 181                   <!--TODO: prevent downloads of data if no experiment is selected-->
 182                   <select id="expselect" onChange="expLoadTotal(this.value)">
 183                     <option value="current">Current</option>
 184                     <option value="exp1">Experiment 1</option>
 185                     <option value="exp2">Experiment 2</option>
 186                     <option value="exp3">Experiment 3</option>
 187                     <option value="exp4">Experiment 4</option>
 188                     <option value="exp5">Experiment 5</option>
 189                   </select>
 190                 </td>
 191               </tr>
 192               <tr>
 193                 <td>Experiment Date</td>
 194                 <!--Lookup the experiment date here for identification purposes-->
 195                 <td><b>DATE LOOKUP</b></td>
 196               </tr>
 197               <tr>
 198                 <td>View Sensor Data</td>
 199                 <td></td>
 200                 <td><a href="current/strain1" class="s1">Strain 1</a></td>
 201                 <td><a href="current/strain2" class="s2">Strain 2</a></td>
 202                 <td><a href="current/strain3" class="s3">Strain 3</a></td>
 203                 <td><a href="current/strain4" class="s4">Strain 4</a></td>
 204                 <td><a href="current/pressure1" class="p1">Pressure 1</a></td>
 205                 <td><a href="current/pressure2" class="p2">Pressure 2</a></td>
 206               </tr>
 207               <tr>
 208                 <td>Save Sensor Data</td>
 209                 <td><a href="current/all.zip" download class="d"><input type="button" value="Download All"></a></td>
 210                 <td><a href="current/strain1" download class="s1"><input type="button" value="Strain 1"></a></td>
 211                 <td><a href="current/strain2" download class="s2"><input type="button" value="Strain 2"></a></td>
 212                 <td><a href="current/strain3" download class="s3"><input type="button" value="Strain 3"></a></td>
 213                 <td><a href="current/strain4" download class="s4"><input type="button" value="Strain 4"></a></td>
 214                 <td><a href="current/pressure1" download class="p1"><input type="button" value="Pressure 1"></a></td>
 215                 <td><a href="current/pressure2" download class="p2"><input type="button" value="Pressure 1"></a></td>
 216               </tr>
 217               <tr>
 218                 <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
 219                 <td>Dilatometer</td>
 220                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 221                 <td><a href="nowhere">View Data</a></td>
 222               </tr>
 223               <tr>
 224                 <td>Camera Data</td>
 225                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 226                 <td><a href="nowhere">View Data</a></td>
 227               </tr>
 228               <tr>
 229                 <td>Graphs</td>
 230                 <td>
 231                   <form>
 232                     <select onChange="graphLoad2('g2', this.value)">
 233                       <!--link this to graphs functionality, currently just loads a placeholder image-->
 234                       <!--graphs could just plot the data over entire time range of the experiment-->
 235                       <option value="nograph">Choose to view</option>
 236                       <option value="graph1">Strain 1</option>
 237                       <option value="graph2">Strain 2</option>
 238                       <option value="graph3">Strain 3</option>
 239                       <option value="graph4">Strain 4</option>
 240                       <option value="graph5">Pressure 1</option>
 241                       <option value="graph6">Pressure 2</option>
 242                     </select>
 243                   </form>
 244                 </td>
 245               </tr>
 246             </table>
 247             <img src="current/nograph.png" id="g2">
 248           </div>
 249         </div>
 250         <!-- End main content -->
 251       </div>
 252     </div>
 253   </body>
 254 </html>