testing/MCTXWeb/public_html/data-Justin.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           //Show the content!
  24           $("#content").css("display", "block");
  25           //Set the welcome bar
  26           var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
  27           $("#welcome-container").text("Welcome" + name + "!");
  28           $("#logout-container").css("display", "block");
  29           //$("#menu-container").populateNavbar();
  30
  31           $("#logout").click(function() {
  32             $("#logout").logout();
  33           });
  34
  35           $("#main_controls").submit(function() {
  36             //Validate!
  37             return false;
  38           });
  39
  40           $("#errorlog").setErrorLog();
  41         });
  42       })
  43
  44       //function to load appropriate graph image depending on drop-down menu
  45       function graphLoad(graphid, folder, newgraph) {
  46         document.getElementById(graphid).src = folder + "/" + newgraph + ".png";
  47       }
  48       //function to load appropriate graph image depending on drop-down menu
  49       function graphLoad2(graphid, newgraph) {
  50         var exp = document.getElementById("expselect").value;
  51         document.getElementById(graphid).src = exp + "/" + newgraph + ".png";
  52       }
  53       //function to create appropriate experiment links depending on drop-down menu
  54       function expLoad(expclass, folder, newlink) {
  55         var elems = document.getElementsByClassName(expclass);
  56         for (i = 0; i < elems.length; i++) {
  57           var elem = elems[i];
  58           elem.href = folder + "/" + newlink;
  59         }
  60       }
  61       //function to update experiment links links depending on drop-down menu
  62       function expLoadTotal(folder) {
  63         expLoad('s1', folder, 'strain1');
  64         expLoad('s2', folder, 'strain2');
  65         expLoad('s3', folder, 'strain3');
  66         expLoad('s4', folder, 'strain4');
  67         expLoad('p1', folder, 'pressure1');
  68         expLoad('p2', folder, 'pressure2');
  69         expLoad('d', folder, 'all.zip');
  70       }
  71     </script>
  72   </head>
  73
  74   <body>
  75     <div id="header-wrap">
  76       <div id="header">
  77         <div id="leftnav">
  78           <a href="http://www.uwa.edu.au/" target="_blank">
  79             <img alt = "The University of Western Australia"
  80                  src="static/uwacrest-text.png">
  81           </a>
  82           <span id="title">Exploding Cans</span>
  83         </div>
  84         <div id="rightnav">
  85           <span id="welcome-container">
  86           </span>
  87           <span id="date">
  88             <script type="text/javascript">getDate();</script>
  89           </span>
  90           <div id="logout-container">
  91             <form action="#">
  92               <div>
  93                 <input type="button" id="logout" value="Logout">
  94               </div>
  95             </form>
  96           </div>
  97         </div>
  98         <div class="clear"></div>
  99       </div>
 100     </div>
 101     <!-- End header -->
 102
 103     <div id="content-wrap">
 104       <noscript>
 105         <div class="widget centre">
 106           <div class="title">JavaScript required</div>
 107           This website requires JavaScript to function correctly.
 108           Please enable JavaScript to use this site.
 109         </div>
 110       </noscript>
 111
 112       <div id="content">
 113         <div id="sidebar">
 114           <div class="widget">
 115             <div class="title">Navigation menu</div>
 116             <div class="nav-menu">
 117               <ul>
 118                 <li><a href="index.html"><span>Home</span></a></li>
 119                 <li><a href="control.html"><span>Experiment control</span></a></li>
 120                 <li><a href="pintest.html"><span>Pin debugging</span></a></li>
 121                 <li class="last"><a href="#"><span>Help</span></a></li>
 122               </ul>
 123             </div>
 124           </div>
 125           <div class="widget">
 126             <div class="title">Help</div>
 127
 128           </div>
 129         </div>
 130         <!-- End sidebar -->
 131
 132         <div id="main">
 133           <div class="widget">
 134             <div class="title">Experiment Data</div>
 135             <b>Current Experiment</b>
 136             <table>
 137               <tr>
 138                 <!--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-->
 139                 <td>View Sensor Data</td>
 140                 <td></td>
 141                 <td><a href="current/strain1">Strain 1</a></td>
 142                 <td><a href="current/strain2">Strain 2</a></td>
 143                 <td><a href="current/strain3">Strain 3</a></td>
 144                 <td><a href="current/strain4">Strain 4</a></td>
 145                 <td><a href="current/pressure1">Pressure 1</a></td>
 146                 <td><a href="current/pressure2">Pressure 2</a></td>
 147               </tr>
 148               <tr>
 149                 <!--uses the download attribute to force downloads, only compatible with some browsers. Other users will just have to right-click and Save File As-->
 150                 <td>Save Sensor Data</td>
 151                 <td><a href="current/all.zip" download><input type="button" value="Download All"></a></td>
 152                 <td><a href="current/strain1" download><input type="button" value="Strain 1"></a></td>
 153                 <td><a href="current/strain2" download><input type="button" value="Strain 2"></a></td>
 154                 <td><a href="current/strain3" download><input type="button" value="Strain 3"></a></td>
 155                 <td><a href="current/strain4" download><input type="button" value="Strain 4"></a></td>
 156                 <td><a href="current/pressure1" download><input type="button" value="Pressure 1"></a></td>
 157                 <td><a href="current/pressure1" download><input type="button" value="Pressure 1"></a></td>
 158               </tr>
 159               <tr>
 160                 <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
 161                 <td>Dilatometer</td>
 162                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 163                 <td><a href="nowhere">View Data</a></td>
 164               </tr>
 165               <tr>
 166                 <td>Camera Data</td>
 167                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 168                 <td><a href="nowhere">View Data</a></td>
 169               </tr>
 170               <tr>
 171
 172                 <td>Graphs</td>
 173                 <td>
 174                   <form>
 175                     <select onChange="graphLoad('g1', 'current', this.value)">
 176                       <!--link this to graphs functionality, currently just loads a placeholder image-->
 177                       <!--graphs could just plot the data over entire time range of the experiment-->
 178                       <option value="nograph">Choose to view</option>
 179                       <option value="graph1">Strain 1</option>
 180                       <option value="graph2">Strain 2</option>
 181                       <option value="graph3">Strain 3</option>
 182                       <option value="graph4">Strain 4</option>
 183                       <option value="graph5">Pressure 1</option>
 184                       <option value="graph6">Pressure 2</option>
 185                     </select>
 186                   </form>
 187
 188                 </td>
 189               </tr>
 190             </table>
 191             <img src="current/nograph.png" id="g1">
 192             <p><b>Previous Experiments</b></p>
 193             <table>
 194               <tr>
 195                 <td>Select Experiment</td>
 196                 <td>
 197                   <!--Upon selecting experiment, modify all the download links-->
 198                   <!--TODO: prevent downloads of data if no experiment is selected-->
 199                   <select id="expselect" onChange="expLoadTotal(this.value)">
 200                     <option value="current">Current</option>
 201                     <option value="exp1">Experiment 1</option>
 202                     <option value="exp2">Experiment 2</option>
 203                     <option value="exp3">Experiment 3</option>
 204                     <option value="exp4">Experiment 4</option>
 205                     <option value="exp5">Experiment 5</option>
 206                   </select>
 207                 </td>
 208               </tr>
 209               <tr>
 210                 <td>Experiment Date</td>
 211                 <!--Lookup the experiment date here for identification purposes-->
 212                 <td><b>DATE LOOKUP</b></td>
 213               </tr>
 214               <tr>
 215                 <td>View Sensor Data</td>
 216                 <td></td>
 217                 <td><a href="current/strain1" class="s1">Strain 1</a></td>
 218                 <td><a href="current/strain2" class="s2">Strain 2</a></td>
 219                 <td><a href="current/strain3" class="s3">Strain 3</a></td>
 220                 <td><a href="current/strain4" class="s4">Strain 4</a></td>
 221                 <td><a href="current/pressure1" class="p1">Pressure 1</a></td>
 222                 <td><a href="current/pressure2" class="p2">Pressure 2</a></td>
 223               </tr>
 224               <tr>
 225                 <td>Save Sensor Data</td>
 226                 <td><a href="current/all.zip" download class="d"><input type="button" value="Download All"></a></td>
 227                 <td><a href="current/strain1" download class="s1"><input type="button" value="Strain 1"></a></td>
 228                 <td><a href="current/strain2" download class="s2"><input type="button" value="Strain 2"></a></td>
 229                 <td><a href="current/strain3" download class="s3"><input type="button" value="Strain 3"></a></td>
 230                 <td><a href="current/strain4" download class="s4"><input type="button" value="Strain 4"></a></td>
 231                 <td><a href="current/pressure1" download class="p1"><input type="button" value="Pressure 1"></a></td>
 232                 <td><a href="current/pressure2" download class="p2"><input type="button" value="Pressure 1"></a></td>
 233               </tr>
 234               <tr>
 235                 <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
 236                 <td>Dilatometer</td>
 237                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 238                 <td><a href="nowhere">View Data</a></td>
 239               </tr>
 240               <tr>
 241                 <td>Camera Data</td>
 242                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 243                 <td><a href="nowhere">View Data</a></td>
 244               </tr>
 245               <tr>
 246                 <td>Graphs</td>
 247                 <td>
 248                   <form>
 249                     <select onChange="graphLoad2('g2', this.value)">
 250                       <!--link this to graphs functionality, currently just loads a placeholder image-->
 251                       <!--graphs could just plot the data over entire time range of the experiment-->
 252                       <option value="nograph">Choose to view</option>
 253                       <option value="graph1">Strain 1</option>
 254                       <option value="graph2">Strain 2</option>
 255                       <option value="graph3">Strain 3</option>
 256                       <option value="graph4">Strain 4</option>
 257                       <option value="graph5">Pressure 1</option>
 258                       <option value="graph6">Pressure 2</option>
 259                     </select>
 260                   </form>
 261                 </td>
 262               </tr>
 263             </table>
 264             <img src="current/nograph.png" id="g2">
 265           </div>
 266         </div>
 267         <!-- End main content -->
 268       </div>
 269     </div>
 270   </body>
 271 </html>