Add graphs. Currently eats 100% of my cpu...

diff --git a/testing/MCTXWeb/public_html/index.html b/testing/MCTXWeb/public_html/index.html
index dd9ebe2..b735b78 100644 (file)
--- a/testing/MCTXWeb/public_html/index.html
+++ b/testing/MCTXWeb/public_html/index.html
@@ -14,6 +14,7 @@
     <script type="text/javascript">
       $(document).ready(function () {
         $("#menu-container").populateNavbar();
+        $("#cam1").setCamera();
       });
     </script>
   </head>
@@ -30,13 +31,12 @@
       </div>
       <div class="clear"></div>
     </div>
+    <!-- End header -->
     
     <div id="content">
       <div id="sidebar">
         <div class="widget">
-          <div class="title">
-           Status
-          </div>
+          <div class="title">Status</div>
           <div class="item">
             <table class="status centre">
               <tr><th>Module</th> <th>State</th></tr>
@@ -47,9 +47,11 @@
         </div>
         
         <div class="widget">
-          <div class="title">
-            Login
-          </div>
+          <div class="title">Pressure controls</div>
+        </div>
+        
+        <div class="widget">
+          <div class="title">Login</div>
           <div class="item">
             <form action="#">
               <table class="centre">
@@ -60,8 +62,8 @@
             </form>
           </div>
         </div>
-
       </div>
+      <!-- End sidebar -->
 
       <div id="main">
         <div class="widget">
@@ -70,31 +72,22 @@
         </div>
         
         <div class="widget">
-          <div class="title">Sensors</div>
-          
-        </div>
-        
-        <div class="widget">
-          <div class="title">Actuators</div>
-          <form action="#">
-            <table class="status">
-              <tr><th>Module</th><th>Control</th><th>State</th></tr>
-              <tr> <td>Solenoid 1</td> 
-                   <td><input type="button" value="Turn on"></td>
-                   <td><div class="circle"></div></td>
-              </tr>
-            </table>
-          </form> 
+          <div class="title">Strain gauges</div>
+          <div id="strain-graphs" class="graph">
+            <!-- Strain graph placeholder -->
+            <script type="text/javascript">
+              $("#strain-graphs").setStrainGraphs();
+            </script>
+          </div>
         </div>
         
         <div class="widget">
           <div class="title">Camera Dilatometer</div>
           <img src="#" alt="Camera 1" id="cam1" class="centre">
-          <script type="text/javascript">
-            //$("#cam1").setCamera();
-          </script>
         </div>
       </div>
+      <!-- End main content -->
+      
     </div>
   </body>
 </html>

diff --git a/testing/MCTXWeb/public_html/static/mctx.gui.js b/testing/MCTXWeb/public_html/static/mctx.gui.js
index 478e9ad..e7dd167 100644 (file)
--- a/testing/MCTXWeb/public_html/static/mctx.gui.js
+++ b/testing/MCTXWeb/public_html/static/mctx.gui.js
@@ -3,8 +3,7 @@
  */
 
 mctx = {};
-//mctx.api = location.protocol + "/" +  location.host + "/api/";
-mctx.api = "http://mctx.us.to:8080/api/";
+mctx.api = location.protocol + "//" +  location.host + "/api/";
 mctx.expected_api_version = 0;
 mctx.sensors = {
   0 : {name : "Strain gauge 1"},
@@ -22,6 +21,10 @@ mctx.actuators = {
   3 : {name : "Pressure regulator"}
 };
 
+mctx.strain_gauges = {};
+mctx.strain_gauges.ids = [0, 1, 2, 3];
+mctx.strain_gauges.time_limit = 20;
+
 function getDate(){
        document.write((new Date()).toDateString());
 }
@@ -62,9 +65,10 @@ $.fn.populateNavbar = function () {
  * @returns {$.fn}
  */
 $.fn.setCamera = function () {
-  var loc = mctx.api + "image";
+  var url = mctx.api + "image";
   var update = true;
 
+  //Stop updating if we can't retrieve an image!
   this.error(function() {
     update = false;
   });
@@ -78,11 +82,39 @@ $.fn.setCamera = function () {
       return;
     }
     
-    parent.attr("src", loc + "#" + (new Date()).getTime());
+    parent.attr("src", url + "#" + (new Date()).getTime());
     
     setTimeout(updater, 500);
   };
   
+  updater();
+  return this;
+};
+
+$.fn.setStrainGraphs = function () {
+  var sensor_url = mctx.api + "sensors";
+  var graphdiv = this;
+  
+  var updater = function () {
+    var time_limit = mctx.strain_gauges.time_limit;
+    var responses = new Array(mctx.strain_gauges.ids.length);
+    
+    for (var i = 0; i < mctx.strain_gauges.ids.length; i++) {
+      var parameters = {id : i, start_time: -time_limit};
+      responses[i] = $.ajax({url : sensor_url, data : parameters});
+    }
+    
+    $.when.apply(this, responses).then(function () {
+      var data = new Array(arguments.length);
+      for (var i = 0; i < arguments.length; i++) {
+        var raw_data = arguments[i][0].data;
+        data[i] = raw_data;
+      }
+      $.plot(graphdiv, data);
+      setTimeout(updater, 500);
+    }, function () {alert("boo");});
+  };
+  
   updater();
   return this;
 };
\ No newline at end of file

diff --git a/testing/MCTXWeb/public_html/static/style.css b/testing/MCTXWeb/public_html/static/style.css
index 6cba6c9..c632935 100644 (file)
--- a/testing/MCTXWeb/public_html/static/style.css
+++ b/testing/MCTXWeb/public_html/static/style.css
@@ -125,6 +125,11 @@ input[type="text"], input[type="password"] {
   margin-bottom: 0.5em;
 }
 
+.graph {
+  width: 100%;
+  height: 200px;
+}
+
 .widget {
   background-color: #ffffff;
   margin: 0.25em 0.25em 1.5em;