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 () {
24 $("#content").css("display", "block");
26 var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
27 $("#welcome-container").text("Welcome"+ name + "!");
28 $("#logout-container").css("display", "block");
29 //$("#menu-container").populateNavbar();
31 $("#logout").click(function () {
32 $("#logout").logout();
35 $("#main_controls").submit(function () {
40 $("#errorlog").setErrorLog();
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";
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";
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++){
58 elem.href = folder+"/"+newlink;
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');
75 <div id="header-wrap">
78 <a href="http://www.uwa.edu.au/" target="_blank">
79 <img alt = "The University of Western Australia"
80 src="static/uwacrest-text.png">
82 <span id="title">Exploding Cans</span>
85 <span id="welcome-container">
88 <script type="text/javascript">getDate();</script>
90 <div id="logout-container">
93 <input type="button" id="logout" value="Logout">
98 <div class="clear"></div>
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.
114 <div class="title">Navigation menu</div>
115 <div class="nav-menu">
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>
125 <div class="title">Help</div>
133 <div class="title">Experiment Data</div>
134 <b>Current Experiment</b>
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>
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>
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>
159 <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
161 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
162 <td><a href="nowhere">View Data</a></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>
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>
188 <img src="current/nograph.png" id="g1">
189 <p><b>Previous Experiments</b></p>
192 <td>Select Experiment</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>
207 <td>Experiment Date</td>
208 <!--Lookup the experiment date here for identification purposes-->
209 <td><b>DATE LOOKUP</b></td>
212 <td>View Sensor Data</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>
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>
232 <!--not sure about how exactly we'll be linking to dilatometer or camera data yet-->
234 <td><a href="nowhere" download="nowhere"><input type="button" value="Download Data"></a></td>
235 <td><a href="nowhere">View Data</a></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>
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>
260 <img src="current/nograph.png" id="g2">
263 <!-- End main content -->