mirror of https://github.com/s00500/ESPUI.git
Color of elementes are now updateable, reformatted control.js
This commit is contained in:
Christian Riggenbach
parent
00d996d8dd
commit
7125374fa3
|
|
@ -1,9 +1,16 @@
|
|||
const UI_INITIAL_GUI = 200;
|
||||
const UPDATE_OFFSET = 100;
|
||||
|
||||
const UI_TITEL = 0;
|
||||
const UI_BUTTON = 1;
|
||||
const UI_PAD = 2;
|
||||
const UI_CPAD = 3;
|
||||
|
||||
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;
|
||||
|
|
@ -32,8 +39,8 @@ const UPDATE_SELECT = 112;
|
|||
const UI_OPTION = 13;
|
||||
const UPDATE_OPTION = 113;
|
||||
|
||||
const FOR = 0;
|
||||
const BACK = 1;
|
||||
const UP = 0;
|
||||
const DOWN = 1;
|
||||
const LEFT = 2;
|
||||
const RIGHT = 3;
|
||||
const CENTER = 4;
|
||||
|
|
@ -143,158 +150,92 @@ function start() {
|
|||
handleEvent(fauxEvent);
|
||||
});
|
||||
break;
|
||||
|
||||
case UI_TITEL:
|
||||
document.title = data.label;
|
||||
$("#mainHeader").html(data.label);
|
||||
break;
|
||||
|
||||
case UI_LABEL:
|
||||
var element;
|
||||
var parent;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
parent = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
parent = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr /><span id='l" +
|
||||
data.id +
|
||||
"' class='label label-wrap'>" +
|
||||
data.value +
|
||||
"</span></div>"
|
||||
parent.append(
|
||||
"<div 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 element;
|
||||
var parent;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
parent = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
parent = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='one columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/><button onmousedown='buttonclick(" +
|
||||
data.id +
|
||||
", true)' onmouseup='buttonclick(" +
|
||||
data.id +
|
||||
", false)' id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
parent.append(
|
||||
"<div 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>"
|
||||
"</button></div>"
|
||||
);
|
||||
$("#" + data.id).on({
|
||||
$("#btn" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
buttonclick(data.id, true);
|
||||
}
|
||||
});
|
||||
$("#" + data.id).on({
|
||||
},
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
buttonclick(data.id, false);
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case UI_SWITCHER:
|
||||
var label = "<label id='sl" + data.id + "' class='switch checked'>";
|
||||
var input =
|
||||
"<div class='in'><input type='checkbox' id='s" +
|
||||
data.id +
|
||||
"' onClick='switcher(" +
|
||||
data.id +
|
||||
",null)' checked></div>";
|
||||
if (data.value == "0") {
|
||||
label = "<label id='sl" + data.id + "' class='switch'>";
|
||||
input =
|
||||
"<div class='in'><input type='checkbox' id='s" +
|
||||
data.id +
|
||||
"' onClick='switcher(" +
|
||||
data.id +
|
||||
",null)' ></div>";
|
||||
}
|
||||
var element;
|
||||
var parent;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
parent = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
parent = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div id='" +
|
||||
data.id +
|
||||
"' class='one columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/>" +
|
||||
label +
|
||||
input +
|
||||
parent.append(
|
||||
"<div 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>"
|
||||
"</div>"
|
||||
);
|
||||
switcher(data.id, data.value);
|
||||
break;
|
||||
|
||||
case UI_CPAD:
|
||||
center =
|
||||
"<a class='confirm' onmousedown='padclick(CENTER, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(CENTER, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pc" +
|
||||
data.id +
|
||||
"'>OK</a>";
|
||||
//NO BREAK
|
||||
case UI_PAD:
|
||||
var element;
|
||||
var parent;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
parent = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
parent = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/>" +
|
||||
parent.append(
|
||||
"<div id='" + data.id + "' class='two columns card tcenter " + colorClass(data.color) + "'>" +
|
||||
"<h5>" + data.label + "</h5><hr/>" +
|
||||
"<nav class='control'>" +
|
||||
"<ul>" +
|
||||
"<li><a onmousedown='padclick(FOR, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(FOR, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pf" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(RIGHT, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(RIGHT, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pr" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(LEFT, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(LEFT, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pl" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(BACK, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(BACK, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pb" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(UP, " + data.id + ", true)' onmouseup='padclick(UP, " + data.id + ", false)' id='pf" + data.id + "'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(RIGHT, " + data.id + ", true)' onmouseup='padclick(RIGHT, " + data.id + ", false)' id='pr" + data.id + "'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(LEFT, " + data.id + ", true)' onmouseup='padclick(LEFT, " + data.id + ", false)' id='pl" + data.id + "'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(DOWN, " + data.id + ", true)' onmouseup='padclick(DOWN, " + data.id + ", false)' id='pb" + data.id + "'>▲</a></li>" +
|
||||
"</ul>" +
|
||||
center +
|
||||
((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>"
|
||||
);
|
||||
|
|
@ -302,11 +243,11 @@ function start() {
|
|||
$("#pf" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, true);
|
||||
padclick(UP, data.id, true);
|
||||
},
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, false);
|
||||
padclick(UP, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pl" + data.id).on({
|
||||
|
|
@ -332,11 +273,11 @@ function start() {
|
|||
$("#pb" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, true);
|
||||
padclick(DOWN, data.id, true);
|
||||
},
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, false);
|
||||
padclick(DOWN, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pc" + data.id).on({
|
||||
|
|
@ -351,116 +292,54 @@ function start() {
|
|||
});
|
||||
|
||||
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;
|
||||
var parent;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
parent = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
parent = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter card-slider " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<div id='sl" +
|
||||
data.id +
|
||||
"' class='rkmd-slider slider-discrete slider-" +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<input type='range' min='0' max='100' value='" +
|
||||
data.value +
|
||||
"'>" +
|
||||
parent.append(
|
||||
"<div 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>" +
|
||||
"</div>"
|
||||
"</div>" +
|
||||
"<script>rkmd_rangeSlider('#sl" + data.id + "');</script>"
|
||||
);
|
||||
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;
|
||||
var parent;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
parent = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
parent = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<input style='color:black;' id='num" +
|
||||
data.id +
|
||||
"' type='number' value='" +
|
||||
data.value +
|
||||
"' onchange='numberchange(" +
|
||||
data.id +
|
||||
")' />" +
|
||||
"</div>"
|
||||
parent.append(
|
||||
"<div 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 UPDATE_NUMBER:
|
||||
$("#num" + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
case UI_TEXT_INPUT:
|
||||
var element;
|
||||
var parent;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
parent = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
parent = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<input style='color:black;' id='text" +
|
||||
data.id +
|
||||
"' value='" +
|
||||
data.value +
|
||||
"' onchange='textchange(" +
|
||||
data.id +
|
||||
")' />" +
|
||||
"</div>"
|
||||
parent.append(
|
||||
"<div 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 UPDATE_TEXT_INPUT:
|
||||
$("#text" + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
case UI_TAB:
|
||||
$("#tabsnav").append(
|
||||
|
|
@ -484,70 +363,91 @@ function start() {
|
|||
break;
|
||||
|
||||
case UI_SELECT:
|
||||
var element;
|
||||
var parent;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
parent = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
parent = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<select style='color:black;' id='select" +
|
||||
data.id +
|
||||
"' onchange='selectchange(" +
|
||||
data.id +
|
||||
")' />" +
|
||||
"</div>"
|
||||
parent.append(
|
||||
"<div 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 element = $("#select"+data.parentControl);
|
||||
element.append(
|
||||
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:
|
||||
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 = $('#' + 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 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("tvalue:" + val + ":" + number);
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
function selectchange(number) {
|
||||
var val = $("#select" + number).val();
|
||||
websock.send("svalue:" + val + ":" + number);
|
||||
console.log("svalue:" + val + ":" + number);
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
function buttonclick(number, isdown) {
|
||||
|
|
@ -561,11 +461,11 @@ function padclick(type, number, isdown) {
|
|||
if (isdown) websock.send("pcdown:" + number);
|
||||
else websock.send("pcup:" + number);
|
||||
break;
|
||||
case FOR:
|
||||
case UP:
|
||||
if (isdown) websock.send("pfdown:" + number);
|
||||
else websock.send("pfup:" + number);
|
||||
break;
|
||||
case BACK:
|
||||
case DOWN:
|
||||
if (isdown) websock.send("pbdown:" + number);
|
||||
else websock.send("pbup:" + number);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -1,167 +1,62 @@
|
|||
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 UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;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 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"";}}
|
||||
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 ↻");$("#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 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+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr /><span id='l"+
|
||||
data.id+
|
||||
"' class='label label-wrap'>"+
|
||||
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)+"'>"+
|
||||
"<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)+"'>"+
|
||||
"<h5>"+data.label+"</h5><hr/>"+
|
||||
"<button id='btn"+data.id+"' "+
|
||||
"onmousedown='buttonclick("+data.id+", true)' "+
|
||||
"onmouseup='buttonclick("+data.id+", false)'>"+
|
||||
data.value+
|
||||
"</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+
|
||||
"</h5><hr/><button onmousedown='buttonclick("+
|
||||
data.id+
|
||||
", true)' onmouseup='buttonclick("+
|
||||
data.id+
|
||||
", false)' id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.value+
|
||||
"</button></div>");$("#"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);}});$("#"+data.id).on({touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var label="<label id='sl"+data.id+"' class='switch checked'>";var input="<div class='in'><input type='checkbox' id='s"+
|
||||
data.id+
|
||||
"' onClick='switcher("+
|
||||
data.id+
|
||||
",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+
|
||||
data.id+
|
||||
"' onClick='switcher("+
|
||||
data.id+
|
||||
",null)' ></div>";}
|
||||
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)+
|
||||
"'><h5>"+
|
||||
data.label+
|
||||
"</h5><hr/>"+
|
||||
label+
|
||||
input+
|
||||
"</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)+"'>"+
|
||||
"<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>");break;case UI_CPAD:center="<a class='confirm' onmousedown='padclick(CENTER, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(CENTER, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pc"+
|
||||
data.id+
|
||||
"'>OK</a>";case UI_PAD: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+
|
||||
"</h5><hr/>"+
|
||||
"</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)+"'>"+
|
||||
"<h5>"+data.label+"</h5><hr/>"+
|
||||
"<nav class='control'>"+
|
||||
"<ul>"+
|
||||
"<li><a onmousedown='padclick(FOR, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(FOR, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pf"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(RIGHT, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(RIGHT, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pr"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(LEFT, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(LEFT, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pl"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(BACK, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(BACK, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pb"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(UP, "+data.id+", true)' onmouseup='padclick(UP, "+data.id+", false)' id='pf"+data.id+"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' id='pr"+data.id+"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' id='pl"+data.id+"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(DOWN, "+data.id+", true)' onmouseup='padclick(DOWN, "+data.id+", false)' id='pb"+data.id+"'>▲</a></li>"+
|
||||
"</ul>"+
|
||||
center+
|
||||
((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(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='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<div id='sl"+
|
||||
data.id+
|
||||
"' class='rkmd-slider slider-discrete slider-"+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<input type='range' min='0' max='100' value='"+
|
||||
data.value+
|
||||
"'>"+
|
||||
"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(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)+"'>"+
|
||||
"<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>"+
|
||||
"</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='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<input style='color:black;' id='num"+
|
||||
data.id+
|
||||
"' type='number' value='"+
|
||||
data.value+
|
||||
"' onchange='numberchange("+
|
||||
data.id+
|
||||
")' />"+
|
||||
"</div>");break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UI_TEXT_INPUT: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+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<input style='color:black;' id='text"+
|
||||
data.id+
|
||||
"' value='"+
|
||||
data.value+
|
||||
"' onchange='textchange("+
|
||||
data.id+
|
||||
")' />"+
|
||||
"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;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 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+
|
||||
"'>"+
|
||||
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 element=$("#select"+data.parentControl);element.append("<option id='option"+data.id+"' value='"+data.value+"' "+data.selected+">"+data.label+"</option>");}
|
||||
break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);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("tvalue:"+val+":"+number);console.log(val);}
|
||||
function selectchange(number){var val=$("#select"+number).val();websock.send("svalue:"+val+":"+number);console.log("svalue:"+val+":"+number);console.log(val);}
|
||||
"</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)+"'>"+
|
||||
"<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)+"'>"+
|
||||
"<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)+"'>"+
|
||||
"<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;}
|
||||
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 FOR:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case BACK:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
|
||||
function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case 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);}}
|
||||
|
|
@ -18,6 +18,8 @@ const char* ssid = "ESPUI";
|
|||
const char* password = "espui";
|
||||
const char* hostname = "EspuiTest";
|
||||
|
||||
uint16_t button1;
|
||||
|
||||
void numberCall( Control* sender, int type ) {
|
||||
Serial.println( sender->value );
|
||||
}
|
||||
|
|
@ -51,14 +53,21 @@ void buttonExample( Control* sender, int type ) {
|
|||
case B_DOWN:
|
||||
Serial.println( "Status: Start" );
|
||||
ESPUI.updateControl( "Status:", "Start" );
|
||||
|
||||
ESPUI.getControl( button1 )->color = ControlColor::Carrot;
|
||||
ESPUI.updateControl( button1 );
|
||||
break;
|
||||
|
||||
case B_UP:
|
||||
Serial.println( "Status: Stop" );
|
||||
ESPUI.updateControl( "Status:", "Stop" );
|
||||
|
||||
ESPUI.getControl( button1 )->color = ControlColor::Peterriver;
|
||||
ESPUI.updateControl( button1 );
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
void padExample( Control* sender, int value ) {
|
||||
switch ( value ) {
|
||||
case P_LEFT_DOWN:
|
||||
|
|
@ -200,8 +209,9 @@ void setup( void ) {
|
|||
ESPUI.addControl( ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1 );
|
||||
|
||||
ESPUI.addControl( ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall );
|
||||
|
||||
ESPUI.addControl( ControlType::Label, "Millis:", "0", ControlColor::Emerald, Control::noParent );
|
||||
ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback );
|
||||
button1 = ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback );
|
||||
ESPUI.addControl( ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample );
|
||||
ESPUI.addControl( ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample );
|
||||
ESPUI.addControl( ControlType::Pad, "Pad without center", "", ControlColor::Carrot, Control::noParent, &padExample );
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ const char* ssid = "ESPUI";
|
|||
const char* password = "espui";
|
||||
const char* hostname = "EspuiTest";
|
||||
|
||||
uint16_t button1;
|
||||
|
||||
void numberCall( Control* sender, int type ) {
|
||||
Serial.println( sender->value );
|
||||
}
|
||||
|
|
@ -51,14 +53,21 @@ void buttonExample( Control* sender, int type ) {
|
|||
case B_DOWN:
|
||||
Serial.println( "Status: Start" );
|
||||
ESPUI.updateControl( "Status:", "Start" );
|
||||
|
||||
ESPUI.getControl( button1 )->color = ControlColor::Carrot;
|
||||
ESPUI.updateControl( button1 );
|
||||
break;
|
||||
|
||||
case B_UP:
|
||||
Serial.println( "Status: Stop" );
|
||||
ESPUI.updateControl( "Status:", "Stop" );
|
||||
|
||||
ESPUI.getControl( button1 )->color = ControlColor::Peterriver;
|
||||
ESPUI.updateControl( button1 );
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
void padExample( Control* sender, int value ) {
|
||||
switch ( value ) {
|
||||
case P_LEFT_DOWN:
|
||||
|
|
@ -208,7 +217,7 @@ void setup( void ) {
|
|||
|
||||
// tabbed controls
|
||||
ESPUI.addControl( ControlType::Label, "Millis:", "0", ControlColor::Emerald, tab1 );
|
||||
ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback );
|
||||
button1 = ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback );
|
||||
ESPUI.addControl( ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, tab1, &buttonExample );
|
||||
ESPUI.addControl( ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, tab2, &padExample );
|
||||
ESPUI.addControl( ControlType::Pad, "Pad without center", "", ControlColor::Carrot, tab3, &padExample );
|
||||
|
|
|
|||
|
|
@ -299,10 +299,11 @@ void onWsEvent( AsyncWebSocket* server, AsyncWebSocketClient* client,
|
|||
for ( size_t i = 0; i < len; i++ ) {
|
||||
msg += ( char )data[i];
|
||||
}
|
||||
|
||||
uint16_t id = msg.substring( msg.lastIndexOf( ':' ) + 1 ).toInt();
|
||||
|
||||
if ( ESPUI.verbosity >= Verbosity::VerboseJSON ) {
|
||||
Serial.print("WS rec: ");
|
||||
Serial.print( "WS rec: " );
|
||||
Serial.println( msg );
|
||||
Serial.print( "WS recognised ID: " );
|
||||
Serial.println( id );
|
||||
|
|
@ -491,9 +492,8 @@ Control* ESPUIClass::getControl( String label ) {
|
|||
return nullptr;
|
||||
}
|
||||
|
||||
void ESPUIClass::updateControl( Control* control, String value, int clientId ) {
|
||||
void ESPUIClass::updateControl( Control* control, int clientId ) {
|
||||
if ( control ) {
|
||||
control->value = value;
|
||||
String json;
|
||||
StaticJsonBuffer<200> jsonBuffer;
|
||||
JsonObject& root = jsonBuffer.createObject();
|
||||
|
|
@ -501,6 +501,7 @@ void ESPUIClass::updateControl( Control* control, String value, int clientId ) {
|
|||
root["type"] = ( int )control->type + ControlType::UpdateOffset;
|
||||
root["value"] = control->value;
|
||||
root["id"] = control->id;
|
||||
root["color"] = ( int )control->color;
|
||||
root.printTo( json );
|
||||
|
||||
if ( clientId > 0 ) {
|
||||
|
|
@ -532,6 +533,37 @@ void ESPUIClass::updateControl( Control* control, String value, int clientId ) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
void ESPUIClass::updateControl( uint16_t id, int clientId ) {
|
||||
Control* control = getControl( id );
|
||||
|
||||
if ( control ) {
|
||||
updateControl( control, clientId );
|
||||
} else {
|
||||
if ( this->verbosity ) {
|
||||
Serial.println( String( "Error: There is no control with ID " ) + String( id ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
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 ) {
|
||||
control->value = value;
|
||||
updateControl( control, clientId );
|
||||
}
|
||||
}
|
||||
|
||||
void ESPUIClass::updateControl( uint16_t id, String value, int clientId ) {
|
||||
Control* control = getControl( id );
|
||||
|
||||
|
|
@ -543,6 +575,7 @@ void ESPUIClass::updateControl( uint16_t id, String value, int clientId ) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
void ESPUIClass::updateControl( String label, String value, int clientId ) {
|
||||
Control* control = getControl( label );
|
||||
|
||||
|
|
|
|||
24
src/ESPUI.h
24
src/ESPUI.h
|
|
@ -36,11 +36,11 @@
|
|||
enum ControlType : uint8_t {
|
||||
// fixed controls
|
||||
Title = 0,
|
||||
Button,
|
||||
|
||||
// updatable controls
|
||||
Pad,
|
||||
PadWithCenter,
|
||||
|
||||
// updatable controls
|
||||
Button,
|
||||
Label,
|
||||
Switcher,
|
||||
Slider,
|
||||
|
|
@ -53,7 +53,10 @@ enum ControlType : uint8_t {
|
|||
Option,
|
||||
|
||||
UpdateOffset = 100,
|
||||
UpdateLabel = 104,
|
||||
UpdatePad = 101,
|
||||
UpdatePadWithCenter,
|
||||
ButtonButton,
|
||||
UpdateLabel,
|
||||
UpdateSwitcher,
|
||||
UpdateSlider,
|
||||
UpdateNumber,
|
||||
|
|
@ -119,21 +122,21 @@ class Control {
|
|||
ControlColor color;
|
||||
uint16_t parentControl;
|
||||
Control* next;
|
||||
|
||||
|
||||
static constexpr uint16_t noParent = 0xffff;
|
||||
|
||||
Control(
|
||||
ControlType type, const char* label,
|
||||
void ( *callback )( Control*, int ),
|
||||
String value, ControlColor color, uint16_t parentControl = Control::noParent )
|
||||
: type( type ), label( label ), callback( callback ), value( value ), color( color ), parentControl(parentControl), next( nullptr ) {
|
||||
: 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 ), parentControl(control.parentControl), next( control.next ) {}
|
||||
color( control.color ), parentControl( control.parentControl ), next( control.next ) {}
|
||||
|
||||
private:
|
||||
static uint16_t idCounter;
|
||||
|
|
@ -186,8 +189,8 @@ class ESPUIClass {
|
|||
// Creating Elements
|
||||
|
||||
uint16_t addControl( ControlType type, const char* label,
|
||||
String value = String( "" ), ControlColor color = ControlColor::Turquoise,
|
||||
uint16_t parentControl = Control::noParent, void ( *callback )( Control*, int ) = nullptr );
|
||||
String value = String( "" ), ControlColor color = ControlColor::Turquoise,
|
||||
uint16_t parentControl = Control::noParent, void ( *callback )( Control*, int ) = nullptr );
|
||||
|
||||
int button( const char* label,
|
||||
void ( *callback )( Control*, int ), ControlColor color,
|
||||
|
|
@ -221,6 +224,9 @@ class ESPUIClass {
|
|||
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 );
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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,66,205,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,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 };
|
||||
|
|
|
|||
|
|
@ -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,66,205,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,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 };
|
||||
|
|
|
|||
|
|
@ -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,66,205,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,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 };
|
||||
|
|
|
|||
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
Loading…
Reference in New Issue