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

#9 #21 Adds Text input / Number input Support

Browse Source 
also loads of reformating
This commit is contained in:
Lukas Bachschwell 2018-11-26 18:25:10 +01:00
parent 870e8a06a2
commit 7d46a4de96
12 changed files with 935 additions and 560 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/gui/data/css/normalize.min.css vendored
View File

@ -1 +1 @@
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

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

@ -14,8 +14,6 @@ const UI_CPAD = 5;
const UI_SLIDER = 8;
const UPDATE_SLIDER = 9;
const UI_NUMBER = 10;
const UPDATE_NUMBER = 11;
@ -66,15 +64,15 @@ function colorClass(colorId) {
break;
case C_CARROT:
return "carrot"
return "carrot";
break;
case C_ALIZARIN:
return "alizarin"
return "alizarin";
break;
case C_NONE:
return ""
return "";
break;
default:
@ -86,7 +84,9 @@ var websock;
var websockConnected = false;
function restart() {
$(document).add('*').off();
$(document)
.add("*")
.off();
$("#row").html("");
websock.close();
start();
@ -99,7 +99,7 @@ function conStatusError() {
$("#conStatus").html("Error / No Connection ↻");
$("#conStatus").off();
$("#conStatus").on({
'click': restart
click: restart
});
}
@ -111,15 +111,15 @@ function handleVisibilityChange() {
function start() {
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) {
console.log('websock open');
console.log("websock open");
$("#conStatus").addClass("color-green");
$("#conStatus").text("Connected");
websockConnected = true;
};
websock.onclose = function(evt) {
console.log('websock close');
console.log("websock close");
conStatusError();
};
websock.onerror = function(evt) {
@ -134,186 +134,303 @@ function start() {
switch (data.type) {
case UI_TITEL:
document.title = data.label;
$('#mainHeader').html(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 + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label label-wrap'>" + data.value + "</span></div>");
$("#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>"
);
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>");
$('#' + data.id).on({
'touchstart': function(e) {
$("#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>"
);
$("#" + data.id).on({
touchstart: function(e) {
e.preventDefault();
buttonclick(data.id, true)
buttonclick(data.id, true);
}
});
$('#' + data.id).on({
'touchend': function(e) {
$("#" + data.id).on({
touchend: function(e) {
e.preventDefault();
buttonclick(data.id, false)
buttonclick(data.id, false);
}
});
break;
case UI_SWITCHER:
var label = "<label id='sl" + data.id + "' class='switch checked'>";
var input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked></div>";
var input =
"<div class='in'><input type='checkbox' id='s" +
data.id +
"' onClick='switcher(" +
data.id +
",null)' checked></div>";
if (data.value == "0") {
label = "<label id='sl" + data.id + "' class='switch'>";
input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' ></div>";
input =
"<div class='in'><input type='checkbox' id='s" +
data.id +
"' onClick='switcher(" +
data.id +
",null)' ></div>";
}
$('#row').append(
"<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
label + input +
$("#row").append(
"<div id='" +
data.id +
"' class='one columns card tcenter " +
colorClass(data.color) +
"'><h5>" +
data.label +
"</h5><hr/>" +
label +
input +
"</label>" +
"</div>");
"</div>"
);
break;
case UI_CPAD:
center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>";
center =
"<a class='confirm' onmousedown='padclick(CENTER, " +
data.id +
", true)' onmouseup='padclick(CENTER, " +
data.id +
", false)' href='#' id='pc" +
data.id +
"'>OK</a>";
//NO BREAK
case UI_PAD:
$('#row').append(
"<div class='two columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
$("#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>" +
"<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>");
"</div>"
);
$('#pf' + data.id).on({
'touchstart': function(e) {
$("#pf" + data.id).on({
touchstart: function(e) {
e.preventDefault();
padclick(FOR, data.id, true)
padclick(FOR, data.id, true);
}
});
$('#pf' + data.id).on({
'touchend': function(e) {
$("#pf" + data.id).on({
touchend: function(e) {
e.preventDefault();
padclick(FOR, data.id, false)
padclick(FOR, data.id, false);
}
});
$('#pl' + data.id).on({
'touchstart': function(e) {
$("#pl" + data.id).on({
touchstart: function(e) {
e.preventDefault();
padclick(LEFT, data.id, true)
padclick(LEFT, data.id, true);
}
});
$('#pl' + data.id).on({
'touchend': function(e) {
$("#pl" + data.id).on({
touchend: function(e) {
e.preventDefault();
padclick(LEFT, data.id, false)
padclick(LEFT, data.id, false);
}
});
$('#pr' + data.id).on({
'touchstart': function(e) {
$("#pr" + data.id).on({
touchstart: function(e) {
e.preventDefault();
padclick(RIGHT, data.id, true)
padclick(RIGHT, data.id, true);
}
});
$('#pr' + data.id).on({
'touchend': function(e) {
$("#pr" + data.id).on({
touchend: function(e) {
e.preventDefault();
padclick(RIGHT, data.id, false)
padclick(RIGHT, data.id, false);
}
});
$('#pb' + data.id).on({
'touchstart': function(e) {
$("#pb" + data.id).on({
touchstart: function(e) {
e.preventDefault();
padclick(BACK, data.id, true)
padclick(BACK, data.id, true);
}
});
$('#pb' + data.id).on({
'touchend': function(e) {
$("#pb" + data.id).on({
touchend: function(e) {
e.preventDefault();
padclick(BACK, data.id, false)
padclick(BACK, data.id, false);
}
});
$('#pc' + data.id).on({
'touchstart': function(e) {
$("#pc" + data.id).on({
touchstart: function(e) {
e.preventDefault();
padclick(CENTER, data.id, true)
padclick(CENTER, data.id, true);
}
});
$('#pc' + data.id).on({
'touchend': function(e) {
$("#pc" + data.id).on({
touchend: function(e) {
e.preventDefault();
padclick(CENTER, data.id, false)
padclick(CENTER, data.id, false);
}
});
break;
case UPDATE_LABEL:
$('#l' + data.id).html(data.value);
$("#l" + data.id).html(data.value);
break;
case UPDATE_SWITCHER:
if (data.value == "0")
switcher(data.id, 0);
else
switcher(data.id, 1);
if (data.value == "0") switcher(data.id, 0);
else switcher(data.id, 1);
break;
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 + "'>" +
$("#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>"
);
$('#row').append(
"<script>" +
"rkmd_rangeSlider('#sl" + data.id + "');" +
"</script>"
$("#row").append(
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
);
break;
case UPDATE_SLIDER:
slider_move($('#sl' + data.id), data.value, '100', false);
slider_move($("#sl" + data.id), data.value, "100", false);
break;
case UI_NUMBER:
$('#row').append(
"<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
"<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
"<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
$("#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>"
);
break;
case UPDATE_NUMBER:
$('#num' + data.id).val(data.value);
$("#num" + data.id).val(data.value);
break;
case UI_TEXT_INPUT:
$('#row').append(
"<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
"<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
"<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
$("#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>"
);
break;
case UPDATE_TEXT_INPUT:
$('#num' + data.id).val(data.value);
$("#text" + data.id).val(data.value);
break;
default:
console.error('Unknown type or event');
console.error("Unknown type or event");
break;
}
};
}
function numberchange(number) {
var val = $('#num' + data.id).val();
websock.send("nchange:" + number + ":" + val);
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);
@ -342,24 +459,23 @@ function padclick(type, number, isdown) {
if (isdown) websock.send("prdown:" + number);
else websock.send("prup:" + number);
break;
}
}
function switcher(number, state) {
if (state == null) {
if ($('#s' + number).is(':checked')) {
if ($("#s" + number).is(":checked")) {
websock.send("sactive:" + number);
$('#sl' + number).addClass('checked');
$("#sl" + number).addClass("checked");
} else {
websock.send("sinactive:" + number);
$('#sl' + number).removeClass('checked');
$("#sl" + number).removeClass("checked");
}
} else if (state == 1) {
$('#sl' + number).addClass('checked');
$('#sl' + number).prop("checked", true);
$("#sl" + number).addClass("checked");
$("#sl" + number).prop("checked", true);
} else if (state == 0) {
$('#sl' + number).removeClass('checked');
$('#sl' + number).prop("checked", false);
$("#sl" + number).removeClass("checked");
$("#sl" + number).prop("checked", false);
}
}

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

@ -1,41 +1,142 @@
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 &#8635;");$("#conStatus").off();$("#conStatus").on({'click':restart});}
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 &#8635;");$("#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 "+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>");$('#'+data.id).on({'touchstart':function(e){e.preventDefault();buttonclick(data.id,true)}});$('#'+data.id).on({'touchend':function(e){e.preventDefault();buttonclick(data.id,false)}});break;case UI_SWITCHER:var label="<label id='sl"+data.id+"' class='switch checked'>";var input="<div class='in'><input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' ></div>";}
$('#row').append("<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
label+input+
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 "+
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>");$("#"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);}});$("#"+data.id).on({touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var label="<label id='sl"+data.id+"' class='switch checked'>";var input="<div class='in'><input type='checkbox' id='s"+
data.id+
"' onClick='switcher("+
data.id+
",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+
data.id+
"' onClick='switcher("+
data.id+
",null)' ></div>";}
$("#row").append("<div id='"+
data.id+
"' class='one columns card tcenter "+
colorClass(data.color)+
"'><h5>"+
data.label+
"</h5><hr/>"+
label+
input+
"</label>"+
"</div>");break;case UI_CPAD:center="<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='pc"+data.id+"'>OK</a>";case UI_PAD:$('#row').append("<div class='two columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
"</div>");break;case UI_CPAD:center="<a class='confirm' onmousedown='padclick(CENTER, "+
data.id+
", true)' onmouseup='padclick(CENTER, "+
data.id+
", false)' href='#' id='pc"+
data.id+
"'>OK</a>";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>"+
"<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){e.preventDefault();padclick(FOR,data.id,true)}});$('#pf'+data.id).on({'touchend':function(e){e.preventDefault();padclick(FOR,data.id,false)}});$('#pl'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(LEFT,data.id,true)}});$('#pl'+data.id).on({'touchend':function(e){e.preventDefault();padclick(LEFT,data.id,false)}});$('#pr'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(RIGHT,data.id,true)}});$('#pr'+data.id).on({'touchend':function(e){e.preventDefault();padclick(RIGHT,data.id,false)}});$('#pb'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(BACK,data.id,true)}});$('#pb'+data.id).on({'touchend':function(e){e.preventDefault();padclick(BACK,data.id,false)}});$('#pc'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(CENTER,data.id,true)}});$('#pc'+data.id).on({'touchend':function(e){e.preventDefault();padclick(CENTER,data.id,false)}});break;case UPDATE_LABEL:$('#l'+data.id).html(data.value);break;case UPDATE_SWITCHER:if(data.value=="0")
switcher(data.id,0);else
switcher(data.id,1);break;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>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(FOR,data.id,true);}});$("#pf"+data.id).on({touchend:function(e){e.preventDefault();padclick(FOR,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);}});$("#pl"+data.id).on({touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);}});$("#pr"+data.id).on({touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(BACK,data.id,true);}});$("#pb"+data.id).on({touchend:function(e){e.preventDefault();padclick(BACK,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);}});$("#pc"+data.id).on({touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:if(data.value=="0")switcher(data.id,0);else switcher(data.id,1);break;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>");$('#row').append("<script>"+
"rkmd_rangeSlider('#sl"+data.id+"');"+
"</script>");break;case UPDATE_SLIDER:slider_move($('#sl'+data.id),data.value,'100',false);break;case UI_NUMBER:$('#row').append("<div class='two columns card tcenter"+colorClass(data.color)+"'>"+
"<h5 id='"+data.id+"'>"+data.label+"</h5><hr />"+
"<input id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+
"</div>");break;case UPDATE_NUMBER:$('#num'+data.id).val(data.value);break;case UI_TEXT_INPUT:$('#row').append("<div class='two columns card tcenter"+colorClass(data.color)+"'>"+
"<h5 id='"+data.id+"'>"+data.label+"</h5><hr />"+
"<input id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+
"</div>");break;case UPDATE_TEXT_INPUT:$('#num'+data.id).val(data.value);break;default:console.error('Unknown type or event');break;}};}
function numberchange(number){var val=$('#num'+data.id).val();websock.send("nchange:"+number+":"+val);console.log(val);}
"</div>");$("#row").append("<script>"+"rkmd_rangeSlider('#sl"+data.id+"');"+"</script>");break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;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>");break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;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>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};}
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);}
function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case FOR:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case BACK: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);}}

7
examples/gui/gui.ino
View File

@ -17,6 +17,10 @@ const char *password = "";
long oldTime = 0;
bool switchi = false;
void numberCall(Control sender, int type) { Serial.println(sender.value); }
void textCall(Control sender, int type) { Serial.println(sender.value); }
void slider(Control sender, int type) { Serial.println(sender.value); }
void buttonCallback(Control sender, int type) {
@ -148,12 +152,15 @@ void setup(void) {
ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30");
ESPUI.slider("Slider two", &slider, COLOR_NONE, "100");
ESPUI.text("Text Test:", &textCall, COLOR_ALIZARIN, "a Text Field");
ESPUI.number("Numbertest", &numberCall, COLOR_ALIZARIN, 5, 0, 10);
/*
.begin loads and serves all files from PROGMEM directly.
If you want to serve the files from SPIFFS use .beginSPIFFS
(.prepareFileSystem has to be run in an empty sketch before)
*/
dnsServer.start(DNS_PORT, "*", apIP);
ESPUI.begin("ESPUI Control");
}

178
src/ESPUI.cpp
View File

@ -108,19 +108,19 @@ void writeFile(const char *path, const char *data) {
Serial.println("Failed to open file for writing");
return;
}
#if defined(ESP32)
#if defined(ESP32)
if (file.print(data)) {
Serial.println("File written");
} else {
Serial.println("Write failed");
}
#else
#else
if (file.print(FPSTR(data))) {
Serial.println("File written");
} else {
Serial.println("Write failed");
}
#endif
#endif
file.close();
}
@ -169,7 +169,7 @@ void ESPUIClass::prepareFileSystem() {
Serial.println("Done Initializing filesystem :-)");
#if defined(ESP32)
if(DEBUG_ESPUI) listDir("/", 1);
if (DEBUG_ESPUI) listDir("/", 1);
#endif
SPIFFS.end();
@ -180,18 +180,15 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
AwsEventType type, void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_DISCONNECT: {
if (DEBUG_ESPUI)
Serial.printf("Disconnected!\n");
if (DEBUG_ESPUI) Serial.printf("Disconnected!\n");
break;
}
case WS_EVT_PONG: {
if (DEBUG_ESPUI)
Serial.printf("Received PONG!\n");
if (DEBUG_ESPUI) Serial.printf("Received PONG!\n");
break;
}
case WS_EVT_ERROR: {
if (DEBUG_ESPUI)
Serial.printf("WebSocket Error!\n");
if (DEBUG_ESPUI) Serial.printf("WebSocket Error!\n");
break;
}
case WS_EVT_CONNECT: {
@ -213,12 +210,12 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
int id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
if (id >= ESPUI.cIndex) {
if (DEBUG_ESPUI)
Serial.println("Maleformated id in websocket message");
if (DEBUG_ESPUI) Serial.println("Maleformated id in websocket message");
return;
}
Control *c = ESPUI.controls[msg.substring(msg.lastIndexOf(':') + 1).toInt()];
Control *c =
ESPUI.controls[msg.substring(msg.lastIndexOf(':') + 1).toInt()];
if (msg.startsWith("bdown:")) {
c->callback(*c, B_DOWN);
@ -251,16 +248,22 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
ESPUI.updateSwitcher(c->id, false);
c->callback(*c, S_INACTIVE);
} else if (msg.startsWith("slvalue:")) {
int value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
int value =
msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
ESPUI.updateSlider(c->id, value, client->id());
c->callback(*c, SL_VALUE);
} else if (msg.startsWith("nvalue:")) {
int value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
int value =
msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
ESPUI.updateNumber(c->id, value, client->id());
c->callback(*c, N_VALUE);
} else if (msg.startsWith("tvalue:")) {
String value =
msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateText(c->id, value, client->id());
c->callback(*c, T_VALUE);
}
}
break;
} break;
default:
break;
}
@ -268,7 +271,9 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
int ESPUIClass::label(const char *label, int color, String value) {
if (labelExists(label)) {
if (DEBUG_ESPUI) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element " + String(label) +
" exists, skipping creating element!");
return -1;
}
@ -289,7 +294,9 @@ int ESPUIClass::label(const char *label, int color, String value) {
int ESPUIClass::graph(const char *label, int color) {
if (labelExists(label)) {
if (DEBUG_ESPUI) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element " + String(label) +
" exists, skipping creating element!");
return -1;
}
@ -304,7 +311,8 @@ int ESPUIClass::graph(const char *label, int color) {
}
// TODO: this still needs a range setting
int ESPUIClass::slider(const char *label, void (*callBack)(Control, int), int color, String value) {
int ESPUIClass::slider(const char *label, void (*callBack)(Control, int),
int color, String value) {
if (labelExists(label)) {
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element " + String(label) +
@ -353,7 +361,8 @@ int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
return cIndex - 1;
}
int ESPUIClass::switcher(const char *label, bool startState, void (*callBack)(Control, int), int color) {
int ESPUIClass::switcher(const char *label, bool startState,
void (*callBack)(Control, int), int color) {
if (labelExists(label)) {
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element " + String(label) +
@ -397,10 +406,12 @@ int ESPUIClass::pad(const char *label, bool center,
}
// TODO: min and max need to be saved, they also need to be sent to the frontend
int ESPUIClass::number(const char *label, void (*callBack)(Control, int), int color, int number, int min, int max) {
int ESPUIClass::number(const char *label, void (*callBack)(Control, int),
int color, int number, int min, int max) {
if (labelExists(label)) {
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
Serial.println("UI ERROR: Element " + String(label) +
" exists, skipping creating element!");
return -1;
}
@ -416,6 +427,27 @@ int ESPUIClass::number(const char *label, void (*callBack)(Control, int), int co
return cIndex - 1;
}
int ESPUIClass::text(const char *label, void (*callBack)(Control, int),
int color, String value) {
if (labelExists(label)) {
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element " + String(label) +
" exists, skipping creating element!");
return -1;
}
Control *newT = new Control();
newT->type = UI_TEXT_INPUT;
newT->label = label;
newT->color = color;
newT->value = value;
newT->callback = callBack;
newT->id = cIndex;
controls[cIndex] = newT;
cIndex++;
return cIndex - 1;
}
void ESPUIClass::print(int id, String value) {
if (id < cIndex && controls[id]->type == UI_LABEL) {
controls[id]->value = value;
@ -472,14 +504,17 @@ void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId) {
root.printTo(json);
textThem(json, clientId);
} else {
if (DEBUG_ESPUI) Serial.println(String("Error: ") + String(id) + String(" is no switcher"));
if (DEBUG_ESPUI)
Serial.println(String("Error: ") + String(id) +
String(" is no switcher"));
}
}
void ESPUIClass::updateSwitcher(String label, bool nValue, int clientId) {
if (!labelExists(label)) {
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
Serial.println("UI ERROR: Element does not " + String(label) +
" exist, cannot update!");
return;
}
updateSwitcher(getIdByLabel(label), nValue, clientId);
@ -497,18 +532,48 @@ void ESPUIClass::updateNumber(int id, int number, int clientId) {
root.printTo(json);
textThem(json, clientId);
} else {
if (DEBUG_ESPUI) Serial.println(String("Error: ") + String(id) + String(" is no number"));
if (DEBUG_ESPUI)
Serial.println(String("Error: ") + String(id) + String(" is no number"));
}
}
void ESPUIClass::updateNumber(String label, int number, int clientId) {
if (!labelExists(label)) {
if (DEBUG_ESPUI) Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element does not " + String(label) +
" exist, cannot update!");
return;
}
updateNumber(getIdByLabel(label), number, clientId);
}
void ESPUIClass::updateText(int id, String text, int clientId) {
if (id < cIndex && controls[id]->type == UI_TEXT_INPUT) {
controls[id]->value = text;
String json;
StaticJsonBuffer<200> jsonBuffer;
JsonObject &root = jsonBuffer.createObject();
root["type"] = UPDATE_TEXT_INPUT;
root["value"] = String(text);
root["id"] = String(id);
root.printTo(json);
textThem(json, clientId);
} else {
if (DEBUG_ESPUI)
Serial.println(String("Error: ") + String(id) + String(" is no number"));
}
}
void ESPUIClass::updateText(String label, String text, int clientId) {
if (!labelExists(label)) {
if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element does not " + String(label) +
" exist, cannot update!");
return;
}
updateText(getIdByLabel(label), text, clientId);
}
// This is a hacky workaround because ESPAsyncWebServer does not have a function
// like this and it's clients array is private
void ESPUIClass::textThem(String text, int clientId) {
@ -526,16 +591,14 @@ void ESPUIClass::textThem(String text, int clientId) {
int ESPUIClass::getIdByLabel(String label) {
for (int i = 0; i < cIndex; i++) {
if (String(controls[i]->label) == label)
return i;
if (String(controls[i]->label) == label) return i;
}
return -1; // failed, nonexistant
}
bool ESPUIClass::labelExists(String label) {
for (int i = 0; i < cIndex; i++) {
if (String(controls[i]->label) == label)
return true;
if (String(controls[i]->label) == label) return true;
}
return false;
}
@ -562,20 +625,21 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
}
void ESPUIClass::beginSPIFFS(const char *_title) {
ui_title = _title;
server = new AsyncWebServer(80);
ws = new AsyncWebSocket("/ws");
if (!SPIFFS.begin()) {
Serial.println("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
Serial.println(
"SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
"PREPARE YOUR ESP!!!!!!!");
return;
}
listDir("/", 1);
if (!SPIFFS.exists("/index.htm")) {
Serial.println("Please read the README!!!!!!!, Make sure to "
Serial.println(
"Please read the README!!!!!!!, Make sure to "
"ESPUI.prepareFileSystem() once in an empty sketch");
return;
}
@ -586,27 +650,25 @@ void ESPUIClass::beginSPIFFS(const char *_title) {
// Heap for general Servertest
server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In SPIFFSmode");
request->send(200, "text/plain",
String(ESP.getFreeHeap()) + " In SPIFFSmode");
});
server->onNotFound(
[](AsyncWebServerRequest *request) {
request->send(404);
});
[](AsyncWebServerRequest *request) { request->send(404); });
server->on("/zepto.js", HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(
200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
server->begin();
if (DEBUG_ESPUI)
Serial.println("UI Initialized");
if (DEBUG_ESPUI) Serial.println("UI Initialized");
}
void ESPUIClass::begin(const char *_title) {
ui_title = _title;
server = new AsyncWebServer(80);
ws = new AsyncWebSocket("/ws");
@ -615,26 +677,31 @@ void ESPUIClass::begin(const char *_title) {
server->addHandler(ws);
server->on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", HTML_INDEX);
AsyncWebServerResponse *response =
request->beginResponse_P(200, "text/html", HTML_INDEX);
request->send(response);
});
// Javascript files
server->on("/js/zepto.min.js", HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(
200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
server->on("/js/controls.js", HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
AsyncWebServerResponse *response =
request->beginResponse_P(200, "application/javascript",
JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
server->on("/js/slider.js", HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(
200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
@ -642,30 +709,31 @@ void ESPUIClass::begin(const char *_title) {
// Stylesheets
server->on("/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(
200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
server->on("/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
server->on(
"/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebServerResponse *response = request->beginResponse_P(
200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
// Heap for general Servertest
server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(200, "text/plain", String(ESP.getFreeHeap())+ " In Memorymode");
request->send(200, "text/plain",
String(ESP.getFreeHeap()) + " In Memorymode");
});
server->onNotFound(
[](AsyncWebServerRequest *request) {
request->send(404);
});
[](AsyncWebServerRequest *request) { request->send(404); });
server->begin();
if (DEBUG_ESPUI)
Serial.println("UI Initialized");
if (DEBUG_ESPUI) Serial.println("UI Initialized");
}
ESPUIClass ESPUI;

102
src/ESPUI.h
View File

@ -10,20 +10,20 @@
#if defined(ESP32)
#include "SPIFFS.h"
#include "WiFi.h"
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "SPIFFS.h"
#include "WiFi.h"
#else
#include <ArduinoOTA.h>
#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <ArduinoOTA.h>
#include <FS.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Hash.h>
#include <SPIFFSEditor.h>
#define FILE_WRITE "w"
@ -53,7 +53,6 @@ typedef struct Control {
#define UI_PAD 4
#define UI_CPAD 5
#define UI_SLIDER 8
#define UPDATE_SLIDER 9
@ -67,7 +66,6 @@ typedef struct Control {
#define CLEAR_GRAPH 15
#define ADD_GRAPH_POINT 16
// Values
#define B_DOWN -1
#define B_UP 1
@ -88,6 +86,7 @@ typedef struct Control {
#define SL_VALUE 8
#define N_VALUE 9
#define T_VALUE 10
// Colors
#define COLOR_TURQUOISE 0
@ -99,60 +98,69 @@ typedef struct Control {
#define COLOR_ALIZARIN 6
#define COLOR_NONE 6
class ESPUIClass {
public:
void begin(const char *_title); // Setup servers and page in Memorymode
void beginSPIFFS(const char *_title); // Setup servers and page in SPIFFSmode
public:
void begin(const char *_title); // Setup servers and page in Memorymode
void beginSPIFFS(const char *_title); // Setup servers and page in SPIFFSmode
void prepareFileSystem(); // Initially preps the filesystem and loads a lot
// of stuff into SPIFFS
void list();
// Creating Elements
void prepareFileSystem(); // Initially preps the filesystem and loads a lot of stuff into SPIFFS
void list();
// Creating Elements
int button(const char *label, void (*callBack)(Control, int), int color,
String value = ""); // Create Event Button
int switcher(const char *label, bool startState,
void (*callBack)(Control, int),
int color); // Create Toggle Button
int pad(const char *label, bool centerButton, void (*callBack)(Control, int),
int color); // Create Pad Control
int slider(const char *label, void (*callBack)(Control, int), int color,
String value); // Create Slider Control
int number(const char *label, void (*callBack)(Control, int), int color,
int number, int min, int max); // Create a Number Input Control
int text(const char *label, void (*callBack)(Control, int), int color,
String value = ""); // Create a Text Input Control
int button(const char *label, void (*callBack)(Control, int), int color, String value = ""); // Create Event Button
int switcher(const char *label, bool startState, void (*callBack)(Control, int), int color); // Create Toggle Button
int pad(const char *label, bool centerButton, void (*callBack)(Control, int), int color); // Create Pad Control
int slider(const char *label, void (*callBack)(Control, int), int color, String value); // Create Slider Control
int number(const char *label, void (*callBack)(Control, int), int color, int number, int min, int max); // Create a Number Input Control
// Output only
int label(const char *label, int color, String value = ""); // Create Label
int graph(const char *label, int color); // Create Graph display
// Output only
int label(const char *label, int color, String value = ""); // Create Label
int graph(const char *label, int color); // Create Graph display
// Update Elements
void print(int id, String value);
void print(String label, String value);
// Update Elements
void print(int id, String value);
void print(String label, String value);
void updateSwitcher(int id, bool nValue, int clientId = -1);
void updateSwitcher(String label, bool nValue, int clientId = -1);
void updateSwitcher(int id, bool nValue, int clientId = -1);
void updateSwitcher(String label, bool nValue, int clientId = -1);
void updateSlider(int id, int nValue, int clientId = -1);
void updateSlider(String label, int nValue, int clientId = -1);
void updateSlider(int id, int nValue, int clientId = -1);
void updateSlider(String label, int nValue, int clientId = -1);
void updateNumber(int id, int nValue, int clientId = -1);
void updateNumber(String label, int nValue, int clientId = -1);
void updateNumber(int id, int nValue, int clientId = -1);
void updateNumber(String label, int nValue, int clientId = -1);
void updateText(int id, String nValue, int clientId = -1);
void updateText(String label, String nValue, int clientId = -1);
void clearGraph(int id, int clientId = -1);
void clearGraph(String label, int clientId = -1);
void clearGraph(int id, int clientId = -1);
void clearGraph(String label, int clientId = -1);
void addGraphPoint(int id, int nValue, int clientId = -1);
void addGraphPoint(String label, int nValue, int clientId = -1);
void addGraphPoint(int id, int nValue, int clientId = -1);
void addGraphPoint(String label, int nValue, int clientId = -1);
void textThem(String text, int clientId);
void textThem(String text, int clientId);
// Variables ---
const char *ui_title = "ESPUI"; // Store UI Title and Header Name
int cIndex = 0; // Control index
Control *controls[25];
void jsonDom(AsyncWebSocketClient *client);
int getIdByLabel(String label);
bool labelExists(String label);
// Variables ---
const char *ui_title = "ESPUI"; // Store UI Title and Header Name
int cIndex = 0; // Control index
Control *controls[25];
void jsonDom(AsyncWebSocketClient *client);
int getIdByLabel(String label);
bool labelExists(String label);
private:
AsyncWebServer *server;
AsyncWebSocket *ws;
private:
AsyncWebServer *server;
AsyncWebSocket *ws;
};
extern ESPUIClass ESPUI;

165
src/dataControlsJS.h
View File

File diff suppressed because one or more lines are too long

28
src/dataIndexHTML.h
View File

@ -1,27 +1,5 @@
const char HTML_INDEX[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"
/>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/zepto.min.js"></script>
<script src="/js/slider.js"></script>
<script src="/js/controls.js"></script>
</head>
<body onload="javascript:start();">
<div>
<h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
<hr />
<div class="container">
<div id="row" class="row u-full-width">
</div>
</div>
</body>
</html>
<!DOCTYPE html><html> <head><meta charset=utf-8><title>Control</title><meta name=viewport content="width=device-width, initial-scale=1"><link rel="shortcut icon" href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC><link rel=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/controls.js></script></head> <body onload=javascript:start();> <div> <h4><div id=mainHeader>Control</div> <span id=conStatus class=label>Offline</span></h4></div> <hr> <div class=container> <div id=row class="row u-full-width"> </div> </div> </body> </html>
)=====";
const uint8_t HTML_INDEX_GZIP[863] PROGMEM = { 31,139,8,0,56,43,252,91,2,255,133,84,109,115,170,56,20,254,43,172,159,118,231,222,22,17,107,219,123,197,153,160,96,171,34,2,130,226,183,0,169,4,195,75,73,16,245,215,111,34,189,179,187,179,51,187,204,36,231,237,57,207,57,132,112,198,191,205,236,233,54,220,24,82,202,114,50,25,223,119,105,156,34,152,76,198,57,98,80,138,83,88,83,196,180,134,125,60,188,76,198,12,51,130,38,211,178,96,117,73,198,114,103,118,200,2,230,72,59,99,212,86,101,205,164,152,67,80,193,180,94,139,19,150,106,9,58,227,24,61,220,141,239,18,46,48,195,144,60,208,24,18,164,41,189,201,152,224,226,36,213,136,104,61,154,242,244,184,97,18,230,20,61,41,173,209,135,150,64,6,127,224,28,30,145,92,21,199,159,17,164,104,52,252,142,3,221,118,219,254,114,126,44,1,127,214,158,159,26,254,145,107,186,48,129,51,5,150,144,229,202,121,221,10,69,159,39,250,214,55,0,88,205,55,83,249,146,234,14,119,78,245,204,51,23,107,30,29,45,120,238,241,157,59,55,130,111,10,70,124,79,68,166,93,9,214,81,206,55,83,157,198,13,49,94,4,223,198,212,173,192,240,239,88,37,216,185,3,229,211,25,16,236,170,230,167,88,158,26,52,174,26,112,189,147,246,64,201,189,129,210,120,247,24,95,92,95,12,230,75,135,231,113,60,199,152,162,174,46,171,243,230,89,240,27,133,235,109,137,5,244,18,168,167,141,222,222,94,240,211,242,134,203,203,113,184,14,98,95,109,140,197,219,253,77,119,139,149,219,119,0,6,126,226,221,29,164,245,76,114,19,103,162,180,0,204,146,88,119,48,142,208,61,150,244,61,95,49,245,111,134,105,164,177,97,125,123,171,194,86,28,132,30,122,190,171,7,122,182,77,67,121,49,163,224,56,53,60,54,36,213,94,62,191,102,43,231,176,24,125,154,175,76,61,165,224,154,41,151,189,191,140,156,161,30,148,237,172,253,180,195,163,113,57,157,118,67,28,142,200,6,154,253,145,251,105,189,132,239,204,110,220,200,130,183,209,37,139,104,67,103,96,39,39,117,69,244,227,240,57,219,140,94,71,241,222,120,137,54,64,65,254,12,45,7,162,187,197,222,53,119,111,238,41,220,187,196,206,215,215,195,206,236,31,28,112,181,102,134,186,218,2,101,181,53,134,193,236,253,102,103,160,111,103,254,101,121,3,87,174,183,23,227,233,21,181,226,83,4,125,55,72,251,135,57,207,219,86,44,26,184,213,161,56,1,43,3,151,245,181,223,174,189,254,197,54,157,171,117,43,219,245,172,84,44,143,182,86,86,182,214,202,223,94,226,88,180,112,72,140,32,76,204,245,249,80,184,106,184,95,16,240,150,168,201,245,169,138,114,118,11,7,102,123,240,158,206,113,142,162,231,172,133,247,35,53,136,185,61,121,141,147,79,167,127,187,201,148,93,9,162,41,66,172,187,196,114,76,169,92,148,117,14,9,190,161,71,110,253,31,248,238,236,128,52,174,113,197,36,90,199,154,156,81,249,134,42,86,62,230,184,120,204,120,80,238,162,255,66,81,130,19,84,255,39,36,238,254,100,250,79,144,124,31,0,210,56,42,147,171,84,22,164,132,137,150,193,51,236,226,63,40,131,53,251,253,143,159,28,145,224,179,152,23,195,137,208,36,156,104,57,196,197,27,207,70,245,95,83,162,3,209,10,22,2,193,75,122,12,178,134,74,49,129,148,106,4,70,136,76,236,143,15,126,24,136,247,192,97,162,3,78,249,149,152,214,93,161,47,188,104,153,23,65,191,188,156,178,46,219,175,96,79,168,205,195,71,67,72,55,108,122,28,245,197,243,75,136,183,18,178,27,118,127,2,173,245,31,70,3,5,0,0 };

4
src/dataNormalizeCSS.h
View File

@ -1,5 +1,5 @@
const char CSS_NORMALIZE[] PROGMEM = R"=====(
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
)=====";
const uint8_t CSS_NORMALIZE_GZIP[865] PROGMEM = { 31,139,8,0,0,0,0,0,0,3,149,84,93,111,219,58,12,125,223,175,8,90,12,184,3,228,194,237,221,214,65,198,126,73,144,7,90,162,109,45,250,130,36,167,201,12,255,247,81,182,227,36,93,122,129,139,60,196,166,37,242,240,156,67,118,201,232,161,113,54,21,13,24,165,79,60,130,141,69,196,160,154,170,48,177,72,120,76,69,84,191,177,0,249,171,143,137,63,151,229,231,170,120,195,122,175,210,253,175,99,237,228,105,48,16,90,101,121,57,66,72,74,104,100,16,149,68,38,49,129,210,145,53,170,21,224,147,114,54,63,246,1,89,227,92,194,192,58,4,153,255,218,224,122,207,12,40,203,12,218,158,89,56,176,136,98,186,17,123,67,233,79,131,84,209,107,56,241,90,59,177,31,161,151,202,49,1,246,0,145,249,224,218,128,49,178,3,85,117,235,73,101,181,178,88,76,23,170,3,102,104,160,11,208,170,181,188,134,136,249,235,156,136,91,151,254,217,10,98,38,56,29,119,95,214,20,214,89,172,58,84,109,151,168,187,109,167,164,68,187,99,9,13,125,78,120,115,110,132,161,6,177,207,189,88,89,8,167,93,224,41,16,195,30,2,218,52,2,7,234,232,64,228,240,206,17,156,193,245,41,67,200,180,213,117,216,38,149,52,238,134,218,5,226,164,168,93,74,206,240,103,127,220,72,122,68,57,214,44,18,60,219,206,10,190,205,160,106,167,229,40,27,59,7,99,58,105,228,42,81,143,98,236,158,151,32,73,198,95,208,84,139,74,79,223,95,209,108,202,145,94,247,87,136,249,99,211,148,213,12,251,177,44,203,49,26,208,250,42,197,15,82,59,246,132,162,247,87,209,215,111,159,171,137,230,51,75,149,119,81,101,229,120,64,226,136,26,254,144,251,156,41,57,207,139,242,233,27,154,156,124,88,218,166,200,75,14,41,211,46,132,16,75,241,208,78,66,241,64,238,249,50,100,14,27,237,222,248,172,202,56,91,235,236,197,103,234,241,107,233,143,99,23,134,194,184,223,68,232,49,35,86,182,229,89,104,82,36,135,170,15,194,171,230,158,82,174,149,160,79,110,20,142,172,189,175,37,217,14,89,4,227,111,70,202,56,235,72,113,129,108,125,170,46,108,17,170,177,238,169,69,203,148,245,125,98,206,167,217,252,68,9,25,158,229,33,35,187,192,48,11,161,108,71,211,153,166,12,235,203,58,109,115,166,11,188,131,138,170,214,120,174,48,167,28,166,185,157,140,216,184,96,102,171,46,39,58,90,8,155,9,200,54,157,60,254,124,152,227,15,59,118,29,164,209,194,244,46,70,90,25,69,193,225,188,29,192,123,4,42,34,144,207,73,42,209,135,72,45,120,167,136,214,176,148,220,210,196,0,97,148,187,235,226,107,112,88,46,73,108,160,215,105,185,196,249,164,96,227,68,31,11,101,45,173,140,233,222,223,241,213,44,149,7,41,179,168,229,56,29,29,174,61,106,137,7,208,227,117,63,162,67,177,39,225,223,183,14,180,29,30,242,80,174,46,89,231,243,248,190,198,114,199,246,166,198,240,176,35,116,11,55,19,180,34,122,101,139,107,241,63,60,79,139,225,246,252,176,0,159,252,119,35,3,113,46,186,251,50,100,221,27,133,90,86,255,229,255,243,197,255,53,30,119,49,92,240,207,145,66,100,24,250,94,203,31,94,145,40,92,128,188,61,238,117,52,89,119,106,137,12,121,150,58,111,200,232,180,146,155,71,81,230,223,58,31,155,23,127,209,232,233,95,218,39,155,167,239,47,211,223,107,94,46,26,91,180,242,158,101,214,41,188,157,252,243,176,254,189,129,83,182,239,121,117,211,232,106,240,17,249,249,161,90,62,228,109,176,20,144,44,117,195,165,224,167,63,69,20,17,138,155,7,0,0 };
const uint8_t CSS_NORMALIZE_GZIP[861] PROGMEM = { 31,139,8,0,56,43,252,91,2,255,149,84,237,142,155,58,16,125,149,104,171,74,183,146,137,216,237,199,94,25,221,39,137,242,99,176,7,112,227,47,217,38,155,20,241,238,119,12,132,36,219,108,165,254,2,6,123,230,204,57,103,166,75,70,15,141,179,169,104,192,40,125,230,17,108,44,34,6,213,84,133,137,69,194,83,42,162,250,133,5,200,159,125,76,252,185,44,63,87,197,27,214,7,149,30,255,29,107,39,207,131,129,208,42,203,203,17,66,82,66,35,131,168,36,50,137,9,148,142,172,81,173,0,159,148,179,249,181,15,200,26,231,18,6,214,33,200,252,104,131,235,61,51,160,44,51,104,123,102,225,200,34,138,233,70,236,13,165,63,15,82,69,175,225,204,107,237,196,97,132,94,42,199,4,216,35,68,230,131,107,3,198,200,142,84,213,173,39,149,213,202,98,49,93,168,142,152,161,129,46,64,171,214,242,26,34,230,191,115,34,110,93,250,103,39,136,153,224,116,220,127,89,83,88,103,177,234,80,181,93,162,238,118,157,146,18,237,158,37,52,244,59,225,221,185,17,134,26,196,33,247,98,101,33,156,118,129,167,64,12,123,8,104,211,8,28,168,163,35,145,195,59,71,112,6,215,167,12,33,211,86,215,97,151,84,210,184,31,106,23,136,147,162,118,41,57,195,159,253,105,35,233,21,229,88,179,72,240,108,59,43,248,54,131,170,157,150,163,108,236,28,140,233,172,145,171,68,61,138,177,123,94,130,36,25,127,65,83,45,42,109,127,188,162,217,148,35,125,30,110,16,243,79,77,83,86,51,236,79,101,89,142,209,128,214,55,41,254,37,181,99,79,40,122,127,19,125,253,254,185,154,104,190,176,84,121,23,85,86,142,7,36,142,168,225,15,185,207,153,146,243,188,216,126,71,147,115,15,75,215,197,246,37,71,148,105,23,58,136,163,120,108,39,153,120,32,239,124,25,50,131,141,118,111,124,214,100,156,141,117,113,226,51,117,248,173,244,167,177,11,67,97,220,47,162,243,148,241,42,219,242,44,51,233,145,67,213,7,225,85,113,79,41,215,74,208,39,55,10,71,198,62,212,146,76,135,44,130,241,119,3,101,156,117,164,183,64,182,190,85,87,174,8,213,88,247,212,161,101,202,250,62,49,231,211,108,125,34,132,236,206,242,136,145,89,96,152,101,80,182,163,217,76,83,134,245,99,157,181,57,211,21,222,81,69,85,107,188,84,152,83,14,211,212,78,54,108,92,48,179,81,151,19,29,173,131,205,4,100,151,206,30,255,123,154,227,79,123,118,27,164,193,194,244,46,70,82,25,69,193,225,178,27,192,123,4,42,34,144,207,73,42,209,135,72,45,120,167,136,214,176,148,220,209,188,0,97,148,251,219,226,107,112,88,46,73,108,160,215,105,185,196,249,164,96,227,68,31,11,101,45,45,140,233,222,239,241,213,44,149,7,41,179,168,229,56,29,29,110,29,106,137,7,208,227,109,63,162,67,113,32,225,223,183,14,180,27,158,242,72,174,46,89,167,243,244,190,198,114,199,246,166,198,240,180,39,116,11,55,19,180,34,122,101,139,91,241,63,60,79,107,225,254,252,176,0,159,252,119,39,3,113,46,186,199,50,100,221,27,133,90,86,127,242,255,229,226,95,141,199,67,12,87,252,115,164,16,25,134,126,212,242,135,87,36,10,23,32,239,142,71,29,77,214,157,90,34,67,94,164,206,251,49,58,173,228,38,42,77,147,176,142,199,230,197,95,37,218,126,165,117,178,217,254,120,153,30,175,121,183,104,108,209,202,71,142,89,135,240,126,240,47,179,250,251,250,77,217,189,151,189,77,147,171,193,71,228,151,151,106,249,145,151,193,82,64,178,212,13,215,130,255,3,4,241,118,208,151,7,0,0 };

2
src/dataSliderJS.h
View File

@ -11,4 +11,4 @@ var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend
function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round(newW/sliderW*100));var slider_fill=parents.find('.slider-fill');var slider_handle=parents.find('.slider-handle');var range=parents.find('input[type="range"]');slider_fill.css('width',slider_new_val+'%');slider_handle.css({'left':slider_new_val+'%','transition':'none','-webkit-transition':'none','-moz-transition':'none'});range.val(slider_new_val);if(parents.find('.slider-handle span').text()!=slider_new_val){parents.find('.slider-handle span').text(slider_new_val);var number=parents.attr('id').substring(2);if(send)websock.send('slvalue:'+slider_new_val+':'+number);}}
)=====";
const uint8_t JS_SLIDER_GZIP[865] PROGMEM = { 31,139,8,0,79,67,211,91,2,255,237,86,207,111,155,48,20,190,247,175,72,163,174,134,149,184,89,143,33,238,101,211,164,29,118,218,164,77,170,170,200,1,83,172,16,131,176,73,182,209,252,239,123,254,1,1,66,170,110,167,29,118,194,246,251,252,252,222,247,62,243,156,84,34,82,60,23,147,114,179,141,87,37,21,79,236,75,198,99,86,122,146,101,44,82,121,233,215,59,90,78,96,150,4,210,88,86,123,30,171,180,153,228,73,34,153,10,162,170,20,202,173,125,224,50,42,153,98,129,113,231,22,67,237,129,92,29,221,134,93,111,68,91,177,25,122,173,197,186,182,38,59,246,124,156,177,68,133,253,115,12,98,176,134,25,141,82,47,113,217,121,60,216,249,181,137,17,66,80,41,151,126,104,102,152,22,5,19,177,215,223,188,82,219,34,131,195,252,208,100,64,44,52,225,0,68,92,20,149,122,80,63,11,70,166,198,58,125,68,77,196,61,32,182,107,173,113,149,240,44,35,118,220,135,204,180,229,136,75,169,136,51,54,142,180,182,35,54,163,107,118,198,169,49,1,82,87,207,4,186,218,209,140,20,180,148,236,147,80,158,89,194,176,164,211,236,68,136,35,41,61,100,42,129,130,118,223,13,122,51,12,208,2,117,57,206,225,76,4,46,42,89,80,129,124,172,216,15,119,180,70,251,225,193,15,109,121,133,135,182,121,37,89,156,239,197,68,229,85,148,74,69,75,112,61,76,61,104,107,202,252,154,39,30,195,235,74,169,92,16,66,238,252,26,170,7,37,152,36,52,147,44,60,92,232,220,33,99,38,148,108,234,142,221,28,136,210,146,159,181,85,50,42,239,74,210,1,91,85,118,0,78,153,13,162,47,78,141,139,82,22,109,236,117,106,81,47,232,7,115,136,103,17,115,73,215,25,139,33,24,72,172,235,130,16,85,86,236,36,189,38,37,26,199,239,51,170,203,193,229,140,2,59,59,230,18,218,230,59,246,177,34,93,206,44,39,79,236,59,97,216,124,159,159,161,150,169,62,39,254,170,137,103,242,97,254,104,77,221,156,5,219,183,196,128,105,214,163,66,7,60,196,45,73,151,206,235,235,203,83,4,154,35,223,175,221,178,142,213,115,100,5,67,104,255,223,99,216,8,15,7,19,95,85,12,50,108,104,129,208,60,171,154,18,238,123,191,12,184,195,20,46,153,62,123,132,66,123,64,227,131,212,70,162,26,187,176,196,6,70,169,221,5,131,168,138,133,14,202,90,225,247,98,102,135,240,202,139,243,168,218,66,20,190,22,252,49,180,215,223,130,255,242,31,164,119,34,78,39,234,127,65,158,23,127,160,206,81,165,253,133,142,14,97,115,214,100,188,167,153,251,111,198,4,45,99,190,155,68,90,246,100,106,209,211,123,116,115,49,178,110,90,212,244,126,121,11,150,115,16,27,7,128,78,77,166,19,128,69,119,129,251,249,242,214,124,173,179,142,75,59,10,93,149,77,140,64,226,32,159,126,29,160,0,223,28,247,240,5,138,220,107,229,88,158,94,211,251,76,85,138,203,188,2,37,234,157,183,110,231,219,119,243,185,223,83,184,233,213,131,63,70,191,89,119,192,174,97,143,195,219,142,221,246,225,215,220,136,179,29,185,159,217,185,182,92,219,190,188,56,69,7,72,193,33,146,107,70,209,2,137,92,64,75,69,179,61,91,111,184,154,141,218,182,249,175,17,195,193,61,142,204,19,162,127,142,185,191,47,177,49,233,190,6,252,75,50,216,94,191,122,239,240,92,205,177,168,182,107,120,138,53,62,168,82,37,144,12,127,21,44,171,181,84,37,23,79,222,157,9,209,232,5,50,151,121,180,193,122,2,207,148,12,252,84,108,129,110,134,212,193,146,245,172,251,206,111,101,146,232,206,54,11,0,0 };
const uint8_t JS_SLIDER_GZIP[865] PROGMEM = { 31,139,8,0,56,43,252,91,2,255,237,86,207,111,155,48,20,190,247,175,72,163,174,134,149,184,89,143,33,238,101,211,164,29,118,218,164,77,170,170,200,1,83,172,16,131,176,73,182,209,252,239,123,254,1,1,66,170,110,167,29,118,194,246,251,252,252,222,247,62,243,156,84,34,82,60,23,147,114,179,141,87,37,21,79,236,75,198,99,86,122,146,101,44,82,121,233,215,59,90,78,96,150,4,210,88,86,123,30,171,180,153,228,73,34,153,10,162,170,20,202,173,125,224,50,42,153,98,129,113,231,22,67,237,129,92,29,221,134,93,111,68,91,177,25,122,173,197,186,182,38,59,246,124,156,177,68,133,253,115,12,98,176,134,25,141,82,47,113,217,121,60,216,249,181,137,17,66,80,41,151,126,104,102,152,22,5,19,177,215,223,188,82,219,34,131,195,252,208,100,64,44,52,225,0,68,92,20,149,122,80,63,11,70,166,198,58,125,68,77,196,61,32,182,107,173,113,149,240,44,35,118,220,135,204,180,229,136,75,169,136,51,54,142,180,182,35,54,163,107,118,198,169,49,1,82,87,207,4,186,218,209,140,20,180,148,236,147,80,158,89,194,176,164,211,236,68,136,35,41,61,100,42,129,130,118,223,13,122,51,12,208,2,117,57,206,225,76,4,46,42,89,80,129,124,172,216,15,119,180,70,251,225,193,15,109,121,133,135,182,121,37,89,156,239,197,68,229,85,148,74,69,75,112,61,76,61,104,107,202,252,154,39,30,195,235,74,169,92,16,66,238,252,26,170,7,37,152,36,52,147,44,60,92,232,220,33,99,38,148,108,234,142,221,28,136,210,146,159,181,85,50,42,239,74,210,1,91,85,118,0,78,153,13,162,47,78,141,139,82,22,109,236,117,106,81,47,232,7,115,136,103,17,115,73,215,25,139,33,24,72,172,235,130,16,85,86,236,36,189,38,37,26,199,239,51,170,203,193,229,140,2,59,59,230,18,218,230,59,246,177,34,93,206,44,39,79,236,59,97,216,124,159,159,161,150,169,62,39,254,170,137,103,242,97,254,104,77,221,156,5,219,183,196,128,105,214,163,66,7,60,196,45,73,151,206,235,235,203,83,4,154,35,223,175,221,178,142,213,115,100,5,67,104,255,223,99,216,8,15,7,19,95,85,12,50,108,104,129,208,60,171,154,18,238,123,191,12,184,195,20,46,153,62,123,132,66,123,64,227,131,212,70,162,26,187,176,196,6,70,169,221,5,131,168,138,133,14,202,90,225,247,98,102,135,240,202,139,243,168,218,66,20,190,22,252,49,180,215,223,130,255,242,31,164,119,34,78,39,234,127,65,158,23,127,160,206,81,165,253,133,142,14,97,115,214,100,188,167,153,251,111,198,4,45,99,190,155,68,90,246,100,106,209,211,123,116,115,49,178,110,90,212,244,126,121,11,150,115,16,27,7,128,78,77,166,19,128,69,119,129,251,249,242,214,124,173,179,142,75,59,10,93,149,77,140,64,226,32,159,126,29,160,0,223,28,247,240,5,138,220,107,229,88,158,94,211,251,76,85,138,203,188,2,37,234,157,183,110,231,219,119,243,185,223,83,184,233,213,131,63,70,191,89,119,192,174,97,143,195,219,142,221,246,225,215,220,136,179,29,185,159,217,185,182,92,219,190,188,56,69,7,72,193,33,146,107,70,209,2,137,92,64,75,69,179,61,91,111,184,154,141,218,182,249,175,17,195,193,61,142,204,19,162,127,142,185,191,47,177,49,233,190,6,252,75,50,216,94,191,122,239,240,92,205,177,168,182,107,120,138,53,62,168,82,37,144,12,127,21,44,171,181,84,37,23,79,222,157,9,209,232,5,50,151,121,180,193,122,2,207,148,12,252,84,108,129,110,134,212,193,146,245,172,251,206,111,101,146,232,206,54,11,0,0 };

2
src/dataStyleCSS.h
View File

File diff suppressed because one or more lines are too long

8
src/dataZeptoJS.h
View File

File diff suppressed because one or more lines are too long