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

Increase timeout for connecting existing network and add continuous slider mode #60

Browse Source
This commit is contained in:
Lukas Bachschwell 2019-12-28 14:54:41 +01:00
parent 681a00b3ed
commit 9764db9789
Signed by: lbsadmin
GPG Key ID: CCC6AA87CC8DF425
6 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
data/js/controls.js vendored
View File

@ -69,8 +69,8 @@ const C_DARK = 7;
const C_NONE = 255; const C_NONE = 255;
var graphData = new Array(); var graphData = new Array();
var hasAccel = false; var hasAccel = false;
var sliderContinuous = false;
function colorClass(colorId) { function colorClass(colorId) {
colorId = Number(colorId); colorId = Number(colorId);
@ -223,6 +223,9 @@ function start() {
var center = ""; var center = "";
switch (data.type) { switch (data.type) {
case UI_INITIAL_GUI: case UI_INITIAL_GUI:
if (data.sliderContinuous) {
sliderContinuous = data.sliderContinuous;
}
data.controls.forEach(element => { data.controls.forEach(element => {
var fauxEvent = { var fauxEvent = {
data: JSON.stringify(element) data: JSON.stringify(element)
@ -478,7 +481,7 @@ function start() {
"</div>" + "</div>" +
"</div>" "</div>"
); );
rangeSlider(); rangeSlider(!sliderContinuous);
break; break;
case UI_NUMBER: case UI_NUMBER:
@ -604,7 +607,6 @@ function start() {
if (data.parentControl) { if (data.parentControl) {
var parent = $("#id" + data.parentControl + " input"); var parent = $("#id" + data.parentControl + " input");
if (parent.size()) { if (parent.size()) {
console.log("MIN" + data.value);
parent.attr("min", data.value); parent.attr("min", data.value);
} }
} }
@ -614,7 +616,6 @@ function start() {
if (data.parentControl) { if (data.parentControl) {
var parent = $("#id" + data.parentControl + " input"); var parent = $("#id" + data.parentControl + " input");
if (parent.size()) { if (parent.size()) {
console.log("MAX" + data.value);
parent.attr("max", data.value); parent.attr("max", data.value);
} }
} }
@ -624,7 +625,6 @@ function start() {
if (data.parentControl) { if (data.parentControl) {
var parent = $("#id" + data.parentControl + " input"); var parent = $("#id" + data.parentControl + " input");
if (parent.size()) { if (parent.size()) {
console.log("STEP" + data.value);
parent.attr("step", data.value); parent.attr("step", data.value);
} }
} }
@ -852,7 +852,7 @@ function switcher(number, state) {
} }
} }
var rangeSlider = function() { var rangeSlider = function(isDiscrete) {
var slider = $(".range-slider"), var slider = $(".range-slider"),
range = $(".range-slider__range"), range = $(".range-slider__range"),
value = $(".range-slider__value"); value = $(".range-slider__value");
@ -865,19 +865,31 @@ var rangeSlider = function() {
$(this).html(value); $(this).html(value);
}); });
range.on({ if (!isDiscrete) {
input: function() { range.on({
$(this) input: function() {
.next() sliderchange(
.html(this.value); $(this)
}, .attr("id")
change: function() { .replace(/^\D+/g, "")
sliderchange( );
}
});
} else {
range.on({
input: function() {
$(this) $(this)
.attr("id") .next()
.replace(/^\D+/g, "") .html(this.value);
); },
} change: function() {
}); sliderchange(
$(this)
.attr("id")
.replace(/^\D+/g, "")
);
}
});
}
}); });
}; };

15
data/js/controls.min.js vendored
View File

@ -1,4 +1,4 @@
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();var hasAccel=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 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();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"";}}
var websock;var websockConnected=false;function requestOrientationPermission(){} var websock;var websockConnected=false;function requestOrientationPermission(){}
function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData));} 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];} function restoreGraphData(id){var savedData=localStorage.getItem("espuigraphs",graphData);if(savedData!=null){savedData=JSON.parse(savedData);return savedData[id];}
@ -6,7 +6,8 @@ return[];}
function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();} 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();};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:if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
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"+ parent.append("<div id='id"+
data.id+ data.id+
"' class='two columns card tcenter "+ "' class='two columns card tcenter "+
@ -128,7 +129,7 @@ data.value+
data.value+ data.value+
"</span>"+ "</span>"+
"</div>"+ "</div>"+
"</div>");rangeSlider();break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");} "</div>");rangeSlider(!sliderContinuous);break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
parent.append("<div id='id"+ parent.append("<div id='id"+
data.id+ data.id+
"' class='two columns card tcenter "+ "' class='two columns card tcenter "+
@ -184,9 +185,9 @@ data.selected+
">"+ ">"+
data.label+ data.label+
"</option>");} "</option>");}
break;case UI_MIN:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){console.log("MIN"+data.value);parent.attr("min",data.value);}} 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()){console.log("MAX"+data.value);parent.attr("max",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_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){console.log("STEP"+data.value);parent.attr("step",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:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");} break;case UI_GRAPH:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
parent.append("<div id='id"+ parent.append("<div id='id"+
data.id+ data.id+
@ -244,4 +245,4 @@ function selectchange(number){var val=$("#select"+number).val();websock.send("sv
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);}
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 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($("#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);}}
var rangeSlider=function(){var slider=$(".range-slider"),range=$(".range-slider__range"),value=$(".range-slider__value");slider.each(function(){value.each(function(){var value=$(this).prev().attr("value");$(this).html(value);});range.on({input:function(){$(this).next().html(this.value);},change:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));}});});}; var rangeSlider=function(isDiscrete){var slider=$(".range-slider"),range=$(".range-slider__range"),value=$(".range-slider__value");slider.each(function(){value.each(function(){var value=$(this).prev().attr("value");$(this).html(value);});if(!isDiscrete){range.on({input:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));}});}else{range.on({input:function(){$(this).next().html(this.value);},change:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));}});}});};

