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     <noscript>
 104       <div class="widget centre">
 105         <div class="title">JavaScript required</div>
 106         This website requires JavaScript to function correctly.
 107         Please enable JavaScript to use this site.
 108       </div>
 109     </noscript>
 110
 111     <div id="content">
 112       <div id="sidebar">
 113         <div class="widget">
 114           <div class="title">Navigation menu</div>
 115           <div class="nav-menu">
 116           <ul>
 117              <li><a href="index.html"><span>Home</span></a></li>
 118              <li><a href="control.html"><span>Experiment control</span></a></li>
 119              <li><a href="pintest.html"><span>Pin debugging</span></a></li>
 120              <li class="last"><a href="#"><span>Help</span></a></li>
 121           </ul>
 122           </div>
 123         </div>
 124         <div class="widget">
 125           <div class="title">Help</div>
 126
 127         </div>
 128       </div>
 129       <!-- End sidebar -->
 130
 131       <div id="main">
 132         <div class="widget">
 133           <div class="title">Experiment Data</div>
 134           <b>Current Experiment</b>
 135             <table>
 136               <tr>
 137                                 <!--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-->
 138                 <td>View Sensor Data</td>
 139                                 <td></td>
 140                 <td><a href="current/strain1">Strain 1</a></td>
 141                                 <td><a href="current/strain2">Strain 2</a></td>
 142                                 <td><a href="current/strain3">Strain 3</a></td>
 143                                 <td><a href="current/strain4">Strain 4</a></td>
 144                                 <td><a href="current/pressure1">Pressure 1</a></td>
 145                                 <td><a href="current/pressure2">Pressure 2</a></td>
 146               </tr>
 147                           <tr>
 148                                 <!--uses the download attribute to force downloads, only compatible with some browsers. Other users will just have to right-click and Save File As-->
 149                 <td>Save Sensor Data</td>
 150                                 <td><a href="current/all.zip" download><input type="button" value="Download All"></a></td>
 151                 <td><a href="current/strain1" download><input type="button" value="Strain 1"></a></td>
 152                 <td><a href="current/strain2" download><input type="button" value="Strain 2"></a></td>
 153                 <td><a href="current/strain3" download><input type="button" value="Strain 3"></a></td>
 154                                 <td><a href="current/strain4" download><input type="button" value="Strain 4"></a></td>
 155                                 <td><a href="current/pressure1" download><input type="button" value="Pressure 1"></a></td>
 156                                 <td><a href="current/pressure1" download><input type="button" value="Pressure 1"></a></td>
 157               </tr>
 158                           <tr>
 159                             <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
 160                             <td>Dilatometer</td>
 161                                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 162                                 <td><a href="nowhere">View Data</a></td>
 163                           </tr>
 164                           <tr>
 165                             <td>Camera Data</td>
 166                                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 167                                 <td><a href="nowhere">View Data</a></td>
 168                       </tr>
 169               <tr>
 170                             <form>
 171                 <td>Graphs</td>
 172                 <td>
 173                                         <select onChange="graphLoad('g1','current',this.value)">
 174                                         <!--link this to graphs functionality, currently just loads a placeholder image-->
 175                                         <!--graphs could just plot the data over entire time range of the experiment-->
 176                                         <option value="nograph">Choose to view</option>
 177                                         <option value="graph1">Strain 1</option>
 178                                         <option value="graph2">Strain 2</option>
 179                                         <option value="graph3">Strain 3</option>
 180                                         <option value="graph4">Strain 4</option>
 181                                         <option value="graph5">Pressure 1</option>
 182                                         <option value="graph6">Pressure 2</option>
 183                                         </select>
 184                 </td>
 185                                 </form>
 186               </tr>
 187             </table>
 188                         <img src="current/nograph.png" id="g1">
 189                   <p><b>Previous Experiments</b></p>
 190             <table>
 191                           <tr>
 192                             <td>Select Experiment</td>
 193                                 <td>
 194                                 <!--Upon selecting experiment, modify all the download links-->
 195                                 <!--TODO: prevent downloads of data if no experiment is selected-->
 196                                   <select id="expselect" onChange="expLoadTotal(this.value)">
 197                                         <option value="current">Current</option>
 198                                         <option value="exp1">Experiment 1</option>
 199                                         <option value="exp2">Experiment 2</option>
 200                                         <option value="exp3">Experiment 3</option>
 201                                         <option value="exp4">Experiment 4</option>
 202                                         <option value="exp5">Experiment 5</option>
 203                                   </select>
 204                                 </td>
 205                           </tr>
 206                           <tr>
 207                             <td>Experiment Date</td>
 208                                 <!--Lookup the experiment date here for identification purposes-->
 209                                 <td><b>DATE LOOKUP</b></td>
 210                           </tr>
 211               <tr>
 212                 <td>View Sensor Data</td>
 213                                 <td></td>
 214                 <td><a href="current/strain1" class="s1">Strain 1</a></td>
 215                                 <td><a href="current/strain2" class="s2">Strain 2</a></td>
 216                                 <td><a href="current/strain3" class="s3">Strain 3</a></td>
 217                                 <td><a href="current/strain4" class="s4">Strain 4</a></td>
 218                                 <td><a href="current/pressure1" class="p1">Pressure 1</a></td>
 219                                 <td><a href="current/pressure2" class="p2">Pressure 2</a></td>
 220               </tr>
 221                           <tr>
 222                 <td>Save Sensor Data</td>
 223                                 <td><a href="current/all.zip" download class="d"><input type="button" value="Download All"></a></td>
 224                 <td><a href="current/strain1" download class="s1"><input type="button" value="Strain 1"></a></td>
 225                 <td><a href="current/strain2" download class="s2"><input type="button" value="Strain 2"></a></td>
 226                 <td><a href="current/strain3" download class="s3"><input type="button" value="Strain 3"></a></td>
 227                                 <td><a href="current/strain4" download class="s4"><input type="button" value="Strain 4"></a></td>
 228                                 <td><a href="current/pressure1" download class="p1"><input type="button" value="Pressure 1"></a></td>
 229                                 <td><a href="current/pressure2" download class="p2"><input type="button" value="Pressure 1"></a></td>
 230               </tr>
 231                           <tr>
 232                             <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
 233                             <td>Dilatometer</td>
 234                                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 235                                 <td><a href="nowhere">View Data</a></td>
 236                           </tr>
 237                           <tr>
 238                             <td>Camera Data</td>
 239                                 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
 240                                 <td><a href="nowhere">View Data</a></td>
 241                       </tr>
 242                             <form>
 243                 <td>Graphs</td>
 244                 <td>
 245                                         <select onChange="graphLoad2('g2',this.value)">
 246                                         <!--link this to graphs functionality, currently just loads a placeholder image-->
 247                                         <!--graphs could just plot the data over entire time range of the experiment-->
 248                                         <option value="nograph">Choose to view</option>
 249                                         <option value="graph1">Strain 1</option>
 250                                         <option value="graph2">Strain 2</option>
 251                                         <option value="graph3">Strain 3</option>
 252                                         <option value="graph4">Strain 4</option>
 253                                         <option value="graph5">Pressure 1</option>
 254                                         <option value="graph6">Pressure 2</option>
 255                                         </select>
 256                 </td>
 257                                 </form>
 258                           </tr>
 259             </table>
 260                         <img src="current/nograph.png" id="g2">
 261         </div>
 262       </div>
 263       <!-- End main content -->
 264
 265     </div>
 266   </body>
 267 </html>