#10 Graph points working

- timestap still not great

data/js/controls.js

@@ -68,6 +68,8 @@ const C_ALIZARIN = 6;
 const C_DARK = 7;
 const C_NONE = 255;
 
+var graphData = new Array();
+
 function colorClass(colorId) {
   colorId = Number(colorId);
   switch (colorId) {
@@ -155,7 +157,7 @@ function start() {
     var center = "";
     switch (data.type) {
       case UI_INITIAL_GUI:
-        data.controls.forEach(element => {
+        data.controls.forEach((element) => {
           var fauxEvent = {
             data: JSON.stringify(element)
           };
@@ -577,17 +579,27 @@ function start() {
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "WILL BE A GRAPH <input style='color:black;' id='graph" +
+            "<figure id='graph" +
             data.id +
-            "' type='number' value='" +
-            data.value +
-            "' onchange='numberchange(" +
-            data.id +
-            ")' />" +
+            "'>" +
+            "<figcaption>" +
+            data.label +
+            "</figcaption>" +
+            "</figure>" +
             "</div>"
         );
+        graphData[data.id] = [];
+        renderGraphSvg(graphData[data.id], "graph" + data.id);
+        break;
+      case ADD_GRAPH_POINT:
+        var ts = Math.round(new Date().getTime() / 1000);
+        graphData[data.id].push({ x: ts, y: data.value });
+        renderGraphSvg(graphData[data.id], "graph" + data.id);
+        break;
+      case CLEAR_GRAPH:
+        graphData[data.id] = [];
+        renderGraphSvg(graphData[data.id], "graph" + data.id);
         break;
-
       case UI_GAUGE:
         var parent;
         if (data.parentControl) {

data/js/controls.min.js

@@ -1,8 +1,8 @@
-const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPTDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
+const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPTDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var graphData=new Array();function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
 var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
-function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach((element)=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 parent.append("<div id='id"+
 data.id+
 "' class='two columns card tcenter "+
@@ -192,14 +192,14 @@ colorClass(data.color)+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"WILL BE A GRAPH <input style='color:black;' id='graph"+
+"<figure id='graph"+
 data.id+
-"' type='number' value='"+
-data.value+
-"' onchange='numberchange("+
-data.id+
-")' />"+
-"</div>");break;case UI_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+"'>"+
+"<figcaption>"+
+data.label+
+"</figcaption>"+
+"</figure>"+
+"</div>");graphData["graph"+data.id]=[];renderGraphSvg(graphData["graph"+data.id],"graph"+data.id);break;case ADD_GRAPH_POINT:var ts=Math.round(new Date().getTime()/1000);graphData["graph"+data.id].push({x:ts,y:data.value});renderGraphSvg(graphData["graph"+data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData["graph"+data.id]=[];renderGraphSvg(graphData["graph"+data.id],"graph"+data.id);break;case UI_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 parent.append("<div id='id"+
 data.id+
 "' class='two columns card tcenter "+

src/ESPUI.cpp

@@ -570,7 +570,50 @@ void ESPUIClass::updateSelect(uint16_t id, String text, int clientId) { updateCo
 void ESPUIClass::updateGauge(uint16_t id, int number, int clientId) { updateControlValue(id, String(number), clientId); }
 
 void ESPUIClass::clearGraph(uint16_t id, int clientId) {}
-void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId) {}
+
+void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId) {
+  Control *control = getControl(id);
+  if (!control) {
+    return;
+  }
+
+  String json;
+  DynamicJsonDocument document(2000);
+  JsonObject root = document.to<JsonObject>();
+
+  root["type"] = (int)ControlType::GraphPoint;
+  root["value"] = nValue;
+  root["id"] = control->id;
+  serializeJson(document, json);
+
+  if (this->verbosity >= Verbosity::VerboseJSON) {
+    Serial.println(json);
+  }
+
+  if (clientId < 0) {
+    this->ws->textAll(json);
+    return;
+  }
+  // This is a hacky workaround because ESPAsyncWebServer does not have a
+  // function like this and it's clients array is private
+  int tryId = 0;
+
+  for (int count = 0; count < this->ws->count();) {
+    if (this->ws->hasClient(tryId)) {
+      if (clientId != tryId) {
+        this->ws->client(tryId)->text(json);
+
+        if (this->verbosity >= Verbosity::VerboseJSON) {
+          Serial.println(json);
+        }
+      }
+
+      count++;
+    }
+
+    tryId++;
+  }
+}
 /*
 Convert & Transfer Arduino elements to JSON elements
 Initially this function used to send the control element data individually.