lbsadmin
/
ESPUI
mirror of https://github.com/s00500/ESPUI.git
1
0
Fork 0
Code Issues Releases Activity
ESPUI/src/dataControlsJS.h

109 lines
31 KiB
C
Raw Normal View History

No reload per default, just send JsonDom
2020-06-23 18:34:05 +00:00
const char JS_CONTROLS[] PROGMEM = R"=====(
Add Time control Adds a new invisible control that can fetch the current time from a connected client. Documentation is in the README.
2022-01-20 21:50:06 +00:00
const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;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 UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPDATE_ACCEL=118;const UI_SEPARATOR=19;const UPDATE_SEPARATOR=119;const UI_TIME=20;const UPDATE_TIME=120;const UP=0;const DOWN=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;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;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_DARK:case C_NONE:return"dark";default:return"";}}
slider sends (browser dependent) lots of events, throttle using only unique values.
2021-02-05 22:03:02 +00:00
var websock;var websockConnected=false;function requestOrientationPermission(){}
function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData));}
function restoreGraphData(id){var savedData=localStorage.getItem("espuigraphs",graphData);if(savedData!=null){savedData=JSON.parse(savedData);return savedData[id];}
return[];}
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);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
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){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
Further improve the reliability of UI element transfer. A protocol has been implemented between the server and client to acknowledge each UI_INITIAL_GUI and UI_EXTEND_GUI from the client javascript. This prevents the internal websocket buffers from becoming flooded when the number of controls gets too high.
2022-01-12 20:12:20 +00:00
data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});if(data.totalcontrols>(data.controls.length-1)){websock.send("uiok:"+(data.controls.length-1));}
break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});if(data.totalcontrols>data.startindex+(data.controls.length-1)){websock.send("uiok:"+(data.startindex+(data.controls.length-1)));}
break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GAUGE:case UI_SEPARATOR:if(data.visible)addToHTML(data);break;case UI_BUTTON:if(data.visible){addToHTML(data);$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
break;case UI_SWITCHER:if(data.visible){addToHTML(data);switcher(data.id,data.value);}
break;case UI_CPAD:case UI_PAD:if(data.visible){addToHTML(data);$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,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(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,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 UI_SLIDER:if(data.visible){addToHTML(data);rangeSlider(!sliderContinuous);}
Update dataControlsJS.h
2021-08-01 16:50:26 +00:00
break;case UI_TAB:if(data.visible){$("#tabsnav").append("<li><a onmouseup='tabclick("+data.id+")' 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;case UI_OPTION:if(data.parentControl){var parent=$("#select"+data.parentControl);parent.append("<option id='option"+
slider sends (browser dependent) lots of events, throttle using only unique values.
2021-02-05 22:03:02 +00:00
data.id+
"' value='"+
data.value+
"' "+
data.selected+
">"+
data.label+
"</option>");}
Fix #158, min/max not being applied correctly to grouped elements.
2022-02-11 20:47:15 +00:00
break;case UI_MIN:if(data.parentControl){if($('#sl'+data.parentControl).length){$('#sl'+data.parentControl).attr("min",data.value);}else if($('#num'+data.parentControl).length){$('#num'+data.parentControl).attr("min",data.value);}}
break;case UI_MAX:if(data.parentControl){if($('#sl'+data.parentControl).length){$('#sl'+data.parentControl).attr("max",data.value);}else if($('#text'+data.parentControl).length){$('#text'+data.parentControl).attr("maxlength",data.value);}else if($('#num'+data.parentControl).length){$('#num'+data.parentControl).attr("max",data.value);}}
slider sends (browser dependent) lots of events, throttle using only unique values.
2021-02-05 22:03:02 +00:00
break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("step",data.value);}}
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
break;case UI_GRAPH:if(data.visible){addToHTML(data);graphData[data.id]=restoreGraphData(data.id);renderGraphSvg(graphData[data.id],"graph"+data.id);}
break;case ADD_GRAPH_POINT:var ts=Math.round(new Date().getTime()/1000);graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_ACCEL:if(hasAccel)break;hasAccel=true;if(data.visible){addToHTML(data);requestOrientationPermission();}
Support for dynamic custom inline styling. Adds two functions in ESPUI.h: setPanelStyle() setElementStyle() These allow for custom inline CSS styles to be applied to the panel and to the specific UI element repectively. For example: ``` char stylecol1[30] sprintf(stylecol1, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF)); ESPUI.setPanelStyle(switch1, stylecol1); ``` This will set the panel of the given control to a random hex colour. This is supported by both the initial UI message, and by control update messages, so you can change these styles dynamically in response to other events. setElementStyle() is not perfect. Because CSS inline styles can only style one specific DOM element, for controls made up of multiple elements (like the "pad") this is limited. I have tried to make an appropriate choice for each supported control.
2022-01-02 21:56:32 +00:00
break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);if(data.hasOwnProperty('elementStyle')){$("#l"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
Fix bug with updating slider values programatically
2022-01-12 23:53:55 +00:00
break;case UPDATE_SLIDER:$("#sl"+data.id).attr("value",data.value)
slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
Support for dynamic custom inline styling. Adds two functions in ESPUI.h: setPanelStyle() setElementStyle() These allow for custom inline CSS styles to be applied to the panel and to the specific UI element repectively. For example: ``` char stylecol1[30] sprintf(stylecol1, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF)); ESPUI.setPanelStyle(switch1, stylecol1); ``` This will set the panel of the given control to a random hex colour. This is supported by both the initial UI message, and by control update messages, so you can change these styles dynamically in response to other events. setElementStyle() is not perfect. Because CSS inline styles can only style one specific DOM element, for controls made up of multiple elements (like the "pad") this is limited. I have tried to make an appropriate choice for each supported control.
2022-01-02 21:56:32 +00:00
break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#num"+data.id).attr("style",data.elementStyle);}
break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#text"+data.id).attr("style",data.elementStyle);}
Updated documentation
2022-05-24 10:21:34 +00:00
if(data.hasOwnProperty('inputType')){$("#text"+data.id).attr("type",data.inputType);}
Support for dynamic custom inline styling. Adds two functions in ESPUI.h: setPanelStyle() setElementStyle() These allow for custom inline CSS styles to be applied to the panel and to the specific UI element repectively. For example: ``` char stylecol1[30] sprintf(stylecol1, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF)); ESPUI.setPanelStyle(switch1, stylecol1); ``` This will set the panel of the given control to a random hex colour. This is supported by both the initial UI message, and by control update messages, so you can change these styles dynamically in response to other events. setElementStyle() is not perfect. Because CSS inline styles can only style one specific DOM element, for controls made up of multiple elements (like the "pad") this is limited. I have tried to make an appropriate choice for each supported control.
2022-01-02 21:56:32 +00:00
break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#select"+data.id).attr("style",data.elementStyle);}
Support update of Button text
2022-01-16 14:47:41 +00:00
break;case UPDATE_BUTTON:$("#btn"+data.id).val(data.value);$("#btn"+data.id).text(data.value);if(data.hasOwnProperty('elementStyle')){$("#btn"+data.id).attr("style",data.elementStyle);}
Allow runtime updates to button controls.
2022-01-13 17:26:00 +00:00
break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);}
Add Time control Adds a new invisible control that can fetch the current time from a connected client. Documentation is in the README.
2022-01-20 21:50:06 +00:00
break;case UPDATE_ACCEL:break;case UPDATE_TIME:var rv=new Date().toISOString();websock.send("time:"+rv+":"+data.id);break;default:console.error("Unknown type or event");break;}
Support dynamic enabling and disabling of controls See documentation in README for how this works. This commit handles all the main controls. Pads are not yet supported.
2022-01-31 21:43:09 +00:00
if(data.type>=UI_TITEL&&data.type<UPDATE_OFFSET){processEnabled(data);}
Support for dynamic custom inline styling. Adds two functions in ESPUI.h: setPanelStyle() setElementStyle() These allow for custom inline CSS styles to be applied to the panel and to the specific UI element repectively. For example: ``` char stylecol1[30] sprintf(stylecol1, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF)); ESPUI.setPanelStyle(switch1, stylecol1); ``` This will set the panel of the given control to a random hex colour. This is supported by both the initial UI message, and by control update messages, so you can change these styles dynamically in response to other events. setElementStyle() is not perfect. Because CSS inline styles can only style one specific DOM element, for controls made up of multiple elements (like the "pad") this is limited. I have tried to make an appropriate choice for each supported control.
2022-01-02 21:56:32 +00:00
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.hasOwnProperty('panelStyle')){$("#id"+data.id).attr("style",data.panelStyle);}
Dynamic visibility support The ability to make controls visible and invisible was basically already supported, we just need to add some minor handling in controls.js.
2022-01-28 20:31:25 +00:00
if(data.hasOwnProperty('visible')){if(data['visible'])
$("#id"+data.id).show();else
$("#id"+data.id).hide();}
Support dynamic enabling and disabling of controls See documentation in README for how this works. This commit handles all the main controls. Pads are not yet supported.
2022-01-31 21:43:09 +00:00
if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}
processEnabled(data);}
Fixes #122
2021-12-29 17:52:03 +00:00
$(".range-slider__range").each(function(){$(this)[0].value=$(this).attr("value");$(this).next().html($(this).attr("value"));});};websock.onmessage=handleEvent;}
Fix bug with sliders getting out of sync.
2022-01-15 14:29:38 +00:00
function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);$(".range-slider__range").each(function(){$(this).attr("value",$(this)[0].value);});}
slider sends (browser dependent) lots of events, throttle using only unique values.
2021-02-05 22:03:02 +00:00
function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);}
function tabclick(number){var val=$("#tab"+number).val();websock.send("tabvalue:"+val+":"+number);}
function selectchange(number){var val=$("#select"+number).val();websock.send("svalue:"+val+":"+number);}
function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
Added 'type' proptert to text input elements Now the text input element can support other HTML input types suxh as date, time, color, password, etc
2022-05-22 22:31:48 +00:00
function padclick(type,number,isdown){if($("#id"+number+" nav").hasClass("disabled")){return;}
switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN: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;}}
Fix issue with switchers getting out of sync with the DOM if updated.
2022-01-12 23:12:45 +00:00
function switcher(number,state){if(state==null){if(!$("#sl"+number).hasClass("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);}}
Update minified and header files for previous commit
2021-12-29 10:29:24 +00:00
var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});}
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";panelwide=data.hasOwnProperty('wide')?"wide":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="<div id='id"+data.id+"' "+panelStyle+" class='two columns "+panelwide+" card tcenter "+
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
elementHTML(data)+
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
"</div>";break;case UI_SEPARATOR:html="<div id='id"+data.id+"' "+panelStyle+" class='sectionbreak columns'>"+
Add Time control Adds a new invisible control that can fetch the current time from a connected client. Documentation is in the README.
2022-01-20 21:50:06 +00:00
"<h5>"+data.label+"</h5><hr/></div>";break;case UI_TIME:break;}
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data));}}
var elementHTML=function(data){var id=data.id
Added 'type' proptert to text input elements Now the text input element can support other HTML input types suxh as date, time, color, password, etc
2022-05-22 22:31:48 +00:00
var elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";var inputType=data.hasOwnProperty('inputType')?" type='"+data.inputType+"' ":"";switch(data.type){case UI_LABEL:return"<span id='l"+id+"' "+elementStyle+
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
" class='label label-wrap'>"+data.value+"</span>";case UI_BUTTON:return"<button id='btn"+id+"' "+elementStyle+
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
" onmousedown='buttonclick("+id+", true)'"+
" onmouseup='buttonclick("+id+", false)'>"+
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
data.value+"</button>";case UI_SWITCHER:return"<label id='sl"+id+"' "+elementStyle+
" class='switch "+(data.value=="1"?"checked":"")+
(data.hasOwnProperty('vertical')?" vert-switcher ":"")+
"'>"+
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
"<div class='in'>"+
"<input type='checkbox' id='s"+id+"' onClick='switcher("+id+",null)' "+
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
(data.value=="1"?"checked":"")+"/></div></label>";case UI_CPAD:case UI_PAD:return"<nav class='control'><ul>"+
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
"<li><a onmousedown='padclick(UP, "+id+", true)' "+
"onmouseup='padclick(UP, "+id+", false)' id='pf"+id+"'>&#9650;</a></li>"+
"<li><a onmousedown='padclick(RIGHT, "+id+", true)' "+
"onmouseup='padclick(RIGHT, "+id+", false)' id='pr"+id+"'>&#9650;</a></li>"+
"<li><a onmousedown='padclick(LEFT, "+id+", true)' "+
"onmouseup='padclick(LEFT, "+id+", false)' id='pl"+id+"'>&#9650;</a></li>"+
"<li><a onmousedown='padclick(DOWN, "+id+", true)' "+
"onmouseup='padclick(DOWN, "+id+", false)' id='pb"+id+"'>&#9650;</a></li>"+
"</ul>"+
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
(data.type==UI_CPAD?"<a class='confirm' onmousedown='padclick(CENTER,"+id+", true)' "+
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
"onmouseup='padclick(CENTER, "+id+", false)' id='pc"+id+"'>OK</a>":"")+
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
"</nav>";case UI_SLIDER:return"<div class='range-slider "+
(data.hasOwnProperty('vertical')?" vert-slider ":"")+
"'>"+
"<input id='sl"+id+"' type='range' min='0' max='100' value='"+data.value+"' "+
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
elementStyle+" class='range-slider__range'><span class='range-slider__value'>"+
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
data.value+"</span></div>";case UI_NUMBER:return"<input style='color:black;' "+elementStyle+" id='num"+id+
Added 'type' proptert to text input elements Now the text input element can support other HTML input types suxh as date, time, color, password, etc
2022-05-22 22:31:48 +00:00
"' type='number' value='"+data.value+"' onchange='numberchange("+id+")' />";case UI_TEXT_INPUT:return"<input "+inputType+"style='color:black;' "+elementStyle+" id='text"+id+
Initial support for vertical switchers and sliders. Documentation to be added in a later commit.
2022-01-21 23:30:08 +00:00
"' value='"+data.value+"' onchange='textchange("+id+")' />";case UI_SELECT:return"<select style='color:black;' "+elementStyle+" id='select"+id+
"' onchange='selectchange("+id+")' />";case UI_GRAPH:return"<figure id='graph"+id+"'><figcaption>"+data.label+"</figcaption></figure>";case UI_GAUGE:return"WILL BE A GAUGE <input style='color:black;' id='gauge"+id+
"' type='number' value='"+data.value+"' onchange='numberchange("+id+")' />";case UI_ACCEL:return"ACCEL // Not implemented fully!<div class='accelerometer' id='accel"+id+
Implement separators, and grouped controls This adds separator elements, and allows arbitrary grouping of controls. For details see the updates to README.md
2022-01-08 20:58:22 +00:00
"' ><div class='ball"+id+"'></div><pre class='accelerometeroutput"+id+"'></pre>";default:return"";}}
Support dynamic enabling and disabling of controls See documentation in README for how this works. This commit handles all the main controls. Pads are not yet supported.
2022-01-31 21:43:09 +00:00
var processEnabled=function(data){switch(data.type){case UI_SWITCHER:case UPDATE_SWITCHER:if(data.enabled){$("#sl"+data.id).removeClass('disabled');$("#s"+data.id).prop("disabled",false);}else{$("#sl"+data.id).addClass('disabled');$("#s"+data.id).prop("disabled",true);}
Also support disabling the Pads
2022-01-31 22:34:00 +00:00
break;case UI_SLIDER:case UPDATE_SLIDER:$("#sl"+data.id).prop("disabled",!data.enabled);break;case UI_NUMBER:case UPDATE_NUMBER:$("#num"+data.id).prop("disabled",!data.enabled);break;case UI_TEXT_INPUT:case UPDATE_TEXT_INPUT:$("#text"+data.id).prop("disabled",!data.enabled);break;case UI_SELECT:case UPDATE_SELECT:$("#select"+data.id).prop("disabled",!data.enabled);break;case UI_BUTTON:case UPDATE_BUTTON:$("#btn"+data.id).prop("disabled",!data.enabled);break;case UI_PAD:case UI_CPAD:case UPDATE_PAD:case UPDATE_CPAD:if(data.enabled){$("#id"+data.id+" nav").removeClass('disabled');}else{$("#id"+data.id+" nav").addClass('disabled');}
break;}}
No reload per default, just send JsonDom
2020-06-23 18:34:05 +00:00
)=====";
Updated documentation
2022-05-24 10:21:34 +00:00
const uint8_t JS_CONTROLS_GZIP[4212] PROGMEM = { 31,139,8,0,13,167,140,98,2,255,197,27,105,119,218,72,242,187,127,133,172,228,5,177,198,28,185,38,3,150,243,8,38,9,59,190,214,198,147,121,155,201,250,9,104,140,158,133,164,145,132,143,113,252,223,183,186,250,80,183,14,32,120,102,247,75,140,170,171,171,171,171,170,187,174,206,56,240,227,196,184,24,92,14,142,7,195,65,247,240,242,211,197,192,126,217,108,118,198,98,224,172,127,120,210,61,0,88,75,192,78,15,186,195,254,229,201,199,143,231,253,161,221,82,113,251,191,13,251,199,7,140,70,75,129,15,7,195,254,161,173,0,78,129,98,134,30,130,210,69,6,151,61,10,121,169,35,245,24,214,203,20,235,195,197,112,120,114,108,191,210,241,56,180,213,124,149,98,30,118,63,0,19,175,117,68,6,108,53,95,167,120,231,95,6,195,222,231,254,153,253,70,71,149,240,86,243,141,130,125,56,56,0,216,219,12,46,131,182,154,111,83,204,227,139,163,15,0,251,73,199,228,208,86,243,39,69,92,32,71,80,200,233,197,208,126,167,99,43,35,173,230,187,116,198,167,179,238,233,103,251,103,14,232,30,28,48,200,229,233,201,224,152,162,242,129,222,97,191,123,198,145,91,205,159,149,21,187,31,236,86,70,33,12,166,40,228,188,127,216,239,1,181,140,78,4,184,165,104,229,228,116,56,160,242,207,168,69,128,91,138,90,142,6,0,200,104,5,97,45,69,39,71,221,223,236,86,70,31,8,107,169,170,24,246,79,237,86,86,19,8,108,41,122,248,212,189,248,212,183,91,25,61,112,104,75,81,67,183,215,163,182,145,81,1,135,182,222,169,130,57,237,158,117,135,39,160,198,159,179,178,145,35,45,85,220,131,163,62,156,168,140,188,41,176,165,64,229,129,57,56,249,114,44,143,203,97,255,227,80,30,139,179,193,167,207,67,105,252,189,254,241,16,108,73,200,173,119,57,188,56,251,215,197,201,224,188,47,73,245,46,251,71,253,179,238,97,122,252,122,151,167,125,152,117,54,248,21,166,190,148,192,47,253,97,247,252,244,115,247,80,33,127,121,126,113,252,241,240,228,139,182,70,175,123,118,118,50,148,135,165,119,217,61,28,252,187,123,6,26,124,43,65,7,221,179,95,164,225,247,46,143,79,142,97,251,111,222,116,110,156,200,184,138,156,112,118,224,36,142,237,147,91,163,27,69,206,189,85,197,145,153,19,119,199,99,226,217,83,199,139,9,130,98,207,157,144,168,23,248,137,235,47,130,69,204,135,166,11,127,156,184,129,111,140,3,47,136,122,158,19,199,22,254,28,76,170,15,252,135,125,188,152,143,72,36,225,157,248,214,77,198,51,5,207,137,137,42,179,118,68,146,69,228,155,240,207,31,139,192,141,137,217,225,40,92,132,2,129,204,73,228,120,19,57,156,202,83,96,132,36,33,81,228,222,144,72,34,165,242,21,72,183,36,113,226,112,230,120,137,68,146,242,22,56,241,194,159,122,193,173,66,135,137,95,140,143,157,40,10,210,249,66,21,98,216,241,220,63,157,200,245,37,2,85,76,155,255,166,90,17,136,19,39,186,54,59,19,50,117,22,94,34,128,102,231,241,113,139,106,225,150,140,226,96,124,221,81,126,131,74,124,50,78,200,36,171,145,136,252,177,32,113,114,18,185,196,79,28,10,58,37,209,220,141,99,248,101,85,31,30,183,36,102,236,220,144,79,194,24,96,200,11,198,142,119,158,4,145,115,69,234,49,73,6,9,153,91,38,137,195,133,139,54,19,155,181,127,158,159,28,215,227,4,118,116,229,78,239,45,105,74,213,106,71,33,28,193,250,65,164,208,118,65,219,104,77,176,226,4,77,79,91,235,170,112,173,148,120,199,157,90,114,234,182,237,47,60,175,250,144,210,66,166,66,39,138,73,138,85,237,48,25,166,75,126,117,39,223,128,73,6,254,250,45,203,175,19,37,32,130,231,214,36,24,47,230,32,185,106,221,153,76,44,243,31,102,181,30,76,167,112,64,158,91,230,179,40,184,133,239,89,50,247,44,211,172,118,184,42,234,99,47,128,181,193,192,25,21,149,52,156,192,115,208,194,34,238,131,157,68,176,66,137,250,40,117,137,11,107,68,100,30,220,16,118,176,76,60,49,187,87,17,33,190,89,205,161,2,159,26,94,68,38,5,88,140,105,228,194,104,24,199,129,193,57,160,76,190,120,246,238,237,171,55,157,130,89,233,214,53,168,111,61,140,61,119,124,221,230,146,171,61,106,155,158,57,254,196,35,191,186,177,59,114,61,55,185,239,1,224,10,4,244,0,122,220,206,10,224,197,139,109,33,243,250,204,157,76,136,95,125,144,10,161,7,32,181,87,174,36,137,14,59,239,223,192,143,67,55,78,136,15,87,141,121,35,215,28,227,154,102,173,152,151,26,74,29,13,235,214,245,39,193,109,157,26,36,93,165,30,6,81,178,109,155,230,247,239,197,35,239,154,101,3