#43 Sending Initial GUI as one big array

- Added new  INITIAL_GUI Type
- spliting GUI Blob to events in controls js
- formating the json in jsonDom into one big array

examples/gui/data/js/controls.js

@@ -1,3 +1,4 @@
+const UI_INITIAL_GUI = 100;
 const UI_TITEL = 0;
 
 const UI_LABEL = 1;
@@ -112,26 +113,37 @@ function handleVisibilityChange() {
 function start() {
   document.addEventListener("visibilitychange", handleVisibilityChange, false);
   websock = new WebSocket("ws://" + window.location.hostname + "/ws");
-  websock.onopen = function(evt) {
+  websock.onopen = function (evt) {
     console.log("websock open");
     $("#conStatus").addClass("color-green");
     $("#conStatus").text("Connected");
     websockConnected = true;
   };
-  websock.onclose = function(evt) {
+
+  websock.onclose = function (evt) {
     console.log("websock close");
     conStatusError();
   };
-  websock.onerror = function(evt) {
+
+  websock.onerror = function (evt) {
     console.log(evt);
     conStatusError();
   };
-  websock.onmessage = function(evt) {
-    console.log(evt);
+
+  var handleEvent = function (evt) {
+    //console.log(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);
@@ -139,42 +151,42 @@ function start() {
       case UI_LABEL:
         $("#row").append(
           "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr /><span id='l" +
-            data.id +
-            "' class='label label-wrap'>" +
-            data.value +
-            "</span></div>"
+          colorClass(data.color) +
+          "'><h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr /><span id='l" +
+          data.id +
+          "' class='label label-wrap'>" +
+          data.value +
+          "</span></div>"
         );
         break;
       case UI_BUTTON:
         $("#row").append(
           "<div class='one columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/><button onmousedown='buttonclick(" +
-            data.id +
-            ", true)' onmouseup='buttonclick(" +
-            data.id +
-            ", false)' id='" +
-            data.id +
-            "'>" +
-            data.value +
-            "</button></div>"
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/><button onmousedown='buttonclick(" +
+          data.id +
+          ", true)' onmouseup='buttonclick(" +
+          data.id +
+          ", false)' id='" +
+          data.id +
+          "'>" +
+          data.value +
+          "</button></div>"
         );
         $("#" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             buttonclick(data.id, true);
           }
         });
         $("#" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             buttonclick(data.id, false);
           }
@@ -199,16 +211,16 @@ function start() {
         }
         $("#row").append(
           "<div id='" +
-            data.id +
-            "' class='one columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/>" +
-            label +
-            input +
-            "</label>" +
-            "</div>"
+          data.id +
+          "' class='one columns card tcenter " +
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/>" +
+          label +
+          input +
+          "</label>" +
+          "</div>"
         );
         break;
       case UI_CPAD:
@@ -220,106 +232,106 @@ function start() {
           ", false)' href='#' id='pc" +
           data.id +
           "'>OK</a>";
-      //NO BREAK
+        //NO BREAK
       case UI_PAD:
         $("#row").append(
           "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/>" +
-            "<nav class='control'>" +
-            "<ul>" +
-            "<li><a onmousedown='padclick(FOR, " +
-            data.id +
-            ", true)' onmouseup='padclick(FOR, " +
-            data.id +
-            ", false)' href='#' id='pf" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(RIGHT, " +
-            data.id +
-            ", true)' onmouseup='padclick(RIGHT, " +
-            data.id +
-            ", false)' href='#' id='pr" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(LEFT, " +
-            data.id +
-            ", true)' onmouseup='padclick(LEFT, " +
-            data.id +
-            ", false)' href='#' id='pl" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(BACK, " +
-            data.id +
-            ", true)' onmouseup='padclick(BACK, " +
-            data.id +
-            ", false)' href='#' id='pb" +
-            data.id +
-            "'>▲</a></li>" +
-            "</ul>" +
-            center +
-            "</nav>" +
-            "</div>"
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/>" +
+          "<nav class='control'>" +
+          "<ul>" +
+          "<li><a onmousedown='padclick(FOR, " +
+          data.id +
+          ", true)' onmouseup='padclick(FOR, " +
+          data.id +
+          ", false)' href='#' id='pf" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(RIGHT, " +
+          data.id +
+          ", true)' onmouseup='padclick(RIGHT, " +
+          data.id +
+          ", false)' href='#' id='pr" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(LEFT, " +
+          data.id +
+          ", true)' onmouseup='padclick(LEFT, " +
+          data.id +
+          ", false)' href='#' id='pl" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(BACK, " +
+          data.id +
+          ", true)' onmouseup='padclick(BACK, " +
+          data.id +
+          ", false)' href='#' id='pb" +
+          data.id +
+          "'>▲</a></li>" +
+          "</ul>" +
+          center +
+          "</nav>" +
+          "</div>"
         );
 
         $("#pf" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(FOR, data.id, true);
           }
         });
         $("#pf" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(FOR, data.id, false);
           }
         });
         $("#pl" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(LEFT, data.id, true);
           }
         });
         $("#pl" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(LEFT, data.id, false);
           }
         });
         $("#pr" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(RIGHT, data.id, true);
           }
         });
         $("#pr" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(RIGHT, data.id, false);
           }
         });
         $("#pb" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(BACK, data.id, true);
           }
         });
         $("#pb" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(BACK, data.id, false);
           }
         });
         $("#pc" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(CENTER, data.id, true);
           }
         });
         $("#pc" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(CENTER, data.id, false);
           }
