ESPUI/src/dataControlsJS.h

const char JS_CONTROLS[] PROGMEM = R"=====(
const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;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 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;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:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<span id='l"+data.id+"' class='label label-wrap'>"+data.value+"</span>"+
"</div>");break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<button id='btn"+data.id+"' "+
"onmousedown='buttonclick("+data.id+", true)' "+
"onmouseup='buttonclick("+data.id+", false)'>"+
data.value+
"</button></div>");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<label id='sl"+data.id+"' class='switch "+((data.value=="1")?"checked":"")+"'>"+
"<div class='in'><input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' "+((data.value=="1")?"checked":"")+"/></div>"+
"</label>"+
"</div>");switcher(data.id,data.value);break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<nav class='control'>"+
"<ul>"+
"<li><a onmousedown='padclick(UP, "+data.id+", true)' onmouseup='padclick(UP, "+data.id+", false)' id='pf"+data.id+"'>▲</a></li>"+
"<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' id='pr"+data.id+"'>▲</a></li>"+
"<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' id='pl"+data.id+"'>▲</a></li>"+
"<li><a onmousedown='padclick(DOWN, "+data.id+", true)' onmouseup='padclick(DOWN, "+data.id+", false)' id='pb"+data.id+"'>▲</a></li>"+
"</ul>"+
((data.type==UI_CPAD)?"<a class='confirm' onmousedown='padclick(CENTER,"+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' id='pc"+data.id+"'>OK</a>":"")+
"</nav>"+
"</div>");$("#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:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='two columns card tcenter card-slider "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<div class='range-slider'>"+
"<input id='sl"+data.id+"' type='range' min='0' max='100' value='"+data.value+"' class='range-slider__range'>"+
"<span class='range-slider__value'>"+data.value+"</span>"+
"</div>"+
"</div>");rangeSlider();break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<input style='color:black;' id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+
"</div>");break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<input style='color:black;' id='text"+data.id+"' value='"+data.value+"' onchange='textchange("+data.id+")' />"+
"</div>");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;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div id='id"+data.id+"' class='two columns card tcenter "+colorClass(data.color)+"'>"+
"<h5>"+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 parent=$("#select"+data.parentControl);parent.append("<option id='option"+data.id+"' value='"+data.value+"' "+data.selected+">"+data.label+"</option>");}
break;case UI_MIN:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){console.log("MIN"+data.value);parent.attr("min",data.value);}}
break;case UI_MAX:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){console.log("MAX"+data.value);parent.attr("max",data.value);}}
break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){console.log("STEP"+data.value);parent.attr("step",data.value);}}
break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,(data.value=="0")?0:1);break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;default:console.error("Unknown type or event");break;}
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$('#id'+data.id);element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}};websock.onmessage=handleEvent;}
function sliderchange(number){var val=$("#sl"+number).val();console.log("slvalue:"+val+":"+number);websock.send("slvalue:"+val+":"+number);}
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 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);}
function padclick(type,number,isdown){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;}}
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);}}
var rangeSlider=function(){var slider=$('.range-slider'),range=$('.range-slider__range'),value=$('.range-slider__value');slider.each(function(){value.each(function(){var value=$(this).prev().attr('value');$(this).html(value);});range.on({'input':function(){$(this).next().html(this.value);},'change':function(){sliderchange($(this).attr('id').replace(/^\D+/g,''));}});});};
)=====";

