mirror of
https://github.com/s00500/ESPUI.git
synced 2026-02-05 17:02:41 +00:00
1 line
18 KiB
JavaScript
1 line
18 KiB
JavaScript
const UI_INITIAL_GUI=200,UI_RELOAD=201,UPDATE_OFFSET=100,UI_EXTEND_GUI=210,UI_TITEL=0,UI_PAD=1,UPDATE_PAD=101,UI_CPAD=2,UPDATE_CPAD=102,UI_BUTTON=3,UPDATE_BUTTON=103,UI_LABEL=4,UPDATE_LABEL=104,UI_SWITCHER=5,UPDATE_SWITCHER=105,UI_SLIDER=6,UPDATE_SLIDER=106,UI_NUMBER=7,UPDATE_NUMBER=107,UI_TEXT_INPUT=8,UPDATE_TEXT_INPUT=108,UI_GRAPH=9,ADD_GRAPH_POINT=10,CLEAR_GRAPH=109,UI_TAB=11,UPDATE_TAB=111,UI_SELECT=12,UPDATE_SELECT=112,UI_OPTION=13,UPDATE_OPTION=113,UI_MIN=14,UPDATE_MIN=114,UI_MAX=15,UPDATE_MAX=115,UI_STEP=16,UPDATE_STEP=116,UI_GAUGE=17,UPDATE_GAUGE=117,UI_ACCEL=18,UPDATE_ACCEL=118,UI_SEPARATOR=19,UPDATE_SEPARATOR=119,UI_TIME=20,UPDATE_TIME=120,UI_FILEDISPLAY=21,UPDATE_FILEDISPLAY=121,UI_FRAGMENT=98,UP=0,DOWN=1,LEFT=2,RIGHT=3,CENTER=4,C_TURQUOISE=0,C_EMERALD=1,C_PETERRIVER=2,C_WETASPHALT=3,C_SUNFLOWER=4,C_CARROT=5,C_ALIZARIN=6,C_DARK=7,C_NONE=255;var websock,websockConnected,WebSocketTimer,rangeSlider,addToHTML,elementHTML,processEnabled,controlAssemblyArray=new Object,FragmentAssemblyTimer=new Array,graphData=new Array,hasAccel=!1,sliderContinuous=!1;function colorClass(e){switch(e=Number(e),e){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""}}websockConnected=!1,WebSocketTimer=null;function requestOrientationPermission(){}function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData))}function restoreGraphData(e){var t=localStorage.getItem("espuigraphs",graphData);if(t!=null){t=JSON.parse(t);let n=t[e];return Array.isArray(n)?n:[]}return[]}function restart(){$(document).add("*").off(),$("#row").html(""),conStatusError(),start()}function conStatusError(){FragmentAssemblyTimer.forEach(e=>{clearInterval(e)}),FragmentAssemblyTimer=new Array,controlAssemblyArray=new Array,!0===websockConnected&&(websockConnected=!1,websock.close(),$("#conStatus").removeClass("color-green"),$("#conStatus").addClass("color-red"),$("#conStatus").html("Error / No Connection ↻"),$("#conStatus").off(),$("#conStatus").on({click:restart}))}function handleVisibilityChange(){!websockConnected&&!document.hidden&&restart()}function start(){let n=window.location.hostname,e=window.location.port;document.addEventListener("visibilitychange",handleVisibilityChange,!1),e!=""||e!=80||e!=443?websock=new WebSocket("ws://"+n+":"+e+"/ws"):websock=new WebSocket("ws://"+n+"/ws"),null===WebSocketTimer&&(WebSocketTimer=setInterval(function(){websock.readyState===3&&restart()},5e3)),websock.onopen=function(){console.log("websock open"),$("#conStatus").addClass("color-green"),$("#conStatus").text("Connected"),websockConnected=!0,FragmentAssemblyTimer.forEach(e=>{clearInterval(e)}),FragmentAssemblyTimer=new Array,controlAssemblyArray=new Array},websock.onclose=function(){console.log("websock close"),conStatusError(),FragmentAssemblyTimer.forEach(e=>{clearInterval(e)}),FragmentAssemblyTimer=new Array,controlAssemblyArray=new Array},websock.onerror=function(){console.log("websock Error"),restart(),FragmentAssemblyTimer.forEach(e=>{clearInterval(e)}),FragmentAssemblyTimer=new Array,controlAssemblyArray=new Array};var t=function(e){try{var s,o,i,a,r,c,l,d,n=JSON.parse(e.data)}catch(e){console.error(e),websock.send("uiok:"+0);return}switch(l=document.body,d="",n.type){case UI_INITIAL_GUI:$("#row").html(""),$("#tabsnav").html(""),$("#tabscontent").html(""),n.sliderContinuous&&(sliderContinuous=n.sliderContinuous),n.controls.forEach(e=>{var n={data:JSON.stringify(e)};t(n)}),n.totalcontrols>n.controls.length-1&&websock.send("uiok:"+(n.controls.length-1));break;case UI_EXTEND_GUI:n.controls.forEach(e=>{var n={data:JSON.stringify(e)};t(n)}),n.totalcontrols>n.startindex+(n.controls.length-1)&&websock.send("uiok:"+(n.startindex+(n.controls.length-1)));break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=n.label,$("#mainHeader").html(n.label);break;case UI_LABEL:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GAUGE:case UI_SEPARATOR:n.visible&&addToHTML(n);break;case UI_BUTTON:n.visible&&(addToHTML(n),$("#btn"+n.id).on({touchstart:function(e){e.preventDefault(),$(this).addClass("pressed"),buttonclick(n.id,!0)},touchend:function(e){e.preventDefault(),$(this).removeClass("pressed"),buttonclick(n.id,!1)}}));break;case UI_SWITCHER:n.visible&&(addToHTML(n),switcher(n.id,n.value));break;case UI_CPAD:case UI_PAD:n.visible&&(addToHTML(n),$("#pf"+n.id).on({touchstart:function(e){e.preventDefault(),$(this).parent().addClass("pressed"),padclick(UP,n.id,!0)},touchend:function(e){e.preventDefault(),$(this).parent().removeClass("pressed"),padclick(UP,n.id,!1)}}),$("#pl"+n.id).on({touchstart:function(e){e.preventDefault(),$(this).parent().addClass("pressed"),padclick(LEFT,n.id,!0)},touchend:function(e){e.preventDefault(),$(this).parent().removeClass("pressed"),padclick(LEFT,n.id,!1)}}),$("#pr"+n.id).on({touchstart:function(e){e.preventDefault(),$(this).parent().addClass("pressed"),padclick(RIGHT,n.id,!0)},touchend:function(e){e.preventDefault(),$(this).parent().removeClass("pressed"),padclick(RIGHT,n.id,!1)}}),$("#pb"+n.id).on({touchstart:function(e){e.preventDefault(),$(this).parent().addClass("pressed"),padclick(DOWN,n.id,!0)},touchend:function(e){e.preventDefault(),$(this).parent().removeClass("pressed"),padclick(DOWN,n.id,!1)}}),$("#pc"+n.id).on({touchstart:function(e){e.preventDefault(),$(this).addClass("pressed"),padclick(CENTER,n.id,!0)},touchend:function(e){e.preventDefault(),$(this).removeClass("pressed"),padclick(CENTER,n.id,!1)}}));break;case UI_SLIDER:n.visible&&(addToHTML(n),rangeSlider(!sliderContinuous));break;case UI_TAB:n.visible&&($("#tabsnav").append("<li><a id='tablink"+n.id+"' href='#tab"+n.id+"'>"+n.value+"</a></li>"),$("#tabscontent").append("<div id='tab"+n.id+"'></div>"),$("#tablink"+n.id).on({touchend:function(){tabclick(n.id)},mouseup:function(){tabclick(n.id)}}),tabs=$(".tabscontent").tabbedContent({loop:!0}).data("api"),$("a").filter(function(){return $(this).attr("href")==="#click-to-switch"}).on("click",function(e){var t=prompt("Tab to switch to (number or id)?");tabs.switchTab(t)||alert("That tab does not exist :\\"),e.preventDefault()}));break;case UI_OPTION:n.parentControl&&(i=$("#select"+n.parentControl),i.append("<option id='option"+n.id+"' value='"+n.value+"' "+n.selected+">"+n.label+"</option>"));break;case UI_MIN:n.parentControl&&($("#sl"+n.parentControl).length?$("#sl"+n.parentControl).attr("min",n.value):$("#num"+n.parentControl).length&&$("#num"+n.parentControl).attr("min",n.value));break;case UI_MAX:n.parentControl&&($("#sl"+n.parentControl).length?$("#sl"+n.parentControl).attr("max",n.value):$("#text"+n.parentControl).length?$("#text"+n.parentControl).attr("maxlength",n.value):$("#num"+n.parentControl).length&&$("#num"+n.parentControl).attr("max",n.value));break;case UI_STEP:n.parentControl&&($("#sl"+n.parentControl).length?$("#sl"+n.parentControl).attr("step",n.value):$("#num"+n.parentControl).length&&$("#num"+n.parentControl).attr("step",n.value));break;case UI_GRAPH:n.visible&&(addToHTML(n),graphData[n.id]=restoreGraphData(n.id),renderGraphSvg(graphData[n.id],"graph"+n.id));break;case ADD_GRAPH_POINT:a=(new Date).getTime(),graphData[n.id].push({x:a,y:n.value}),saveGraphData(),renderGraphSvg(graphData[n.id],"graph"+n.id);break;case CLEAR_GRAPH:graphData[n.id]=[],saveGraphData(),renderGraphSvg(graphData[n.id],"graph"+n.id);break;case UI_ACCEL:if(hasAccel)break;hasAccel=!0,n.visible&&(addToHTML(n),requestOrientationPermission());break;case UI_FILEDISPLAY:n.visible&&(addToHTML(n),FileDisplayUploadFile(n));break;case UPDATE_LABEL:$("#l"+n.id).html(n.value),n.hasOwnProperty("elementStyle")&&$("#l"+n.id).attr("style",n.elementStyle);break;case UPDATE_SWITCHER:switcher(n.id,n.value=="0"?0:1),n.hasOwnProperty("elementStyle")&&$("#sl"+n.id).attr("style",n.elementStyle);break;case UPDATE_SLIDER:$("#sl"+n.id).attr("value",n.value),slider_move($("#sl"+n.id).parent().parent(),n.value,"100",!1),n.hasOwnProperty("elementStyle")&&$("#sl"+n.id).attr("style",n.elementStyle);break;case UPDATE_NUMBER:$("#num"+n.id).val(n.value),n.hasOwnProperty("elementStyle")&&$("#num"+n.id).attr("style",n.elementStyle);break;case UPDATE_TEXT_INPUT:$("#text"+n.id).val(n.value),n.hasOwnProperty("elementStyle")&&$("#text"+n.id).attr("style",n.elementStyle),n.hasOwnProperty("inputType")&&$("#text"+n.id).attr("type",n.inputType);break;case UPDATE_SELECT:$("#select"+n.id).val(n.value),n.hasOwnProperty("elementStyle")&&$("#select"+n.id).attr("style",n.elementStyle);break;case UPDATE_BUTTON:$("#btn"+n.id).val(n.value),$("#btn"+n.id).text(n.value),n.hasOwnProperty("elementStyle")&&$("#btn"+n.id).attr("style",n.elementStyle);break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+n.id).val(n.value),n.hasOwnProperty("elementStyle")&&$("#gauge"+n.id).attr("style",n.elementStyle);break;case UPDATE_ACCEL:break;case UPDATE_TIME:r=(new Date).toISOString(),websock.send("time:"+r+":"+n.id);break;case UPDATE_FILEDISPLAY:FileDisplayUploadFile(n);break;case UI_FRAGMENT:let l=n.length,s=n.offset,o=s+l,d=n.total,u=l+s,h=d===u;if(!n.hasOwnProperty("control")){console.error("UI_FRAGMENT:Missing control record, skipping control");break}let e=n.control;if(StopFragmentAssemblyTimer(n.control.id),0===s){controlAssemblyArray[e.id]=n,controlAssemblyArray[e.id].offset=o,StartFragmentAssemblyTimer(e.id);let t=JSON.stringify({id:e.id,offset:o});websock.send("uifragmentok:"+0+": "+t+":");break}if("undefined"==typeof controlAssemblyArray[e.id]){console.error("Missing first fragment for control: "+e.id),StartFragmentAssemblyTimer(e.id);let t=JSON.stringify({id:e.id,offset:0});websock.send("uifragmentok:"+0+": "+t+":");break}if(s!==controlAssemblyArray[e.id].offset){console.error("Wrong next fragment. Expected: "+controlAssemblyArray[e.id].offset+" Got: "+s),StartFragmentAssemblyTimer(e.id);let t=JSON.stringify({id:e.id,offset:controlAssemblyArray[e.id].length+controlAssemblyArray[e.id].offset});websock.send("uifragmentok:"+0+": "+t+":");break}if(controlAssemblyArray[e.id].control.value+=e.value,controlAssemblyArray[e.id].offset=o,!0===h)c={data:JSON.stringify(controlAssemblyArray[e.id].control)},t(c),controlAssemblyArray[e.id]=null;else{StartFragmentAssemblyTimer(e.id);let t=JSON.stringify({id:e.id,offset:o});websock.send("uifragmentok:"+0+": "+t+":")}break;default:console.error("Unknown type or event");break}n.type>=UI_TITEL&&n.type<UPDATE_OFFSET&&processEnabled(n),n.type>=UPDATE_OFFSET&&n.type<UI_INITIAL_GUI&&(s=$("#id"+n.id),n.hasOwnProperty("panelStyle")&&$("#id"+n.id).attr("style",n.panelStyle),n.hasOwnProperty("visible")&&(n.visible?$("#id"+n.id).show():$("#id"+n.id).hide()),n.hasOwnProperty("panelClass")&&(s=$("#id"+n.id),o=s.attr("data-base-class"),o&&s.attr("class",o+" "+n.panelClass)),n.type==UPDATE_SLIDER?(s.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin"),s.addClass("slider-"+colorClass(n.color))):(s.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin"),s.addClass(colorClass(n.color))),processEnabled(n)),$(".range-slider__range").each(function(){$(this)[0].value=$(this).attr("value"),$(this).next().html($(this).attr("value"))})};websock.onmessage=t}async function FileDisplayUploadFile(e){let n=await downloadFile(e.value),t="fd"+e.id;$("#"+t).val(n),$("#"+t).css("textAlign","left"),$("#"+t).css("white-space","nowrap"),$("#"+t).css("overflow","scroll"),$("#"+t).css("overflow-y","scroll"),$("#"+t).css("overflow-x","scroll"),$("#"+t).scrollTop($("#"+t).val().length)}async function downloadFile(e){let t=await fetch(e);if(t.status!=200)throw new Error("File Read Server Error: '"+t.status+"'");let n=await t.text();return n}function StartFragmentAssemblyTimer(e){StopFragmentAssemblyTimer(e),FragmentAssemblyTimer[e]=setInterval(function(e){if("undefined"!=typeof controlAssemblyArray[e]&&null!==controlAssemblyArray[e]){let t=JSON.stringify({id:controlAssemblyArray[e].control.id,offset:controlAssemblyArray[e].offset});websock.send("uifragmentok:"+0+": "+t+":")}},1e3,e)}function StopFragmentAssemblyTimer(e){"undefined"!=typeof FragmentAssemblyTimer[e]&&FragmentAssemblyTimer[e]&&clearInterval(FragmentAssemblyTimer[e])}function sliderchange(e){var t=$("#sl"+e).val();websock.send("slvalue:"+t+":"+e),$(".range-slider__range").each(function(){$(this).attr("value",$(this)[0].value)})}function numberchange(e){var t=$("#num"+e).val();websock.send("nvalue:"+t+":"+e)}function textchange(e){var t=$("#text"+e).val();websock.send("tvalue:"+t+":"+e)}function tabclick(e){var t=$("#tab"+e).val();websock.send("tabvalue:"+t+":"+e)}function selectchange(e){var t=$("#select"+e).val();websock.send("svalue:"+t+":"+e)}function buttonclick(e,t){if($("#btn"+e).prop("disabled"))return;t?websock.send("bdown:"+e):websock.send("bup:"+e)}function padclick(e,t,n){if($("#id"+t+" nav").hasClass("disabled"))return;switch(e){case CENTER:n?websock.send("pcdown:"+t):websock.send("pcup:"+t);break;case UP:n?websock.send("pfdown:"+t):websock.send("pfup:"+t);break;case DOWN:n?websock.send("pbdown:"+t):websock.send("pbup:"+t);break;case LEFT:n?websock.send("pldown:"+t):websock.send("plup:"+t);break;case RIGHT:n?websock.send("prdown:"+t):websock.send("prup:"+t);break}}function switcher(e,t){t==null?$("#sl"+e).hasClass("checked")?(websock.send("sinactive:"+e),$("#sl"+e).removeClass("checked")):(websock.send("sactive:"+e),$("#sl"+e).addClass("checked")):t==1?($("#sl"+e).addClass("checked"),$("#sl"+e).prop("checked",!0)):t==0&&($("#sl"+e).removeClass("checked"),$("#sl"+e).prop("checked",!1))}rangeSlider=function(e){var t=$(".range-slider__range"),n=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""))};t.on({input:function(){$(this).next().html(this.value)}}),t.each(function(){$(this).next().html(this.value),$(this).attr("callbackSet")!="true"&&(e?$(this).on({change:n}):$(this).on({input:n}),$(this).attr("callbackSet","true"))})},addToHTML=function(e){if(panelStyle=e.hasOwnProperty("panelStyle")?" style='"+e.panelStyle+"' ":"",panelClass=e.hasOwnProperty("panelClass")?" "+e.panelClass+" ":"",panelwide=e.hasOwnProperty("wide")?"wide":"",!e.hasOwnProperty("parentControl")||$("#tab"+e.parentControl).length>0){var t,n=$(e.hasOwnProperty("parentControl")?"#tab"+e.parentControl:"#row"),s="";switch(e.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:case UI_FILEDISPLAY:t="two columns "+panelwide+" card tcenter "+colorClass(e.color),s="<div id='id"+e.id+"' "+panelStyle+" class='"+t+panelClass+"' data-base-class='"+t+"'><h5>"+e.label+"</h5><hr/>"+elementHTML(e)+"</div>";break;case UI_SEPARATOR:t="sectionbreak columns",s="<div id='id"+e.id+"' "+panelStyle+" class='"+t+panelClass+"' data-base-class='"+t+"'><h5>"+e.label+"</h5><hr/></div>";break;case UI_TIME:break}n.append(s)}else n=$("#id"+e.parentControl),n.append(elementHTML(e))},elementHTML=function(e){var t=e.id,n=e.hasOwnProperty("elementStyle")?" style='"+e.elementStyle+"' ":"",s=e.hasOwnProperty("inputType")?" type='"+e.inputType+"' ":"";switch(e.type){case UI_LABEL:return"<span id='l"+t+"' "+n+" class='label label-wrap'>"+e.value+"</span>";case UI_FILEDISPLAY:return"<textarea id='fd"+t+"' rows='4' "+n+" class='label label-wrap'></textarea>";case UI_BUTTON:return"<button id='btn"+t+"' "+n+" onmousedown='buttonclick("+t+", true)' onmouseup='buttonclick("+t+", false)'>"+e.value+"</button>";case UI_SWITCHER:return"<label id='sl"+t+"' "+n+" class='switch "+(e.value=="1"?"checked":"")+(e.hasOwnProperty("vertical")?" vert-switcher ":"")+"'><div class='in'><input type='checkbox' id='s"+t+"' onClick='switcher("+t+",null)' "+(e.value=="1"?"checked":"")+"/></div></label>";case UI_CPAD:case UI_PAD:return"<nav class='control'><ul><li><a onmousedown='padclick(UP, "+t+", true)' onmouseup='padclick(UP, "+t+", false)' id='pf"+t+"'>▲</a></li><li><a onmousedown='padclick(RIGHT, "+t+", true)' onmouseup='padclick(RIGHT, "+t+", false)' id='pr"+t+"'>▲</a></li><li><a onmousedown='padclick(LEFT, "+t+", true)' onmouseup='padclick(LEFT, "+t+", false)' id='pl"+t+"'>▲</a></li><li><a onmousedown='padclick(DOWN, "+t+", true)' onmouseup='padclick(DOWN, "+t+", false)' id='pb"+t+"'>▲</a></li></ul>"+(e.type==UI_CPAD?"<a class='confirm' onmousedown='padclick(CENTER,"+t+", true)' onmouseup='padclick(CENTER, "+t+", false)' id='pc"+t+"'>OK</a>":"")+"</nav>";case UI_SLIDER:return"<div class='range-slider "+(e.hasOwnProperty("vertical")?" vert-slider ":"")+"'><input id='sl"+t+"' type='range' min='0' max='100' value='"+e.value+"' "+n+" class='range-slider__range'><span class='range-slider__value'>"+e.value+"</span></div>";case UI_NUMBER:return"<input style='color:black; "+e.elementStyle+"' id='num"+t+"' type='number' value='"+e.value+"' onchange='numberchange("+t+")' />";case UI_TEXT_INPUT:return"<input "+s+"style='color:black; "+e.elementStyle+"' id='text"+t+"' value='"+e.value+"' onchange='textchange("+t+")' />";case UI_SELECT:return"<select style='color:black; "+e.elementStyle+"' id='select"+t+"' onchange='selectchange("+t+")' />";case UI_GRAPH:return"<figure id='graph"+t+"'><figcaption>"+e.label+"</figcaption></figure>";case UI_GAUGE:return"WILL BE A GAUGE <input style='color:black;' id='gauge"+t+"' type='number' value='"+e.value+"' onchange='numberchange("+t+")' />";case UI_ACCEL:return"ACCEL // Not implemented fully!<div class='accelerometer' id='accel"+t+"' ><div class='ball"+t+"'></div><pre class='accelerometeroutput"+t+"'></pre>";default:return""}},processEnabled=function(e){switch(e.type){case UI_SWITCHER:case UPDATE_SWITCHER:e.enabled?($("#sl"+e.id).removeClass("disabled"),$("#s"+e.id).prop("disabled",!1)):($("#sl"+e.id).addClass("disabled"),$("#s"+e.id).prop("disabled",!0));break;case UI_SLIDER:case UPDATE_SLIDER:$("#sl"+e.id).prop("disabled",!e.enabled);break;case UI_NUMBER:case UPDATE_NUMBER:$("#num"+e.id).prop("disabled",!e.enabled);break;case UI_TEXT_INPUT:case UPDATE_TEXT_INPUT:$("#text"+e.id).prop("disabled",!e.enabled);break;case UI_SELECT:case UPDATE_SELECT:$("#select"+e.id).prop("disabled",!e.enabled);break;case UI_BUTTON:case UPDATE_BUTTON:$("#btn"+e.id).prop("disabled",!e.enabled);break;case UI_PAD:case UI_CPAD:case UPDATE_PAD:case UPDATE_CPAD:case UI_FILEDISPLAY:case UPDATE_FILEDISPLAY:e.enabled?$("#id"+e.id+" nav").removeClass("disabled"):$("#id"+e.id+" nav").addClass("disabled");break}} |