1
0
mirror of https://github.com/s00500/ESPUI.git synced 2024-06-26 14:44:13 +00:00
ESPUI/src/dataControlsJS.h
2019-03-08 22:24:20 +01:00

67 lines
19 KiB
C

const char JS_CONTROLS[] PROGMEM = R"=====(
const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;const UI_TITEL=0;const UI_PAD=1;const UI_CPAD=2;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 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='"+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='"+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='"+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='"+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='"+data.id+"' class='two columns card tcenter card-slider "+colorClass(data.color)+"'>"+
"<h5>"+data.label+"</h5><hr/>"+
"<div id='sl"+data.id+"' class='rkmd-slider slider-discrete slider-"+colorClass(data.color)+"'>"+
"<input type='range' min='0' max='100' value='"+data.value+"'>"+
"</div>"+
"</div>"+
"<script>rkmd_rangeSlider('#sl"+data.id+"');</script>");break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
parent.append("<div 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='"+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='"+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 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:break;default:console.error("Unknown type or event");break;}
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$('#'+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 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);}}
)=====";
const uint8_t JS_CONTROLS_GZIP[2560] PROGMEM = { 31,139,8,0,161,218,130,92,2,255,237,90,107,114,219,200,17,254,175,83,96,97,151,1,68,20,31,246,202,235,37,4,185,104,138,182,184,203,37,21,138,90,167,82,91,197,26,2,67,19,37,16,64,128,161,40,69,197,107,236,65,114,164,156,36,61,79,12,32,82,226,90,73,85,82,206,31,9,51,211,243,245,55,221,61,61,47,250,73,156,19,227,170,63,237,15,251,147,126,103,48,253,116,213,247,94,55,155,174,207,27,46,206,58,147,222,116,244,241,227,101,111,226,181,138,250,254,116,210,159,244,6,158,86,113,209,57,243,90,69,177,75,203,175,139,242,135,171,201,100,52,244,222,148,145,69,109,171,249,166,144,28,116,62,0,242,247,101,65,94,217,106,126,95,200,93,126,238,79,186,231,189,177,119,92,22,85,245,173,230,177,38,61,232,159,65,221,219,138,44,175,109,53,223,22,146,195,171,95,62,64,221,15,101,73,81,219,106,254,160,217,160,247,151,9,88,238,226,106,226,189,43,75,107,45,173,230,187,162,199,167,113,231,226,220,251,81,84,116,206,206,120,205,244,98,212,31,82,81,209,208,29,244,58,99,33,220,106,254,168,105,236,124,240,90,173,138,46,86,167,153,254,178,55,232,117,1,237,117,101,172,162,186,165,121,101,116,49,233,83,251,87,220,34,171,181,122,229,234,179,209,231,161,114,244,160,247,113,162,188,60,238,127,58,159,40,15,119,123,195,9,24,76,58,172,59,157,92,141,255,124,53,234,95,246,20,84,119,218,251,165,55,238,12,138,192,233,78,47,122,208,107,220,255,21,186,190,86,149,159,123,147,206,229,197,121,103,160,193,79,47,175,134,31,7,163,207,37,29,221,206,120,60,154,168,136,232,78,59,131,254,95,59,227,254,80,57,190,59,61,235,140,127,86,222,237,78,135,163,97,207,123,125,124,236,206,87,177,79,194,36,54,252,36,74,178,110,132,242,220,102,159,253,192,185,23,31,222,112,181,156,225,76,213,187,249,58,36,254,66,147,67,57,214,199,218,206,48,89,101,177,9,127,254,182,74,194,28,155,174,16,17,67,151,2,120,137,51,20,5,170,185,176,131,148,72,49,193,89,22,222,224,76,9,21,118,145,66,107,76,80,158,46,80,68,148,144,178,147,148,201,87,241,60,74,214,26,14,55,155,108,247,81,150,37,69,127,105,66,217,140,162,240,239,40,11,99,37,64,45,40,27,3,148,93,155,110,128,231,104,21,17,89,105,186,155,205,193,13,202,140,53,158,229,137,127,237,106,223,221,36,142,177,79,112,224,205,81,148,227,194,11,25,206,9,202,136,237,220,191,180,131,196,95,45,113,76,156,58,10,2,219,252,147,233,212,147,249,220,118,220,151,182,249,34,75,214,80,94,144,101,100,155,166,227,10,220,186,31,37,57,6,17,129,226,110,14,52,7,199,151,4,145,85,222,131,129,102,160,97,7,23,138,174,100,65,71,134,151,201,13,230,145,97,50,151,31,125,201,48,142,77,231,129,40,240,44,201,101,56,216,34,197,73,51,22,70,195,24,38,134,96,64,73,190,122,241,238,237,155,99,119,75,175,98,232,165,218,216,190,247,163,208,191,110,11,203,109,74,99,94,160,56,136,240,175,97,30,206,194,40,36,119,93,168,248,2,246,185,15,231,246,119,213,241,191,122,245,157,52,121,125,17,6,1,142,157,123,229,15,234,76,5,43,125,164,196,97,224,189,27,248,24,132,57,193,49,76,21,243,70,233,244,153,78,179,182,157,75,141,25,93,57,208,139,241,218,248,140,103,151,240,141,137,109,174,243,118,163,97,30,174,195,56,72,214,245,40,241,17,37,80,95,36,57,137,209,18,31,154,141,117,174,185,63,137,147,20,199,158,36,106,227,27,66,103,113,156,39,17,134,222,95,0,144,75,26,84,110,15,15,238,242,52,193,183,192,78,153,174,160,80,68,19,201,86,216,221,104,212,88,108,238,195,141,9,2,100,53,98,75,104,152,214,61,130,70,43,182,33,208,89,200,93,193,60,86,65,160,173,1,34,200,251,233,114,52,172,167,40,131,217,4,13,117,90,231,176,190,216,83,94,159,37,193,29,171,243,161,132,51,15,166,188,200,140,84,188,78,238,82,44,114,99,121,175,209,102,205,192,141,100,73,148,215,231,73,214,67,208,9,71,152,194,122,167,140,5,228,146,91,206,240,158,138,183,25,161,156,64,10,250,18,206,239,164,176,179,113,181,193,216,170,19,140,212,113,103,25,70,215,174,36,192,246,46,109,69,158,132,36,130,177,80,38,17,154,225,136,185,120,137,194,248,28,163,0,178,164,152,167,133,64,21,143,109,78,218,148,42,152,9,16,93,152,83,76,154,23,187,124,120,206,61,47,122,20,158,160,153,121,184,69,198,221,96,152,4,186,36,75,111,155,3,94,83,71,41,68,43,164,192,147,32,188,49,194,192,179,4,74,24,28,154,22,132,11,4,172,103,145,117,66,23,177,213,50,206,13,72,230,129,65,184,91,12,243,80,91,219,132,233,161,236,64,223,83,243,240,192,60,89,28,159,10,64,54,208,67,243,164,1,85,39,139,172,193,219,243,20,197,76,109,180,77,47,235,99,176,191,71,235,12,165,150,4,187,65,209,10,83,48,218,159,35,53,96,0,167,102,213,146,124,63,248,95,100,74,152,93,255,33,83,206,86,132,36,220,152,51,18,151,116,211,246,36,94,38,171,28,67,174,139,65,128,201,178,236,110,107,146,53,131,102,22,167,212,97,149,62,34,206,51,44,35,168,249,133,122,131,119,57,85,110,161,230,210,105,241,245,133,36,43,127,193,82,126,187,72,22,206,61,174,167,25,166,115,237,140,175,251,144,93,116,10,2,162,198,200,186,155,26,67,1,211,127,13,134,88,35,54,15,230,180,220,245,127,19,177,195,39,26,213,155,111,157,136,60,247,130,30,219,46,252,236,121,102,203,116,222,155,96,123,88,81,3,179,13,187,37,165,145,142,67,116,14,99,235,244,36,140,211,21,49,104,222,246,44,214,97,150,220,90,92,99,73,97,18,119,169,127,164,74,186,222,107,1,23,175,162,136,133,231,211,60,26,50,246,88,56,178,1,150,19,133,82,32,67,161,64,172,198,2,61,123,182,101,129,126,127,11,169,57,70,202,131,98,61,21,29,87,194,144,81,120,122,130,140,82,94,73,81,192,167,215,213,69,205,216,150,88,180,164,178,91,86,100,21,54,230,116,174,143,250,244,159,191,255,227,164,129,192,181,160,252,73,18,236,252,184,63,143,109,226,37,42,217,215,83,161,231,218,253,153,108,145,46,17,137,190,158,8,61,109,239,79,100,139,116,137,200,236,113,34,13,30,42,118,177,105,243,60,49,157,96,190,2,199,34,190,230,97,182,180,118,112,230,39,255,218,190,164,133,248,35,180,253,18,237,209,207,148,53,79,27,148,52,4,126,57,83,208,169,169,197,225,31,93,186,244,64,255,218,165,107,27,134,182,116,49,134,209,243,25,178,192,123,54,199,18,74,149,101,246,124,150,124,162,62,155,102,25,166,202,115,246,124,158,108,246,60,155,102,9,165,202,210,127,62,75,49,93,158,205,179,130,179,123,99,197,174,72,255,23,150,80,90,56,202,163,48,248,119,44,167,146,193,246,13,86,118,189,84,170,248,191,163,32,204,253,12,19,44,203,79,50,208,183,88,25,189,0,177,140,101,8,121,180,9,255,209,173,103,181,154,240,197,119,76,86,249,28,101,233,249,174,252,5,28,194,148,156,82,126,83,6,122,201,216,216,214,139,242,64,28,23,14,99,92,246,193,33,140,95,117,127,19,155,38,238,131,156,220,69,116,159,75,251,182,103,17,242,175,93,190,242,196,171,101,137,15,119,86,204,238,128,119,249,6,214,56,126,207,37,5,121,73,223,23,195,186,214,120,236,20,92,188,30,252,223,9,160,24,223,146,18,161,39,237,78,123,124,133,213,59,31,218,194,138,57,236,41,232,21,160,180,11,223,161,45,50,60,247,44,205,202,124,63,82,189,227,144,59,42,158,242,41,26,221,143,131,173,116,68,105,233,42,152,226,70,251,129,171,172,186,6,96,57,180,52,195,65,151,151,237,251,40,73,210,54,93,2,54,14,187,152,179,45,148,134,22,213,108,33,144,158,135,17,120,200,86,75,2,189,197,165,55,242,198,75,155,44,194,28,248,16,2,185,129,14,204,114,60,15,6,199,214,134,35,146,28,241,227,150,229,110,216,66,101,177,122,171,166,47,46,52,52,129,142,151,102,201,50,37,182,53,65,51,131,36,134,56,123,194,151,205,227,223,72,50,24,170,243,30,104,209,187,102,58,158,58,23,130,30,54,20,29,231,30,69,56,163,16,11,68,40,166,17,36,56,55,226,132,24,248,54,204,137,209,254,237,55,139,222,102,111,89,207,30,174,87,236,153,235,219,184,141,195,17,246,31,153,57,188,189,114,94,151,147,132,55,254,241,105,194,223,6,219,59,140,90,152,157,153,171,196,160,98,219,170,13,147,148,189,40,80,226,252,115,159,73,47,202,92,15,6,201,7,22,227,88,116,28,155,3,125,36,218,187,50,155,246,250,118,188,184,239,221,114,191,80,126,101,110,63,184,151,40,95,117,52,77,231,125,179,221,218,10,193,119,86,124,191,48,165,79,75,54,179,153,198,68,187,228,168,153,176,33,48,229,62,237,33,154,88,181,41,130,190,108,57,180,247,19,99,209,214,27,54,27,244,132,187,79,127,49,229,30,56,124,191,222,226,206,151,55,200,151,67,249,126,193,222,54,108,243,42,190,142,225,144,201,22,96,154,79,88,18,80,161,185,57,144,209,72,219,79,189,210,207,22,94,189,82,45,39,229,199,7,30,173,242,173,1,82,230,11,75,241,118,117,68,207,43,121,12,246,213,188,79,249,65,80,236,251,212,75,175,220,8,138,151,93,89,44,158,113,101,77,241,102,43,107,212,11,173,172,224,79,178,178,164,94,96,29,87,50,41,94,171,158,216,126,202,156,182,117,8,5,119,73,90,99,171,211,84,252,4,177,199,24,237,228,177,209,31,177,150,56,207,17,228,37,237,13,71,127,190,44,109,165,120,129,187,15,194,202,83,49,47,26,88,208,21,79,129,57,203,47,49,11,192,182,121,8,255,15,205,182,18,214,181,104,27,135,109,58,248,196,120,76,9,217,67,73,41,241,110,83,35,231,208,99,138,242,61,20,233,247,231,188,185,22,230,244,174,134,61,250,138,207,50,236,140,214,105,104,52,84,140,138,200,42,221,174,78,157,44,233,148,169,85,20,138,215,64,237,33,144,159,63,219,187,152,164,254,211,84,82,191,196,165,148,90,118,3,207,247,0,158,239,2,166,167,251,221,208,123,152,47,157,237,130,166,215,48,187,161,163,61,160,163,93,208,236,234,100,55,118,182,7,118,182,5,187,244,67,0,185,12,10,199,231,4,17,204,2,141,125,121,30,123,11,160,101,22,226,69,116,135,144,119,218,242,45,192,81,191,197,144,113,142,0,254,6,107,170,229,18,41,251,107,239,244,18,68,164,184,10,82,24,63,137,85,254,129,71,1,199,240,140,98,44,45,250,163,148,167,105,84,101,96,167,156,22,237,242,234,166,130,221,124,136,189,131,214,19,240,234,70,231,95,247,38,254,96,229,39,0,0 };