lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-22 04:00:55 +00:00
Code Issues Releases Activity

#43 Sending Initial GUI as one big array

Browse Source 
- Added new  INITIAL_GUI Type
- spliting GUI Blob to events in controls js
- formating the json in jsonDom into one big array
This commit is contained in:
Lukas Bachschwell 2018-12-26 12:35:35 +01:00
parent 980e20818f
commit f31575b50c
5 changed files with 185 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
examples/gui/data/js/controls.js vendored
View File

@ -1,3 +1,4 @@
const UI_INITIAL_GUI = 100;
const UI_TITEL = 0; const UI_TITEL = 0;
const UI_LABEL = 1; const UI_LABEL = 1;
@ -112,26 +113,37 @@ function handleVisibilityChange() {
function start() { function start() {
document.addEventListener("visibilitychange", handleVisibilityChange, false); document.addEventListener("visibilitychange", handleVisibilityChange, false);
websock = new WebSocket("ws://" + window.location.hostname + "/ws"); websock = new WebSocket("ws://" + window.location.hostname + "/ws");
websock.onopen = function(evt) { websock.onopen = function (evt) {
console.log("websock open"); console.log("websock open");
$("#conStatus").addClass("color-green"); $("#conStatus").addClass("color-green");
$("#conStatus").text("Connected"); $("#conStatus").text("Connected");
websockConnected = true; websockConnected = true;
}; };
websock.onclose = function(evt) {
websock.onclose = function (evt) {
console.log("websock close"); console.log("websock close");
conStatusError(); conStatusError();
}; };
websock.onerror = function(evt) {
websock.onerror = function (evt) {
console.log(evt); console.log(evt);
conStatusError(); conStatusError();
}; };
websock.onmessage = function(evt) {
console.log(evt); var handleEvent = function (evt) {
//console.log(evt);
var data = JSON.parse(evt.data); var data = JSON.parse(evt.data);
var e = document.body; var e = document.body;
var center = ""; var center = "";
switch (data.type) { switch (data.type) {
case UI_INITIAL_GUI:
data.controls.forEach(element => {
var fauxEvent = {
data: JSON.stringify(element)
};
handleEvent(fauxEvent);
});
break;
case UI_TITEL: case UI_TITEL:
document.title = data.label; document.title = data.label;
$("#mainHeader").html(data.label); $("#mainHeader").html(data.label);
@ -168,13 +180,13 @@ function start() {
"</button></div>" "</button></div>"
); );
$("#" + data.id).on({ $("#" + data.id).on({
touchstart: function(e) { touchstart: function (e) {
e.preventDefault(); e.preventDefault();
buttonclick(data.id, true); buttonclick(data.id, true);
} }
}); });
$("#" + data.id).on({ $("#" + data.id).on({
touchend: function(e) { touchend: function (e) {
e.preventDefault(); e.preventDefault();
buttonclick(data.id, false); buttonclick(data.id, false);
} }
@ -265,61 +277,61 @@ function start() {
); );
$("#pf" + data.id).on({ $("#pf" + data.id).on({
touchstart: function(e) { touchstart: function (e) {
e.preventDefault(); e.preventDefault();
padclick(FOR, data.id, true); padclick(FOR, data.id, true);
} }
}); });
$("#pf" + data.id).on({ $("#pf" + data.id).on({
touchend: function(e) { touchend: function (e) {
e.preventDefault(); e.preventDefault();
padclick(FOR, data.id, false); padclick(FOR, data.id, false);
} }
}); });
$("#pl" + data.id).on({ $("#pl" + data.id).on({
touchstart: function(e) { touchstart: function (e) {
e.preventDefault(); e.preventDefault();
padclick(LEFT, data.id, true); padclick(LEFT, data.id, true);
} }
}); });
$("#pl" + data.id).on({ $("#pl" + data.id).on({
touchend: function(e) { touchend: function (e) {
e.preventDefault(); e.preventDefault();
padclick(LEFT, data.id, false); padclick(LEFT, data.id, false);
} }
}); });
$("#pr" + data.id).on({ $("#pr" + data.id).on({
touchstart: function(e) { touchstart: function (e) {
e.preventDefault(); e.preventDefault();
padclick(RIGHT, data.id, true); padclick(RIGHT, data.id, true);
} }
}); });
$("#pr" + data.id).on({ $("#pr" + data.id).on({
touchend: function(e) { touchend: function (e) {
e.preventDefault(); e.preventDefault();
padclick(RIGHT, data.id, false); padclick(RIGHT, data.id, false);
} }
}); });
$("#pb" + data.id).on({ $("#pb" + data.id).on({
touchstart: function(e) { touchstart: function (e) {
e.preventDefault(); e.preventDefault();
padclick(BACK, data.id, true); padclick(BACK, data.id, true);
} }
}); });
$("#pb" + data.id).on({ $("#pb" + data.id).on({
touchend: function(e) { touchend: function (e) {
e.preventDefault(); e.preventDefault();
padclick(BACK, data.id, false); padclick(BACK, data.id, false);
} }
}); });
$("#pc" + data.id).on({ $("#pc" + data.id).on({
touchstart: function(e) { touchstart: function (e) {
e.preventDefault(); e.preventDefault();
padclick(CENTER, data.id, true); padclick(CENTER, data.id, true);
} }
}); });
$("#pc" + data.id).on({ $("#pc" + data.id).on({
touchend: function(e) { touchend: function (e) {
e.preventDefault(); e.preventDefault();
padclick(CENTER, data.id, false); padclick(CENTER, data.id, false);
} }
@ -418,6 +430,8 @@ function start() {
break; break;
} }
}; };
websock.onmessage = handleEvent;
} }
function numberchange(number) { function numberchange(number) {

6
examples/gui/data/js/controls.min.js vendored
View File

@ -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();} 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 &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart});} function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart});}
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){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)+ colorClass(data.color)+
"'><h5 id='"+ "'><h5 id='"+
data.id+ data.id+
@ -134,7 +134,7 @@ data.value+
"' onchange='textchange("+ "' onchange='textchange("+
data.id+ 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 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 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);} function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}