const uint8_t JS_CONTROLS_GZIP[2784] PROGMEM = { 31,139,8,0,78,66,142,92,2,255,237,90,253,114,219,184,17,255,223,79,193,227,101,66,178,86,244,145,156,115,57,210,116,70,145,149,68,61,69,118,109,249,146,233,100,170,161,68,200,226,152,34,121,36,100,57,231,209,107,244,65,250,72,125,146,46,62,9,208,148,173,139,219,155,118,210,25,143,76,46,22,139,31,118,23,139,197,130,179,52,41,176,113,49,152,12,70,131,241,160,59,156,188,187,24,248,207,219,109,111,198,26,78,143,187,227,254,228,228,237,219,243,254,216,239,148,244,193,100,60,24,247,135,190,66,56,237,30,251,29,189,31,37,181,59,37,79,143,80,158,235,76,61,198,245,188,228,122,115,49,30,159,140,252,23,58,31,167,118,218,47,74,206,97,247,13,128,248,65,103,100,196,78,251,135,146,239,252,227,96,220,123,223,63,243,15,116,86,73,239,180,15,20,238,225,224,24,104,47,43,188,140,218,105,191,44,57,71,23,31,222,0,237,71,157,147,83,59,237,31,21,117,245,63,141,65,201,167,23,99,255,149,206,173,180,116,218,175,202,30,239,206,186,167,239,253,159,56,161,123,124,204,40,147,211,147,193,136,176,242,134,222,176,223,61,227,204,157,246,79,202,136,221,55,126,167,98,16,70,83,12,114,222,31,246,123,32,173,98,19,65,238,40,86,57,57,29,15,136,254,43,102,17,228,142,98,150,15,3,32,84,172,66,105,29,197,38,31,186,159,252,78,197,30,148,214,81,77,49,238,159,250,157,170,37,40,81,161,74,55,60,62,249,56,146,78,56,236,191,29,75,103,59,27,188,123,63,150,46,213,235,143,198,96,33,129,166,55,25,95,156,253,229,226,100,112,222,151,162,122,147,254,135,254,89,119,88,58,117,111,114,218,135,94,103,131,95,160,235,115,73,252,216,31,119,207,79,223,119,135,138,248,201,249,197,232,237,240,228,163,54,70,175,123,118,118,50,150,46,216,155,116,135,131,191,118,207,64,47,47,37,233,184,123,246,179,116,167,222,100,116,50,234,251,207,15,14,188,249,42,153,225,40,77,140,89,26,167,121,47,14,138,194,166,143,131,208,185,229,15,254,104,181,156,162,92,210,189,98,29,225,217,66,225,11,10,164,206,213,205,17,94,229,137,9,63,191,174,210,168,64,166,199,89,248,212,5,3,90,162,60,136,67,217,92,234,65,112,100,8,163,60,143,174,81,46,153,74,189,8,166,53,194,65,145,45,130,24,75,38,169,39,193,83,172,146,121,156,174,21,57,76,109,162,125,22,228,121,90,246,23,42,20,205,65,28,253,22,228,81,34,25,136,6,69,99,24,228,87,166,23,162,121,176,138,177,32,154,222,102,179,119,29,228,198,26,77,139,116,118,229,41,207,189,52,73,208,12,163,208,159,7,113,129,74,43,228,168,192,65,142,109,231,246,137,29,166,179,213,18,37,216,105,6,97,104,155,127,50,157,102,58,159,219,142,247,196,54,191,207,211,53,188,47,240,50,182,77,211,241,184,220,230,44,78,11,4,44,92,138,183,217,83,12,156,156,227,0,175,138,62,76,52,135,17,182,96,33,210,37,47,140,145,163,101,122,141,152,103,152,212,228,207,46,115,132,18,211,185,195,10,56,53,190,28,133,53,92,12,52,69,97,180,140,81,106,112,4,4,228,211,239,95,189,124,113,224,213,244,42,167,174,81,19,251,118,22,71,179,43,151,107,110,163,205,121,17,36,97,140,126,137,138,104,26,197,17,254,210,3,194,37,232,231,54,154,219,223,85,231,255,244,233,119,66,229,205,69,20,134,40,113,110,165,61,136,49,165,88,97,35,201,14,19,239,95,195,195,48,42,48,74,96,169,152,215,114,204,25,29,211,108,212,99,105,80,165,75,3,250,9,90,27,31,209,244,28,158,17,182,205,117,225,182,90,230,254,58,74,194,116,221,140,211,89,64,0,52,23,105,129,147,96,137,246,205,214,186,80,204,159,38,105,134,18,95,0,181,209,53,38,171,56,41,210,24,65,239,75,16,200,56,13,194,183,131,5,183,89,26,163,27,64,39,85,87,66,40,189,9,231,43,228,109,20,104,212,55,119,193,70,25,65,100,213,99,53,105,136,208,238,145,70,8,117,18,200,42,100,166,160,22,171,72,32,173,97,128,3,255,207,231,39,163,102,22,228,176,154,160,161,73,104,14,237,139,124,105,245,105,26,126,161,180,25,188,161,220,135,37,207,35,35,97,111,226,47,25,226,177,81,207,131,92,218,12,216,112,158,198,69,115,158,230,253,0,58,161,24,17,177,254,17,69,1,177,228,134,33,188,37,236,46,5,84,96,8,65,151,209,252,139,96,118,54,158,50,25,91,118,130,153,58,222,52,71,193,149,39,0,208,188,202,149,224,113,132,99,152,11,65,18,7,83,20,83,19,47,131,40,121,143,130,16,162,36,95,167,37,67,85,30,205,134,92,2,21,212,4,18,61,88,83,148,155,189,246,216,244,156,91,246,234,19,241,56,152,154,251,53,60,222,6,193,34