mirror of
https://github.com/s00500/ESPUI.git
synced 2025-06-12 19:40:38 +00:00
Added Tabbed View
* new member of Control: parentControl * changed addControl() to add children of elements * added some styles in the css * two new divs in index.html * added frontend code to controls.js * added new demo to demonstrate the tabbed view
This commit is contained in:
Christian Riggenbach
108
data/js/controls.js
vendored
108
data/js/controls.js
vendored
@ -24,6 +24,9 @@ const UI_GRAPH = 9;
|
||||
const ADD_GRAPH_POINT = 10;
|
||||
const CLEAR_GRAPH = 109;
|
||||
|
||||
const UI_TAB = 11;
|
||||
const UPDATE_TAB = 111;
|
||||
|
||||
const FOR = 0;
|
||||
const BACK = 1;
|
||||
const LEFT = 2;
|
||||
@ -140,7 +143,13 @@ function start() {
|
||||
$("#mainHeader").html(data.label);
|
||||
break;
|
||||
case UI_LABEL:
|
||||
$("#row").append(
|
||||
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='" +
|
||||
@ -155,7 +164,13 @@ function start() {
|
||||
);
|
||||
break;
|
||||
case UI_BUTTON:
|
||||
$("#row").append(
|
||||
var element;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='one columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
@ -200,7 +215,13 @@ function start() {
|
||||
data.id +
|
||||
",null)' ></div>";
|
||||
}
|
||||
$("#row").append(
|
||||
var element;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div id='" +
|
||||
data.id +
|
||||
"' class='one columns card tcenter " +
|
||||
@ -225,7 +246,13 @@ function start() {
|
||||
"'>OK</a>";
|
||||
//NO BREAK
|
||||
case UI_PAD:
|
||||
$("#row").append(
|
||||
var element;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'><h5>" +
|
||||
@ -271,9 +298,7 @@ function start() {
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pf" + data.id).on({
|
||||
},
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(FOR, data.id, false);
|
||||
@ -283,9 +308,7 @@ function start() {
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(LEFT, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pl" + data.id).on({
|
||||
},
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(LEFT, data.id, false);
|
||||
@ -295,9 +318,7 @@ function start() {
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(RIGHT, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pr" + data.id).on({
|
||||
},
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(RIGHT, data.id, false);
|
||||
@ -307,9 +328,7 @@ function start() {
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pb" + data.id).on({
|
||||
},
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(BACK, data.id, false);
|
||||
@ -319,9 +338,7 @@ function start() {
|
||||
touchstart: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(CENTER, data.id, true);
|
||||
}
|
||||
});
|
||||
$("#pc" + data.id).on({
|
||||
},
|
||||
touchend: function(e) {
|
||||
e.preventDefault();
|
||||
padclick(CENTER, data.id, false);
|
||||
@ -337,7 +354,13 @@ function start() {
|
||||
else switcher(data.id, 1);
|
||||
break;
|
||||
case UI_SLIDER:
|
||||
$("#row").append(
|
||||
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) +
|
||||
"'>" +
|
||||
@ -357,7 +380,13 @@ function start() {
|
||||
"</div>" +
|
||||
"</div>"
|
||||
);
|
||||
$("#row").append(
|
||||
var element;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
|
||||
);
|
||||
break;
|
||||
@ -367,7 +396,13 @@ function start() {
|
||||
break;
|
||||
|
||||
case UI_NUMBER:
|
||||
$("#row").append(
|
||||
var element;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
@ -392,7 +427,13 @@ function start() {
|
||||
break;
|
||||
|
||||
case UI_TEXT_INPUT:
|
||||
$("#row").append(
|
||||
var element;
|
||||
if(data.parentControl) {
|
||||
element = $("#tab"+data.parentControl);
|
||||
} else {
|
||||
element = $("#row")
|
||||
}
|
||||
element.append(
|
||||
"<div class='two columns card tcenter " +
|
||||
colorClass(data.color) +
|
||||
"'>" +
|
||||
@ -415,6 +456,27 @@ function start() {
|
||||
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');
|
||||
// switch to tab...
|
||||
$('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;
|
||||
|
||||
default:
|
||||
console.error("Unknown type or event");
|
||||
|
||||
27
data/js/controls.min.js
vendored
27
data/js/controls.min.js
vendored
@ -1,8 +1,9 @@
|
||||
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 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 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 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"";}}
|
||||
var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
|
||||
function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});}
|
||||
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
|
||||
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#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: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+
|
||||
@ -12,7 +13,8 @@ data.label+
|
||||
data.id+
|
||||
"' class='label label-wrap'>"+
|
||||
data.value+
|
||||
"</span></div>");break;case UI_BUTTON:$("#row").append("<div class='one columns card tcenter "+
|
||||
"</span></div>");break;case UI_BUTTON:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
|
||||
element.append("<div class='one columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'><h5>"+
|
||||
data.label+
|
||||
@ -33,7 +35,8 @@ data.id+
|
||||
"' onClick='switcher("+
|
||||
data.id+
|
||||
",null)' ></div>";}
|
||||
$("#row").append("<div id='"+
|
||||
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)+
|
||||
@ -49,7 +52,8 @@ data.id+
|
||||
data.id+
|
||||
", false)' href='#' id='pc"+
|
||||
data.id+
|
||||
"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+
|
||||
"'>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+
|
||||
@ -87,7 +91,8 @@ data.id+
|
||||
"</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 "+
|
||||
"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(FOR,data.id,true);},touchend:function(e){e.preventDefault();padclick(FOR,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(BACK,data.id,true);},touchend:function(e){e.preventDefault();padclick(BACK,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:if(data.value=="0")switcher(data.id,0);else switcher(data.id,1);break;case UI_SLIDER:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
|
||||
element.append("<div class='two columns card tcenter card-slider "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
@ -104,7 +109,9 @@ colorClass(data.color)+
|
||||
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 "+
|
||||
"</div>");var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
|
||||
element.append("<script>"+"rkmd_rangeSlider('#sl"+data.id+"');"+"</script>");break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UI_NUMBER:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
|
||||
element.append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
@ -119,7 +126,8 @@ 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 "+
|
||||
"</div>");break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UI_TEXT_INPUT:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
|
||||
element.append("<div class='two columns card tcenter "+
|
||||
colorClass(data.color)+
|
||||
"'>"+
|
||||
"<h5 id='"+
|
||||
@ -134,7 +142,8 @@ 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;}};websock.onmessage=handleEvent;}
|
||||
"</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;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(val);}
|
||||
function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
|
||||
|
||||
Reference in New Issue
Block a user