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