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

Added new features, removed dependency on unique labels

- added Min/Max/Step for numbers and sliders
- labels don't have to be unique anymore; controls can't be updated by labels
- new Slider: JS + CSS
This commit is contained in:
Christian Riggenbach 2019-03-19 09:34:16 +01:00
parent 7125374fa3
commit 6873052b6e
13 changed files with 245 additions and 165 deletions

View File

@ -12,14 +12,20 @@
}
.card {
margin-top: 2%;
border-radius: 6px;
box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
padding-left: 20px;
padding-right: 20px;
margin-bottom: 10px;
min-width: 150px;
color: #fff;
margin-top:2%;
border-radius:6px;
box-shadow:0 4px 4px rgba(204,197,185,0.5);
padding-left:20px;
padding-right:20px;
margin-bottom:10px;
min-width:500px;
color:#fff
}
@media(max-width:630px) {
.card {
min-width:98%;
}
}
.card-slider {
@ -933,3 +939,82 @@ body div > ul.navigation {
div.tabscontent > div {
padding: 0 15px;
}
.range-slider {
margin:0 0 0 0
}
.range-slider {
width:100%
}
.range-slider__range {
-webkit-appearance:none;
width:calc(100% - (45px));
height:10px;
border-radius:5px;
outline:0;
padding:0;
margin:0
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance:none;
appearance:none;
width:20px;
height:20px;
border-radius:50%;
cursor:pointer;
transition:background .15s ease-in-out
}
.range-slider__range::-webkit-slider-thumb:hover {
background:#1abc9c
}
.range-slider__range:active::-webkit-slider-thumb {
background:#1abc9c
}
.range-slider__range::-moz-range-thumb {
width:20px;
height:20px;
border:0;
border-radius:50%;
cursor:pointer;
transition:background .15s ease-in-out
}
.range-slider__range:focus::-webkit-slider-thumb {
box-shadow:0 0 0 3px #fff,0 0 0 6px #1abc9c
}
.range-slider__value {
display:inline-block;
position:relative;
width:30px;
color:#fff;
line-height:20px;
text-align:center;
border-radius:3px;
padding:5px 5px;
margin-left:2px
}
.range-slider__value:after {
position:absolute;
top:8px;
left:-7px;
width:0;
height:0;
/*border-top:1px solid transparent;
border-right:1px solid #2c3e50;
border-bottom:1px solid transparent;*/
content:''
}
::-moz-range-track {
border:0
}
input::-moz-focus-inner,input::-moz-focus-outer {
border:0
}

File diff suppressed because one or more lines are too long

106
data/js/controls.js vendored
View File

@ -36,8 +36,15 @@ const UPDATE_TAB = 111;
const UI_SELECT = 12;
const UPDATE_SELECT = 112;
const UI_OPTION = 13;
const UPDATE_OPTION = 113;
const UI_MIN = 14;
const UPDATE_MIN = 114;
const UI_MAX = 15;
const UPDATE_MAX = 115;
const UI_STEP = 16;
const UPDATE_STEP = 116;
const UP = 0;
const DOWN = 1;
@ -164,7 +171,7 @@ function start() {
parent = $("#row")
}
parent.append(
"<div id='" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<div id='id" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<h5>" + data.label + "</h5><hr/>" +
"<span id='l" + data.id + "' class='label label-wrap'>" + data.value + "</span>" +
"</div>"
@ -179,7 +186,7 @@ function start() {
parent = $("#row")
}
parent.append(
"<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'>" +
"<div id='id" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'>" +
"<h5>" + data.label + "</h5><hr/>" +
"<button id='btn" + data.id + "' " +
"onmousedown='buttonclick(" + data.id + ", true)' "+
@ -207,7 +214,7 @@ function start() {
parent = $("#row")
}
parent.append(
"<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'>" +
"<div id='id" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'>" +
"<h5>" + data.label + "</h5><hr/>" +
"<label id='sl" + data.id + "' class='switch " + ((data.value == "1")?"checked":"") + "'>" +
"<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' " + ((data.value == "1")?"checked":"") + "/></div>" +
@ -226,7 +233,7 @@ function start() {
parent = $("#row")
}
parent.append(
"<div id='" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<div id='id" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<h5>" + data.label + "</h5><hr/>" +
"<nav class='control'>" +
"<ul>" +
@ -293,22 +300,24 @@ function start() {
break;
//https://codepen.io/seanstopnik/pen/CeLqA
case UI_SLIDER:
var parent;
if(data.parentControl) {
parent = $("#tab"+data.parentControl);
} else {
parent = $("#row")
}
}
parent.append(
"<div id='" + data.id + "' class='two columns card tcenter card-slider " + colorClass(data.color) + "'>" +
"<div id='id" + data.id + "' class='two columns card tcenter card-slider " + colorClass(data.color) + "'>" +
"<h5>" + 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 class='range-slider'>" +
"<input id='sl" + data.id + "' type='range' min='0' max='100' value='" + data.value + "' class='range-slider__range'>" +
"<span class='range-slider__value'>" + data.value + "</span>" +
"</div>" +
"</div>" +
"<script>rkmd_rangeSlider('#sl" + data.id + "');</script>"
"</div>"
);
rangeSlider();
break;
case UI_NUMBER:
@ -319,7 +328,7 @@ function start() {
parent = $("#row")
}
parent.append(
"<div id='" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<div id='id" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<h5>" + data.label + "</h5><hr/>" +
"<input style='color:black;' id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
"</div>"
@ -334,7 +343,7 @@ function start() {
parent = $("#row")
}
parent.append(
"<div id='" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<div id='id" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<h5>" + data.label + "</h5><hr/>" +
"<input style='color:black;' id='text" + data.id + "' value='" + data.value + "' onchange='textchange(" + data.id + ")' />" +
"</div>"
@ -370,7 +379,7 @@ function start() {
parent = $("#row")
}
parent.append(
"<div id='" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<div id='id" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
"<h5>" + data.label + "</h5><hr/>" +
"<select style='color:black;' id='select" + data.id + "' onchange='selectchange(" + data.id + ")' />" +
"</div>"
@ -386,6 +395,36 @@ function start() {
}
break;
case UI_MIN:
if(data.parentControl) {
var parent = $("#id"+data.parentControl+" input");
if(parent.size()){
console.log("MIN" + data.value);
parent.attr("min", data.value);
}
}
break;
case UI_MAX:
if(data.parentControl) {
var parent = $("#id"+data.parentControl+" input");
if(parent.size()){
console.log("MAX" + data.value);
parent.attr("max", data.value);
}
}
break;
case UI_STEP:
if(data.parentControl) {
var parent = $("#id"+data.parentControl+" input");
if(parent.size()){
console.log("STEP" + data.value);
parent.attr("step", data.value);
}
}
break;
case UPDATE_LABEL:
$("#l" + data.id).html(data.value);
break;
@ -421,20 +460,26 @@ function start() {
}
if(data.type >= UPDATE_OFFSET && data.type < UI_INITIAL_GUI) {
var element = $('#' + data.id);
if(data.type == UPDATE_SLIDER) {
element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");
element.addClass("slider-" + colorClass(data.color));
} else {
var element = $('#id' + data.id);
// if(data.type == UPDATE_SLIDER) {
// element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");
// element.addClass("slider-" + colorClass(data.color));
// } else {
element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");
element.addClass(colorClass(data.color));
}
// }
}
};
websock.onmessage = handleEvent;
}
function sliderchange(number) {
var val = $("#sl" + number).val();
console.log("slvalue:" + val + ":" + number);
websock.send("slvalue:" + val + ":" + number);
}
function numberchange(number) {
var val = $("#num" + number).val();
websock.send("nvalue:" + val + ":" + number);
@ -497,3 +542,26 @@ function switcher(number, state) {
$("#sl" + number).prop("checked", false);
}
}
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on({
'input': function(){
$(this).next().html(this.value);
},
'change': function(){
sliderchange($(this).attr('id').replace( /^\D+/g, ''));
}
});
});
};

View File

@ -1,26 +1,26 @@
const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;const UI_TITEL=0;const UI_PAD=1;const UI_CPAD=2;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;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:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<span id='l"+data.id+"' class='label label-wrap'>"+data.value+"</span>"+
"</div>");break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'>"+
parent.append("<div id='id"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<button id='btn"+data.id+"' "+
"onmousedown='buttonclick("+data.id+", true)' "+
"onmouseup='buttonclick("+data.id+", false)'>"+
data.value+
"</button></div>");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'>"+
parent.append("<div id='id"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<label id='sl"+data.id+"' class='switch "+((data.value=="1")?"checked":"")+"'>"+
"<div class='in'><input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' "+((data.value=="1")?"checked":"")+"/></div>"+
"</label>"+
"</div>");switcher(data.id,data.value);break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<nav class='control'>"+
"<ul>"+
@ -32,31 +32,36 @@ parent.append("<div id='"+data.id+"' class='two columns card tcenter "+colorClas
((data.type==UI_CPAD)?"<a class='confirm' onmousedown='padclick(CENTER,"+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' id='pc"+data.id+"'>OK</a>":"")+
"</nav>"+
"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='"+data.id+"' class='two columns card tcenter card-slider "+colorClass(data.color)+"'>"+
parent.append("<div id='id"+data.id+"' class='two columns card tcenter card-slider "+colorClass(data.color)+"'>"+
"<h5>"+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 class='range-slider'>"+
"<input id='sl"+data.id+"' type='range' min='0' max='100' value='"+data.value+"' class='range-slider__range'>"+
"<span class='range-slider__value'>"+data.value+"</span>"+
"</div>"+
"</div>"+
"<script>rkmd_rangeSlider('#sl"+data.id+"');</script>");break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"</div>");rangeSlider();break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<input style='color:black;' id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+
"</div>");break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<input style='color:black;' id='text"+data.id+"' value='"+data.value+"' onchange='textchange("+data.id+")' />"+
"</div>");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;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<select style='color:black;' id='select"+data.id+"' onchange='selectchange("+data.id+")' />"+
"</div>");break;case UI_OPTION:if(data.parentControl){var parent=$("#select"+data.parentControl);parent.append("<option id='option"+data.id+"' value='"+data.value+"' "+data.selected+">"+data.label+"</option>");}
break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,(data.value=="0")?0:1);break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:break;default:console.error("Unknown type or event");break;}
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$('#'+data.id);if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}}};websock.onmessage=handleEvent;}
break;case UI_MIN:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){console.log("MIN"+data.value);parent.attr("min",data.value);}}
break;case UI_MAX:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){console.log("MAX"+data.value);parent.attr("max",data.value);}}
break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){console.log("STEP"+data.value);parent.attr("step",data.value);}}
break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,(data.value=="0")?0:1);break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;default:console.error("Unknown type or event");break;}
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$('#id'+data.id);element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}};websock.onmessage=handleEvent;}
function sliderchange(number){var val=$("#sl"+number).val();console.log("slvalue:"+val+":"+number);websock.send("slvalue:"+val+":"+number);}
function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);}
function selectchange(number){var val=$("#select"+number).val();websock.send("svalue:"+val+":"+number);}
function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
var rangeSlider=function(){var slider=$('.range-slider'),range=$('.range-slider__range'),value=$('.range-slider__value');slider.each(function(){value.each(function(){var value=$(this).prev().attr('value');$(this).html(value);});range.on({'input':function(){$(this).next().html(this.value);},'change':function(){sliderchange($(this).attr('id').replace(/^\D+/g,''));}});});};

