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
  14         $.fn.pruneSensorData = function(id)
  15         {
  16                 var sensor = g_sensors[id]
  17                 // remove unwanted values
  18                 if (g_storeTime[id] != null)
  19                 {
  20                         var last_time = sensor[sensor.length-1][0]
  21                         //console.log("Last time: " + String(last_time))
  22                         var back_index = 0;
  23                         for (back_index = sensor.length-1; back_index > 0; --back_index)
  24                         {
  25                                 if ((last_time - sensor[back_index][0]) > g_storeTime[id])
  26                                 {
  27                                         break;
  28                                 }
  29
  30                                 //console.log("Keep point " + String(sensor[back_index][0]) + "s ago")
  31
  32                         }
  33                         if (back_index > 0)
  34                         {
  35                                 //console.log("Delete " +String(back_index))
  36                                 sensor.splice(0, back_index)
  37                         }
  38                 }
  39         }
  40
  41
  42         // update function
  43         $.fn.updateSensor = function(json)
  44         {
  45                 //console.log(json.data)
  46                 var sensor = g_sensors[json.id]
  47                 var most_recent = null
  48                 if (sensor.length > 0)
  49                         most_recent = sensor[sensor.length-1][0]
  50
  51                 for (var i=0; i < json.data.length; ++i)
  52                 {
  53                         if (json.data[i][0] > most_recent || most_recent == null)
  54                         {
  55                                 sensor.push(json.data[i])
  56                                 most_recent = json.data[i][0]
  57                         }
  58                 }
  59
  60                 $(this).pruneSensorData(json.id)
  61
  62                 //console.log("Plot:")
  63                 //console.log(g_sensors[json.id])
  64                 $.plot("#sensor"+String(json.id)+"_plot", [g_sensors[json.id]])
  65                 $.ajax({url : "/api/sensors", data : {id : json.id}, success : function(data) {$(this).updateSensor(data);}});
  66
  67                 //
  68         }
  69
  70         $.fn.reloadSensor = function(id)
  71         {
  72                 g_storeTime[id] = Number($("#sensor"+String(id)+"_settings").find("#storeTime").val())
  73                 console.log(String($("#sensor"+String(id)+"_settings").find("#storeTime").val()))
  74
  75
  76
  77                 $(this).pruneSensorData(id)
  78                 $.plot("#sensor"+String(id)+"_plot", [g_sensors[id]])
  79         }
  80
  81         $.fn.LoadGUI = function()
  82         {
  83                 //TODO: Get rid of g_numSensors; query the server for sensors?
  84
  85                 // Load the plots
  86                 plotsHTML = ""
  87                 for (var i = 0; i < g_numSensors; ++i)
  88                 {
  89                         g_sensors.push([new Array()])
  90                         g_storeTime.push(600)
  91                         //plotsHTML += "<div id=sensor"+String(i)+"\n"
  92                         plotsHTML += "<h2 id=sensor"+String(i)+"_name>Sensor: "+String(i)+"</h2>\n"
  93                         plotsHTML += "<div id=sensor"+String(i)+"_plot class=\"plot\" onclick=\"window.open('/api/sensors?id="+String(i)+"&dump')\"> </div>\n"
  94                         plotsHTML += "<div id=sensor"+String(i)+"_settings\n"
  95                         plotsHTML += "<p> Plot since <input type=text id=storeTime value=\""+String(g_storeTime[i])+"\"/> seconds ago\n"
  96                         plotsHTML += "<button id=update onclick=$(document).reloadSensor("+String(i)+")>Update</button></p>\n"
  97                         plotsHTML += "<button id=dump onclick=\"window.open('/api/sensors?id="+String(i)+"&dump')\">Dump All Data\n"
  98                         plotsHTML += "</div>\n" // end settings
  99                         //plotsHTML += "</div>\n" //
 100
 101                 }
 102                 $("#plots").html(plotsHTML)
 103
 104         }
 105
 106
 107
 108         $(this).LoadGUI()
 109
 110
 111
 112         for (var i = 0; i < g_numSensors; ++i)
 113         {
 114                 $.ajax({url : "/api/sensors", data : {id : i}, success : function(data) {$(this).updateSensor(data);}})
 115
 116         }
 117 });
 118