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

#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}

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

@ -14,8 +14,6 @@ const UI_CPAD = 5;
const UI_SLIDER = 8; const UI_SLIDER = 8;
const UPDATE_SLIDER = 9; const UPDATE_SLIDER = 9;
const UI_NUMBER = 10; const UI_NUMBER = 10;
const UPDATE_NUMBER = 11; const UPDATE_NUMBER = 11;
@ -43,323 +41,441 @@ const C_ALIZARIN = 6;
const C_NONE = 7; const C_NONE = 7;
function colorClass(colorId) { function colorClass(colorId) {
colorId = Number(colorId); colorId = Number(colorId);
switch (colorId) { switch (colorId) {
case C_TURQUOISE: case C_TURQUOISE:
return "turquoise"; return "turquoise";
break; break;
case C_EMERALD: case C_EMERALD:
return "emerald"; return "emerald";
break; break;
case C_PETERRIVER: case C_PETERRIVER:
return "peterriver"; return "peterriver";
break; break;
case C_WETASPHALT: case C_WETASPHALT:
return "wetasphalt"; return "wetasphalt";
break; break;
case C_SUNFLOWER: case C_SUNFLOWER:
return "sunflower"; return "sunflower";
break; break;
case C_CARROT: case C_CARROT:
return "carrot" return "carrot";
break; break;
case C_ALIZARIN: case C_ALIZARIN:
return "alizarin" return "alizarin";
break; break;
case C_NONE: case C_NONE:
return "" return "";
break; break;
default: default:
return ""; return "";
} }
} }
var websock; var websock;
var websockConnected = false; var websockConnected = false;
function restart() { function restart() {
$(document).add('*').off(); $(document)
$("#row").html(""); .add("*")
websock.close(); .off();
start(); $("#row").html("");
websock.close();
start();
} }
function conStatusError() { function conStatusError() {
websockConnected = false; websockConnected = false;
$("#conStatus").removeClass("color-green"); $("#conStatus").removeClass("color-green");
$("#conStatus").addClass("color-red"); $("#conStatus").addClass("color-red");
$("#conStatus").html("Error / No Connection ↻"); $("#conStatus").html("Error / No Connection ↻");
$("#conStatus").off(); $("#conStatus").off();
$("#conStatus").on({ $("#conStatus").on({
'click': restart click: restart
}); });
} }
function handleVisibilityChange() { function handleVisibilityChange() {
if (!websockConnected && !document.hidden) { if (!websockConnected && !document.hidden) {
restart(); restart();
} }
} }
function start() { function start() {
document.addEventListener("visibilitychange", handleVisibilityChange, false); document.addEventListener("visibilitychange", handleVisibilityChange, false);
websock = new WebSocket('ws://' + window.location.hostname + '/ws'); websock = new WebSocket("ws://" + window.location.hostname + "/ws");
websock.onopen = function(evt) { websock.onopen = function(evt) {
console.log('websock open'); console.log("websock open");
$("#conStatus").addClass("color-green"); $("#conStatus").addClass("color-green");
$("#conStatus").text("Connected"); $("#conStatus").text("Connected");
websockConnected = true; websockConnected = true;
}; };
websock.onclose = function(evt) { websock.onclose = function(evt) {
console.log('websock close'); console.log("websock close");
conStatusError(); conStatusError();
}; };
websock.onerror = function(evt) { websock.onerror = function(evt) {
console.log(evt); console.log(evt);
conStatusError(); conStatusError();
}; };
websock.onmessage = function(evt) { websock.onmessage = function(evt) {
console.log(evt); console.log(evt);
var data = JSON.parse(evt.data); var data = JSON.parse(evt.data);
var e = document.body; var e = document.body;
var center = ""; var center = "";
switch (data.type) { switch (data.type) {
case UI_TITEL: case UI_TITEL:
document.title = data.label; document.title = data.label;
$('#mainHeader').html(data.label); $("#mainHeader").html(data.label);
break; break;
case UI_LABEL: 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(
break; "<div class='two columns card tcenter " +
case UI_BUTTON: colorClass(data.color) +
$('#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>"); "'><h5 id='" +
$('#' + data.id).on({ data.id +
'touchstart': function(e) { "'>" +
e.preventDefault(); data.label +
buttonclick(data.id, true) "</h5><hr /><span id='l" +
} data.id +
}); "' class='label label-wrap'>" +
$('#' + data.id).on({ data.value +
'touchend': function(e) { "</span></div>"
e.preventDefault(); );
buttonclick(data.id, false) break;
} case UI_BUTTON:
}); $("#row").append(
break; "<div class='one columns card tcenter " +
case UI_SWITCHER: colorClass(data.color) +
var label = "<label id='sl" + data.id + "' class='switch checked'>"; "'><h5>" +
var input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked></div>"; data.label +
if (data.value == "0") { "</h5><hr/><button onmousedown='buttonclick(" +
label = "<label id='sl" + data.id + "' class='switch'>"; data.id +
input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' ></div>"; ", true)' onmouseup='buttonclick(" +
} data.id +
$('#row').append( ", false)' id='" +
"<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" + data.id +
label + input + "'>" +
"</label>" + data.value +
"</div>"); "</button></div>"
break; );
case UI_CPAD: $("#" + data.id).on({
center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>"; touchstart: function(e) {
//NO BREAK e.preventDefault();
case UI_PAD: buttonclick(data.id, true);
$('#row').append( }
"<div class='two columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" + });
"<nav class='control'>" + $("#" + data.id).on({
"<ul>" + touchend: function(e) {
"<li><a onmousedown='padclick(FOR, " + data.id + ", true)' onmouseup='padclick(FOR, " + data.id + ", false)' href='#' id='pf" + data.id + "'>▲</a></li>" + e.preventDefault();
"<li><a onmousedown='padclick(RIGHT, " + data.id + ", true)' onmouseup='padclick(RIGHT, " + data.id + ", false)' href='#' id='pr" + data.id + "'>▲</a></li>" + buttonclick(data.id, false);
"<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>" + break;
center + case UI_SWITCHER:
"</nav>" + var label = "<label id='sl" + data.id + "' class='switch checked'>";
"</div>"); var input =
"<div class='in'><input type='checkbox' id='s" +
$('#pf' + data.id).on({ data.id +
'touchstart': function(e) { "' onClick='switcher(" +
e.preventDefault(); data.id +
padclick(FOR, data.id, true) ",null)' checked></div>";
} if (data.value == "0") {
}); label = "<label id='sl" + data.id + "' class='switch'>";
$('#pf' + data.id).on({ input =
'touchend': function(e) { "<div class='in'><input type='checkbox' id='s" +
e.preventDefault(); data.id +
padclick(FOR, data.id, false) "' onClick='switcher(" +
} data.id +
}); ",null)' ></div>";
$('#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;
} }
}; $("#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>";
//NO BREAK
case UI_PAD:
$("#row").append(
"<div class='two columns card tcenter " +
colorClass(data.color) +
"'><h5>" +
data.label +
"</h5><hr/>" +
"<nav class='control'>" +
"<ul>" +
"<li><a onmousedown='padclick(FOR, " +
data.id +
", true)' onmouseup='padclick(FOR, " +
data.id +
", false)' href='#' id='pf" +
data.id +
"'>▲</a></li>" +
"<li><a onmousedown='padclick(RIGHT, " +
data.id +
", true)' onmouseup='padclick(RIGHT, " +
data.id +
", false)' href='#' id='pr" +
data.id +
"'>▲</a></li>" +
"<li><a onmousedown='padclick(LEFT, " +
data.id +
", true)' onmouseup='padclick(LEFT, " +
data.id +
", false)' href='#' id='pl" +
data.id +
"'>▲</a></li>" +
"<li><a onmousedown='padclick(BACK, " +
data.id +
", true)' onmouseup='padclick(BACK, " +
data.id +
", false)' href='#' id='pb" +
data.id +
"'>▲</a></li>" +
"</ul>" +
center +
"</nav>" +
"</div>"
);
$("#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 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) { function numberchange(number) {
var val = $('#num' + data.id).val(); var val = $("#num" + number).val();
websock.send("nchange:" + number + ":" + val); websock.send("nvalue:" + val + ":" + number);
console.log(val); console.log(val);
} }
function textchange(number) {
var val = $("#text" + number).val();
websock.send("tvalue:" + val + ":" + number);
console.log(val);
}
function buttonclick(number, isdown) { function buttonclick(number, isdown) {
if (isdown) websock.send("bdown:" + number); if (isdown) websock.send("bdown:" + number);
else websock.send("bup:" + number); else websock.send("bup:" + number);
} }
function padclick(type, number, isdown) { function padclick(type, number, isdown) {
switch (type) { switch (type) {
case CENTER: case CENTER:
if (isdown) websock.send("pcdown:" + number); if (isdown) websock.send("pcdown:" + number);
else websock.send("pcup:" + number); else websock.send("pcup:" + number);
break; break;
case FOR: case FOR:
if (isdown) websock.send("pfdown:" + number); if (isdown) websock.send("pfdown:" + number);
else websock.send("pfup:" + number); else websock.send("pfup:" + number);
break; break;
case BACK: case BACK:
if (isdown) websock.send("pbdown:" + number); if (isdown) websock.send("pbdown:" + number);
else websock.send("pbup:" + number); else websock.send("pbup:" + number);
break; break;
case LEFT: case LEFT:
if (isdown) websock.send("pldown:" + number); if (isdown) websock.send("pldown:" + number);
else websock.send("plup:" + number); else websock.send("plup:" + number);
break; break;
case RIGHT: case RIGHT:
if (isdown) websock.send("prdown:" + number); if (isdown) websock.send("prdown:" + number);
else websock.send("prup:" + number); else websock.send("prup:" + number);
break; break;
}
}
} }
function switcher(number, state) { function switcher(number, state) {
if (state == null) { if (state == null) {
if ($('#s' + number).is(':checked')) { if ($("#s" + number).is(":checked")) {
websock.send("sactive:" + number); websock.send("sactive:" + number);
$('#sl' + number).addClass('checked'); $("#sl" + number).addClass("checked");
} else { } else {
websock.send("sinactive:" + number); 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);
} else if (state == 0) {
$('#sl' + number).removeClass('checked');
$('#sl' + number).prop("checked", false);
} }
} 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);
}
} }

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" 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"";}}
break;case C_ALIZARIN:return"alizarin" var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
break;case C_NONE:return"" function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart});}
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 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>";} 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 "+
$('#row').append("<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+ colorClass(data.color)+
label+input+ "'><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>"+ "</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'>"+ "<nav class='control'>"+
"<ul>"+ "<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(FOR, "+
"<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='pr"+data.id+"'>▲</a></li>"+ data.id+
"<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='pl"+data.id+"'>▲</a></li>"+ ", true)' onmouseup='padclick(FOR, "+
"<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='pb"+data.id+"'>▲</a></li>"+ 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>"+ "</ul>"+
center+ center+
"</nav>"+ "</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") "</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 "+
switcher(data.id,0);else colorClass(data.color)+
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 />"+ "<h5 id='"+
"<div id='sl"+data.id+"' class='rkmd-slider slider-discrete slider-"+colorClass(data.color)+"'>"+ data.id+
"<input type='range' min='0' max='100' value='"+data.value+"'>"+ "'>"+
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>"+
"</div>");$('#row').append("<script>"+ "</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 "+
"rkmd_rangeSlider('#sl"+data.id+"');"+ colorClass(data.color)+
"</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 />"+ "<h5 id='"+
"<input id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+ 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 />"+ data.label+
"<input id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+ "</h5><hr />"+
"</div>");break;case UPDATE_TEXT_INPUT:$('#num'+data.id).val(data.value);break;default:console.error('Unknown type or event');break;}};} "<input style='color:black;' id='num"+
function numberchange(number){var val=$('#num'+data.id).val();websock.send("nchange:"+number+":"+val);console.log(val);} 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 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 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; long oldTime = 0;
bool switchi = false; 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 slider(Control sender, int type) { Serial.println(sender.value); }
void buttonCallback(Control sender, int type) { void buttonCallback(Control sender, int type) {
@ -148,12 +152,15 @@ void setup(void) {
ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE); ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30"); ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30");
ESPUI.slider("Slider two", &slider, COLOR_NONE, "100"); 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. .begin loads and serves all files from PROGMEM directly.
If you want to serve the files from SPIFFS use .beginSPIFFS If you want to serve the files from SPIFFS use .beginSPIFFS
(.prepareFileSystem has to be run in an empty sketch before) (.prepareFileSystem has to be run in an empty sketch before)
*/ */
dnsServer.start(DNS_PORT, "*", apIP); dnsServer.start(DNS_PORT, "*", apIP);
ESPUI.begin("ESPUI Control"); ESPUI.begin("ESPUI Control");
} }