View File

@ -360,20 +360,17 @@ void onWsEvent( AsyncWebSocket* server, AsyncWebSocketClient* client,
ESPUI.updateSwitcher( c->id, false );
c->callback( c, S_INACTIVE );
} else if ( msg.startsWith( "slvalue:" ) ) {
int value = msg.substring( msg.indexOf( ':' ) + 1, msg.lastIndexOf( ':' ) ).toInt();
ESPUI.updateSlider( c->id, value, client->id() );
c->value = msg.substring( msg.indexOf( ':' ) + 1, msg.lastIndexOf( ':' ) );
ESPUI.updateControl( c );
c->callback( c, SL_VALUE );
} else if ( msg.startsWith( "nvalue:" ) ) {
int value = msg.substring( msg.indexOf( ':' ) + 1, msg.lastIndexOf( ':' ) ).toInt();
ESPUI.updateNumber( c->id, value, client->id() );
c->value = msg.substring( msg.indexOf( ':' ) + 1, msg.lastIndexOf( ':' ) );
c->callback( c, N_VALUE );
} else if ( msg.startsWith( "tvalue:" ) ) {
String value = msg.substring( msg.indexOf( ':' ) + 1, msg.lastIndexOf( ':' ) );
ESPUI.updateText( c->id, value, client->id() );
c->value = msg.substring( msg.indexOf( ':' ) + 1, msg.lastIndexOf( ':' ) );
c->callback( c, T_VALUE );
} else if ( msg.startsWith( "svalue:" ) ) {
String value = msg.substring( msg.indexOf( ':' ) + 1, msg.lastIndexOf( ':' ) );
ESPUI.updateSelect( c->id, value, client->id() );
c->value = msg.substring( msg.indexOf( ':' ) + 1, msg.lastIndexOf( ':' ) );
c->callback( c, S_VALUE );
} else {
if ( ESPUI.verbosity ) {
@ -393,15 +390,6 @@ uint16_t ESPUIClass::addControl( ControlType type, const char* label,
uint16_t parentControl,
void ( *callback )( Control*, int )
) {
if ( this->getControl( label ) != nullptr ) {
if ( this->verbosity ) {
Serial.println( "UI ERROR: Element " + String( label ) +
" exists, skipping creating element!" );
}
return -1;
}
Control* control = new Control( type, label, callback, value, color, parentControl );
if ( this->controls == nullptr ) {
@ -478,24 +466,10 @@ Control* ESPUIClass::getControl( uint16_t id ) {
return nullptr;
}
Control* ESPUIClass::getControl( String label ) {
Control* control = this->controls;
while ( control != nullptr ) {
if ( String( control->label ) == label ) {
return control;
}
control = control->next;
}
return nullptr;
}
void ESPUIClass::updateControl( Control* control, int clientId ) {
if ( control ) {
String json;
StaticJsonBuffer<200> jsonBuffer;
DynamicJsonBuffer jsonBuffer( 2000 );
JsonObject& root = jsonBuffer.createObject();
root["type"] = ( int )control->type + ControlType::UpdateOffset;
@ -545,17 +519,6 @@ void ESPUIClass::updateControl( uint16_t id, int clientId ) {
}
}
}
void ESPUIClass::updateControl( String label, int clientId ) {
Control* control = getControl( label );
if ( control ) {
updateControl( control, clientId );
} else {
if ( this->verbosity ) {
Serial.println( String( "Error: There is no control with label " ) + label );
}
}
}
void ESPUIClass::updateControl( Control* control, String value, int clientId ) {
if ( control ) {
@ -576,76 +539,34 @@ void ESPUIClass::updateControl( uint16_t id, String value, int clientId ) {
}
}
void ESPUIClass::updateControl( String label, String value, int clientId ) {
Control* control = getControl( label );
if ( control ) {
updateControl( control, value, clientId );
} else {
if ( this->verbosity ) {
Serial.println( String( "Error: There is no control with label " ) + label );
}
}
}
void ESPUIClass::print( uint16_t id, String value ) {
updateControl( id, value );
}
void ESPUIClass::print( String label, String value ) {
updateControl( label, value );
}
void ESPUIClass::updateLabel( uint16_t id, String value ) {
updateControl( id, value );
}
void ESPUIClass::updateLabel( String label, String value ) {
updateControl( label, value );
}
void ESPUIClass::updateSlider( uint16_t id, int nValue, int clientId ) {
updateControl( id, String( nValue ), clientId );
}
void ESPUIClass::updateSlider( String label, int nValue, int clientId ) {
updateControl( label, String( nValue ), clientId );
}
void ESPUIClass::updateSwitcher( uint16_t id, bool nValue, int clientId ) {
updateControl( id, String( nValue ? "1" : "0" ), clientId );
}
void ESPUIClass::updateSwitcher( String label, bool nValue, int clientId ) {
updateControl( label, String( nValue ? "1" : "0" ), clientId );
}
void ESPUIClass::updateNumber( uint16_t id, int number, int clientId ) {
updateControl( id, String( number ), clientId );
}
void ESPUIClass::updateNumber( String label, int number, int clientId ) {
updateControl( label, String( number ), clientId );
}
void ESPUIClass::updateText( uint16_t id, String text, int clientId ) {
updateControl( id, text, clientId );
}
void ESPUIClass::updateText( String label, String text, int clientId ) {
updateControl( label, text, clientId );
}
void ESPUIClass::updateSelect( uint16_t id, String text, int clientId ) {
updateControl( id, text, clientId );
}
void ESPUIClass::updateSelect( String label, String text, int clientId ) {
updateControl( label, text, clientId );
}
/*
Convert & Transfer Arduino elements to JSON elements
Initially this function used to send the control element data individually.
@ -654,7 +575,7 @@ sent as one blob at the beginning. Therefore a new type is used as well
*/
void ESPUIClass::jsonDom( AsyncWebSocketClient* client ) {
String json;
DynamicJsonBuffer jsonBuffer( 2000 );
DynamicJsonBuffer jsonBuffer( 8000 );
JsonObject& root = jsonBuffer.createObject();
root["type"] = ( int )UI_INITIAL_GUI;
JsonArray& items = jsonBuffer.createArray();

View File

@ -51,6 +51,9 @@ enum ControlType : uint8_t {
Tab,
Select,
Option,
Min,
Max,
Step,
UpdateOffset = 100,
UpdatePad = 101,
@ -65,6 +68,9 @@ enum ControlType : uint8_t {
UpdateTab,
UpdateSelection,
UpdateOption,
UpdateMin,
UpdateMax,
UpdateStep,
InitialGui = 200
};
@ -131,6 +137,8 @@ class Control {
String value, ControlColor color, uint16_t parentControl = Control::noParent )
: type( type ), label( label ), callback( callback ), value( value ), color( color ), parentControl( parentControl ), next( nullptr ) {
id = idCounter++;
// Serial.print( "Control id: " );
// Serial.println( id );
}
Control( const Control& control )
@ -218,42 +226,30 @@ class ESPUIClass {
// Update Elements
Control* getControl( uint16_t id );
Control* getControl( String label );
// Update Elements
void updateControl( uint16_t id, String value, int clientId = -1 );
void updateControl( String label, String value, int clientId = -1 );
void updateControl( Control* control, String value, int clientId = -1 );
void updateControl( uint16_t id, int clientId = -1 );
void updateControl( String label, int clientId = -1 );
void updateControl( Control* control, int clientId = -1 );
void print( uint16_t id, String value );
void print( String label, String value );
void updateLabel( uint16_t id, String value );
void updateLabel( String label, String value );
void updateSwitcher( uint16_t id, bool nValue, int clientId = -1 );
void updateSwitcher( String label, bool nValue, int clientId = -1 );
void updateSlider( uint16_t id, int nValue, int clientId = -1 );
void updateSlider( String label, int nValue, int clientId = -1 );
void updateNumber( uint16_t id, int nValue, int clientId = -1 );
void updateNumber( String label, int nValue, int clientId = -1 );
void updateText( uint16_t id, String nValue, int clientId = -1 );
void updateText( String label, String nValue, int clientId = -1 );
void updateSelect( uint16_t id, String nValue, int clientId = -1 );
void updateSelect( String label, String nValue, int clientId = -1 );
void clearGraph( uint16_t id, int clientId = -1 );
void clearGraph( String label, int clientId = -1 );
void addGraphPoint( uint16_t id, int nValue, int clientId = -1 );
void addGraphPoint( String label, int nValue, int clientId = -1 );
// void textThem( String text, int clientId = -1 );

File diff suppressed because one or more lines are too long

View File

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