From: Jeremy Tan <jeremy@jx.tan.fake>
Date: Mon, 14 Oct 2013 07:42:04 +0000 (+0800)
Subject: fix some crap
X-Git-Url: https://git.ucc.asn.au/?a=commitdiff_plain;h=efd9baef20d693f70259634c565cffb3da7cc940;p=matches%2FMCTX3420.git

fix some crap
---

diff --git a/testing/MCTXWeb/public_html/graph.html b/testing/MCTXWeb/public_html/graph.html
index f139be5..137c004 100644
--- a/testing/MCTXWeb/public_html/graph.html
+++ b/testing/MCTXWeb/public_html/graph.html
@@ -102,43 +102,43 @@
           <div class="widget" id="graph-controls">
               <!--<div class="title">Visualise</div>-->
               <b>X-Axis</b>
-                <form id="xaxis" onChange=$("#graph").setGraph()>
-                  <input type="radio" name="xaxis" alt="time" id="time" checked="yes">time</input>
+                <form id="xaxis" class="change">
+                  <input type="radio" name="xaxis" alt="time" id="time" checked="checked">
+                  <label for="time">time</label>
                 </form>
                 <b>Y-Axis</b>
-                <form id="yaxis" onChange=$("#graph").setGraph()>  </form>
+                <form id="yaxis" class="change">  </form>
                 <!--b>Right Y-Axis</b>
-                <form id="y2axis" onChange=$("#graph").setGraph()> <input type="radio" name="y2axis" value="none" id="none" checked="yes">none</input></form>-->
+                <form id="y2axis" onChange=$("#graph").setGraph()> <input type="radio" name="y2axis" value="none" id="none" checked="yes">none</form>-->
 
                 <div> 
-                  <form id="time_range" onChange=$("#graph").setGraph()>
+                  <form id="time_range" class="change">
                     <p> 
-                        Time of Last Update <input type="text" value="" id="current_time" disabled></input>
-                        Start Time <input type="text" value="" id="start_time"></input> 
-                        End Time <input type="text" value="" id="end_time"></input>
+                        Time of Last Update <input type="text" value="" id="current_time" disabled>
+                        Start Time <input type="text" value="" id="start_time"> 
+                        End Time <input type="text" value="" id="end_time">
                     </p>
                 </form>
                 </div>
-                <input type="button" value="Run" id="graph-run" onClick=$("#graph-run").runButton()></input>
-                <input type="button" value="Open New Graph" disabled></input>
-                <input type="button" value="Save Graph Image" disabled></input>
-                <input type="button" value="Dump Raw Data" disabled></input>
+                <input type="button" value="Run" id="graph-run" onClick="$('#graph-run').runButton()">
+                <input type="button" value="Open New Graph" disabled>
+                <input type="button" value="Save Graph Image" disabled>
+                <input type="button" value="Dump Raw Data" disabled>
             </div>
         
         <!-- TODO: Put this on its own page? 
           <div class="widget">
               <div class="title">Controls</div>
               <form id="controls">
-                <p>Mode: <input type="radio" name="mode" value="normal">Normal</input>
-                      <input type="radio" name="mode" value="explode">EXPLODE!</input> </p>
-                Filename: <input type="text"> </input>
-                <input type="button" value="Stop" id="stopstart"></input>
-                <input type="button" value="Pause" id="runpause"></input>
-                <input type="button" value="Load"></input>
-               --> 
-                
+                <p>Mode: <input type="radio" name="mode" value="normal">Normal
+                      <input type="radio" name="mode" value="explode">EXPLODE! </p>
+                Filename: <input type="text"> 
+                <input type="button" value="Stop" id="stopstart">
+                <input type="button" value="Pause" id="runpause">
+                <input type="button" value="Load">
               </form>
           </div>
+          -->
         </div>
     </div>
       <!-- End main content -->
diff --git a/testing/MCTXWeb/public_html/static/mctx.graph.js b/testing/MCTXWeb/public_html/static/mctx.graph.js
index c20ec1d..687db84 100644
--- a/testing/MCTXWeb/public_html/static/mctx.graph.js
+++ b/testing/MCTXWeb/public_html/static/mctx.graph.js
@@ -14,6 +14,7 @@ mctx.actuators = {};
 mctx.graph.dependent = null;
 mctx.graph.independent = null;
 mctx.graph.timer = null;
