mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-22 04:00:55 +00:00
#43 Sending Initial GUI as one big array
- Added new INITIAL_GUI Type - spliting GUI Blob to events in controls js - formating the json in jsonDom into one big array
This commit is contained in:
parent
980e20818f
commit
f31575b50c
284
examples/gui/data/js/controls.js
vendored
284
examples/gui/data/js/controls.js
vendored
@ -1,3 +1,4 @@
|
|||||||
|
const UI_INITIAL_GUI = 100;
|
||||||
const UI_TITEL = 0;
|
const UI_TITEL = 0;
|
||||||
|
|
||||||
const UI_LABEL = 1;
|
const UI_LABEL = 1;
|
||||||
@ -112,26 +113,37 @@ function handleVisibilityChange() {
|
|||||||
function start() {
|
function start() {
|
||||||
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
||||||
websock = new WebSocket("ws://" + window.location.hostname + "/ws");
|
websock = new WebSocket("ws://" + window.location.hostname + "/ws");
|
||||||
websock.onopen = function(evt) {
|
websock.onopen = function (evt) {
|
||||||
console.log("websock open");
|
console.log("websock open");
|
||||||
$("#conStatus").addClass("color-green");
|
$("#conStatus").addClass("color-green");
|
||||||
$("#conStatus").text("Connected");
|
$("#conStatus").text("Connected");
|
||||||
websockConnected = true;
|
websockConnected = true;
|
||||||
};
|
};
|
||||||
websock.onclose = function(evt) {
|
|
||||||
|
websock.onclose = function (evt) {
|
||||||
console.log("websock close");
|
console.log("websock close");
|
||||||
conStatusError();
|
conStatusError();
|
||||||
};
|
};
|
||||||
websock.onerror = function(evt) {
|
|
||||||
|
websock.onerror = function (evt) {
|
||||||
console.log(evt);
|
console.log(evt);
|
||||||
conStatusError();
|
conStatusError();
|
||||||
};
|
};
|
||||||
websock.onmessage = function(evt) {
|
|
||||||
console.log(evt);
|
var handleEvent = function (evt) {
|
||||||
|
//console.log(evt);
|
||||||
var data = JSON.parse(evt.data);
|
var data = JSON.parse(evt.data);
|
||||||
var e = document.body;
|
var e = document.body;
|
||||||
var center = "";
|
var center = "";
|
||||||
switch (data.type) {
|
switch (data.type) {
|
||||||
|
case UI_INITIAL_GUI:
|
||||||
|
data.controls.forEach(element => {
|
||||||
|
var fauxEvent = {
|
||||||
|
data: JSON.stringify(element)
|
||||||
|
};
|
||||||
|
handleEvent(fauxEvent);
|
||||||
|
});
|
||||||
|
break;
|
||||||
case UI_TITEL:
|
case UI_TITEL:
|
||||||
document.title = data.label;
|
document.title = data.label;
|
||||||
$("#mainHeader").html(data.label);
|
$("#mainHeader").html(data.label);
|
||||||
@ -139,42 +151,42 @@ function start() {
|
|||||||
case UI_LABEL:
|
case UI_LABEL:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter " +
|
"<div class='two columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'><h5 id='" +
|
"'><h5 id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr /><span id='l" +
|
"</h5><hr /><span id='l" +
|
||||||
data.id +
|
data.id +
|
||||||
"' class='label label-wrap'>" +
|
"' class='label label-wrap'>" +
|
||||||
data.value +
|
data.value +
|
||||||
"</span></div>"
|
"</span></div>"
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
case UI_BUTTON:
|
case UI_BUTTON:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='one columns card tcenter " +
|
"<div class='one columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'><h5>" +
|
"'><h5>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr/><button onmousedown='buttonclick(" +
|
"</h5><hr/><button onmousedown='buttonclick(" +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='buttonclick(" +
|
", true)' onmouseup='buttonclick(" +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' id='" +
|
", false)' id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.value +
|
data.value +
|
||||||
"</button></div>"
|
"</button></div>"
|
||||||
);
|
);
|
||||||
$("#" + data.id).on({
|
$("#" + data.id).on({
|
||||||
touchstart: function(e) {
|
touchstart: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
buttonclick(data.id, true);
|
buttonclick(data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#" + data.id).on({
|
$("#" + data.id).on({
|
||||||
touchend: function(e) {
|
touchend: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
buttonclick(data.id, false);
|
buttonclick(data.id, false);
|
||||||
}
|
}
|
||||||
@ -199,16 +211,16 @@ function start() {
|
|||||||
}
|
}
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div id='" +
|
"<div id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"' class='one columns card tcenter " +
|
"' class='one columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'><h5>" +
|
"'><h5>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr/>" +
|
"</h5><hr/>" +
|
||||||
label +
|
label +
|
||||||
input +
|
input +
|
||||||
"</label>" +
|
"</label>" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
case UI_CPAD:
|
case UI_CPAD:
|
||||||
@ -220,106 +232,106 @@ function start() {
|
|||||||
", false)' href='#' id='pc" +
|
", false)' href='#' id='pc" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>OK</a>";
|
"'>OK</a>";
|
||||||
//NO BREAK
|
//NO BREAK
|
||||||
case UI_PAD:
|
case UI_PAD:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter " +
|
"<div class='two columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'><h5>" +
|
"'><h5>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr/>" +
|
"</h5><hr/>" +
|
||||||
"<nav class='control'>" +
|
"<nav class='control'>" +
|
||||||
"<ul>" +
|
"<ul>" +
|
||||||
"<li><a onmousedown='padclick(FOR, " +
|
"<li><a onmousedown='padclick(FOR, " +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='padclick(FOR, " +
|
", true)' onmouseup='padclick(FOR, " +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' href='#' id='pf" +
|
", false)' href='#' id='pf" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>▲</a></li>" +
|
"'>▲</a></li>" +
|
||||||
"<li><a onmousedown='padclick(RIGHT, " +
|
"<li><a onmousedown='padclick(RIGHT, " +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='padclick(RIGHT, " +
|
", true)' onmouseup='padclick(RIGHT, " +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' href='#' id='pr" +
|
", false)' href='#' id='pr" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>▲</a></li>" +
|
"'>▲</a></li>" +
|
||||||
"<li><a onmousedown='padclick(LEFT, " +
|
"<li><a onmousedown='padclick(LEFT, " +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='padclick(LEFT, " +
|
", true)' onmouseup='padclick(LEFT, " +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' href='#' id='pl" +
|
", false)' href='#' id='pl" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>▲</a></li>" +
|
"'>▲</a></li>" +
|
||||||
"<li><a onmousedown='padclick(BACK, " +
|
"<li><a onmousedown='padclick(BACK, " +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='padclick(BACK, " +
|
", true)' onmouseup='padclick(BACK, " +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' href='#' id='pb" +
|
", false)' href='#' id='pb" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>▲</a></li>" +
|
"'>▲</a></li>" +
|
||||||
"</ul>" +
|
"</ul>" +
|
||||||
center +
|
center +
|
||||||
"</nav>" +
|
"</nav>" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
|
|
||||||
$("#pf" + data.id).on({
|
$("#pf" + data.id).on({
|
||||||
touchstart: function(e) {
|
touchstart: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(FOR, data.id, true);
|
padclick(FOR, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pf" + data.id).on({
|
$("#pf" + data.id).on({
|
||||||
touchend: function(e) {
|
touchend: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(FOR, data.id, false);
|
padclick(FOR, data.id, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pl" + data.id).on({
|
$("#pl" + data.id).on({
|
||||||
touchstart: function(e) {
|
touchstart: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(LEFT, data.id, true);
|
padclick(LEFT, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pl" + data.id).on({
|
$("#pl" + data.id).on({
|
||||||
touchend: function(e) {
|
touchend: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(LEFT, data.id, false);
|
padclick(LEFT, data.id, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pr" + data.id).on({
|
$("#pr" + data.id).on({
|
||||||
touchstart: function(e) {
|
touchstart: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(RIGHT, data.id, true);
|
padclick(RIGHT, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pr" + data.id).on({
|
$("#pr" + data.id).on({
|
||||||
touchend: function(e) {
|
touchend: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(RIGHT, data.id, false);
|
padclick(RIGHT, data.id, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pb" + data.id).on({
|
$("#pb" + data.id).on({
|
||||||
touchstart: function(e) {
|
touchstart: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(BACK, data.id, true);
|
padclick(BACK, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pb" + data.id).on({
|
$("#pb" + data.id).on({
|
||||||
touchend: function(e) {
|
touchend: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(BACK, data.id, false);
|
padclick(BACK, data.id, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pc" + data.id).on({
|
$("#pc" + data.id).on({
|
||||||
touchstart: function(e) {
|
touchstart: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(CENTER, data.id, true);
|
padclick(CENTER, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pc" + data.id).on({
|
$("#pc" + data.id).on({
|
||||||
touchend: function(e) {
|
touchend: function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(CENTER, data.id, false);
|
padclick(CENTER, data.id, false);
|
||||||
}
|
}
|
||||||
@ -336,23 +348,23 @@ function start() {
|
|||||||
case UI_SLIDER:
|
case UI_SLIDER:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter card-slider " +
|
"<div class='two columns card tcenter card-slider " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'>" +
|
"'>" +
|
||||||
"<h5 id='" +
|
"<h5 id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr />" +
|
"</h5><hr />" +
|
||||||
"<div id='sl" +
|
"<div id='sl" +
|
||||||
data.id +
|
data.id +
|
||||||
"' class='rkmd-slider slider-discrete slider-" +
|
"' class='rkmd-slider slider-discrete slider-" +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'>" +
|
"'>" +
|
||||||
"<input type='range' min='0' max='100' value='" +
|
"<input type='range' min='0' max='100' value='" +
|
||||||
data.value +
|
data.value +
|
||||||
"'>" +
|
"'>" +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
|
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
|
||||||
@ -366,21 +378,21 @@ function start() {
|
|||||||
case UI_NUMBER:
|
case UI_NUMBER:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter " +
|
"<div class='two columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'>" +
|
"'>" +
|
||||||
"<h5 id='" +
|
"<h5 id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr />" +
|
"</h5><hr />" +
|
||||||
"<input style='color:black;' id='num" +
|
"<input style='color:black;' id='num" +
|
||||||
data.id +
|
data.id +
|
||||||
"' type='number' value='" +
|
"' type='number' value='" +
|
||||||
data.value +
|
data.value +
|
||||||
"' onchange='numberchange(" +
|
"' onchange='numberchange(" +
|
||||||
data.id +
|
data.id +
|
||||||
")' />" +
|
")' />" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -391,21 +403,21 @@ function start() {
|
|||||||
case UI_TEXT_INPUT:
|
case UI_TEXT_INPUT:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter " +
|
"<div class='two columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'>" +
|
"'>" +
|
||||||
"<h5 id='" +
|
"<h5 id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr />" +
|
"</h5><hr />" +
|
||||||
"<input style='color:black;' id='text" +
|
"<input style='color:black;' id='text" +
|
||||||
data.id +
|
data.id +
|
||||||
"' value='" +
|
"' value='" +
|
||||||
data.value +
|
data.value +
|
||||||
"' onchange='textchange(" +
|
"' onchange='textchange(" +
|
||||||
data.id +
|
data.id +
|
||||||
")' />" +
|
")' />" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -418,6 +430,8 @@ function start() {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
websock.onmessage = handleEvent;
|
||||||
}
|
}
|
||||||
|
|
||||||
function numberchange(number) {
|
function numberchange(number) {
|
||||||
|
|||||||
6
examples/gui/data/js/controls.min.js
vendored
6
examples/gui/data/js/controls.min.js
vendored
@ -1,8 +1,8 @@
|
|||||||
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"";}}
|
const UI_INITIAL_GUI=100;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();}
|
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();};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 "+
|
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
|
||||||
colorClass(data.color)+
|
colorClass(data.color)+
|
||||||
"'><h5 id='"+
|
"'><h5 id='"+
|
||||||
data.id+
|
data.id+
|
||||||
@ -134,7 +134,7 @@ data.value+
|
|||||||
"' onchange='textchange("+
|
"' onchange='textchange("+
|
||||||
data.id+
|
data.id+
|
||||||
")' />"+
|
")' />"+
|
||||||
"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};}
|
"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+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 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 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 buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
|
||||||
|
|||||||
@ -613,25 +613,39 @@ bool ESPUIClass::labelExists(String label) {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Convert & Transfer Arduino elements to JSON elements
|
/*
|
||||||
|
Convert & Transfer Arduino elements to JSON elements
|
||||||
|
Initially this function used to send the control element data individually.
|
||||||
|
Due to a change in the ESPAsyncWebserver library this had top be changed to be
|
||||||
|
sent as one blob at the beginning. Therefore a new type is used as well
|
||||||
|
*/
|
||||||
void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
|
void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
|
||||||
|
String json;
|
||||||
|
DynamicJsonBuffer jsonBuffer(2000);
|
||||||
|
JsonObject &root = jsonBuffer.createObject();
|
||||||
|
root["type"] = UI_INITIAL_GUI;
|
||||||
|
JsonArray &items = jsonBuffer.createArray();
|
||||||
|
|
||||||
for (int i = -1; i < cIndex; i++) {
|
for (int i = -1; i < cIndex; i++) {
|
||||||
String json;
|
JsonObject &item = jsonBuffer.createObject();
|
||||||
StaticJsonBuffer<200> jsonBuffer;
|
|
||||||
JsonObject &root = jsonBuffer.createObject();
|
|
||||||
if (i == -1) {
|
if (i == -1) {
|
||||||
root["type"] = UI_TITEL;
|
item["type"] = UI_TITEL;
|
||||||
root["label"] = String(ui_title);
|
item["label"] = String(ui_title);
|
||||||
} else {
|
} else {
|
||||||
root["type"] = controls[i]->type;
|
item["type"] = controls[i]->type;
|
||||||
root["label"] = String(controls[i]->label);
|
item["label"] = String(controls[i]->label);
|
||||||
root["value"] = String(controls[i]->value);
|
item["value"] = String(controls[i]->value);
|
||||||
root["color"] = String(controls[i]->color);
|
item["color"] = String(controls[i]->color);
|
||||||
root["id"] = String(i);
|
item["id"] = String(i);
|
||||||
}
|
}
|
||||||
root.printTo(json);
|
items.add(item);
|
||||||
client->text(json);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Send as one big bunch
|
||||||
|
root["controls"] = items;
|
||||||
|
root.printTo(json);
|
||||||
|
client->text(json);
|
||||||
}
|
}
|
||||||
|
|
||||||
void ESPUIClass::beginSPIFFS(const char *_title) {
|
void ESPUIClass::beginSPIFFS(const char *_title) {
|
||||||
|
|||||||
@ -40,6 +40,7 @@ typedef struct Control {
|
|||||||
} Control;
|
} Control;
|
||||||
|
|
||||||
// Message Types (and control types)
|
// Message Types (and control types)
|
||||||
|
#define UI_INITIAL_GUI 100
|
||||||
#define UI_TITEL 0
|
#define UI_TITEL 0
|
||||||
|
|
||||||
#define UI_LABEL 1
|
#define UI_LABEL 1
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user