X-Git-Url: https://git.ucc.asn.au/?a=blobdiff_plain;f=testing%2FMCTXWeb%2Fpublic_html%2Fcontrol.html;h=5d22e90d05da7b0df598a5d71339694d4992e14c;hb=7e9d726ccd53626251e56b92c8eec47772bfe0f9;hp=71ee4458ca32488fe408c9b6b07fd9ec75f19061;hpb=63d1cc182f50d67679e27826534834784ca6f94d;p=matches%2FMCTX3420.git

diff --git a/testing/MCTXWeb/public_html/control.html b/testing/MCTXWeb/public_html/control.html
index 71ee445..5d22e90 100644
--- a/testing/MCTXWeb/public_html/control.html
+++ b/testing/MCTXWeb/public_html/control.html
@@ -9,118 +9,274 @@
     <script type="text/javascript" src="static/jquery-1.10.1.min.js"></script>
     <script type="text/javascript" src="static/jquery.flot.min.js"></script>
     <script type="text/javascript" src="static/mctx.gui.js"></script>
+    <script type="text/javascript" src="static/mctx.control.js"></script>
     
     <link rel="stylesheet" type="text/css" href="static/style.css">
     <link rel="stylesheet" type="text/css" href="static/nav-menu.css">
     <script type="text/javascript">
       runBeforeLoad().done(function () {
         $(document).ready(function () {
-         //Show the content!
-         $("#content").css("display", "block");
-         //Set the welcome bar
-         var name = " " + (mctx.friendlyName ? mctx.friendlyName : "");
-         $("#welcome-container").text("Welcome"+ name + "!");
-         $("#logout-container").css("display", "block");
-         //$("#menu-container").populateNavbar();
-
-         $("#logout").click(function () {
-           $("#logout").logout();
-         });
-
-         $("#main_controls").submit(function () {
-           //Validate!
-           return false;
-         });
-
-         $("#errorlog").setErrorLog();
+          $("form").submit(function () { //Prevent form submit globally
+            return false;
+          });
+          
+          //Set the status updated
+          $("#state-exp").setStatusUpdater();
+          
+          //Set the logic for the start controls
+          $("#start-controls input[type='button']").click(function () {
+            var start = $("#start-controls input[type='button']");
+            var force = $("#start-controls input[name='start_force']");
+            
+            $(this).startExperiment(start, $("#experiment_name").val(), 
+                      force.is(":checked"), $("#start-result"));
+            force.prop("checked", false);
+          });
+          
+          //Set the logic for the stop button
+          $("#experiment-stop").click(function () {
+            $(this).stopExperiment($("#stop-status"));
+          });
+          
+          //Set the logic for the pressure controls
+          $("#pressure-controls").submit(function () {
+            var pressure = {
+              set : $("#pressure-set").val(),
+              step : $("#pressure-stepsize").val(),
+              wait : $("#pressure-stepwait").val(),
+              count : $("#pressure-stepcount").val()
+            };   
+            $(this).setPressure(pressure, $("#pressure-result"));
+          });
+          
+          $("#pressure-controls input[name='clear']").click(function () {
+            $("#pressure-set")[0].reset();
+          });
+          
+          $("#pressure-controls input[name='zero']").click(function () {
+            $("#pressure-controls input[name='clear']").click();
+            $("#pressure-set").val("0");
+            
+            $("#pressure-controls").submit();
+          });
+          
+          $("#pressure-controls input[name='step-it']").click(function () {
+            var pressure = {
+              set : $("#pressure-set").val(), step : "", wait : "", count : ""
+            };
+            
+            $(this).setPressure(pressure, $("#pressure-result")).done(function () {
+              var next = Number($("#pressure-set").val()) + Number($("#pressure-stepsize").val());
+              $("#pressure-set").val(next.toString());
+            });
+            
+          });
+          $("#samplerate-controls").submit(function () {
+            setSampleRate($("#sensor-select option:selected").val(), 
+                          $("#sensor-set").val(), $("#samplerate-result"));
+          });
        });       
-      })
-
+      }).fail(function () {
+        $(document).ready(function () {
+         $("#state-exp").text("Connection failure").parent().addClass("fail");
+       });  
+      });
     </script>
   </head>
   
   <body>
