mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-21 22:50:55 +00:00
#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
This commit is contained in:
parent
980e20818f
commit
f31575b50c
286
examples/gui/data/js/controls.js
vendored
286
examples/gui/data/js/controls.js
vendored
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
6
examples/gui/data/js/controls.min.js
vendored
6
examples/gui/data/js/controls.min.js
vendored
@ -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);}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user