1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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)-->
9 <title>MCTX3420 Web Interface</title>
10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12 <script language="javascript" type="text/javascript" src="static/excanvas.min.js"></script>
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>
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() {
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";
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";
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++) {
40 elem.href = folder + "/" + newlink;
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');
57 <div id="header-wrap">
60 <a href="http://www.uwa.edu.au/" target="_blank">
61 <img alt = "The University of Western Australia"
62 src="static/uwacrest-text.png">
64 <span id="title">Exploding Cans</span>
67 <span id="welcome-container">
70 <script type="text/javascript">getDate();</script>
72 <div id="logout-container">
75 <input type="button" id="logout" value="Logout">
80 <div class="clear"></div>
85 <div id="content-wrap">
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.
95 <div class="widget" id="sidebar-show">></div>
98 <div id="sidebar-hide"><</div>
99 <div class="title">Navigation menu</div>
100 <div id="sidebar-menu" class="nav-menu">
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="data.html"><span>Experiment data</span></a></li>
106 <li><a href="pintest.html"><span>Pin debugging</span></a></li>
107 <li class="last"><a href="help.html"><span>Help</span></a></li>
116 <div class="title">Experiment Data</div>
117 <b>Current Experiment</b>
120 <!--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-->
121 <td>View Sensor Data</td>
123 <td><a href="current/strain1">Strain 1</a></td>
124 <td><a href="current/strain2">Strain 2</a></td>
125 <td><a href="current/strain3">Strain 3</a></td>
126 <td><a href="current/strain4">Strain 4</a></td>
127 <td><a href="current/pressure1">Pressure 1</a></td>
128 <td><a href="current/pressure2">Pressure 2</a></td>
131 <!--uses the download attribute to force downloads, only compatible with some browsers. Other users will just have to right-click and Save File As-->
132 <td>Save Sensor Data</td>
133 <td><a href="current/all.zip" download><input type="button" value="Download All"></a></td>
134 <td><a href="current/strain1" download><input type="button" value="Strain 1"></a></td>
135 <td><a href="current/strain2" download><input type="button" value="Strain 2"></a></td>
136 <td><a href="current/strain3" download><input type="button" value="Strain 3"></a></td>
137 <td><a href="current/strain4" download><input type="button" value="Strain 4"></a></td>
138 <td><a href="current/pressure1" download><input type="button" value="Pressure 1"></a></td>
139 <td><a href="current/pressure1" download><input type="button" value="Pressure 1"></a></td>
142 <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
144 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
145 <td><a href="nowhere">View Data</a></td>
149 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
150 <td><a href="nowhere">View Data</a></td>
157 <select onChange="graphLoad('g1', 'current', this.value)">
158 <!--link this to graphs functionality, currently just loads a placeholder image-->
159 <!--graphs could just plot the data over entire time range of the experiment-->
160 <option value="nograph">Choose to view</option>
161 <option value="graph1">Strain 1</option>
162 <option value="graph2">Strain 2</option>
163 <option value="graph3">Strain 3</option>
164 <option value="graph4">Strain 4</option>
165 <option value="graph5">Pressure 1</option>
166 <option value="graph6">Pressure 2</option>
173 <img src="current/nograph.png" id="g1">
174 <p><b>Previous Experiments</b></p>
177 <td>Select Experiment</td>
179 <!--Upon selecting experiment, modify all the download links-->
180 <!--TODO: prevent downloads of data if no experiment is selected-->
181 <select id="expselect" onChange="expLoadTotal(this.value)">
182 <option value="current">Current</option>
183 <option value="exp1">Experiment 1</option>
184 <option value="exp2">Experiment 2</option>
185 <option value="exp3">Experiment 3</option>
186 <option value="exp4">Experiment 4</option>
187 <option value="exp5">Experiment 5</option>
192 <td>Experiment Date</td>
193 <!--Lookup the experiment date here for identification purposes-->
194 <td><b>DATE LOOKUP</b></td>
197 <td>View Sensor Data</td>
199 <td><a href="current/strain1" class="s1">Strain 1</a></td>
200 <td><a href="current/strain2" class="s2">Strain 2</a></td>
201 <td><a href="current/strain3" class="s3">Strain 3</a></td>
202 <td><a href="current/strain4" class="s4">Strain 4</a></td>
203 <td><a href="current/pressure1" class="p1">Pressure 1</a></td>
204 <td><a href="current/pressure2" class="p2">Pressure 2</a></td>
207 <td>Save Sensor Data</td>
208 <td><a href="current/all.zip" download class="d"><input type="button" value="Download All"></a></td>
209 <td><a href="current/strain1" download class="s1"><input type="button" value="Strain 1"></a></td>
210 <td><a href="current/strain2" download class="s2"><input type="button" value="Strain 2"></a></td>
211 <td><a href="current/strain3" download class="s3"><input type="button" value="Strain 3"></a></td>
212 <td><a href="current/strain4" download class="s4"><input type="button" value="Strain 4"></a></td>
213 <td><a href="current/pressure1" download class="p1"><input type="button" value="Pressure 1"></a></td>
214 <td><a href="current/pressure2" download class="p2"><input type="button" value="Pressure 1"></a></td>
217 <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
219 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
220 <td><a href="nowhere">View Data</a></td>
224 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
225 <td><a href="nowhere">View Data</a></td>
231 <select onChange="graphLoad2('g2', this.value)">
232 <!--link this to graphs functionality, currently just loads a placeholder image-->
233 <!--graphs could just plot the data over entire time range of the experiment-->
234 <option value="nograph">Choose to view</option>
235 <option value="graph1">Strain 1</option>
236 <option value="graph2">Strain 2</option>
237 <option value="graph3">Strain 3</option>
238 <option value="graph4">Strain 4</option>
239 <option value="graph5">Pressure 1</option>
240 <option value="graph6">Pressure 2</option>
246 <img src="current/nograph.png" id="g2">
249 <!-- End main content -->