mirror of
https://github.com/s00500/ESPUI.git
synced 2024-06-26 14:44:13 +00:00
46 lines
15 KiB
C
46 lines
15 KiB
C
const char JS_CONTROLS[] PROGMEM = R"=====(
|
|
const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;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_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot"
|
|
break;case C_ALIZARIN:return"alizarin"
|
|
break;case C_NONE:return""
|
|
break;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").text("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();};websock.onmessage=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_TITEL:document.title=data.label;$('#mainHeader').html(data.label);break;case UI_LABEL:$('#row').append("<div class='two columns card tcenter "+colorClass(data.color)+"'><h5 id='"+data.id+"'>"+data.label+"</h5><hr /><span id='l"+data.id+"' class='label label-wrap'>"+data.value+"</span></div>");break;case UI_BUTTON:$('#row').append("<div class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'>"+data.value+"</button></div>");$('#'+data.id).on({'touchstart':function(e){e.preventDefault();buttonclick(data.id,true)}});$('#'+data.id).on({'touchend':function(e){e.preventDefault();buttonclick(data.id,false)}});break;case UI_SWITCHER:var label="<label id='sl"+data.id+"' class='switch checked'>";var input="<div class='in'><input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' ></div>";}
|
|
$('#row').append("<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
|
|
label+input+
|
|
"</label>"+
|
|
"</div>");break;case UI_CPAD:center="<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='pc"+data.id+"'>OK</a>";case UI_PAD:$('#row').append("<div class='two columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
|
|
"<nav class='control'>"+
|
|
"<ul>"+
|
|
"<li><a onmousedown='padclick(FOR, "+data.id+", true)' onmouseup='padclick(FOR, "+data.id+", false)' href='#' id='pf"+data.id+"'>▲</a></li>"+
|
|
"<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='pr"+data.id+"'>▲</a></li>"+
|
|
"<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='pl"+data.id+"'>▲</a></li>"+
|
|
"<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='pb"+data.id+"'>▲</a></li>"+
|
|
"</ul>"+
|
|
center+
|
|
"</nav>"+
|
|
"</div>");$('#pf'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(FOR,data.id,true)}});$('#pf'+data.id).on({'touchend':function(e){e.preventDefault();padclick(FOR,data.id,false)}});$('#pl'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(LEFT,data.id,true)}});$('#pl'+data.id).on({'touchend':function(e){e.preventDefault();padclick(LEFT,data.id,false)}});$('#pr'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(RIGHT,data.id,true)}});$('#pr'+data.id).on({'touchend':function(e){e.preventDefault();padclick(RIGHT,data.id,false)}});$('#pb'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(BACK,data.id,true)}});$('#pb'+data.id).on({'touchend':function(e){e.preventDefault();padclick(BACK,data.id,false)}});$('#pc'+data.id).on({'touchstart':function(e){e.preventDefault();padclick(CENTER,data.id,true)}});$('#pc'+data.id).on({'touchend':function(e){e.preventDefault();padclick(CENTER,data.id,false)}});break;case UPDATE_LABEL:$('#l'+data.id).html(data.value);break;case UPDATE_SWITCHER:if(data.value=="0")
|
|
switcher(data.id,0);else
|
|
switcher(data.id,1);break;case UI_SLIDER:$('#row').append("<div class='two columns card tcenter card-slider "+colorClass(data.color)+"'>"+
|
|
"<h5 id='"+data.id+"'>"+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>");$('#row').append("<script>"+
|
|
"rkmd_rangeSlider('#sl"+data.id+"');"+
|
|
"</script>");break;case UPDATE_SLIDER:slider_move($('#sl'+data.id),data.value,'100',false);break;case UI_NUMBER:$('#row').append("<div class='two columns card tcenter"+colorClass(data.color)+"'>"+
|
|
"<h5 id='"+data.id+"'>"+data.label+"</h5><hr />"+
|
|
"<input id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+
|
|
"</div>");break;case UPDATE_NUMBER:$('#num'+data.id).val(data.value);break;case UI_TEXT_INPUT:$('#row').append("<div class='two columns card tcenter"+colorClass(data.color)+"'>"+
|
|
"<h5 id='"+data.id+"'>"+data.label+"</h5><hr />"+
|
|
"<input id='num"+data.id+"' type='number' value='"+data.value+"' onchange='numberchange("+data.id+")' />"+
|
|
"</div>");break;case UPDATE_TEXT_INPUT:$('#num'+data.id).val(data.value);break;default:console.error('Unknown type or event');break;}};}
|
|
function numberchange(number){var val=$('#num'+data.id).val();websock.send("nchange:"+number+":"+val);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);}}
|
|
)=====";
|
|
|
|
const uint8_t JS_CONTROLS_GZIP[1997] PROGMEM = { 31,139,8,0,149,41,243,91,2,255,237,89,219,114,219,182,22,125,247,87,176,76,38,36,43,69,178,147,147,94,36,209,51,138,172,212,58,85,37,87,150,155,78,95,52,16,9,69,28,83,32,11,130,82,82,143,126,227,124,72,63,169,95,114,54,0,130,55,147,150,106,39,125,234,139,77,108,110,44,172,125,3,192,45,39,32,17,211,110,70,139,249,104,62,28,219,167,93,71,9,198,253,183,32,56,83,130,171,139,254,124,152,8,191,201,180,222,222,204,231,211,137,253,42,147,92,191,31,205,7,151,195,153,253,186,56,53,149,127,155,233,94,245,47,236,255,100,195,1,31,191,201,65,141,71,23,48,225,187,18,144,148,126,159,233,77,110,126,122,11,146,179,211,162,162,18,159,101,154,243,225,175,243,197,104,114,117,51,183,207,94,21,181,243,175,94,103,51,126,152,245,175,46,237,51,197,114,48,30,246,103,74,168,168,246,47,46,164,104,113,53,29,77,96,190,114,208,187,233,44,117,233,219,254,224,199,212,157,227,225,187,121,234,180,217,232,135,203,121,234,174,193,112,50,7,214,233,130,139,249,205,236,231,155,233,232,122,152,66,13,22,195,159,134,179,254,248,34,197,27,44,174,134,48,107,54,250,5,166,190,74,133,239,135,243,254,245,213,101,127,156,131,95,92,223,76,222,141,167,239,11,107,12,250,179,217,116,158,250,126,176,232,143,71,191,245,103,163,73,26,235,193,98,50,157,12,33,120,171,152,56,204,11,136,230,4,126,64,7,62,138,34,83,60,142,92,235,46,121,176,39,241,102,137,105,42,239,70,59,143,57,235,156,30,138,112,222,180,14,197,44,166,68,135,63,191,199,129,23,97,189,187,164,24,221,118,19,197,196,94,165,134,55,152,34,223,45,41,101,46,80,122,33,102,152,82,111,139,105,73,53,115,140,82,221,97,134,162,112,141,124,86,82,77,221,165,52,163,152,172,252,96,119,15,83,250,80,105,57,136,210,128,233,39,5,21,229,85,165,132,124,239,15,68,61,82,82,227,158,86,42,234,149,139,87,40,246,89,42,238,238,247,39,91,68,181,29,94,70,129,115,219,205,61,15,2,66,176,195,176,107,175,144,31,225,44,98,20,71,12,81,102,90,119,207,77,55,112,226,13,38,204,106,33,215,53,141,175,13,171,21,172,86,166,213,125,110,234,207,104,176,211,173,214,154,109,124,83,215,173,110,130,219,114,252,32,194,160,146,160,116,247,39,185,100,32,215,12,177,56,26,130,217,20,86,168,225,194,209,83,93,88,131,226,77,176,197,50,139,116,145,30,47,63,80,140,137,110,221,83,5,158,5,61,138,221,10,45,134,63,50,83,23,44,180,182,54,9,180,132,1,39,249,226,217,119,223,188,126,211,173,152,149,153,94,144,18,243,206,112,124,207,185,53,58,137,239,246,5,171,215,136,184,62,254,197,139,188,165,231,123,236,211,0,4,31,192,67,119,222,202,252,170,236,129,23,47,190,82,78,111,173,61,215,197,196,186,75,35,194,195,153,194,170,40,165,234,96,250,112,11,15,99,47,98,152,64,97,233,219,116,77,71,172,169,55,171,185,52,133,219,211,16,218,4,239,180,247,120,121,13,207,152,153,198,46,234,180,219,70,99,231,17,55,216,181,252,192,65,156,64,107,29,68,140,160,13,110,24,237,93,100,100,9,16,144,32,196,196,86,68,77,188,101,188,230,73,20,248,24,102,127,0,64,169,169,113,61,227,112,12,235,98,45,163,152,186,46,203,193,44,159,24,141,113,119,159,163,38,178,243,24,110,66,17,200,149,115,182,128,134,185,236,1,52,46,120,24,97,131,163,8,125,192,135,48,120,225,186,136,33,251,191,215,211,73,43,68,20,74,12,94,180,184,76,190,197,118,154,8,203,192,253,36,100,14,140,48,181,97,31,72,182,86,174,222,98,159,66,156,108,174,234,72,239,164,115,153,199,124,128,226,122,62,90,98,31,156,110,60,219,32,143,92,98,228,98,106,36,5,159,41,88,249,253,77,221,8,58,124,22,236,15,160,142,66,8,178,107,234,61,215,219,130,83,33,172,182,193,118,1,63,24,226,13,137,52,216,2,93,141,73,166,154,222,200,157,23,98,13,49,182,26,186,113,222,91,191,209,60,215,54,244,134,120,225,185,92,152,12,4,147,134,222,107,175,223,128,30,212,244,121,47,10,17,17,250,126,126,130,98,32,38,104,226,239,203,29,69,97,138,180,69,126,140,57,18,159,127,222,107,3,235,115,189,108,163,188,207,28,48,18,178,227,81,70,214,216,4,38,45,99,198,160,240,33,105,130,56,194,80,139,196,54,164,76,108,63,102,206,208,166,198,51,223,50,148,114,28,62,160,42,171,223,168,245,110,234,19,137,144,121,133,59,192,80,19,146,157,144,5,177,179,22,123,147,209,201,146,218,186,195,173,144,98,190,61,93,200,51,10,234,32,79,40,1,105,10,218,251,253,3,216,224,232,71,33,75,43,57,116,49,152,234,202,217,225,21,35,156,110,235,61,153,31,220,33,81,101,254,200,122,210,128,13,108,145,46,120,74,212,155,71,194,152,217,133,44,240,8,4,85,200,53,94,119,182,33,166,44,131,143,210,221,81,1,60,32,3,78,89,193,243,45,60,23,39,18,251,62,68,41,89,83,69,161,11,167,72,22,37,219,214,79,117,235,238,239,153,193,233,255,35,212,83,206,251,147,154,218,41,167,224,23,43,38,189,113,34,101,194,192,198,9,188,18,99,254,66,175,41,123,254,229,209,81,123,106,15,41,110,176,89,175,60,186,49,138,133,25,34,87,230,159,188,170,55,181,3,213,249,176,190,42,209,53,197,43,27,10,67,56,42,116,10,213,58,253,177,215,70,224,92,69,151,179,253,50,251,240,67,94,213,123,4,109,115,174,97,52,240,13,249,34,78,188,235,123,231,224,189,106,111,193,199,208,241,174,186,175,92,237,167,85,193,79,127,253,239,79,238,40,8,184,119,152,143,248,236,58,158,81,149,122,53,39,250,120,78,252,187,240,120,74,21,218,213,140,252,199,51,226,159,173,199,51,170,208,174,102,180,124,152,81,91,38,148,204,89,33,128,212,43,22,48,207,255,112,245,132,51,170,144,107,149,135,84,13,252,49,199,84,37,120,118,78,9,116,255,115,144,23,57,80,205,222,127,58,251,2,122,137,62,253,28,244,101,85,85,243,167,79,231,95,132,47,25,176,252,28,6,136,140,175,230,191,124,58,255,2,122,137,190,243,57,232,39,71,82,181,1,206,211,13,40,225,87,223,212,114,189,69,113,172,229,19,55,251,38,17,183,160,170,137,233,53,175,226,190,116,146,94,90,20,133,83,171,139,129,196,253,23,103,247,174,143,162,209,248,216,131,150,15,94,70,190,231,30,56,116,197,166,246,183,62,128,196,12,117,165,170,190,253,209,219,77,186,184,252,247,210,245,34,135,98,134,213,248,32,167,252,253,144,242,94,130,161,109,60,56,26,78,225,63,250,104,27,103,167,240,36,93,109,20,63,39,140,252,78,93,222,179,75,174,4,82,94,200,132,26,39,189,16,43,93,11,138,160,92,180,206,234,74,52,53,167,50,25,100,208,164,145,11,222,92,50,159,11,160,44,167,154,25,215,166,176,66,53,73,138,225,151,237,227,71,134,255,11,68,92,198,131,79,34,241,166,16,116,25,35,34,122,174,117,33,129,227,90,118,138,148,162,28,229,239,242,112,72,183,235,47,201,249,158,186,112,10,192,228,234,20,214,169,45,211,124,223,253,95,127,22,252,89,114,204,49,62,85,157,96,213,73,18,157,42,211,184,33,183,4,174,110,130,188,22,80,77,236,200,134,154,180,223,231,251,150,5,198,114,96,221,241,207,92,88,200,174,230,145,53,1,35,17,180,196,250,142,222,144,243,27,58,60,130,162,104,138,165,29,46,33,200,45,156,255,122,151,243,154,94,196,111,156,162,101,154,60,22,23,90,114,89,186,140,220,188,181,146,74,28,230,20,114,203,165,199,16,119,74,179,180,96,210,56,203,245,204,228,97,213,169,99,18,58,135,169,132,78,129,75,46,224,112,17,172,71,94,29,129,188,170,67,230,151,132,122,232,35,252,23,46,235,160,249,253,175,30,218,63,2,218,175,131,22,87,179,122,108,122,4,54,173,192,46,244,209,213,17,159,68,30,238,70,12,139,76,19,79,182,45,154,23,124,44,142,8,67,65,181,188,200,52,58,170,3,100,165,63,102,36,235,70,8,224,183,56,183,180,58,97,212,252,180,205,109,164,32,221,61,183,160,140,228,145,131,88,249,95,72,242,112,2,79,203,108,57,227,191,234,28,166,81,214,9,105,16,154,122,242,94,151,23,192,110,25,251,244,62,118,13,173,3,240,201,65,187,223,255,31,135,145,92,248,120,30,0,0 };
|