ESPUI/src/dataControlsJS.h

254 lines
29 KiB
C
Raw Normal View History

const char JS_CONTROLS[] PROGMEM = R"=====(
2020-06-01 16:04:13 +00:00
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 UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;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_NONE:return"dark";default:return"";}}
2019-12-27 14:36:12 +00:00
var websock;var websockConnected=false;function requestOrientationPermission(){}
2019-12-27 15:57:11 +00:00
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[];}
2019-12-27 14:36:12 +00:00
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});}
2018-11-19 21:23:10 +00:00
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");}
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:if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
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(!sliderContinuous);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()){parent.attr("min",data.value);}}
break;case UI_MAX:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("max",data.value);}}
break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("step",data.value);}}
break;case UI_GRAPH: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/>"+
"<figure id='graph"+
data.id+
"'>"+
"<figcaption>"+
data.label+
"</figcaption>"+
"</figure>"+
2019-12-27 15:57:11 +00:00
"</div>");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_GAUGE: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/>"+
"WILL BE A GAUGE <input style='color:black;' id='gauge"+
data.id+
"' type='number' value='"+
data.value+
"' onchange='numberchange("+
data.id+
")' />"+
2019-12-27 14:36:12 +00:00
"</div>");break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
hasAccel=true;parent.append("<div id='id"+
data.id+
"' class='two columns card tcenter "+
colorClass(data.color)+
"'>"+
"<h5>"+
data.label+
"</h5><hr/>"+
2019-12-27 14:36:12 +00:00
"ACCEL // Not implemented fully!<div class='accelerometer' id='accel"+
data.id+
"' ><div class='ball"+
data.id+
"'></div><pre class='accelerometeroutput"+
data.id+
"'></pre>"+
2019-12-27 14:36:12 +00:00
"</div>");requestOrientationPermission();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;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);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));}}};websock.onmessage=handleEvent;}
function sliderchange(number){var val=$("#sl"+number).val();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(isDiscrete){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);});if(!isDiscrete){range.on({input:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));}});}else{range.on({input:function(){$(this).next().html(this.value);},change:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));}});}});};
)=====";
2020-06-01 16:04:13 +00:00
const uint8_t JS_CONTROLS_GZIP[3316] PROGMEM = {31, 139, 8, 0, 226, 211, 46, 94, 2, 255, 237, 90, 235, 118, 219, 54, 18, 254, 159, 167, 160, 153, 158, 136, 92, 203, 186, 228, 214, 84, 50, 157, 163, 200, 74, 162, 173, 99, 123, 109, 185, 233, 217, 52, 235, 3, 137, 144, 197, 19, 138, 100, 73, 208, 151, 186, 122, 141, 125, 144, 125, 164, 125, 146, 29, 12, 0, 18, 164, 40, 89, 137, 219, 110, 247, 100, 127, 196, 17, 7, 131, 15, 31, 102, 6, 247, 153, 132, 65, 194, 140, 179, 225, 249, 240, 112, 56, 26, 246, 14, 206, 223, 156, 13, 157, 199, 173, 86, 119, 34, 10, 142, 247, 123, 163, 193, 249, 209, 235, 215, 167, 131, 145, 211, 206, 229, 195, 243, 209, 112, 52, 56, 112, 52, 193, 113, 111, 223, 105, 23, 235, 161, 168, 213, 206, 117, 250, 92, 242, 184, 168, 212, 23, 90, 143, 115, 173, 87, 103, 163, 209, 209, 161, 243, 164, 168, 39, 165, 237, 214, 147, 92, 243, 160, 247, 10, 72, 60, 45, 42, 10, 97, 187, 245, 52, 215, 59, 125, 63, 28, 245, 223, 14, 78, 156, 103, 69, 213, 76, 222, 110, 61, 211, 180, 15, 134, 251, 32, 123, 94, 210, 21, 210, 118, 235, 121, 174, 121, 120, 246, 238, 21, 200, 190, 45, 106, 74, 105, 187, 245, 173, 102, 174, 193, 143, 35, 48, 242, 241, 217, 200, 121, 81, 212, 214, 74, 218, 173, 23, 121, 141, 55, 39, 189, 227, 183, 206, 119, 82, 208, 219, 223, 23, 146, 243, 227, 163, 225, 33, 87, 149, 5, 253, 131, 65, 239, 68, 42, 183, 91, 223, 105, 45, 246, 94, 57, 237, 146, 67, 132, 76, 115, 200, 233, 224, 96, 208, 7, 180, 146, 79, 148, 184, 173, 121, 229, 232, 120, 52, 228, 246, 47, 185, 69, 137, 219, 154, 91, 222, 13, 65, 80, 242, 10, 202, 218, 154, 79, 222, 245, 126, 116, 218, 37, 127, 160, 172, 173, 187, 98, 52, 56, 118, 218, 101, 79, 160, 176, 173, 249, 225, 77, 239, 236, 205, 192, 105, 231, 126, 24, 161, 162, 20, 183, 53, 63, 244, 250, 125, 30, 28, 47, 74, 154, 82, 172, 33, 100, 161, 189, 127, 244, 254, 48, 11, 236, 131, 193, 235, 81, 22, 192, 39, 195, 55, 111, 71, 89, 152, 246, 7, 135, 35, 240, 186, 234, 97, 255, 124, 116, 118, 242, 183, 179, 163, 225, 233, 32, 131, 234, 159, 15, 222, 13, 78, 122, 7, 249, 64, 233, 159, 31, 15, 160, 214, 201, 240, 7, 168, 250, 56, 19, 190, 31, 140, 122, 167, 199, 111, 123, 7, 26, 252, 249, 233, 217, 225, 235, 131, 163, 247, 133, 54, 250, 189, 147, 147, 163, 81, 22, 214, 253, 243, 222, 193, 240, 239, 189, 19, 176, 245, 243, 76, 180, 223, 59, 249, 62, 11, 209, 254, 249, 225, 209, 225, 192, 121, 252, 236, 89, 247, 146, 196, 198, 69, 76, 162, 217, 62, 97, 196, 9, 232, 149, 209, 139, 99, 114, 99, 217, 88, 50, 35, 73, 111, 50, 161, 190, 51, 37, 126, 66, 81, 148, 248, 158, 75, 227, 126, 24, 48, 47, 72, 195, 52, 145, 69, 211, 52, 152, 48, 47, 12, 140, 73, 232, 135, 113, 223, 39, 73, 98, 225, 207, 161, 107, 223, 202, 31, 206, 97, 58, 31, 211, 56, 147, 119, 147, 43, 143, 77, 102, 154, 30, 73, 168, 110, 179, 78, 76, 89, 26, 7, 38, 252, 249, 57, 13, 189, 132, 154, 93, 169, 34, 77, 168, 20, 232, 156, 198, 196, 119, 179, 226, 220, 158, 74, 35, 162, 140, 198, 177, 119, 73, 227, 76, 41, 183, 175, 82, 186, 162, 140, 36, 209, 140, 248, 44, 83, 202, 236, 173, 116, 146, 52, 152, 250, 225, 149, 134, 35, 204, 175, 202, 39, 36, 142, 195, 188, 190, 114, 133, 42, 38, 190, 247, 11, 137, 189, 32, 83, 224, 158, 80, 133, 46, 137, 63, 153, 93, 151, 78, 73, 234, 51, 37, 52, 187, 139, 197, 3, 110, 249, 43, 58, 78, 194, 201, 167, 174, 246, 27, 220, 16, 208, 9, 163, 110, 217, 11, 49, 253, 57, 165, 9, 59, 138, 61, 26, 48, 194, 69, 199, 52, 158, 123, 73, 2, 191, 44, 251, 118, 241, 32, 211, 76, 200, 37, 125, 163, 2, 0, 138, 252, 112, 66, 252, 83, 22, 198, 228, 130, 54, 18, 202, 134, 140, 206, 45, 147, 38, 81, 234, 97, 156, 36, 102, 253, 175, 167, 71, 135, 141, 132, 65, 47, 46, 188, 233, 141, 149, 133, 143, 109, 119, 53, 224, 24, 218, 15, 99, 13, 219, 3, 15, 99, 4, 65, 139, 46, 134, 91, 161, 173, 139, 202, 182, 114, 240, 174, 55, 181, 178, 170, 91, 78, 144, 250, 190, 125, 155, 99, 33, 169, 136, 196, 9, 205, 181, 236, 174, 176, 97, 222, 228, 7, 207, 253, 8, 36, 133, 248, 195, 199, 50, 95, 18, 51, 48, 193, 55, 150, 27, 78, 210, 57, 88, 206, 110, 16, 215, 181, 204, 191, 152, 118, 35, 156, 78, 97, 80, 124, 99, 153, 15, 227, 240