web/gui.js

   1 /**
   2  * @file gui.js
   3  * @purpose GUI in JavaScript using jQuery and jQuery Flot libraries
   4  * NEEDS WORK !
   5  */
   6
   7 $(document).ready(function()
   8 {
   9
  10         g_sensors = []
  11         g_numSensors = 2
  12         g_storeTime = []
  13         g_key = null
  14
  15         $.fn.pruneSensorData = function(id)
  16         {
  17                 var sensor = g_sensors[id]
  18                 // remove unwanted values
  19                 if (g_storeTime[id] != null)
  20                 {
  21                         var last_time = sensor[sensor.length-1][0]
  22                         //console.log("Last time: " + String(last_time))
  23                         var back_index = 0;
  24                         for (back_index = sensor.length-1; back_index > 0; --back_index)
  25                         {
  26                                 if ((last_time - sensor[back_index][0]) > g_storeTime[id])
  27                                 {
  28                                         break;
  29                                 }
  30
  31                                 //console.log("Keep point " + String(sensor[back_index][0]) + "s ago")
  32
  33                         }
  34                         if (back_index > 0)
  35                         {
  36                                 //console.log("Delete " +String(back_index))
  37                                 sensor.splice(0, back_index)
  38                         }
  39                 }
  40         }
  41
  42
  43         // update function
  44         $.fn.updateSensor = function(json)
  45         {
  46                 //console.log(json.data)
  47                 var sensor = g_sensors[json.id]
  48                 var most_recent = null
  49                 if (sensor.length > 0)
  50                         most_recent = sensor[sensor.length-1][0]
  51
  52                 for (var i=0; i < json.data.length; ++i)
  53                 {
  54                         if (json.data[i][0] > most_recent || most_recent == null)
  55                         {
  56                                 sensor.push(json.data[i])
  57                                 most_recent = json.data[i][0]
  58                         }
  59                 }
  60
  61                 $(this).pruneSensorData(json.id)
  62
  63                 //console.log("Plot:")
  64                 //console.log(g_sensors[json.id])
  65                 $.plot("#sensor"+String(json.id)+"_plot", [g_sensors[json.id]])
  66                 $.ajax({url : "/api/sensors", data : {id : json.id}, success : function(data) {$(this).updateSensor(data);}});
  67
  68                 //
  69         }
  70
  71         $.fn.reloadSensor = function(id)
  72         {
  73                 g_storeTime[id] = Number($("#sensor"+String(id)+"_settings").find("#storeTime").val())
  74                 console.log(String($("#sensor"+String(id)+"_settings").find("#storeTime").val()))
  75
  76
  77
  78                 $(this).pruneSensorData(id)
  79                 $.plot("#sensor"+String(id)+"_plot", [g_sensors[id]])
  80         }
  81
  82         $.fn.setPressure = function()
  83         {
  84                 var value = Number($("#control0_value").val())
  85                 $.ajax({url : "/api/control", data : {action : "set", value : String(value), id : 0, key : g_key}, success : function(json) {alert(json.description)}})
  86         }
  87
  88         $.fn.LoadGUI = function()
  89         {
  90                 //TODO: Get rid of g_numSensors; query the server for sensors?
  91
  92                 $.ajax({url : "/api/control", data : {action : "start", force : "true"}, success : function(json) {g_key = String(json.key)}, async : false})
  93                 console.log("Key is " + g_key)
  94
  95                 // Load the plots
  96                 plotsHTML = ""
  97                 for (var i = 0; i < g_numSensors; ++i)
  98                 {
  99                         g_sensors.push([new Array()])
 100                         g_storeTime.push(600)
 101                         //plotsHTML += "<div id=sensor"+String(i)+"\n"
 102                         plotsHTML += "<h2 id=sensor"+String(i)+"_name>Sensor: "+String(i)+"</h2>\n"
 103                         plotsHTML += "<div id=sensor"+String(i)+"_plot class=\"plot\" onclick=\"window.open('/api/sensors?id="+String(i)+"&dump')\"> </div>\n"
 104                         plotsHTML += "<div id=sensor"+String(i)+"_settings\n"
 105                         plotsHTML += "<p> Plot since <input type=text id=storeTime value=\""+String(g_storeTime[i])+"\"/> seconds ago\n"
 106                         plotsHTML += "<button id=update onclick=$(document).reloadSensor("+String(i)+")>Update</button></p>\n"
 107                         plotsHTML += "<button id=dump onclick=\"window.open('/api/sensors?id="+String(i)+"&dump')\">Dump All Data\n"
 108                         plotsHTML += "</div>\n" // end settings
 109                         //plotsHTML += "</div>\n" //
 110
 111                 }
 112                 $("#plots").html(plotsHTML)
 113
 114                 controlHTML = "<h2 id=control0>Controls</h2>\n"
 115                 controlHTML += "<p> Pressure: <input type=text id=control0_value value=\"100\"/>"
 116                 controlHTML += "<button id=actuator0 onclick=\"$(document).setPressure()\">SET</button> </p>"
 117
 118                 $("#controls").html(controlHTML)
 119
 120         }
 121
 122
 123
 124         $(this).LoadGUI()
 125
 126
 127
 128         for (var i = 0; i < g_numSensors; ++i)
 129         {
 130         //      $.ajax({url : "/api/sensors", data : {id : i}, success : function(data) {$(this).updateSensor(data);}})
 131
 132         }
 133 });
 134