lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2025-06-14 07:40:40 +00:00
Code Issues Releases Activity

Adding Labels and Pads

Browse Source
This commit is contained in:
Lukas Bachschwell
2017-10-19 13:46:47 +02:00
parent 139de283a9
commit a258eab72b
6 changed files with 388 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
examples/softAP_UI_Test/data/js/controls.js vendored
View File

@ -1,9 +1,20 @@
// TASKS:
// Roadmap
// Build changeable Labels
// Roadmap:
// Build a serial Console?
const UI_TITEL = 0;
const UI_LABEL = 1;
const UI_BUTTON = 2;
const UI_SWITCHER = 3;
const UI_PAD = 4;
const UI_CPAD = 5;
const UPDATE_LABEL = 6;
const FOR = 0;
const BACK = 1;
const LEFT = 2;
const RIGHT = 3;
const CENTER = 4;
var websock;
function start() {
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
@ -27,29 +38,88 @@ function start() {
websock.onmessage = function(evt) {
console.log(evt);
var data = JSON.parse(evt.data);
console.log(data);
var e = document.body;
if (data.type === 'domButton') {
//initial rendering of the Buttons
$('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button onClick='buttonclick(this)'' id="+data.id+"></button></div>");
}
if (data.type === 'domLabel') {
//initial rendering of the Labels
$('#row').append("<div class='two columns card'><h5>"+data.l_title+"</h5><hr /><h3><span class='label'>"+data.label+"</span></h3></div>");
}
else if (data.type === 'value') {
// Display some kind of value
}
else {
console.log('unknown event');
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'><h5 id='"+data.id+"'>"+data.label+"</h5></div>");
break;
case UI_BUTTON:
$('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'></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_CPAD:
center = "<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='c"+data.id+"'>OK</a>";
//NO BREAK
case UI_PAD:
$('#row').append(
"<div class='two columns card'><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='f"+data.id+"'>▲</a></li>" +
"<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='r"+data.id+"'>▲</a></li>" +
"<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='l"+data.id+"'>▲</a></li>" +
"<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='b"+data.id+"'>▲</a></li>" +
"</ul>"+
center +
"</nav>"+
"</div>");
$('#f'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } });
$('#f'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } });
$('#l'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } });
$('#l'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } });
$('#r'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(RIGHT, data.id, true) } });
$('#r'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(RIGHT, data.id, false) } });
$('#b'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(BACK, data.id, true) } });
$('#b'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } });
$('#c'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } });
$('#c'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
break;
case UPDATE_LABEL:
$('#'+data.id).html(data.label);
break;
default:
console.error('Unknown type or event');
break;
}
};
}
function buttonclick(e) {
websock.send("bdown:"+e.id);
/*
if release
websock.send("bup:"+e.id);
*/
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;
}
}