36
src/ESPUI.cpp
View File

@ -613,25 +613,39 @@ bool ESPUIClass::labelExists(String label) {
return false; 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) { void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
for (int i = -1; i < cIndex; i++) {
String json; String json;
StaticJsonBuffer<200> jsonBuffer; DynamicJsonBuffer jsonBuffer(2000);
JsonObject &root = jsonBuffer.createObject(); JsonObject &root = jsonBuffer.createObject();
root["type"] = UI_INITIAL_GUI;
JsonArray &items = jsonBuffer.createArray();
for (int i = -1; i < cIndex; i++) {
JsonObject &item = jsonBuffer.createObject();
if (i == -1) { if (i == -1) {
root["type"] = UI_TITEL; item["type"] = UI_TITEL;
root["label"] = String(ui_title); item["label"] = String(ui_title);
} else { } else {
root["type"] = controls[i]->type; item["type"] = controls[i]->type;
root["label"] = String(controls[i]->label); item["label"] = String(controls[i]->label);
root["value"] = String(controls[i]->value); item["value"] = String(controls[i]->value);
root["color"] = String(controls[i]->color); item["color"] = String(controls[i]->color);
root["id"] = String(i); item["id"] = String(i);
} }
items.add(item);
}
// Send as one big bunch
root["controls"] = items;
root.printTo(json); root.printTo(json);
client->text(json); client->text(json);
}
} }
void ESPUIClass::beginSPIFFS(const char *_title) { void ESPUIClass::beginSPIFFS(const char *_title) {

1
src/ESPUI.h
View File

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

8
src/dataControlsJS.h
View File

File diff suppressed because one or more lines are too long