mirror of
https://github.com/s00500/ESPUI.git
synced 2025-06-12 04:10:39 +00:00
Added the dropdown-Control
* added the Control * added the frontend-code * added the control to the examples "gui-newAPI.ino" and "tabbedGui.ino"
This commit is contained in:
Christian Riggenbach
@ -873,6 +873,17 @@ input {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
select {
|
||||
margin: 0 auto 1.2rem auto;
|
||||
padding: 2px 5px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
input[id^="num"] {
|
||||
max-width: 6em;
|
||||
width: auto;
|
||||
|
||||
2
data/css/style.min.css
vendored
2
data/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
51
data/js/controls.js
vendored
51
data/js/controls.js
vendored
@ -27,6 +27,11 @@ 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;
|
||||
@ -477,6 +482,44 @@ function start() {
|
||||
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.label + "</option>"
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case UPDATE_SELECT:
|
||||
$("#select" + data.id).val(data.value);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error("Unknown type or event");
|
||||
@ -496,6 +539,14 @@ function numberchange(number) {
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
22
data/js/controls.min.js
vendored
22
data/js/controls.min.js
vendored
@ -1,4 +1,4 @@
|
||||
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"";}}
|
||||
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"";}}
|
||||
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();}}
|
||||
@ -143,9 +143,25 @@ data.value+
|
||||
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;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;}
|
||||
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.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(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 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);}}
|
||||
Reference in New Issue
Block a user