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