328
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"); Serial.println("Failed to open file for writing");
return; return;
} }
#if defined(ESP32) #if defined(ESP32)
if (file.print(data)) { if (file.print(data)) {
Serial.println("File written"); Serial.println("File written");
} else { } else {
Serial.println("Write failed"); Serial.println("Write failed");
} }
#else #else
if (file.print(FPSTR(data))) { if (file.print(FPSTR(data))) {
Serial.println("File written"); Serial.println("File written");
} else { } else {
Serial.println("Write failed"); Serial.println("Write failed");
} }
#endif #endif
file.close(); file.close();
} }
@ -169,7 +169,7 @@ void ESPUIClass::prepareFileSystem() {
Serial.println("Done Initializing filesystem :-)"); Serial.println("Done Initializing filesystem :-)");
#if defined(ESP32) #if defined(ESP32)
if(DEBUG_ESPUI) listDir("/", 1); if (DEBUG_ESPUI) listDir("/", 1);
#endif #endif
SPIFFS.end(); SPIFFS.end();
@ -179,96 +179,101 @@ void ESPUIClass::prepareFileSystem() {
void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
AwsEventType type, void *arg, uint8_t *data, size_t len) { AwsEventType type, void *arg, uint8_t *data, size_t len) {
switch (type) { switch (type) {
case WS_EVT_DISCONNECT: { case WS_EVT_DISCONNECT: {
if (DEBUG_ESPUI) if (DEBUG_ESPUI) Serial.printf("Disconnected!\n");
Serial.printf("Disconnected!\n"); break;
break;
}
case WS_EVT_PONG: {
if (DEBUG_ESPUI)
Serial.printf("Received PONG!\n");
break;
}
case WS_EVT_ERROR: {
if (DEBUG_ESPUI)
Serial.printf("WebSocket Error!\n");
break;
}
case WS_EVT_CONNECT: {
if (DEBUG_ESPUI) {
Serial.print("Connected: ");
Serial.println(client->id());
} }
case WS_EVT_PONG: {
if (DEBUG_ESPUI) Serial.printf("Received PONG!\n");
break;
}
case WS_EVT_ERROR: {
if (DEBUG_ESPUI) Serial.printf("WebSocket Error!\n");
break;
}
case WS_EVT_CONNECT: {
if (DEBUG_ESPUI) {
Serial.print("Connected: ");
Serial.println(client->id());
}
ESPUI.jsonDom(client); ESPUI.jsonDom(client);
if (DEBUG_ESPUI) { if (DEBUG_ESPUI) {
Serial.println("JSON Data Sent to Client!"); Serial.println("JSON Data Sent to Client!");
} }
} break; } break;
case WS_EVT_DATA: { case WS_EVT_DATA: {
String msg = ""; String msg = "";
for (size_t i = 0; i < len; i++) { for (size_t i = 0; i < len; i++) {
msg += (char)data[i]; msg += (char)data[i];
} }
int id = msg.substring(msg.lastIndexOf(':') + 1).toInt(); int id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
if (id >= ESPUI.cIndex) { if (id >= ESPUI.cIndex) {
if (DEBUG_ESPUI) if (DEBUG_ESPUI) Serial.println("Maleformated id in websocket message");
Serial.println("Maleformated id in websocket message"); return;
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:")) { if (msg.startsWith("bdown:")) {
c->callback(*c, B_DOWN); c->callback(*c, B_DOWN);
} else if (msg.startsWith("bup:")) { } else if (msg.startsWith("bup:")) {
c->callback(*c, B_UP); c->callback(*c, B_UP);
} else if (msg.startsWith("pfdown:")) { } else if (msg.startsWith("pfdown:")) {
c->callback(*c, P_FOR_DOWN); c->callback(*c, P_FOR_DOWN);
} else if (msg.startsWith("pfup:")) { } else if (msg.startsWith("pfup:")) {
c->callback(*c, P_FOR_UP); c->callback(*c, P_FOR_UP);
} else if (msg.startsWith("pldown:")) { } else if (msg.startsWith("pldown:")) {
c->callback(*c, P_LEFT_DOWN); c->callback(*c, P_LEFT_DOWN);
} else if (msg.startsWith("plup:")) { } else if (msg.startsWith("plup:")) {
c->callback(*c, P_LEFT_UP); c->callback(*c, P_LEFT_UP);
} else if (msg.startsWith("prdown:")) { } else if (msg.startsWith("prdown:")) {
c->callback(*c, P_RIGHT_DOWN); c->callback(*c, P_RIGHT_DOWN);
} else if (msg.startsWith("prup:")) { } else if (msg.startsWith("prup:")) {
c->callback(*c, P_RIGHT_UP); c->callback(*c, P_RIGHT_UP);
} else if (msg.startsWith("pbdown:")) { } else if (msg.startsWith("pbdown:")) {
c->callback(*c, P_BACK_DOWN); c->callback(*c, P_BACK_DOWN);
} else if (msg.startsWith("pbup:")) { } else if (msg.startsWith("pbup:")) {
c->callback(*c, P_BACK_UP); c->callback(*c, P_BACK_UP);
} else if (msg.startsWith("pcdown:")) { } else if (msg.startsWith("pcdown:")) {
c->callback(*c, P_CENTER_DOWN); c->callback(*c, P_CENTER_DOWN);
} else if (msg.startsWith("pcup:")) { } else if (msg.startsWith("pcup:")) {
c->callback(*c, P_CENTER_UP); c->callback(*c, P_CENTER_UP);
} else if (msg.startsWith("sactive:")) { } else if (msg.startsWith("sactive:")) {
ESPUI.updateSwitcher(c->id, true); ESPUI.updateSwitcher(c->id, true);
c->callback(*c, S_ACTIVE); c->callback(*c, S_ACTIVE);
} else if (msg.startsWith("sinactive:")) { } else if (msg.startsWith("sinactive:")) {
ESPUI.updateSwitcher(c->id, false); ESPUI.updateSwitcher(c->id, false);
c->callback(*c, S_INACTIVE); c->callback(*c, S_INACTIVE);
} else if (msg.startsWith("slvalue:")) { } else if (msg.startsWith("slvalue:")) {
int value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt(); int value =
ESPUI.updateSlider(c->id, value, client->id()); msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
c->callback(*c, SL_VALUE); ESPUI.updateSlider(c->id, value, client->id());
} else if (msg.startsWith("nvalue:")) { c->callback(*c, SL_VALUE);
int value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt(); } else if (msg.startsWith("nvalue:")) {
ESPUI.updateNumber(c->id, value, client->id()); int value =
c->callback(*c, N_VALUE); msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
} ESPUI.updateNumber(c->id, value, client->id());
} c->callback(*c, N_VALUE);
break; } else if (msg.startsWith("tvalue:")) {
default: String value =
break; msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
ESPUI.updateText(c->id, value, client->id());
c->callback(*c, T_VALUE);
}
} break;
default:
break;
} }
} }
int ESPUIClass::label(const char *label, int color, String value) { int ESPUIClass::label(const char *label, int color, String value) {
if (labelExists(label)) { 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; return -1;
} }
@ -277,7 +282,7 @@ int ESPUIClass::label(const char *label, int color, String value) {
newL->label = label; newL->label = label;
newL->color = color; newL->color = color;
if (value != "") if (value != "")
newL->value = value; // Init with labeltext newL->value = value; // Init with labeltext
else else
newL->value = String(label); newL->value = String(label);
newL->callback = NULL; newL->callback = NULL;
@ -289,7 +294,9 @@ int ESPUIClass::label(const char *label, int color, String value) {
int ESPUIClass::graph(const char *label, int color) { int ESPUIClass::graph(const char *label, int color) {
if (labelExists(label)) { 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; return -1;
} }
@ -304,7 +311,8 @@ int ESPUIClass::graph(const char *label, int color) {
} }
// TODO: this still needs a range setting // 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 (labelExists(label)) {
if (DEBUG_ESPUI) if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element " + String(label) + Serial.println("UI ERROR: Element " + String(label) +
@ -319,7 +327,7 @@ int ESPUIClass::slider(const char *label, void (*callBack)(Control, int), int co
if (value != "") if (value != "")
newSL->value = value; newSL->value = value;
else else
newSL->value = ""; // TODO: init with half value newSL->value = ""; // TODO: init with half value
newSL->callback = callBack; newSL->callback = callBack;
newSL->id = cIndex; newSL->id = cIndex;
controls[cIndex] = newSL; controls[cIndex] = newSL;
@ -342,7 +350,7 @@ int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
newB->color = color; newB->color = color;
if (value != "") if (value != "")
newB->value = value; // Init with labeltext newB->value = value; // Init with labeltext
else else
newB->value = String(label); newB->value = String(label);
@ -353,7 +361,8 @@ int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
return cIndex - 1; 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 (labelExists(label)) {
if (DEBUG_ESPUI) if (DEBUG_ESPUI)
Serial.println("UI ERROR: Element " + String(label) + 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 // 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 (labelExists(label)) {
if (DEBUG_ESPUI) 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; return -1;
} }
@ -416,6 +427,27 @@ int ESPUIClass::number(const char *label, void (*callBack)(Control, int), int co
return cIndex - 1; 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) { void ESPUIClass::print(int id, String value) {
if (id < cIndex && controls[id]->type == UI_LABEL) { if (id < cIndex && controls[id]->type == UI_LABEL) {
controls[id]->value = value; controls[id]->value = value;
@ -472,14 +504,17 @@ void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId) {
root.printTo(json); root.printTo(json);
textThem(json, clientId); textThem(json, clientId);
} else { } 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) { void ESPUIClass::updateSwitcher(String label, bool nValue, int clientId) {
if (!labelExists(label)) { if (!labelExists(label)) {
if (DEBUG_ESPUI) 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; return;
} }
updateSwitcher(getIdByLabel(label), nValue, clientId); updateSwitcher(getIdByLabel(label), nValue, clientId);
@ -497,18 +532,48 @@ void ESPUIClass::updateNumber(int id, int number, int clientId) {
root.printTo(json); root.printTo(json);
textThem(json, clientId); textThem(json, clientId);
} else { } 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) { void ESPUIClass::updateNumber(String label, int number, int clientId) {
if (!labelExists(label)) { 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; return;
} }
updateNumber(getIdByLabel(label), number, clientId); 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 // This is a hacky workaround because ESPAsyncWebServer does not have a function
// like this and it's clients array is private // like this and it's clients array is private
void ESPUIClass::textThem(String text, int clientId) { void ESPUIClass::textThem(String text, int clientId) {
@ -526,16 +591,14 @@ void ESPUIClass::textThem(String text, int clientId) {
int ESPUIClass::getIdByLabel(String label) { int ESPUIClass::getIdByLabel(String label) {
for (int i = 0; i < cIndex; i++) { for (int i = 0; i < cIndex; i++) {
if (String(controls[i]->label) == label) if (String(controls[i]->label) == label) return i;
return i;
} }
return -1; // failed, nonexistant return -1; // failed, nonexistant
} }
bool ESPUIClass::labelExists(String label) { bool ESPUIClass::labelExists(String label) {
for (int i = 0; i < cIndex; i++) { for (int i = 0; i < cIndex; i++) {
if (String(controls[i]->label) == label) if (String(controls[i]->label) == label) return true;
return true;
} }
return false; return false;
} }
@ -562,21 +625,22 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
} }
void ESPUIClass::beginSPIFFS(const char *_title) { void ESPUIClass::beginSPIFFS(const char *_title) {
ui_title = _title; ui_title = _title;
server = new AsyncWebServer(80); server = new AsyncWebServer(80);
ws = new AsyncWebSocket("/ws"); ws = new AsyncWebSocket("/ws");
if (!SPIFFS.begin()) { if (!SPIFFS.begin()) {
Serial.println("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO " Serial.println(
"PREPARE YOUR ESP!!!!!!!"); "SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
"PREPARE YOUR ESP!!!!!!!");
return; return;
} }
listDir("/", 1); listDir("/", 1);
if (!SPIFFS.exists("/index.htm")) { if (!SPIFFS.exists("/index.htm")) {
Serial.println("Please read the README!!!!!!!, Make sure to " Serial.println(
"ESPUI.prepareFileSystem() once in an empty sketch"); "Please read the README!!!!!!!, Make sure to "
"ESPUI.prepareFileSystem() once in an empty sketch");
return; return;
} }
@ -586,27 +650,25 @@ void ESPUIClass::beginSPIFFS(const char *_title) {
// Heap for general Servertest // Heap for general Servertest
server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) { 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( server->onNotFound(
[](AsyncWebServerRequest *request) { [](AsyncWebServerRequest *request) { request->send(404); });
request->send(404);
});
server->on("/zepto.js", HTTP_GET, [](AsyncWebServerRequest *request) { 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"); response->addHeader("Content-Encoding", "gzip");
request->send(response); request->send(response);
}); });
server->begin(); server->begin();
if (DEBUG_ESPUI) if (DEBUG_ESPUI) Serial.println("UI Initialized");
Serial.println("UI Initialized");
} }
void ESPUIClass::begin(const char *_title) { void ESPUIClass::begin(const char *_title) {
ui_title = _title; ui_title = _title;
server = new AsyncWebServer(80); server = new AsyncWebServer(80);
ws = new AsyncWebSocket("/ws"); ws = new AsyncWebSocket("/ws");
@ -615,26 +677,31 @@ void ESPUIClass::begin(const char *_title) {
server->addHandler(ws); server->addHandler(ws);
server->on("/", HTTP_GET, [](AsyncWebServerRequest *request) { 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); request->send(response);
}); });
// Javascript files // Javascript files
server->on("/js/zepto.min.js", HTTP_GET, [](AsyncWebServerRequest *request) { 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"); response->addHeader("Content-Encoding", "gzip");
request->send(response); request->send(response);
}); });
server->on("/js/controls.js", HTTP_GET, [](AsyncWebServerRequest *request) { 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"); response->addHeader("Content-Encoding", "gzip");
request->send(response); request->send(response);
}); });
server->on("/js/slider.js", HTTP_GET, [](AsyncWebServerRequest *request) { 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"); response->addHeader("Content-Encoding", "gzip");
request->send(response); request->send(response);
}); });
@ -642,30 +709,31 @@ void ESPUIClass::begin(const char *_title) {
// Stylesheets // Stylesheets
server->on("/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request) { 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"); response->addHeader("Content-Encoding", "gzip");
request->send(response); request->send(response);
}); });
server->on("/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) { server->on(
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP)); "/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
response->addHeader("Content-Encoding", "gzip"); AsyncWebServerResponse *response = request->beginResponse_P(
request->send(response); 200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
}); response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
// Heap for general Servertest // Heap for general Servertest
server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) { 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( server->onNotFound(
[](AsyncWebServerRequest *request) { [](AsyncWebServerRequest *request) { request->send(404); });
request->send(404);
});
server->begin(); server->begin();
if (DEBUG_ESPUI) if (DEBUG_ESPUI) Serial.println("UI Initialized");
Serial.println("UI Initialized");
} }
ESPUIClass ESPUI; ESPUIClass ESPUI;

104
src/ESPUI.h
View File

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