mirror of
https://github.com/s00500/ESPUI.git
synced 2025-06-11 02:30:39 +00:00
also loads of reformating
This commit is contained in:
2
examples/gui/data/css/normalize.min.css
vendored
2
examples/gui/data/css/normalize.min.css
vendored
@ -1 +1 @@
|
||||
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
|
||||
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
|
||||
682
examples/gui/data/js/controls.js
vendored
682
examples/gui/data/js/controls.js
vendored
@ -14,8 +14,6 @@ const UI_CPAD = 5;
|
||||
const UI_SLIDER = 8;
|
||||
const UPDATE_SLIDER = 9;
|
||||
|
||||
|
||||
|
||||
const UI_NUMBER = 10;
|
||||
const UPDATE_NUMBER = 11;
|
||||
|
||||
@ -43,323 +41,441 @@ const C_ALIZARIN = 6;
|
||||
const C_NONE = 7;
|
||||
|
||||
function colorClass(colorId) {
|
||||
colorId = Number(colorId);
|
||||
switch (colorId) {
|
||||
case C_TURQUOISE:
|
||||
return "turquoise";
|
||||
break;
|
||||
colorId = Number(colorId);
|
||||
switch (colorId) {
|
||||
case C_TURQUOISE:
|
||||
return "turquoise";
|
||||
break;
|
||||
|
||||
case C_EMERALD:
|
||||
return "emerald";
|
||||
break;
|
||||
case C_EMERALD:
|
||||
return "emerald";
|
||||
break;
|
||||
|
||||
case C_PETERRIVER:
|
||||
return "peterriver";
|
||||
break;
|
||||
case C_PETERRIVER:
|
||||
return "peterriver";
|
||||
break;
|
||||
|
||||
case C_WETASPHALT:
|
||||
return "wetasphalt";
|
||||
break;
|
||||
case C_WETASPHALT:
|
||||
return "wetasphalt";
|
||||
break;
|
||||
|
||||
case C_SUNFLOWER:
|
||||
return "sunflower";
|
||||
break;
|
||||
case C_SUNFLOWER:
|
||||
return "sunflower";
|
||||
break;
|
||||
|
||||
case C_CARROT:
|
||||
return "carrot"
|
||||
break;
|
||||
case C_CARROT:
|
||||
return "carrot";
|
||||
break;
|
||||
|
||||
case C_ALIZARIN:
|
||||
return "alizarin"
|
||||
break;
|
||||
case C_ALIZARIN:
|
||||
return "alizarin";
|
||||
break;
|
||||
|
||||
case C_NONE:
|
||||
return ""
|
||||
break;
|
||||
case C_NONE:
|
||||
return "";
|
||||
break;
|
||||
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
var websock;
|
||||
var websockConnected = false;
|
||||
|
||||
function restart() {
|
||||
$(document).add('*').off();
|
||||
$("#row").html("");
|
||||
websock.close();
|
||||
start();
|
||||
$(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
|
||||
});
|
||||
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();
|
||||
}
|
||||
if (!websockConnected && !document.hidden) {
|
||||
restart();
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
||||
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
|
||||
websock.onopen = function(evt) {
|
||||
console.log('websock open');
|
||||
$("#conStatus").addClass("color-green");
|
||||
$("#conStatus").text("Connected");
|
||||
websockConnected = true;
|
||||
};
|
||||
websock.onclose = function(evt) {
|
||||
console.log('websock close');
|
||||
conStatusError();
|
||||
};
|
||||
websock.onerror = function(evt) {
|
||||
console.log(evt);
|
||||
conStatusError();
|
||||
};
|
||||
websock.onmessage = function(evt) {
|
||||
console.log(evt);
|
||||
var data = JSON.parse(evt.data);
|
||||
var e = document.body;
|
||||
var center = "";
|
||||
switch (data.type) {
|
||||
case UI_TITEL:
|
||||
document.title = data.label;
|
||||
$('#mainHeader').html(data.label);
|
||||
break;
|
||||
case UI_LABEL:
|
||||
$('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><h5 id='" + data.id + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label label-wrap'>" + data.value + "</span></div>");
|
||||
break;
|
||||
case UI_BUTTON:
|
||||
$('#row').append("<div class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/><button onmousedown='buttonclick(" + data.id + ", true)' onmouseup='buttonclick(" + data.id + ", false)' id='" + data.id + "'>" + data.value + "</button></div>");
|
||||
$('#' + data.id).on({
|
||||
'touchstart': function(e) {
|
||||
e.preventDefault();
|
||||
buttonclick(data.id, true)
|
||||
}
|
||||
});
|
||||
$('#' + data.id).on({
|
||||
'touchend': function(e) {
|
||||
e.preventDefault();
|
||||
buttonclick(data.id, false)
|
||||
}
|
||||
});
|
||||
break;
|
||||
case UI_SWITCHER:
|
||||
var label = "<label id='sl" + data.id + "' class='switch checked'>";
|
||||
var input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked></div>";
|
||||
if (data.value == "0") {
|
||||
label = "<label id='sl" + data.id + "' class='switch'>";
|
||||
input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' ></div>";
|
||||
}
|
||||
$('#row').append(
|
||||
"<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
|
||||
label + input +
|
||||
"</label>" +
|
||||
"</div>");
|
||||
break;
|
||||
case UI_CPAD:
|
||||
center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>";
|
||||
//NO BREAK
|
||||
case UI_PAD:
|
||||
$('#row').append(
|
||||
"<div class='two columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
|
||||
"<nav class='control'>" +
|
||||
"<ul>" +
|
||||
"<li><a onmousedown='padclick(FOR, " + data.id + ", true)' onmouseup='padclick(FOR, " + data.id + ", false)' href='#' id='pf" + data.id + "'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(RIGHT, " + data.id + ", true)' onmouseup='padclick(RIGHT, " + data.id + ", false)' href='#' id='pr" + data.id + "'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(LEFT, " + data.id + ", true)' onmouseup='padclick(LEFT, " + data.id + ", false)' href='#' id='pl" + data.id + "'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(BACK, " + data.id + ", true)' onmouseup='padclick(BACK, " + data.id + ", false)' href='#' id='pb" + data.id + "'>▲</a></li>" +
|
||||
"</ul>" +
|
||||
center +
|
||||
"</nav>" +
|
||||
"</div>");
|
||||
|
||||
$('#pf' + data.id).on({
|
||||
'touchstart': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, true)
|
||||
}
|
||||
});
|
||||
$('#pf' + data.id).on({
|
||||
'touchend': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, false)
|
||||
}
|
||||
});
|
||||
$('#pl' + data.id).on({
|
||||
'touchstart': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(LEFT, data.id, true)
|
||||
}
|
||||
});
|
||||
$('#pl' + data.id).on({
|
||||
'touchend': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(LEFT, data.id, false)
|
||||
}
|
||||
});
|
||||
$('#pr' + data.id).on({
|
||||
'touchstart': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(RIGHT, data.id, true)
|
||||
}
|
||||
});
|
||||
$('#pr' + data.id).on({
|
||||
'touchend': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(RIGHT, data.id, false)
|
||||
}
|
||||
});
|
||||
$('#pb' + data.id).on({
|
||||
'touchstart': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, true)
|
||||
}
|
||||
});
|
||||
$('#pb' + data.id).on({
|
||||
'touchend': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, false)
|
||||
}
|
||||
});
|
||||
$('#pc' + data.id).on({
|
||||
'touchstart': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(CENTER, data.id, true)
|
||||
}
|
||||
});
|
||||
$('#pc' + data.id).on({
|
||||
'touchend': function(e) {
|
||||
e.preventDefault();
|
||||
padclick(CENTER, data.id, false)
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
case UPDATE_LABEL:
|
||||
$('#l' + data.id).html(data.value);
|
||||
break;
|
||||
case UPDATE_SWITCHER:
|
||||
if (data.value == "0")
|
||||
switcher(data.id, 0);
|
||||
else
|
||||
switcher(data.id, 1);
|
||||
break;
|
||||
case UI_SLIDER:
|
||||
$('#row').append(
|
||||
"<div class='two columns card tcenter card-slider " + colorClass(data.color) + "'>" +
|
||||
"<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
|
||||
"<div id='sl" + data.id + "' class='rkmd-slider slider-discrete slider-" + colorClass(data.color) + "'>" +
|
||||
"<input type='range' min='0' max='100' value='" + data.value + "'>" +
|
||||
"</div>" +
|
||||
"</div>"
|
||||
);
|
||||
$('#row').append(
|
||||
"<script>" +
|
||||
"rkmd_rangeSlider('#sl" + data.id + "');" +
|
||||
"</script>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_SLIDER:
|
||||
slider_move($('#sl' + data.id), data.value, '100', false);
|
||||
break;
|
||||
|
||||
case UI_NUMBER:
|
||||
$('#row').append(
|
||||
"<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
|
||||
"<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
|
||||
"<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
|
||||
"</div>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_NUMBER:
|
||||
$('#num' + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
case UI_TEXT_INPUT:
|
||||
$('#row').append(
|
||||
"<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
|
||||
"<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
|
||||
"<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
|
||||
"</div>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_TEXT_INPUT:
|
||||
$('#num' + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error('Unknown type or event');
|
||||
break;
|
||||
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
||||
websock = new WebSocket("ws://" + window.location.hostname + "/ws");
|
||||
websock.onopen = function(evt) {
|
||||
console.log("websock open");
|
||||
$("#conStatus").addClass("color-green");
|
||||
$("#conStatus").text("Connected");
|
||||
websockConnected = true;
|
||||
};
|
||||
websock.onclose = function(evt) {
|
||||
console.log("websock close");
|
||||
conStatusError();
|
||||
};
|
||||
websock.onerror = function(evt) {
|
||||
console.log(evt);
|
||||
conStatusError();
|
||||
};
|
||||
websock.onmessage = function(evt) {
|
||||
console.log(evt);
|
||||
var data = JSON.parse(evt.data);
|
||||
var e = document.body;
|
||||
var center = "";
|
||||
switch (data.type) {
|
||||
case UI_TITEL:
|
||||
document.title = data.label;
|
||||
$("#mainHeader").html(data.label);
|
||||
break;
|
||||
case UI_LABEL:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr /><span id='l" +
|
||||
data.id +
|
||||
"' class='label label-wrap'>" +
|
||||
data.value +
|
||||
"</span></div>"
|
||||
);
|
||||
break;
|
||||
case UI_BUTTON:
|
||||
$("#row").append(
|
||||
"<div class='one columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/><button onmousedown='buttonclick(" +
|
||||
data.id +
|
||||
", true)' onmouseup='buttonclick(" +
|
||||
data.id +
|
||||
", false)' id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.value +
|
||||
"</button></div>"
|
||||
);
|
||||
$("#" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
buttonclick(data.id, true);
|
||||
}
|
||||
});
|
||||
$("#" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
buttonclick(data.id, false);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case UI_SWITCHER:
|
||||
var label = "<label id='sl" + data.id + "' class='switch checked'>";
|
||||
var input =
|
||||
"<div class='in'><input type='checkbox' id='s" +
|
||||
data.id +
|
||||
"' onClick='switcher(" +
|
||||
data.id +
|
||||
",null)' checked></div>";
|
||||
if (data.value == "0") {
|
||||
label = "<label id='sl" + data.id + "' class='switch'>";
|
||||
input =
|
||||
"<div class='in'><input type='checkbox' id='s" +
|
||||
data.id +
|
||||
"' onClick='switcher(" +
|
||||
data.id +
|
||||
",null)' ></div>";
|
||||
}
|
||||
};
|
||||
$("#row").append(
|
||||
"<div id='" +
|
||||
data.id +
|
||||
"' class='one columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/>" +
|
||||
label +
|
||||
input +
|
||||
"</label>" +
|
||||
"</div>"
|
||||
);
|
||||
break;
|
||||
case UI_CPAD:
|
||||
center =
|
||||
"<a class='confirm' onmousedown='padclick(CENTER, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(CENTER, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pc" +
|
||||
data.id +
|
||||
"'>OK</a>";
|
||||
//NO BREAK
|
||||
case UI_PAD:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
data.label +
|
||||
"</h5><hr/>" +
|
||||
"<nav class='control'>" +
|
||||
"<ul>" +
|
||||
"<li><a onmousedown='padclick(FOR, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(FOR, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pf" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(RIGHT, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(RIGHT, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pr" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(LEFT, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(LEFT, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pl" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(BACK, " +
|
||||
data.id +
|
||||
", true)' onmouseup='padclick(BACK, " +
|
||||
data.id +
|
||||
", false)' href='#' id='pb" +
|
||||
data.id +
|
||||
"'>▲</a></li>" +
|
||||
"</ul>" +
|
||||
center +
|
||||
"</nav>" +
|
||||
"</div>"
|
||||
);
|
||||
|
||||
$("#pf" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pf" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pl" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(LEFT, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pl" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(LEFT, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pr" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(RIGHT, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pr" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(RIGHT, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pb" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pb" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, false);
|
||||
}
|
||||
});
|
||||
$("#pc" + data.id).on({
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(CENTER, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pc" + data.id).on({
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(CENTER, data.id, false);
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
case UPDATE_LABEL:
|
||||
$("#l" + data.id).html(data.value);
|
||||
break;
|
||||
case UPDATE_SWITCHER:
|
||||
if (data.value == "0") switcher(data.id, 0);
|
||||
else switcher(data.id, 1);
|
||||
break;
|
||||
case UI_SLIDER:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter card-slider " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<div id='sl" +
|
||||
data.id +
|
||||
"' class='rkmd-slider slider-discrete slider-" +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<input type='range' min='0' max='100' value='" +
|
||||
data.value +
|
||||
"'>" +
|
||||
"</div>" +
|
||||
"</div>"
|
||||
);
|
||||
$("#row").append(
|
||||
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_SLIDER:
|
||||
slider_move($("#sl" + data.id), data.value, "100", false);
|
||||
break;
|
||||
|
||||
case UI_NUMBER:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<input style='color:black;' id='num" +
|
||||
data.id +
|
||||
"' type='number' value='" +
|
||||
data.value +
|
||||
"' onchange='numberchange(" +
|
||||
data.id +
|
||||
")' />" +
|
||||
"</div>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_NUMBER:
|
||||
$("#num" + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
case UI_TEXT_INPUT:
|
||||
$("#row").append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
"<h5 id='" +
|
||||
data.id +
|
||||
"'>" +
|
||||
data.label +
|
||||
"</h5><hr />" +
|
||||
"<input style='color:black;' id='text" +
|
||||
data.id +
|
||||
"' value='" +
|
||||
data.value +
|
||||
"' onchange='textchange(" +
|
||||
data.id +
|
||||
")' />" +
|
||||
"</div>"
|
||||
);
|
||||
break;
|
||||
|
||||
case UPDATE_TEXT_INPUT:
|
||||
$("#text" + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error("Unknown type or event");
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function numberchange(number) {
|
||||
var val = $('#num' + data.id).val();
|
||||
websock.send("nchange:" + number + ":" + val);
|
||||
console.log(val);
|
||||
var val = $("#num" + number).val();
|
||||
websock.send("nvalue:" + val + ":" + number);
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
function textchange(number) {
|
||||
var val = $("#text" + number).val();
|
||||
websock.send("tvalue:" + val + ":" + number);
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
function buttonclick(number, isdown) {
|
||||
if (isdown) websock.send("bdown:" + number);
|
||||
else websock.send("bup:" + number);
|
||||
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;
|
||||
|
||||
}
|
||||
switch (type) {
|
||||
case CENTER:
|
||||
if (isdown) websock.send("pcdown:" + number);
|
||||
else websock.send("pcup:" + number);
|
||||
break;
|
||||
case FOR:
|
||||
if (isdown) websock.send("pfdown:" + number);
|
||||
else websock.send("pfup:" + number);
|
||||
break;
|
||||
case BACK:
|
||||
if (isdown) websock.send("pbdown:" + number);
|
||||
else websock.send("pbup:" + number);
|
||||
break;
|
||||
case LEFT:
|
||||
if (isdown) websock.send("pldown:" + number);
|
||||
else websock.send("plup:" + number);
|
||||
break;
|
||||
case RIGHT:
|
||||
if (isdown) websock.send("prdown:" + number);
|
||||
else websock.send("prup:" + number);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function switcher(number, state) {
|
||||
if (state == null) {
|
||||
if ($('#s' + number).is(':checked')) {
|
||||
websock.send("sactive:" + number);
|
||||
$('#sl' + number).addClass('checked');
|
||||
} else {
|
||||
websock.send("sinactive:" + number);
|
||||
$('#sl' + number).removeClass('checked');
|
||||
}
|
||||
} else if (state == 1) {
|
||||
$('#sl' + number).addClass('checked');
|
||||
$('#sl' + number).prop("checked", true);
|
||||
} else if (state == 0) {
|
||||
$('#sl' + number).removeClass('checked');
|
||||
$('#sl' + number).prop("checked", false);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
163
examples/gui/data/js/controls.min.js
vendored
163
examples/gui/data/js/controls.min.js
vendored
@ -1,41 +1,142 @@
|
||||
const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot"
|
||||
break;case C_ALIZARIN:return"alizarin"
|
||||
break;case C_NONE:return""
|
||||
break;default:return"";}}
|
||||
var websock;var websockConnected=false;function restart(){$(document).add('*').off();$("#row").html("");websock.close();start();}
|
||||
function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({'click':restart});}
|
||||
const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}}
|
||||
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();};websock.onmessage=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_TITEL:document.title=data.label;$('#mainHeader').html(data.label);break;case UI_LABEL:$('#row').append("<div class='two columns card tcenter "+colorClass(data.color)+"'><h5 id='"+data.id+"'>"+data.label+"</h5><hr /><span id='l"+data.id+"' class='label label-wrap'>"+data.value+"</span></div>");break;case UI_BUTTON:$('#row').append("<div class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'>"+data.value+"</button></div>");$('#'+data.id).on({'touchstart':function(e){e.preventDefault();buttonclick(data.id,true)}});$('#'+data.id).on({'touchend':function(e){e.preventDefault();buttonclick(data.id,false)}});break;case UI_SWITCHER:var label="<label id='sl"+data.id+"' class='switch checked'>";var input="<div class='in'><input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' ></div>";}
|
||||
$('#row').append("<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
|
||||
label+input+
|
||||
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};websock.onmessage=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5 id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr /><span id='l"+
|
||||
data.id+
|
||||
"' class='label label-wrap'>"+
|
||||
data.value+
|
||||
"</span></div>");break;case UI_BUTTON:$("#row").append("<div class='one columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5>"+
|
||||
data.label+
|
||||
"</h5><hr/><button onmousedown='buttonclick("+
|
||||
data.id+
|
||||
", true)' onmouseup='buttonclick("+
|
||||
data.id+
|
||||
", false)' id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.value+
|
||||
"</button></div>");$("#"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);}});$("#"+data.id).on({touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var label="<label id='sl"+data.id+"' class='switch checked'>";var input="<div class='in'><input type='checkbox' id='s"+
|
||||
data.id+
|
||||
"' onClick='switcher("+
|
||||
data.id+
|
||||
",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+
|
||||
data.id+
|
||||
"' onClick='switcher("+
|
||||
data.id+
|
||||
",null)' ></div>";}
|
||||
$("#row").append("<div id='"+
|
||||
data.id+
|
||||
"' class='one columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5>"+
|
||||
data.label+
|
||||
"</h5><hr/>"+
|
||||
label+
|
||||
input+
|
||||
"</label>"+
|
||||
"</div>");break;case UI_CPAD:center="<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='pc"+data.id+"'>OK</a>";case UI_PAD:$('#row').append("<div class='two columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
|
||||
"</div>");break;case UI_CPAD:center="<a class='confirm' onmousedown='padclick(CENTER, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(CENTER, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pc"+
|
||||
data.id+
|
||||
"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5>"+
|
||||
data.label+
|
||||
"</h5><hr/>"+
|
||||
"<nav class='control'>"+
|
||||
"<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(FOR, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(FOR, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pf"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(RIGHT, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(RIGHT, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pr"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(LEFT, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(LEFT, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pl"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"<li><a onmousedown='padclick(BACK, "+
|
||||
data.id+
|
||||
", true)' onmouseup='padclick(BACK, "+
|
||||
data.id+
|
||||
", false)' href='#' id='pb"+
|
||||
data.id+
|
||||
"'>▲</a></li>"+
|
||||
"</ul>"+
|
||||
center+
|
||||
"</nav>"+
|
||||
"</div>");$('#pf'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(FOR,data.id,true)}});$('#pf'+data.id).on({'touchend':function(e){e.preventDefault();padclick(FOR,data.id,false)}});$('#pl'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(LEFT,data.id,true)}});$('#pl'+data.id).on({'touchend':function(e){e.preventDefault();padclick(LEFT,data.id,false)}});$('#pr'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(RIGHT,data.id,true)}});$('#pr'+data.id).on({'touchend':function(e){e.preventDefault();padclick(RIGHT,data.id,false)}});$('#pb'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(BACK,data.id,true)}});$('#pb'+data.id).on({'touchend':function(e){e.preventDefault();padclick(BACK,data.id,false)}});$('#pc'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(CENTER,data.id,true)}});$('#pc'+data.id).on({'touchend':function(e){e.preventDefault();padclick(CENTER,data.id,false)}});break;case UPDATE_LABEL:$('#l'+data.id).html(data.value);break;case UPDATE_SWITCHER:if(data.value=="0")
|
||||
switcher(data.id,0);else
|
||||
switcher(data.id,1);break;case UI_SLIDER:$('#row').append("<div class='two columns card tcenter card-slider "+colorClass(data.color)+"'>"+
|
||||
"<h5 id='"+data.id+"'>"+data.label+"</h5><hr />"+
|
||||
"<div id='sl"+data.id+"' class='rkmd-slider slider-discrete slider-"+colorClass(data.color)+"'>"+
|
||||
"<input type='range' min='0' max='100' value='"+data.value+"'>"+
|
||||
"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(FOR,data.id,true);}});$("#pf"+data.id).on({touchend:function(e){e.preventDefault();padclick(FOR,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);}});$("#pl"+data.id).on({touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);}});$("#pr"+data.id).on({touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(BACK,data.id,true);}});$("#pb"+data.id).on({touchend:function(e){e.preventDefault();padclick(BACK,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);}});$("#pc"+data.id).on({touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:if(data.value=="0")switcher(data.id,0);else switcher(data.id,1);break;case UI_SLIDER:$("#row").append("<div class='two columns card tcenter card-slider "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<div id='sl"+
|
||||
data.id+
|
||||
"' class='rkmd-slider slider-discrete slider-"+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<input type='range' min='0' max='100' value='"+
|
||||
data.value+
|
||||
"'>"+
|
||||
"</div>"+
|
||||
"</div>");$('#row').append("<script>"+
|
||||
"rkmd_rangeSlider('#sl"+data.id+"');"+
|
||||
"</script>");break;case UPDATE_SLIDER:slider_move($('#sl'+data.id),data.value,'100',false);break;case UI_NUMBER:$('#row').append("<div class='two columns card tcenter"+colorClass(data.color)+"'>"+
|
||||
"<h5 id='"+data.id+"'>"+data.label+"</h5><hr />"+
|
||||
"<input id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+
|
||||
"</div>");break;case UPDATE_NUMBER:$('#num'+data.id).val(data.value);break;case UI_TEXT_INPUT:$('#row').append("<div class='two columns card tcenter"+colorClass(data.color)+"'>"+
|
||||
"<h5 id='"+data.id+"'>"+data.label+"</h5><hr />"+
|
||||
"<input id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+
|
||||
"</div>");break;case UPDATE_TEXT_INPUT:$('#num'+data.id).val(data.value);break;default:console.error('Unknown type or event');break;}};}
|
||||
function numberchange(number){var val=$('#num'+data.id).val();websock.send("nchange:"+number+":"+val);console.log(val);}
|
||||
"</div>");$("#row").append("<script>"+"rkmd_rangeSlider('#sl"+data.id+"');"+"</script>");break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UI_NUMBER:$("#row").append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<input style='color:black;' id='num"+
|
||||
data.id+
|
||||
"' type='number' value='"+
|
||||
data.value+
|
||||
"' onchange='numberchange("+
|
||||
data.id+
|
||||
")' />"+
|
||||
"</div>");break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UI_TEXT_INPUT:$("#row").append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
data.id+
|
||||
"'>"+
|
||||
data.label+
|
||||
"</h5><hr />"+
|
||||
"<input style='color:black;' id='text"+
|
||||
data.id+
|
||||
"' value='"+
|
||||
data.value+
|
||||
"' onchange='textchange("+
|
||||
data.id+
|
||||
")' />"+
|
||||
"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};}
|
||||
function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);}
|
||||
function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);}
|
||||
function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
|
||||
function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case FOR:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case BACK:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
|
||||
function switcher(number,state){if(state==null){if($('#s'+number).is(':checked')){websock.send("sactive:"+number);$('#sl'+number).addClass('checked');}else{websock.send("sinactive:"+number);$('#sl'+number).removeClass('checked');}}else if(state==1){$('#sl'+number).addClass('checked');$('#sl'+number).prop("checked",true);}else if(state==0){$('#sl'+number).removeClass('checked');$('#sl'+number).prop("checked",false);}}
|
||||
function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
|
||||
@ -17,6 +17,10 @@ const char *password = "";
|
||||
long oldTime = 0;
|
||||
bool switchi = false;
|
||||
|
||||
void numberCall(Control sender, int type) { Serial.println(sender.value); }
|
||||
|
||||
void textCall(Control sender, int type) { Serial.println(sender.value); }
|
||||
|
||||
void slider(Control sender, int type) { Serial.println(sender.value); }
|
||||
|
||||
void buttonCallback(Control sender, int type) {
|
||||
@ -148,12 +152,15 @@ void setup(void) {
|
||||
ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
|
||||
ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30");
|
||||
ESPUI.slider("Slider two", &slider, COLOR_NONE, "100");
|
||||
ESPUI.text("Text Test:", &textCall, COLOR_ALIZARIN, "a Text Field");
|
||||
ESPUI.number("Numbertest", &numberCall, COLOR_ALIZARIN, 5, 0, 10);
|
||||
|
||||
/*
|
||||
.begin loads and serves all files from PROGMEM directly.
|
||||
If you want to serve the files from SPIFFS use .beginSPIFFS
|
||||
(.prepareFileSystem has to be run in an empty sketch before)
|
||||
*/
|
||||
|
||||
dnsServer.start(DNS_PORT, "*", apIP);
|
||||
ESPUI.begin("ESPUI Control");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user