@@ -336,23 +348,23 @@ function start() {
       case UI_SLIDER:
         $("#row").append(
           "<div class='two columns card tcenter card-slider " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<div id='sl" +
-            data.id +
-            "' class='rkmd-slider slider-discrete slider-" +
-            colorClass(data.color) +
-            "'>" +
-            "<input type='range' min='0' max='100' value='" +
-            data.value +
-            "'>" +
-            "</div>" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<div id='sl" +
+          data.id +
+          "' class='rkmd-slider slider-discrete slider-" +
+          colorClass(data.color) +
+          "'>" +
+          "<input type='range' min='0' max='100' value='" +
+          data.value +
+          "'>" +
+          "</div>" +
+          "</div>"
         );
         $("#row").append(
           "<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
@@ -366,21 +378,21 @@ function start() {
       case UI_NUMBER:
         $("#row").append(
           "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<input style='color:black;' id='num" +
-            data.id +
-            "' type='number' value='" +
-            data.value +
-            "' onchange='numberchange(" +
-            data.id +
-            ")' />" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<input style='color:black;' id='num" +
+          data.id +
+          "' type='number' value='" +
+          data.value +
+          "' onchange='numberchange(" +
+          data.id +
+          ")' />" +
+          "</div>"
         );
         break;
 
@@ -391,21 +403,21 @@ function start() {
       case UI_TEXT_INPUT:
         $("#row").append(
           "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<input style='color:black;' id='text" +
-            data.id +
-            "' value='" +
-            data.value +
-            "' onchange='textchange(" +
-            data.id +
-            ")' />" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<input style='color:black;' id='text" +
+          data.id +
+          "' value='" +
+          data.value +
+          "' onchange='textchange(" +
+          data.id +
+          ")' />" +
+          "</div>"
         );
         break;
 
@@ -418,6 +430,8 @@ function start() {
         break;
     }
   };
+
+  websock.onmessage = handleEvent;
 }
 
 function numberchange(number) {
@@ -478,4 +492,4 @@ function switcher(number, state) {
     $("#sl" + number).removeClass("checked");
     $("#sl" + number).prop("checked", false);
   }
-}
+}

examples/gui/data/js/controls.min.js

@@ -1,8 +1,8 @@
-const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=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_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}}
+const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=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_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;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();};websock.onmessage=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
+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:$("#row").append("<div class='two columns card tcenter "+
 colorClass(data.color)+
 "'><h5 id='"+
 data.id+
@@ -134,7 +134,7 @@ data.value+
 "' onchange='textchange("+
 data.id+
 ")' />"+
-"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};}
+"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;}
 function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);}
 function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);}
 function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}

src/ESPUI.cpp

@@ -613,25 +613,39 @@ bool ESPUIClass::labelExists(String label) {
   return false;
 }
 
-// Convert & Transfer Arduino elements to JSON elements
+/*
+Convert & Transfer Arduino elements to JSON elements
+Initially this function used to send the control element data individually.
+Due to a change in the ESPAsyncWebserver library this had top be changed to be
+sent as one blob at the beginning. Therefore a new type is used as well
+*/
 void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
+  String json;
+  DynamicJsonBuffer jsonBuffer(2000);
+  JsonObject &root = jsonBuffer.createObject();
+  root["type"] = UI_INITIAL_GUI;
+  JsonArray &items = jsonBuffer.createArray();
+
   for (int i = -1; i < cIndex; i++) {
-    String json;
-    StaticJsonBuffer<200> jsonBuffer;
-    JsonObject &root = jsonBuffer.createObject();
+    JsonObject &item = jsonBuffer.createObject();
+
     if (i == -1) {
-      root["type"] = UI_TITEL;
-      root["label"] = String(ui_title);
+      item["type"] = UI_TITEL;
+      item["label"] = String(ui_title);
     } else {
-      root["type"] = controls[i]->type;
-      root["label"] = String(controls[i]->label);
-      root["value"] = String(controls[i]->value);
-      root["color"] = String(controls[i]->color);
-      root["id"] = String(i);
+      item["type"] = controls[i]->type;
+      item["label"] = String(controls[i]->label);
+      item["value"] = String(controls[i]->value);
+      item["color"] = String(controls[i]->color);
+      item["id"] = String(i);
     }
-    root.printTo(json);
-    client->text(json);
+    items.add(item);
   }
+
+  // Send as one big bunch
+  root["controls"] = items;
+  root.printTo(json);
+  client->text(json);
 }
 
 void ESPUIClass::beginSPIFFS(const char *_title) {

src/ESPUI.h

@@ -40,6 +40,7 @@ typedef struct Control {
 } Control;
 
 // Message Types (and control types)
+#define UI_INITIAL_GUI 100
 #define UI_TITEL 0
 
 #define UI_LABEL 1