-    <div id="header">
-      <div id="leftnav">
-        <a href="http://www.uwa.edu.au/" target="_blank">
-          <img alt = "The University of Western Australia"
-          src="static/uwacrest-text.png">
-        </a>
-        <span id="title">Exploding Cans</span>
-      </div>
-      <div id="rightnav">
-        <span id="welcome-container">
-        </span>
-        <span id="date">
-          <script type="text/javascript">getDate();</script>
-        </span>
-        <div id="logout-container">
-          <form action="#">
-            <div>
-              <input type="button" id="logout" value="Logout">
-            </div>
-          </form>
+    <div id="header-wrap">
+      <div id="header">
+        <div id="leftnav">
+          <a href="http://www.uwa.edu.au/" target="_blank">
+            <img alt = "The University of Western Australia"
+            src="static/uwacrest-text.png">
+          </a>
+          <span id="title">Exploding Cans</span>
+        </div>
+        <div id="rightnav">
+          <span id="welcome-container">
+          </span>
+          <span id="date">
+            <script type="text/javascript">getDate();</script>
+          </span>
+          <div id="logout-container">
+            <form action="#">
+              <div>
+                <input type="button" id="logout" value="Logout">
+              </div>
+            </form>
+          </div>
         </div>
+        <div class="clear"></div>
       </div>
-      <div class="clear"></div>
     </div>
     <!-- End header -->
     
-    <noscript>
-      <div class="widget centre">
-        <div class="title">JavaScript required</div>
-        This website requires JavaScript to function correctly.
-        Please enable JavaScript to use this site.
-      </div>
-    </noscript>
-    
-    <div id="content">
-      <div id="sidebar">
-        <div class="widget">
-          <div class="title">Navigation menu</div>
-                  
+    <div id="content-wrap">
+      <noscript>
+        <div class="widget centre">
+          <div class="title">JavaScript required</div>
+          This website requires JavaScript to function correctly.
+          Please enable JavaScript to use this site.
         </div>
-        <div class="widget">
-          <div class="title">Help</div>
-          
+      </noscript>
+
+      <div id="content">
+        <div class="widget" id="sidebar-show">&gt;</div>
+        <div id="sidebar">
+          <div class="widget">
+            <div id="sidebar-hide">&lt;</div>
+            <div class="title">Navigation menu</div>
+            <div id="sidebar-menu" class="nav-menu">
+              <ul>
+                <li><a href="index.html"><span>Home</span></a></li>
+                <li><a href="control.html"><span>Experiment control</span></a></li>
+                <li><a href="graph.html"><span>Experiment graphs</span></a></li>
+                <li><a href="data.html"><span>Experiment data</span></a></li>
+                <li><a href="pintest.html"><span>Pin debugging</span></a></li>
+                <li class="last"><a href="help.html"><span>Help</span></a></li>
+              </ul>
+            </div>
+          </div>
         </div>
-      </div>
-      <!-- End sidebar -->
+        <!-- End sidebar -->
 
-      <div id="main">
-        <div class="widget">
-          <div class="title">Controls</div>
-          <b>Main controls</b>
-          <form id="main_controls" action="">
-            <table>
-              <tr>
-                <td>Experiment name</td>
-                <td><input name="experiment_name" type="text"></td>
-              </tr>
-              <tr>
-                <td>Experiment mode</td>
-                <td>
-                  <input name="experiment_type" value="strain" type="radio"> Strain it
-                  <input name="experiment_type" value="explode" type="radio"> Explode it
-                </td>
-              </tr>
-              <tr>
-                <td>
-                </td>
-                <td align="right">
-                  <input type="submit" value="Start">
-                  <input type="submit" value="Pause">
-                  <input type="submit" value="Stop">
+        <div id="main">
+          <div class="widget">
+            <div class="title">Experiment Overview</div>
+            <table class="horizontal medium">
+              <tr id="state-exp-r">
+                <th>Experiment state</th>
+                <td id="state-exp"></td>
+                <td style="text-align: right;">
+                  <input id="experiment-stop" type="button" value="Stop">
                 </td>
               </tr>
             </table>