+mctx.graph.running = false;
 
 /**
  * Helper - Calculate pairs of (dependent, independent) values
@@ -83,75 +84,41 @@ $.fn.setDevices = function() {
     mctx.sensors = $.extend(mctx.sensors, data.sensors);
     mctx.actuators = $.extend(mctx.actuators, data.actuators);
     
+    //Always set the 'time' option to be checked
+    $("#xaxis input").prop('checked', true);  
     $("#xaxis").deployDevices("radio", false, 'xaxis');
     $("#yaxis").deployDevices("checkbox", true, 'yaxis');
     $("#current_time").val(data.running_time);
+    //Add event listeners for when the inputs are changed
+    $(".change input").change(function () {
+      $("#graph").setGraph();
+    });
   });
 };
 
-
-/**
- * Sets the graphs to graph stuff.
- * @returns {$.fn}
- */
-$.fn.setGraph = function () {
-  clearTimeout(mctx.graph.timer);
+function graphUpdater() {
   var urls = {
     'sensors' : mctx.graph.api.sensors,
     'actuators' : mctx.graph.api.actuators
   }
-
-  var updateData = function(json, data) {
-    for (var i = 0; i < json.data.length; ++i)
-      data.push(json.data[i]);
-    return data;
-  };
-  var graphdiv = this;
-
-  // Determine which actuator/sensors to plot
- 
-  var xaxis = $("#xaxis input:checked");
-  var yaxis = $("#yaxis input:checked");
-  var start_time = $("#start_time").val();
-  var end_time = $("#end_time").val();
-  if (!$.isNumeric(start_time)) {
-    start_time = null;
-  }
-  if (!$.isNumeric(end_time)) {
-    end_time = null;
-  }
-
-  var devices = {};
-  var populateDict = function () {
-    var dict = {};
-    dict['urltype'] = $(this).attr("class");
-    dict['id'] = $(this).attr("value");
-    dict['data'] = [];
-    dict['start_time'] = start_time;
-    dict['end_time'] = end_time;
-    devices[$(this).attr("alt")] = dict;
-  };
-  xaxis.each(populateDict);
-  yaxis.each(populateDict);
   
-  /*
-  yaxis.each(function() {
-    
-    devices[$(this).attr("alt")] = {};
-    devices[$(this).attr("alt")]["url"] = mctx.api + $(this).attr("class");
-    devices[$(this).attr("alt")]["data"] = [];
-    devices[$(this).attr("alt")]["start_time"] = start_time;
-    devices[$(this).attr("alt")]["end_time"] = end_time;
-  });
-  */
-
   var updater = function () {
     var time_limit = 20;
     var responses = [];
     var ctime =  $("#current_time");
     
+    var xaxis = mctx.graph.xaxis;
+    var yaxis = mctx.graph.yaxis;
+    var start_time = mctx.graph.start_time;
+    var end_time = mctx.graph.end_time;
+    var devices = mctx.graph.devices;
+    
+    if (xaxis.size() < 1 || yaxis.size() < 1) {
+      mctx.graph.running = false;
+      return;
+    }
+    
     $.each(devices, function(key, val) {
-      console.log(val);
       if (val.urltype in urls) {
         var parameters = {id : val.id};
         if (start_time != null) {
@@ -175,7 +142,7 @@ $.fn.setGraph = function () {
       }
     });
 
-    //... When the response is received, then() will happen (I think?) yup
+    //... When the response is received, then() will happen (I think?)
     $.when.apply(this, responses).then(function () {
       var plot_data = [];
       yaxis.each(function() {
@@ -183,8 +150,7 @@ $.fn.setGraph = function () {
         if (xaxis.attr("alt") === "time") {
           //alert("Against time");
           plot_data.push(devices[$(this).attr("alt")].data);
-        }
-        else {
+        } else {
           var result = []
           dataMerge(devices[xaxis.attr("alt")].data, devices[$(this).attr("alt")].data, result);
           /*
@@ -198,14 +164,64 @@ $.fn.setGraph = function () {
         }
       });
       
-      //alert(plot_data + "");
-      //alert("Plot happened");
       $.plot("#graph", plot_data);
-      mctx.graph.timer = setTimeout(updater, 1000);
-    }, function () {alert("Graph crashed");});
+      if (mctx.graph.running) {
+        mctx.graph.timer = setTimeout(updater, 1000);
+      }
+    }, function () {mctx.graph.running=false; alert("Graph crashed");});
   };
   
+  mctx.graph.running = true;
   updater();
+  return this;
+}
+
+/**
+ * Sets the graphs to graph stuff.
+ * @returns {$.fn}
+ */
+$.fn.setGraph = function () {
+  // Determine which actuator/sensors to plot
+  var xaxis = $("#xaxis input[name=xaxis]:checked");
+  var yaxis = $("#yaxis input[name=yaxis]:checked");
+  if (xaxis.size() < 1 || yaxis.size() < 1) {
+    //nothing to plot...
+    return;
+  }
+  
+  var start_time = $("#start_time").val();
+  var end_time = $("#end_time").val();
+  if (!$.isNumeric(start_time)) {
+    start_time = null;
+  }
+  if (!$.isNumeric(end_time)) {
+    end_time = null;
+  }
+
+  var devices = {};
+  var populateDict = function () {
+    var dict = {};
+    dict['urltype'] = $(this).attr("class");
+    dict['id'] = $(this).attr("value");
+    dict['data'] = [];
+    dict['start_time'] = start_time;
+    dict['end_time'] = end_time;
+    devices[$(this).attr("alt")] = dict;
+  };
+  xaxis.each(populateDict);
+  yaxis.each(populateDict);
+  
+  mctx.graph.xaxis = xaxis;
+  mctx.graph.yaxis = yaxis;
+  mctx.graph.start_time = start_time;
+  mctx.graph.end_time = end_time;
+  mctx.graph.devices = devices;
+  
+  if (!mctx.graph.running) {
+    $("#graph-run").val("Pause");
+    graphUpdater();
+  }
+  
   return this;
 };
 
@@ -216,6 +232,7 @@ $.fn.runButton = function() {
     $(this).val("Pause");
   }
   else {
+    mctx.graph.running = false;
     clearTimeout(mctx.graph.timer);
     $(this).val("Run");
   }