5
examples/gui/gui.ino
View File

@ -13,6 +13,7 @@ DNSServer dnsServer;
const char *ssid = "ESPUI"; const char *ssid = "ESPUI";
const char *password = "espui"; const char *password = "espui";
const char *hostname = "EspuiTest"; const char *hostname = "EspuiTest";
long oldTime = 0; long oldTime = 0;
@ -160,9 +161,9 @@ void setup(void) {
Serial.print("\n\nTry to connect to existing network"); Serial.print("\n\nTry to connect to existing network");
{ {
uint8_t timeout = 5; uint8_t timeout = 10;
// Wait for connection, 2.5s timeout // Wait for connection, 5s timeout
do { do {
delay(500); delay(500);
Serial.print("."); Serial.print(".");

1
src/ESPUI.cpp
View File

@ -624,6 +624,7 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
String json; String json;
DynamicJsonDocument document(jsonInitialDocumentSize); DynamicJsonDocument document(jsonInitialDocumentSize);
document["type"] = (int)UI_INITIAL_GUI; document["type"] = (int)UI_INITIAL_GUI;
document["sliderContinuous"] = sliderContinuous;
JsonArray items = document.createNestedArray("controls"); JsonArray items = document.createNestedArray("controls");
Control *control = this->controls; Control *control = this->controls;

2
src/ESPUI.h
View File

@ -170,9 +170,11 @@ public:
verbosity = Verbosity::Quiet; verbosity = Verbosity::Quiet;
jsonUpdateDocumentSize = 2000; jsonUpdateDocumentSize = 2000;
jsonInitialDocumentSize = 8000; jsonInitialDocumentSize = 8000;
sliderContinuous = false;
} }
unsigned int jsonUpdateDocumentSize; unsigned int jsonUpdateDocumentSize;
unsigned int jsonInitialDocumentSize; unsigned int jsonInitialDocumentSize;
bool sliderContinuous;
void setVerbosity(Verbosity verbosity); void setVerbosity(Verbosity verbosity);
void begin(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in Memorymode void begin(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in Memorymode

17
src/dataControlsJS.h
View File

File diff suppressed because one or more lines are too long