1
0
mirror of https://github.com/s00500/ESPUI.git synced 2024-12-24 22:50:49 +00:00

Merge pull request #148 from iangray001/chunkupdates2

Make initial UI update reliable (and 4 small fixes)
This commit is contained in:
Ian Gray 2022-01-19 19:32:07 +00:00 committed by GitHub
commit fa097ce329
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 283 additions and 192 deletions

View File

@ -259,6 +259,12 @@ A number box needs to have a min and a max value. To set it up just use:
`ESPUI.number("Numbertest", &numberCall, ControlColor::Alizarin, 5, 0, 10);`
Note that HTML number boxes will respect their min and max when the user
clicks the up and down arrows, but it is possible on most clients to simply type
any number in. As with all user input, numbers should be validated in callback code
because all client side checks can be skipped. If any value from the UI might
cause a problem, validate it.
#### Text Input
![text](https://github.com/s00500/ESPUI/blob/master/docs/ui_text.png)
@ -267,6 +273,17 @@ The textinput works very similar like the number input but with a string. You
can enter a String into it and when you are done with your change it is sent to
the ESP.
If you attach a Max control to the text input then a max length will be applied
to the control.
```
text = ESPUI.text("Label", callback, ControlColor::Dark, "Initial value");
ESPUI.addControl(ControlType::Max, "", "32", ControlColor::None, text);
```
However even with a set maximum length, user input should still be validated
because it is easy to bypass client-side checks. Never trust user input.
#### Graph
![graph](https://github.com/s00500/ESPUI/blob/master/docs/ui_graph.png)

40
data/js/controls.js vendored
View File

@ -102,6 +102,7 @@ function colorClass(colorId) {
case C_ALIZARIN:
return "alizarin";
case C_DARK:
case C_NONE:
return "dark";
default:
@ -252,6 +253,13 @@ function start() {
};
handleEvent(fauxEvent);
});
//If there are more elements in the complete UI, then request them
//Note: we subtract 1 from data.controls.length because the controls always
//includes the title element
if(data.totalcontrols > (data.controls.length - 1)) {
websock.send("uiok:" + (data.controls.length - 1));
}
break;
case UI_EXTEND_GUI:
@ -261,6 +269,11 @@ function start() {
};
handleEvent(fauxEvent);
});
//Do we need to keep requesting more UI elements?
if(data.totalcontrols > data.startindex + (data.controls.length - 1)) {
websock.send("uiok:" + (data.startindex + (data.controls.length - 1)));
}
break;
case UI_RELOAD:
@ -428,7 +441,13 @@ function start() {
if (data.parentControl) {
var parent = $("#id" + data.parentControl + " input");
if (parent.size()) {
parent.attr("max", data.value);
if(!parent.attr("type")) {
//type is not set so therefore it is a text input
parent.attr("maxlength", data.value);
} else {
//type might be range (slider) or number
parent.attr("max", data.value);
}
}
}
break;
@ -488,6 +507,7 @@ function start() {
break;
case UPDATE_SLIDER:
$("#sl" + data.id).attr("value", data.value)
slider_move($("#id" + data.id), data.value, "100", false);
if(data.hasOwnProperty('elementStyle')) {
$("#sl" + data.id).attr("style", data.elementStyle);
@ -516,6 +536,12 @@ function start() {
break;
case UPDATE_BUTTON:
$("#btn" + data.id).val(data.value);
if(data.hasOwnProperty('elementStyle')) {
$("#btn" + data.id).attr("style", data.elementStyle);
}
break;
case UPDATE_PAD:
case UPDATE_CPAD:
break;
@ -565,6 +591,10 @@ function start() {
function sliderchange(number) {
var val = $("#sl" + number).val();
websock.send("slvalue:" + val + ":" + number);
$(".range-slider__range").each(function(){
$(this).attr("value", $(this)[0].value);
});
}
function numberchange(number) {
@ -619,7 +649,7 @@ function padclick(type, number, isdown) {
function switcher(number, state) {
if (state == null) {
if ($("#s" + number).is(":checked")) {
if (!$("#sl" + number).hasClass("checked")) {
websock.send("sactive:" + number);
$("#sl" + number).addClass("checked");
} else {
@ -686,7 +716,7 @@ var addToHTML = function(data) {
case UI_ACCEL:
html = "<div id='id" + data.id + "' " + panelStyle + " class='two columns " + panelwide + " card tcenter " +
colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
elementHTML(data.type, data.id, data.value, elementStyle) +
elementHTML(data.type, data.id, data.value, data.label, elementStyle) +
"</div>";
break;
case UI_SEPARATOR:
@ -700,11 +730,11 @@ var addToHTML = function(data) {
} else {
//We are adding to an existing panel so we only need the HTML for the element
var parent = $("#id" + data.parentControl);
parent.append(elementHTML(data.type, data.id, data.value, elementStyle));
parent.append(elementHTML(data.type, data.id, data.value, data.label, elementStyle));
}
}
var elementHTML = function(type, id, value, elementStyle) {
var elementHTML = function(type, id, value, label, elementStyle) {
switch(type) {
case UI_LABEL:
return "<span id='l" + id + "' " + elementStyle +

View File

@ -1,4 +1,4 @@
const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;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 UPDATE_GAUGE=117;const UI_ACCEL=18;const UPDATE_ACCEL=118;const UI_SEPARATOR=19;const UPDATE_SEPARATOR=119;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();var hasAccel=false;var sliderContinuous=false;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 UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;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 UPDATE_GAUGE=117;const UI_ACCEL=18;const UPDATE_ACCEL=118;const UI_SEPARATOR=19;const UPDATE_SEPARATOR=119;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();var hasAccel=false;var sliderContinuous=false;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_DARK:case C_NONE:return"dark";default:return"";}}
var websock;var websockConnected=false;function requestOrientationPermission(){}
function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData));}
function restoreGraphData(id){var savedData=localStorage.getItem("espuigraphs",graphData);if(savedData!=null){savedData=JSON.parse(savedData);return savedData[id];}
@ -8,7 +8,9 @@ function conStatusError(){websockConnected=false;$("#conStatus").removeClass("co
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{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){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GAUGE:case UI_SEPARATOR:if(data.visible)addToHTML(data);break;case UI_BUTTON:if(data.visible){addToHTML(data);$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});if(data.totalcontrols>(data.controls.length-1)){websock.send("uiok:"+(data.controls.length-1));}
break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});if(data.totalcontrols>data.startindex+(data.controls.length-1)){websock.send("uiok:"+(data.startindex+(data.controls.length-1)));}
break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GAUGE:case UI_SEPARATOR:if(data.visible)addToHTML(data);break;case UI_BUTTON:if(data.visible){addToHTML(data);$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
break;case UI_SWITCHER:if(data.visible){addToHTML(data);switcher(data.id,data.value);}
break;case UI_CPAD:case UI_PAD:if(data.visible){addToHTML(data);$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);},});}
break;case UI_SLIDER:if(data.visible){addToHTML(data);rangeSlider(!sliderContinuous);}
@ -24,37 +26,39 @@ data.selected+
data.label+
"</option>");}
break;case UI_MIN:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("min",data.value);}}
break;case UI_MAX:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("max",data.value);}}
break;case UI_MAX:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){if(!parent.attr("type")){parent.attr("maxlength",data.value);}else{parent.attr("max",data.value);}}}
break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("step",data.value);}}
break;case UI_GRAPH:if(data.visible){addToHTML(data);graphData[data.id]=restoreGraphData(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});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_ACCEL:if(hasAccel)break;hasAccel=true;if(data.visible){addToHTML(data);requestOrientationPermission();}
break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);if(data.hasOwnProperty('elementStyle')){$("#l"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_SLIDER:$("#sl"+data.id).attr("value",data.value)
slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#num"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#text"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#select"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_BUTTON:$("#btn"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#btn"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.hasOwnProperty('panelStyle')){$("#id"+data.id).attr("style",data.panelStyle);}
if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}}
$(".range-slider__range").each(function(){$(this)[0].value=$(this).attr("value");$(this).next().html($(this).attr("value"));});};websock.onmessage=handleEvent;}
function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);}
function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);$(".range-slider__range").each(function(){$(this).attr("value",$(this)[0].value);});}
function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);}
function tabclick(number){var val=$("#tab"+number).val();websock.send("tabvalue:"+val+":"+number);}
function selectchange(number){var val=$("#select"+number).val();websock.send("svalue:"+val+":"+number);}
function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
function switcher(number,state){if(state==null){if(!$("#sl"+number).hasClass("checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});}
$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";panelwide=data.hasOwnProperty('wide')?"wide":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="<div id='id"+data.id+"' "+panelStyle+" class='two columns "+panelwide+" card tcenter "+
colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
elementHTML(data.type,data.id,data.value,elementStyle)+
elementHTML(data.type,data.id,data.value,data.label,elementStyle)+
"</div>";break;case UI_SEPARATOR:html="<div id='id"+data.id+"' "+panelStyle+" class='sectionbreak columns'>"+
"<h5>"+data.label+"</h5><hr/></div>";break;}
parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data.type,data.id,data.value,elementStyle));}}
var elementHTML=function(type,id,value,elementStyle){switch(type){case UI_LABEL:return"<span id='l"+id+"' "+elementStyle+
parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data.type,data.id,data.value,data.label,elementStyle));}}
var elementHTML=function(type,id,value,label,elementStyle){switch(type){case UI_LABEL:return"<span id='l"+id+"' "+elementStyle+
" class='label label-wrap'>"+value+"</span>";case UI_BUTTON:return"<button id='btn"+id+"' "+elementStyle+
" onmousedown='buttonclick("+id+", true)'"+
" onmouseup='buttonclick("+id+", false)'>"+

View File

@ -422,7 +422,7 @@ void onWsEvent(
}
#endif
ESPUI.jsonDom(client);
ESPUI.jsonDom(0, client);
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity)
@ -442,142 +442,149 @@ void onWsEvent(
msg += (char)data[i];
}
uint16_t id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity >= Verbosity::VerboseJSON)
if (msg.startsWith(F("uiok:")))
{
Serial.print(F("WS rec: "));
Serial.println(msg);
Serial.print(F("WS recognised ID: "));
Serial.println(id);
}
#endif
Control* c = ESPUI.getControl(id);
if (c == nullptr)
int idx = msg.substring(msg.indexOf(':') + 1).toInt();
ESPUI.jsonDom(idx);
} else
{
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity)
uint16_t id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity >= Verbosity::VerboseJSON)
{
Serial.print(F("No control found for ID "));
Serial.print(F("WS rec: "));
Serial.println(msg);
Serial.print(F("WS recognised ID: "));
Serial.println(id);
}
#endif
#endif
return;
}
Control* c = ESPUI.getControl(id);
if (c->callback == nullptr)
{
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity)
if (c == nullptr)
{
Serial.print(F("No callback found for ID "));
Serial.println(id);
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity)
{
Serial.print(F("No control found for ID "));
Serial.println(id);
}
#endif
return;
}
#endif
return;
}
if (msg.startsWith(F("bdown:")))
{
c->callback(c, B_DOWN);
}
else if (msg.startsWith(F("bup:")))
{
c->callback(c, B_UP);
}
else if (msg.startsWith(F("pfdown:")))
{
c->callback(c, P_FOR_DOWN);
}
else if (msg.startsWith(F("pfup:")))
{
c->callback(c, P_FOR_UP);
}
else if (msg.startsWith(F("pldown:")))
{
c->callback(c, P_LEFT_DOWN);
}
else if (msg.startsWith(F("plup:")))
{
c->callback(c, P_LEFT_UP);
}
else if (msg.startsWith(F("prdown:")))
{
c->callback(c, P_RIGHT_DOWN);
}
else if (msg.startsWith(F("prup:")))
{
c->callback(c, P_RIGHT_UP);
}
else if (msg.startsWith(F("pbdown:")))
{
c->callback(c, P_BACK_DOWN);
}
else if (msg.startsWith(F("pbup:")))
{
c->callback(c, P_BACK_UP);
}
else if (msg.startsWith(F("pcdown:")))
{
c->callback(c, P_CENTER_DOWN);
}
else if (msg.startsWith(F("pcup:")))
{
c->callback(c, P_CENTER_UP);
}
else if (msg.startsWith(F("sactive:")))
{
c->value = "1";
ESPUI.updateControl(c, client->id());
c->callback(c, S_ACTIVE);
}
else if (msg.startsWith(F("sinactive:")))
{
c->value = "0";
ESPUI.updateControl(c, client->id());
c->callback(c, S_INACTIVE);
}
else if (msg.startsWith(F("slvalue:")))
{
c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateControl(c, client->id());
c->callback(c, SL_VALUE);
}
else if (msg.startsWith(F("nvalue:")))
{
c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateControl(c, client->id());
c->callback(c, N_VALUE);
}
else if (msg.startsWith(F("tvalue:")))
{
c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateControl(c, client->id());
c->callback(c, T_VALUE);
}
else if (msg.startsWith("tabvalue:"))
{
c->callback(c, client->id());
}
else if (msg.startsWith(F("svalue:")))
{
c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateControl(c, client->id());
c->callback(c, S_VALUE);
}
else
{
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity)
if (c->callback == nullptr)
{
Serial.println(F("Malformated message from the websocket"));
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity)
{
Serial.print(F("No callback found for ID "));
Serial.println(id);
}
#endif
return;
}
if (msg.startsWith(F("bdown:")))
{
c->callback(c, B_DOWN);
}
else if (msg.startsWith(F("bup:")))
{
c->callback(c, B_UP);
}
else if (msg.startsWith(F("pfdown:")))
{
c->callback(c, P_FOR_DOWN);
}
else if (msg.startsWith(F("pfup:")))
{
c->callback(c, P_FOR_UP);
}
else if (msg.startsWith(F("pldown:")))
{
c->callback(c, P_LEFT_DOWN);
}
else if (msg.startsWith(F("plup:")))
{
c->callback(c, P_LEFT_UP);
}
else if (msg.startsWith(F("prdown:")))
{
c->callback(c, P_RIGHT_DOWN);
}
else if (msg.startsWith(F("prup:")))
{
c->callback(c, P_RIGHT_UP);
}
else if (msg.startsWith(F("pbdown:")))
{
c->callback(c, P_BACK_DOWN);
}
else if (msg.startsWith(F("pbup:")))
{
c->callback(c, P_BACK_UP);
}
else if (msg.startsWith(F("pcdown:")))
{
c->callback(c, P_CENTER_DOWN);
}
else if (msg.startsWith(F("pcup:")))
{
c->callback(c, P_CENTER_UP);
}
else if (msg.startsWith(F("sactive:")))
{
c->value = "1";
ESPUI.updateControl(c, client->id());
c->callback(c, S_ACTIVE);
}
else if (msg.startsWith(F("sinactive:")))
{
c->value = "0";
ESPUI.updateControl(c, client->id());
c->callback(c, S_INACTIVE);
}
else if (msg.startsWith(F("slvalue:")))
{
c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateControl(c, client->id());
c->callback(c, SL_VALUE);
}
else if (msg.startsWith(F("nvalue:")))
{
c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateControl(c, client->id());
c->callback(c, N_VALUE);
}
else if (msg.startsWith(F("tvalue:")))
{
c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateControl(c, client->id());
c->callback(c, T_VALUE);
}
else if (msg.startsWith("tabvalue:"))
{
c->callback(c, client->id());
}
else if (msg.startsWith(F("svalue:")))
{
c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateControl(c, client->id());
c->callback(c, S_VALUE);
}
else
{
#if defined(DEBUG_ESPUI)
if (ESPUI.verbosity)
{
Serial.println(F("Malformated message from the websocket"));
}
#endif
}
#endif
}
}
break;
@ -608,6 +615,8 @@ uint16_t ESPUIClass::addControl(ControlType type, const char* label, const Strin
iterator->next = control;
}
this->controlCount++;
return control->id;
}
@ -622,13 +631,14 @@ bool ESPUIClass::removeControl(uint16_t id, bool force_reload_ui)
{
this->controls = it->next;
delete it;
this->controlCount--;
if (force_reload_ui)
{
jsonReload();
}
else
{
jsonDom();
jsonDom(0);
}
return true;
}
@ -644,13 +654,14 @@ bool ESPUIClass::removeControl(uint16_t id, bool force_reload_ui)
{
it->next = it_next->next;
delete it_next;
this->controlCount--;
if (force_reload_ui)
{
jsonReload();
}
else
{
jsonDom(); // resends to all
jsonDom(0); // resends to all
}
return true;
}
@ -752,6 +763,11 @@ void ESPUIClass::updateControl(Control* control, int clientId)
return;
}
if (this->ws == nullptr)
{
return;
}
String json;
DynamicJsonDocument document(jsonUpdateDocumentSize);
JsonObject root = document.to<JsonObject>();
@ -977,61 +993,79 @@ void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId)
tryId++;
}
}
/*
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
Convert & Transfer Arduino elements to JSON elements. This function sends a chunk of
JSON describing the controls of the UI, starting from the control at index startidx.
If startidx is 0 then a UI_INITIAL_GUI message will be sent, else a UI_EXTEND_GUI.
Both message types contain a list of serialised UI elements. Only a portion of the UI
will be sent in order to avoid websocket buffer overflows. The client will acknowledge
receipt of a partial message by requesting the next chunk of UI.
The protocol is:
SERVER: jsonDom(0):
"UI_INITIAL_GUI: n serialised UI elements"
CLIENT: controls.js:handleEvent()
"uiok:n"
SERVER: jsonDom(n):
"UI_EXTEND_GUI: n serialised UI elements"
CLIENT: controls.js:handleEvent()
"uiok:2*n"
etc.
*/
void ESPUIClass::jsonDom(AsyncWebSocketClient* client)
void ESPUIClass::jsonDom(uint16_t startidx, AsyncWebSocketClient* client)
{
if(startidx >= this->controlCount)
{
return;
}
DynamicJsonDocument document(jsonInitialDocumentSize);
document["type"] = (int)UI_INITIAL_GUI;
document["type"] = startidx ? (int)UI_EXTEND_GUI : (int)UI_INITIAL_GUI;
document["sliderContinuous"] = sliderContinuous;
document["startindex"] = startidx;
document["totalcontrols"] = this->controlCount;
JsonArray items = document.createNestedArray("controls");
Control* control = this->controls;
JsonObject titleItem = items.createNestedObject();
titleItem["type"] = (int)UI_TITLE;
titleItem["label"] = ui_title;
while (1)
{
control = prepareJSONChunk(client, control, &items);
prepareJSONChunk(client, startidx, &items);
String json;
serializeJson(document, json);
String json;
serializeJson(document, json);
#if defined(DEBUG_ESPUI)
if (this->verbosity >= Verbosity::VerboseJSON)
{
Serial.println("Sending elements --------->");
Serial.println(json);
}
#endif
if (client != nullptr)
client->text(json);
else
this->ws->textAll(json);
if (control == nullptr)
break;
document.clear();
items.clear();
document["type"] = (int)UI_EXTEND_GUI;
items = document.createNestedArray("controls");
if (this->verbosity >= Verbosity::VerboseJSON)
{
Serial.println("Sending elements --------->");
Serial.println(json);
}
#endif
if (client != nullptr)
client->text(json);
else
this->ws->textAll(json);
}
/* Prepare a chunk of elements as a single JSON string. If the allowed number of elements is greater than the total
number this will represent the entire UI and this function will return null. If a control pointer is returned then the
limit was reached, the currently serialised must be sent, and then processing resumed to send the next chunk. */
Control* ESPUIClass::prepareJSONChunk(AsyncWebSocketClient* client, Control* control, JsonArray* items)
number this will represent the entire UI. More likely, it will represent a small section of the UI to be sent. The client
will acknoledge receipt by requesting the next chunk. */
void ESPUIClass::prepareJSONChunk(AsyncWebSocketClient* client, uint16_t startindex, JsonArray* items)
{
int elementcount = 0;
//First check that there will be sufficient nodes in the list
if(startindex >= this->controlCount)
{
return;
}
//Follow the list until control points to the startindex'th node
Control* control = this->controls;
for(auto i = 0; i < startindex; i++) {
control = control->next;
}
//To prevent overflow, keep track of the number of elements we have serialised into this message
int elementcount = 0;
while (control != nullptr && elementcount < 10)
{
JsonObject item = items->createNestedObject();
@ -1071,7 +1105,7 @@ Control* ESPUIClass::prepareJSONChunk(AsyncWebSocketClient* client, Control* con
control = control->next;
elementcount++;
}
return control;
return;
}
void ESPUIClass::jsonReload()

View File

@ -298,7 +298,7 @@ public:
const char* ui_title = "ESPUI"; // Store UI Title and Header Name
Control* controls = nullptr;
void jsonReload();
void jsonDom(AsyncWebSocketClient* client = nullptr);
void jsonDom(uint16_t startidx, AsyncWebSocketClient* client = nullptr);
Verbosity verbosity;
@ -310,7 +310,9 @@ private:
const char* basicAuthPassword = nullptr;
bool basicAuth = true;
Control* prepareJSONChunk(AsyncWebSocketClient* client, Control* control, JsonArray* items);
uint16_t controlCount = 0;
void prepareJSONChunk(AsyncWebSocketClient* client, uint16_t startindex, JsonArray* items);
};
extern ESPUIClass ESPUI;

File diff suppressed because one or more lines are too long