Added Tabbed View

* new member of Control: parentControl
* changed addControl() to add children of elements
* added some styles in the css
* two new divs in index.html
* added frontend code to controls.js
* added new demo to demonstrate the tabbed view
This commit is contained in:
Christian Riggenbach 2019-03-03 23:22:01 +01:00
parent 50de3dad87
commit 4ea7928fd5
16 changed files with 428 additions and 67 deletions

View File

@ -880,3 +880,44 @@ input[id^="num"] {
font-weight: bold;
font-size: 115%;
}
body div > ul {
margin: 0;
padding: 0;
border-bottom: 3px solid #666;
overflow: hidden;
}
ul li {
list-style: none;
float: left;
margin-right: 4px;
}
ul li.controls {
float: right;
}
ul li a {
font-weight: bold;
display: inline-block;
padding: 6px 12px;
color: #888;
outline: 0;
text-decoration: none;
background: #f3f3f3;
background: -webkit-gradient(linear,0 0,0 bottom,from(#eee),to(#e4e4e4));
background: -moz-linear-gradient(#eee,#e4e4e4);
background: linear-gradient(#eee,#e4e4e4);
-pie-background: linear-gradient(#eee,#e4e4e4);
}
ul li.active a {
pointer-events: none;
color: white;
background: #666;
background: -webkit-gradient(linear,0 0,0 bottom,from(#888),to(#666));
background: -moz-linear-gradient(#888,#666);
background: linear-gradient(#888,#666);
-pie-background: linear-gradient(#888,#666);
}
div.tabscontent > div {
padding: 0 15px;
}

File diff suppressed because one or more lines are too long

View File

@ -21,9 +21,9 @@
<h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
<hr />
<div class="container">
<ul class="nav nav-tabs"></ul>
<div class="tabscontent u-full-width"></div>
<div id="row" class="row u-full-width"></div>
<ul id="tabsnav" class="nav nav-tabs u-full-width"></ul>
<div id="tabscontent" class="tabscontent u-full-width"></div>
</div>
</body>

View File

@ -1 +1 @@
<!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><script src=/js/tabbedcontent.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> <ul class="nav nav-tabs"></ul> <div class="tabscontent u-full-width"></div> <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><script src=/js/tabbedcontent.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> <ul id=tabsnav class="nav nav-tabs u-full-width"></ul> <div id=tabscontent class="tabscontent u-full-width"></div> </div> </body> </html>

108
data/js/controls.js vendored
View File

@ -24,6 +24,9 @@ const UI_GRAPH = 9;
const ADD_GRAPH_POINT = 10;
const CLEAR_GRAPH = 109;
const UI_TAB = 11;
const UPDATE_TAB = 111;
const FOR = 0;
const BACK = 1;
const LEFT = 2;
@ -140,7 +143,13 @@ function start() {
$("#mainHeader").html(data.label);
break;
case UI_LABEL:
$("#row").append(
var element;
if(data.parentControl) {
element = $("#tab"+data.parentControl);
} else {
element = $("#row")
}
element.append(
"<div class='two columns card tcenter " +
colorClass(data.color) +
"'><h5 id='" +
@ -155,7 +164,13 @@ function start() {
);
break;
case UI_BUTTON:
$("#row").append(
var element;
if(data.parentControl) {
element = $("#tab"+data.parentControl);
} else {
element = $("#row")
}
element.append(
"<div class='one columns card tcenter " +
colorClass(data.color) +
"'><h5>" +
@ -200,7 +215,13 @@ function start() {
data.id +
",null)' ></div>";
}
$("#row").append(
var element;
if(data.parentControl) {
element = $("#tab"+data.parentControl);
} else {
element = $("#row")
}
element.append(
"<div id='" +
data.id +
"' class='one columns card tcenter " +
@ -225,7 +246,13 @@ function start() {
"'>OK</a>";
//NO BREAK
case UI_PAD:
$("#row").append(
var element;
if(data.parentControl) {
element = $("#tab"+data.parentControl);
} else {
element = $("#row")
}
element.append(
"<div class='two columns card tcenter " +
colorClass(data.color) +
"'><h5>" +
@ -271,9 +298,7 @@ function start() {
touchstart: function(e) {
e.preventDefault();
padclick(FOR, data.id, true);
}
});
$("#pf" + data.id).on({
},
touchend: function(e) {
e.preventDefault();
padclick(FOR, data.id, false);
@ -283,9 +308,7 @@ function start() {
touchstart: function(e) {
e.preventDefault();
padclick(LEFT, data.id, true);
}
});
$("#pl" + data.id).on({
},
touchend: function(e) {
e.preventDefault();
padclick(LEFT, data.id, false);
@ -295,9 +318,7 @@ function start() {
touchstart: function(e) {
e.preventDefault();
padclick(RIGHT, data.id, true);
}
});
$("#pr" + data.id).on({
},
touchend: function(e) {
e.preventDefault();
padclick(RIGHT, data.id, false);
@ -307,9 +328,7 @@ function start() {
touchstart: function(e) {
e.preventDefault();
padclick(BACK, data.id, true);
}
});
$("#pb" + data.id).on({
},
touchend: function(e) {
e.preventDefault();
padclick(BACK, data.id, false);
@ -319,9 +338,7 @@ function start() {
touchstart: function(e) {
e.preventDefault();
padclick(CENTER, data.id, true);
}
});
$("#pc" + data.id).on({
},
touchend: function(e) {
e.preventDefault();
padclick(CENTER, data.id, false);
@ -337,7 +354,13 @@ function start() {
else switcher(data.id, 1);
break;
case UI_SLIDER:
$("#row").append(
var element;
if(data.parentControl) {
element = $("#tab"+data.parentControl);
} else {
element = $("#row")
}
element.append(
"<div class='two columns card tcenter card-slider " +
colorClass(data.color) +
"'>" +
@ -357,7 +380,13 @@ function start() {
"</div>" +
"</div>"
);
$("#row").append(
var element;
if(data.parentControl) {
element = $("#tab"+data.parentControl);
} else {
element = $("#row")
}
element.append(
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
);
break;
@ -367,7 +396,13 @@ function start() {
break;
case UI_NUMBER:
$("#row").append(
var element;
if(data.parentControl) {
element = $("#tab"+data.parentControl);
} else {
element = $("#row")
}
element.append(
"<div class='two columns card tcenter " +
colorClass(data.color) +
"'>" +
@ -392,7 +427,13 @@ function start() {
break;
case UI_TEXT_INPUT:
$("#row").append(
var element;
if(data.parentControl) {
element = $("#tab"+data.parentControl);
} else {
element = $("#row")
}
element.append(
"<div class='two columns card tcenter " +
colorClass(data.color) +
"'>" +
@ -415,6 +456,27 @@ function start() {
case UPDATE_TEXT_INPUT:
$("#text" + data.id).val(data.value);
break;
case UI_TAB:
$("#tabsnav").append(
"<li><a href='#tab" + data.id + "'>" + data.value + "</a></li>"
);
$("#tabscontent").append(
"<div id='tab" + data.id + "'></div>"
);
tabs = $('.tabscontent').tabbedContent({loop: true}).data('api');
// switch to tab...
$('a').filter(function() {
return $(this).attr('href') === '#click-to-switch';
}).on('click', function(e) {
var tab = prompt('Tab to switch to (number or id)?');
if (!tabs.switchTab(tab)) {
alert('That tab does not exist :\\');
}
e.preventDefault();
});
break;
default:
console.error("Unknown type or event");

View File

@ -1,8 +1,9 @@
const UI_INITIAL_GUI=200;const UI_TITEL=0;const UI_BUTTON=1;const UI_PAD=2;const UI_CPAD=3;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const 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_DARK=7;const C_NONE=255;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
const UI_INITIAL_GUI=200;const UI_TITEL=0;const UI_BUTTON=1;const UI_PAD=2;const UI_CPAD=3;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const 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_DARK=7;const C_NONE=255;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
var websock;var websockConnected=false;function 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();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.append("<div class='two columns card tcenter "+
colorClass(data.color)+
"'><h5 id='"+
data.id+
@ -12,7 +13,8 @@ data.label+
data.id+
"' class='label label-wrap'>"+
data.value+
"</span></div>");break;case UI_BUTTON:$("#row").append("<div class='one columns card tcenter "+
"</span></div>");break;case UI_BUTTON:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.append("<div class='one columns card tcenter "+
colorClass(data.color)+
"'><h5>"+
data.label+
@ -33,7 +35,8 @@ data.id+
"' onClick='switcher("+
data.id+
",null)' ></div>";}
$("#row").append("<div id='"+
var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.append("<div id='"+
data.id+
"' class='one columns card tcenter "+
colorClass(data.color)+
@ -49,7 +52,8 @@ data.id+
data.id+
", false)' href='#' id='pc"+
data.id+
"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+
"'>OK</a>";case UI_PAD:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.append("<div class='two columns card tcenter "+
colorClass(data.color)+
"'><h5>"+
data.label+
@ -87,7 +91,8 @@ data.id+
"</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 "+
"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(FOR,data.id,true);},touchend:function(e){e.preventDefault();padclick(FOR,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(BACK,data.id,true);},touchend:function(e){e.preventDefault();padclick(BACK,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case 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:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.append("<div class='two columns card tcenter card-slider "+
colorClass(data.color)+
"'>"+
"<h5 id='"+
@ -104,7 +109,9 @@ colorClass(data.color)+
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 "+
"</div>");var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.append("<div class='two columns card tcenter "+
colorClass(data.color)+
"'>"+
"<h5 id='"+
@ -119,7 +126,8 @@ 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 "+
"</div>");break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UI_TEXT_INPUT:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.append("<div class='two columns card tcenter "+
colorClass(data.color)+
"'>"+
"<h5 id='"+
@ -134,7 +142,8 @@ 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;}};websock.onmessage=handleEvent;}
"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UI_TAB:$("#tabsnav").append("<li><a href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");tabs=$('.tabscontent').tabbedContent({loop:true}).data('api');$('a').filter(function(){return $(this).attr('href')==='#click-to-switch';}).on('click',function(e){var tab=prompt('Tab to switch to (number or id)?');if(!tabs.switchTab(tab)){alert('That tab does not exist :\\');}
e.preventDefault();});break;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;}
function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);}
function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);}
function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}

View File

@ -0,0 +1,229 @@
#include <DNSServer.h>
#include <ESPUI.h>
const byte DNS_PORT = 53;
IPAddress apIP( 192, 168, 1, 1 );
DNSServer dnsServer;
#if defined(ESP32)
#include <WiFi.h>
#else
#include <ESP8266WiFi.h>
#endif
// true for verbose, false for quiet
ESPUIClass ESPUI( Verbosity::VerboseJSON );
const char* ssid = "ESPUI";
const char* password = "espui";
const char* hostname = "EspuiTest";
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 ) {
switch ( type ) {
case B_DOWN:
Serial.println( "Button DOWN" );
break;
case B_UP:
Serial.println( "Button UP" );
break;
}
}
void buttonExample( Control sender, int type ) {
switch ( type ) {
case B_DOWN:
Serial.println( "Status: Start" );
ESPUI.updateControl( "Status:", "Start" );
break;
case B_UP:
Serial.println( "Status: Stop" );
ESPUI.updateControl( "Status:", "Stop" );
break;
}
}
void padExample( Control sender, int value ) {
switch ( value ) {
case P_LEFT_DOWN:
Serial.print( "left down" );
break;
case P_LEFT_UP:
Serial.print( "left up" );
break;
case P_RIGHT_DOWN:
Serial.print( "right down" );
break;
case P_RIGHT_UP:
Serial.print( "right up" );
break;
case P_FOR_DOWN:
Serial.print( "for down" );
break;
case P_FOR_UP:
Serial.print( "for up" );
break;
case P_BACK_DOWN:
Serial.print( "back down" );
break;
case P_BACK_UP:
Serial.print( "back up" );
break;
case P_CENTER_DOWN:
Serial.print( "center down" );
break;
case P_CENTER_UP:
Serial.print( "center up" );
break;
}
Serial.print( " " );
Serial.println( sender.id );
}
void switchExample( Control sender, int value ) {
switch ( value ) {
case S_ACTIVE:
Serial.print( "Active:" );
break;
case S_INACTIVE:
Serial.print( "Inactive" );
break;
}
Serial.print( " " );
Serial.println( sender.id );
}
void otherSwitchExample( Control sender, int value ) {
switch ( value ) {
case S_ACTIVE:
Serial.print( "Active:" );
break;
case S_INACTIVE:
Serial.print( "Inactive" );
break;
}
Serial.print( " " );
Serial.println( sender.id );
}
void setup( void ) {
Serial.begin( 115200 );
#if defined(ESP32)
WiFi.setHostname( hostname );
#else
WiFi.hostname( hostname );
#endif
// try to connect to existing network
WiFi.begin( ssid, password );
Serial.print( "\n\nTry to connect to existing network" );
{
uint8_t timeout = 5;
// Wait for connection, 2.5s timeout
do {
delay( 500 );
Serial.print( "." );
timeout--;
} while ( timeout && WiFi.status() != WL_CONNECTED );
// not connected -> create hotspot
if ( WiFi.status() != WL_CONNECTED ) {
Serial.print( "\n\nCreating hotspot" );
WiFi.mode( WIFI_AP );
WiFi.softAPConfig( apIP, apIP, IPAddress( 255, 255, 255, 0 ) );
WiFi.softAP( ssid );
timeout = 5;
do {
delay( 500 );
Serial.print( "." );
timeout--;
} while ( timeout );
}
}
dnsServer.start( DNS_PORT, "*", apIP );
Serial.println( "\n\nWiFi parameters:" );
Serial.print( "Mode: " );
Serial.println( WiFi.getMode() == WIFI_AP ? "Station" : "Client" );
Serial.print( "IP address: " );
Serial.println( WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP() );
uint16_t tab1 = ESPUI.addControl( ControlType::Tab, "Settings 1", "Settings 1");
uint16_t tab2 = ESPUI.addControl( ControlType::Tab, "Settings 2", "Settings 2");
uint16_t tab3 = ESPUI.addControl( ControlType::Tab, "Settings 3", "Settings 3");
ESPUI.addControl( ControlType::Label, "Status:", "Stop",ControlColor::Turquoise, nullptr, tab1 );
ESPUI.addControl( ControlType::Label, "Millis:", "0", ControlColor::Emerald, nullptr, tab1 );
ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, &buttonCallback, tab1 );
ESPUI.addControl( ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, &buttonExample, tab1 );
ESPUI.addControl( ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, &padExample, tab2 );
ESPUI.addControl( ControlType::Pad, "Pad without center", "", ControlColor::Carrot, &padExample, tab3 );
ESPUI.addControl( ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, &switchExample, tab3 );
ESPUI.addControl( ControlType::Switcher, "Switch two", "", ControlColor::None, &otherSwitchExample, tab3 );
ESPUI.addControl( ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, &slider, tab1 );
ESPUI.addControl( ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, &slider, tab3 );
ESPUI.addControl( ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, &textCall, tab3 );
ESPUI.addControl( ControlType::Number, "Number:", "50", ControlColor::Alizarin, &numberCall, tab3 );
/*
* .begin loads and serves all files from PROGMEM directly.
* If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
* (.prepareFileSystem has to be run in an empty sketch before)
*/
/*
* Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
* SECURE way of limiting access.
* Anyone who is able to sniff traffic will be able to intercept your password
* since it is transmitted in cleartext. Just add a username and password,
* for example begin("ESPUI Control", "username", "password")
*/
ESPUI.begin( "ESPUI Control" );
}
void loop( void ) {
dnsServer.processNextRequest();
static long oldTime = 0;
static bool switchi = false;
if ( millis() - oldTime > 5000 ) {
ESPUI.updateControl( "Millis:", String( millis() ) );
switchi = !switchi;
ESPUI.updateControl( "Switch one", switchi ? "1" : "0" );
oldTime = millis();
}
}

View File

@ -361,9 +361,11 @@ void onWsEvent( AsyncWebSocket* server, AsyncWebSocketClient* client,
}
}
int ESPUIClass::addControl( ControlType type, const char* label,
String value, ControlColor color,
void ( *callback )( Control, int ) ) {
uint16_t ESPUIClass::addControl( ControlType type, const char* label,
String value, ControlColor color,
void ( *callback )( Control, int ),
uint16_t parentControl
) {
if ( this->getControl( label ) != nullptr ) {
if ( this->verbosity ) {
Serial.println( "UI ERROR: Element " + String( label ) +
@ -373,7 +375,7 @@ int ESPUIClass::addControl( ControlType type, const char* label,
return -1;
}
Control* control = new Control( type, label, callback, value, color );
Control* control = new Control( type, label, callback, value, color, parentControl );
if ( this->controls == nullptr ) {
this->controls = control;
@ -417,7 +419,7 @@ int ESPUIClass::switcher( const char* label, bool startState,
int ESPUIClass::pad( const char* label, bool center,
void ( *callback )( Control, int ), ControlColor color ) {
if ( center ) {
return addControl( ControlType::Cpad, label, "", color, callback );
return addControl( ControlType::PadWithCenter, label, "", color, callback );
} else {
return addControl( ControlType::Pad, label, "", color, callback );
}
@ -608,6 +610,10 @@ void ESPUIClass::jsonDom( AsyncWebSocketClient* client ) {
item["value"] = String( control->value );
item["color"] = ( int )control->color;
if ( control->parentControl != 0xffff ) {
item["parentControl"] = String( control->parentControl );
}
items.add( item );
control = control->next;

View File

@ -34,10 +34,13 @@
// Message Types (and control types)
enum ControlType : uint8_t {
// fixed controls
Title = 0,
Button,
Pad,
Cpad,
PadWithCenter,
// updatable controls
Label,
Switcher,
Slider,
@ -45,6 +48,7 @@ enum ControlType : uint8_t {
Text,
Graph,
GraphPoint,
Tab,
UpdateOffset = 100,
UpdateLabel = 104,
@ -53,6 +57,7 @@ enum ControlType : uint8_t {
UpdateNumber,
UpdateText,
ClearGraph,
UpdateTab,
InitialGui = 200
};
@ -108,23 +113,22 @@ class Control {
void ( *callback )( Control, int );
String value;
ControlColor color;
uint16_t parentControl;
Control* next;
Control(
ControlType type, const char* label,
void ( *callback )( Control, int ),
String value, ControlColor color )
: type( type ), label( label ), callback( callback ), value( value ), color( color ), next( nullptr ) {
String value, ControlColor color, uint16_t parentControl = 0xffff )
: type( type ), label( label ), callback( callback ), value( value ), color( color ), parentControl(parentControl), next( nullptr ) {
id = idCounter++;
}
Control( const Control& control )
: type( control.type ), id( control.id ), label( control.label ),
callback( control.callback ), value( control.value ),
color( control.color ), next( control.next ) {}
color( control.color ), parentControl(control.parentControl), next( control.next ) {}
private:
static uint16_t idCounter;
@ -175,9 +179,9 @@ class ESPUIClass {
void list();
// Creating Elements
int addControl( ControlType type, const char* label,
uint16_t addControl( ControlType type, const char* label,
String value = String( "" ), ControlColor color = ControlColor::Turquoise,
void ( *callback )( Control, int ) = nullptr );
void ( *callback )( Control, int ) = nullptr, uint16_t parentControl = 0xffff );
int button( const char* label,
void ( *callback )( Control, int ), ControlColor color,
@ -255,3 +259,4 @@ class ESPUIClass {
extern ESPUIClass ESPUI;
#endif

File diff suppressed because one or more lines are too long

View File

@ -1,5 +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><script src=/js/tabbedcontent.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> <ul class="nav nav-tabs"></ul> <div class="tabscontent u-full-width"></div> <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><script src=/js/tabbedcontent.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> <ul id=tabsnav class="nav nav-tabs u-full-width"></ul> <div id=tabscontent class="tabscontent u-full-width"></div> </div> </body> </html>
)=====";
const uint8_t HTML_INDEX_GZIP[899] PROGMEM = { 31,139,8,0,190,66,124,92,2,255,133,84,109,147,162,56,16,254,43,156,159,238,106,119,6,81,199,153,217,21,171,130,130,51,42,34,32,40,126,11,144,145,96,120,25,18,68,253,245,151,136,123,119,91,119,181,71,85,146,78,247,243,116,119,154,164,71,191,77,173,201,38,88,235,82,194,50,50,30,221,102,105,148,32,24,143,71,25,98,80,138,18,88,81,196,212,154,125,60,188,140,71,12,51,130,198,147,34,103,85,65,70,114,187,109,145,57,204,144,122,194,168,41,139,138,73,17,135,160,156,169,157,6,199,44,81,99,116,194,17,122,184,109,190,74,56,199,12,67,242,64,35,72,144,170,116,198,35,130,243,163,84,33,162,118,104,194,233,81,205,36,204,93,116,164,164,66,31,106,12,25,252,134,51,120,64,114,153,31,190,135,144,162,225,224,43,246,53,203,105,186,139,217,161,0,252,91,185,94,162,123,7,46,105,98,11,236,9,48,197,90,44,237,215,141,16,180,89,172,109,60,29,128,229,108,61,145,207,137,102,115,229,68,75,93,99,190,226,214,225,156,115,15,239,92,185,22,254,38,96,200,231,88,48,173,82,120,29,102,124,50,250,147,168,38,250,139,240,183,54,52,211,215,189,27,86,241,183,78,79,249,180,123,4,59,125,227,83,12,183,239,215,78,223,231,114,187,90,61,37,115,123,74,237,222,108,124,112,121,222,155,45,108,206,227,120,142,49,68,92,77,238,207,234,103,225,95,207,29,119,67,76,160,21,160,127,92,107,205,245,5,63,45,174,184,56,31,6,43,63,242,250,181,62,127,187,157,116,59,95,58,93,27,96,224,197,238,77,65,26,215,32,87,81,19,165,1,96,26,71,154,141,113,136,110,182,184,235,122,138,161,125,209,13,61,137,116,243,203,91,25,52,162,16,90,224,122,142,230,107,233,38,9,228,249,148,130,195,68,119,217,128,148,59,249,244,154,46,237,253,124,248,105,188,178,254,49,1,151,84,57,239,188,69,104,15,52,191,104,166,205,167,21,28,244,243,241,184,29,224,96,72,214,208,232,14,157,79,243,37,120,103,86,237,132,38,188,14,207,105,72,107,58,5,91,57,174,74,162,29,6,207,233,122,248,58,140,118,250,75,184,6,10,242,166,104,209,19,217,205,119,142,177,125,115,142,193,206,33,86,182,186,236,183,70,119,111,131,139,57,213,251,203,13,80,150,27,125,224,79,223,175,86,10,186,86,234,157,23,87,112,225,114,115,214,159,94,81,35,126,133,223,117,252,164,187,159,113,222,166,100,97,207,41,247,249,17,152,41,56,175,46,221,102,229,118,207,150,97,95,204,107,209,172,166,133,98,186,180,49,211,162,49,151,222,230,28,69,34,133,125,172,251,65,108,172,78,251,220,233,7,187,57,1,111,113,63,190,60,149,97,198,174,65,207,104,246,238,211,41,202,80,248,156,54,240,86,82,157,24,155,163,91,219,217,100,242,143,155,76,217,133,32,154,32,196,218,75,44,71,148,202,121,81,101,144,224,43,122,228,187,255,3,223,148,45,144,70,21,46,153,68,171,72,149,83,42,95,81,201,138,199,12,231,143,41,55,202,173,245,95,40,74,112,140,170,95,66,162,246,37,211,95,130,24,12,67,20,223,95,244,207,72,249,214,42,164,81,88,196,23,169,200,73,1,99,53,133,39,216,218,191,81,6,43,246,251,31,223,57,34,198,39,209,89,6,99,33,73,56,86,51,136,243,55,206,70,213,223,253,164,5,209,18,230,2,193,35,186,12,178,154,74,17,129,148,170,4,134,136,140,173,143,15,94,54,196,115,224,48,145,1,119,121,39,38,85,27,232,142,23,25,243,32,72,104,107,114,87,118,114,120,226,189,234,244,192,79,69,121,231,145,107,242,19,169,35,244,247,179,74,245,195,71,77,72,219,182,58,127,133,185,31,160,42,154,31,28,33,254,55,246,199,34,10,36,214,182,195,254,9,54,92,13,200,120,5,0,0 };
const uint8_t HTML_INDEX_GZIP[904] PROGMEM = { 31,139,8,0,174,85,124,92,2,255,133,84,109,147,162,56,16,254,43,156,159,238,106,119,6,81,199,153,217,21,171,130,130,51,42,34,32,40,126,11,144,145,96,120,25,18,68,253,245,151,200,204,237,94,237,213,158,85,73,58,221,207,243,116,211,66,143,254,152,90,147,77,176,214,165,132,101,100,60,186,237,210,40,65,48,30,143,50,196,160,20,37,176,162,136,169,53,123,187,123,26,143,24,102,4,141,39,69,206,170,130,140,228,246,218,34,115,152,33,245,132,81,83,22,21,147,34,14,65,57,83,59,13,142,89,162,198,232,132,35,116,119,187,124,149,112,142,25,134,228,142,70,144,32,85,233,140,71,4,231,71,169,66,68,237,208,132,211,163,154,73,152,75,116,164,164,66,111,106,12,25,252,134,51,120,64,114,153,31,190,135,144,162,225,224,43,246,53,203,105,186,139,217,161,0,252,183,114,189,68,247,14,220,210,196,21,216,19,96,138,179,88,218,207,27,97,104,179,88,219,120,58,0,203,217,122,34,159,19,205,230,206,137,150,186,198,124,197,163,195,57,231,30,94,185,115,45,244,38,96,200,247,88,48,173,82,168,14,51,190,25,253,73,84,19,253,73,232,173,13,205,244,117,239,134,85,252,173,211,83,222,237,30,193,78,223,120,23,203,237,251,181,211,247,185,221,158,86,79,201,220,158,82,187,183,24,95,220,158,247,102,11,155,243,56,158,99,12,145,87,147,251,179,250,81,232,235,185,227,110,136,9,180,2,244,143,107,173,185,62,225,135,197,21,23,231,195,96,229,71,94,191,214,231,47,183,39,221,206,151,78,215,6,24,120,177,123,115,144,198,53,200,85,244,68,105,0,152,198,145,102,99,28,162,91,44,238,186,158,98,104,95,116,67,79,34,221,252,242,82,6,141,104,132,22,184,158,163,249,90,186,73,2,121,62,165,224,48,209,93,54,32,229,78,62,61,167,75,123,63,31,190,27,207,172,127,76,192,37,85,206,59,111,17,218,3,205,47,154,105,243,110,5,7,253,124,60,110,7,56,24,146,53,52,186,67,231,221,124,10,94,153,85,59,161,9,175,195,115,26,210,154,78,193,86,142,171,146,104,135,193,99,186,30,62,15,163,157,254,20,174,129,130,188,41,90,244,68,117,243,157,99,108,95,156,99,176,115,136,149,173,46,251,173,209,221,219,224,98,78,245,254,114,3,148,229,70,31,248,211,215,171,149,130,174,149,122,231,197,21,92,184,221,156,245,135,103,212,136,191,194,239,58,126,210,221,207,56,111,83,178,176,231,148,251,252,8,204,20,156,87,151,110,179,114,187,103,203,176,47,230,181,104,86,211,66,49,93,218,152,105,209,152,75,111,115,142,34,81,194,62,214,253,32,54,86,167,125,238,244,131,221,156,128,151,184,31,95,30,202,48,99,215,160,103,52,123,247,225,20,101,40,124,76,27,120,107,169,78,140,205,209,173,237,108,50,249,233,77,166,236,66,16,77,16,98,237,75,44,71,148,202,121,81,101,144,224,43,186,231,183,255,3,223,156,45,144,70,21,46,153,68,171,72,149,83,42,95,81,201,138,251,12,231,247,41,15,202,109,244,23,20,37,56,70,213,111,33,81,251,37,211,223,130,24,12,67,20,127,124,209,255,70,202,183,81,33,141,194,34,190,72,69,78,10,24,171,41,60,193,54,254,141,50,88,177,63,255,250,206,17,49,62,137,201,50,24,11,75,194,177,154,65,156,191,112,54,170,126,204,147,22,68,75,152,11,4,207,232,50,200,106,42,69,4,82,170,18,24,34,50,182,222,222,120,219,16,175,129,195,68,5,92,242,131,152,84,109,162,15,188,168,152,39,65,159,94,46,89,21,205,71,176,35,204,250,238,173,38,164,29,75,157,127,100,106,34,160,252,169,105,14,63,181,58,194,228,235,78,184,127,225,213,228,71,10,1,248,232,213,39,247,103,215,127,167,252,60,68,31,197,217,14,226,191,1,165,144,19,235,159,5,0,0 };

View File

@ -2,4 +2,4 @@ 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:-.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[861] PROGMEM = { 31,139,8,0,190,66,124,92,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 };
const uint8_t CSS_NORMALIZE_GZIP[861] PROGMEM = { 31,139,8,0,173,85,124,92,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 };

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,190,66,124,92,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,174,85,124,92,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 };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long