-          </form>
-          <b>Error and warning messages</b><br>
-          <textarea id="errorlog" wrap="off" rows="4" cols="30" readonly></textarea>
+            <div id="stop-status">
+              &nbsp;
+            </div>
+            
+            <div class="sub-title">Error and warning messages</div>
+            <textarea id="errorlog" wrap="off" rows="4" cols="30" readonly>
+            </textarea>
+          </div>
+          
+          <div id="start-widget" class="widget">
+            <div class="title centre">Start an experiment</div>
+            <form id="start-controls" class="nice" action="#">
+              <p>
+                <label for="experiment_name">Experiment name</label>
+                <input id="experiment_name" type="text">
+                
+                <label for="start_force">Overwrite existing</label>
+                <input type="checkbox" name="start_force" id="start_force">
+              </p>
+              <p id="start-result">
+                &nbsp;
+              </p>
+              <p class="centre">
+                
+                <input type="button" name="start_explode" value="Explode test">
+                <input type="button" name="start_strain" value="Strain test">                
+              </p>
+            </form>
+          </div>
+          
+          <div id="pressure-widget" class="widget">            
+            <form id="pressure-controls" action="#" class="nice clear">
+              <table>
+                <tr>
+                  <td><label for="pressure-set">Starting pressure (kPa)</label></td>
+                  <td><label for="pressure-stepsize">Pressure step size (kPa)</label></td>
+                </tr>
+                <tr>
+                  <td><input id="pressure-set" type="text"></td>
+                  <td><input id="pressure-stepsize" type="text"></td>
+                </tr>
+                <tr>
+                  <td><label for="pressure-stepcount">Number of steps to make</label></td>
+                  <td><label for="pressure-stepwait">Wait time between steps (s)</label></td>
+                </tr>
+                <tr>
+                  <td><input id="pressure-stepcount" type="text"></td>
+                  <td><input id="pressure-stepwait" type="text"></td>
+                </tr>
+              </table>
+              <p class="left" id="pressure-result">
+                &nbsp;
+              </p>
+              <p class="right">
+                <input type="button" name="clear" value="Clear input">
+                <input type="button" name="zero" value="Zero the pressure">
+                <input type="button" name="step-it" value="Step the pressure">
+                <input type="submit" value="Set pressure">
+              </p>
+            </form>
+            
+            <form id="samplerate-controls" action="#" class="nice clear">
+              <table>
+                <tr>
+                  <td><label for="sensor-select">Select a sensor</label></td>
+                  <td><label for="sensor-set">Set sampling rate (s)</label></td>
+                </tr>
+                <tr>
+                  <td><select id="sensor-select" style="width:100%;"></select></td>
+                  <td><input id="sensor-set" type="text"></td>
+                </tr>
+              </table>
+              <p class="left" id="samplerate-result">
+                &nbsp;
+              </p>
+              <p class="right">
+                <input type="submit" value="Set sampling rate">
+              </p>
+            </form>
+          </div>
+          
+          <div id="stats-widget" class="widget">
+            <form id="stats" action="#" class="nice clear">
+              <table>
+                <tr>
+                  <td><label for="stats-mainspressure">Mains pressure (kPa)</label></td>
+                  <td><label for="stats-canpressure">Can pressure (kPa)</label></td>
+                </tr>
+                <tr>
+                  <td><input id="stats-mainspressure" type="text" readonly></td>
+                  <td><input id="stats-canpressure" type="text" readonly></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><label for="stats-strain1">Central hoop strain</label></td>
+                  <td><label for="stats-strain2">Central longitudinal strain</label></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><input id="stats-strain1" type="text" readonly></td>
+                  <td><input id="stats-strain2" type="text" readonly></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><label for="stats-strain3">End hoop strain</label></td>
+                  <td><label for="stats-strain4">End longitudinal strain</label></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><input id="stats-strain3" type="text" readonly></td>
+                  <td><input id="stats-strain4" type="text" readonly></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><label for="stats-dilatometer">Dilatometer reading</label></td>
+                  <td><label for="stats-dilatometer">Camera feed</label></td>
+                </tr>
+                <tr class="stats-strain">
+                  <td><input id="stats-dilatometer" type="text" readonly></td>
+                  <td><a href="#">Link</a></td>
+                </tr>
+              </table>
+            </form>
+          </div>
+          
         </div>
+        <!-- End main content -->
       </div>
-      <!-- End main content -->
-      
     </div>
   </body>
 </html>