lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-24 12:20:55 +00:00
Code Issues Releases Activity
3cf1aa7f49
ESPUI/data/js/controls.min.js
ericBcreator 950a1fb029
Add files via upload
2020-10-01 20:27:01 +02:00

1 line
12 KiB
JavaScript
Raw Blame History

const UI_INITIAL_GUI=200,UI_RELOAD=201,UPDATE_OFFSET=100,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,UPTDATE_ACCEL=117,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,graphData=new Array,hasAccel=!1,sliderContinuous=!1;function colorClass(e){switch(e=Number(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_NONE:return"dark";default:return""}}var websockConnected=!1;function requestOrientationPermission(){}function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData))}function restoreGraphData(e){var a=localStorage.getItem("espuigraphs",graphData);return null!=a?(a=JSON.parse(a))[e]:[]}function restart(){$(document).add("*").off(),$("#row").html(""),websock.close(),start()}function conStatusError(){websockConnected=!1,$("#conStatus").removeClass("color-green"),$("#conStatus").addClass("color-red"),$("#conStatus").html("Error / No Connection &#8635;"),$("#conStatus").off(),$("#conStatus").on({click:restart})}function handleVisibilityChange(){websockConnected||document.hidden||restart()}function start(){document.addEventListener("visibilitychange",handleVisibilityChange,!1),(websock=""!=window.location.port||80!=window.location.port||443!=window.location.port?new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws"):new WebSocket("ws://"+window.location.hostname+"/ws")).onopen=function(e){console.log("websock open"),$("#conStatus").addClass("color-green"),$("#conStatus").text("Connected"),websockConnected=!0},websock.onclose=function(e){console.log("websock close"),conStatusError()},websock.onerror=function(e){console.log(e),conStatusError()};var e=function(a){console.log(a);var t=JSON.parse(a.data);document.body;switch(t.type){case UI_INITIAL_GUI:$("#row").html(""),$("#tabsnav").html(""),$("#tabscontent").html(""),t.sliderContinuous&&(sliderContinuous=t.sliderContinuous),t.controls.forEach(a=>{var t={data:JSON.stringify(a)};e(t)});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=t.label,$("#mainHeader").html(t.label);break;case UI_LABEL:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='two columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><span id='l"+t.id+"' class='label label-wrap'>"+t.value+"</span></div>");break;case UI_BUTTON:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='one columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><button id='btn"+t.id+"' onmousedown='buttonclick("+t.id+", true)' onmouseup='buttonclick("+t.id+", false)'>"+t.value+"</button></div>"),$("#btn"+t.id).on({touchstart:function(e){e.preventDefault(),buttonclick(t.id,!0)},touchend:function(e){e.preventDefault(),buttonclick(t.id,!1)}});break;case UI_SWITCHER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='one columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><label id='sl"+t.id+"' class='switch "+("1"==t.value?"checked":"")+"'><div class='in'><input type='checkbox' id='s"+t.id+"' onClick='switcher("+t.id+",null)' "+("1"==t.value?"checked":"")+"/></div></label></div>"),switcher(t.id,t.value);break;case UI_CPAD:case UI_PAD:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='two columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><nav class='control'><ul><li><a onmousedown='padclick(UP, "+t.id+", true)' onmouseup='padclick(UP, "+t.id+", false)' id='pf"+t.id+"'>â–²</a></li><li><a onmousedown='padclick(RIGHT, "+t.id+", true)' onmouseup='padclick(RIGHT, "+t.id+", false)' id='pr"+t.id+"'>â–²</a></li><li><a onmousedown='padclick(LEFT, "+t.id+", true)' onmouseup='padclick(LEFT, "+t.id+", false)' id='pl"+t.id+"'>â–²</a></li><li><a onmousedown='padclick(DOWN, "+t.id+", true)' onmouseup='padclick(DOWN, "+t.id+", false)' id='pb"+t.id+"'>â–²</a></li></ul>"+(t.type==UI_CPAD?"<a class='confirm' onmousedown='padclick(CENTER,"+t.id+", true)' onmouseup='padclick(CENTER, "+t.id+", false)' id='pc"+t.id+"'>OK</a>":"")+"</nav></div>"),$("#pf"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(UP,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(UP,t.id,!1)}}),$("#pl"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(LEFT,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(LEFT,t.id,!1)}}),$("#pr"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(RIGHT,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(RIGHT,t.id,!1)}}),$("#pb"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(DOWN,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(DOWN,t.id,!1)}}),$("#pc"+t.id).on({touchstart:function(e){e.preventDefault(),padclick(CENTER,t.id,!0)},touchend:function(e){e.preventDefault(),padclick(CENTER,t.id,!1)}});break;case UI_SLIDER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='two columns card tcenter card-slider "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><div class='range-slider'><input id='sl"+t.id+"' type='range' min='0' max='100' value='"+t.value+"' class='range-slider__range'><span class='range-slider__value'>"+t.value+"</span></div></div>"),rangeSlider(!sliderContinuous);break;case UI_NUMBER:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='two columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><input style='color:black;' id='num"+t.id+"' type='number' value='"+t.value+"' onchange='numberchange("+t.id+")' /></div>");break;case UI_TEXT_INPUT:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='two columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><input style='color:black;' id='text"+t.id+"' value='"+t.value+"' onchange='textchange("+t.id+")' /></div>");break;case UI_TAB:$("#tabsnav").append("<li><a onmouseup='tabclick("+t.id+")' href='#tab"+t.id+"'>"+t.value+" </a></li>"),$("#tabscontent").append("<div id='tab"+t.id+"'></div>"),tabs=$(".tabscontent").tabbedContent({loop:!0}).data("api"),$("a").filter(function(){return"#click-to-switch"===$(this).attr("href")}).on("click",function(e){var a=prompt("Tab to switch to (number or id)?");tabs.switchTab(a)||alert("That tab does not exist :\\"),e.preventDefault()});break;case UI_SELECT:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='two columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><select style='color:black;' id='select"+t.id+"' onchange='selectchange("+t.id+")' /></div>");break;case UI_OPTION:if(t.parentControl)(n=$("#select"+t.parentControl)).append("<option id='option"+t.id+"' value='"+t.value+"' "+t.selected+">"+t.label+"</option>");break;case UI_MIN:if(t.parentControl)(n=$("#id"+t.parentControl+" input")).size()&&n.attr("min",t.value);break;case UI_MAX:if(t.parentControl)(n=$("#id"+t.parentControl+" input")).size()&&n.attr("max",t.value);break;case UI_STEP:if(t.parentControl)(n=$("#id"+t.parentControl+" input")).size()&&n.attr("step",t.value);break;case UI_GRAPH:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='two columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/><figure id='graph"+t.id+"'><figcaption>"+t.label+"</figcaption></figure></div>"),graphData[t.id]=restoreGraphData(t.id),renderGraphSvg(graphData[t.id],"graph"+t.id);break;case ADD_GRAPH_POINT:var o=Math.round((new Date).getTime()/1e3);graphData[t.id].push({x:o,y:t.value}),saveGraphData(),renderGraphSvg(graphData[t.id],"graph"+t.id);break;case CLEAR_GRAPH:graphData[t.id]=[],saveGraphData(),renderGraphSvg(graphData[t.id],"graph"+t.id);break;case UI_GAUGE:(n=t.parentControl?$("#tab"+t.parentControl):$("#row")).append("<div id='id"+t.id+"' class='two columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/>WILL BE A GAUGE <input style='color:black;' id='gauge"+t.id+"' type='number' value='"+t.value+"' onchange='numberchange("+t.id+")' /></div>");break;case UI_ACCEL:if(hasAccel)break;var n;n=t.parentControl?$("#tab"+t.parentControl):$("#row"),hasAccel=!0,n.append("<div id='id"+t.id+"' class='two columns card tcenter "+colorClass(t.color)+"'><h5>"+t.label+"</h5><hr/>ACCEL // Not implemented fully!<div class='accelerometer' id='accel"+t.id+"' ><div class='ball"+t.id+"'></div><pre class='accelerometeroutput"+t.id+"'></pre></div>"),requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+t.id).html(t.value);break;case UPDATE_SWITCHER:switcher(t.id,"0"==t.value?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+t.id),t.value,"100",!1);break;case UPDATE_NUMBER:$("#num"+t.id).val(t.value);break;case UPDATE_TEXT_INPUT:$("#text"+t.id).val(t.value);break;case UPDATE_SELECT:$("#select"+t.id).val(t.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+t.id).val(t.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event")}if(t.type>=UPDATE_OFFSET&&t.type<UI_INITIAL_GUI){var r=$("#id"+t.id);t.type==UPDATE_SLIDER?(r.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin"),r.addClass("slider-"+colorClass(t.color))):(r.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin"),r.addClass(colorClass(t.color)))}};websock.onmessage=e}function sliderchange(e){var a=$("#sl"+e).val();websock.send("slvalue:"+a+":"+e)}function numberchange(e){var a=$("#num"+e).val();websock.send("nvalue:"+a+":"+e)}function textchange(e){var a=$("#text"+e).val();websock.send("tvalue:"+a+":"+e)}function tabclick(e){var a=$("#tab"+e).val();websock.send("tabvalue:"+a+":"+e)}function selectchange(e){var a=$("#select"+e).val();websock.send("svalue:"+a+":"+e)}function buttonclick(e,a){a?websock.send("bdown:"+e):websock.send("bup:"+e)}function padclick(e,a,t){switch(e){case CENTER:t?websock.send("pcdown:"+a):websock.send("pcup:"+a);break;case UP:t?websock.send("pfdown:"+a):websock.send("pfup:"+a);break;case DOWN:t?websock.send("pbdown:"+a):websock.send("pbup:"+a);break;case LEFT:t?websock.send("pldown:"+a):websock.send("plup:"+a);break;case RIGHT:t?websock.send("prdown:"+a):websock.send("prup:"+a)}}function switcher(e,a){null==a?$("#s"+e).is(":checked")?(websock.send("sactive:"+e),$("#sl"+e).addClass("checked")):(websock.send("sinactive:"+e),$("#sl"+e).removeClass("checked")):1==a?($("#sl"+e).addClass("checked"),$("#sl"+e).prop("checked",!0)):0==a&&($("#sl"+e).removeClass("checked"),$("#sl"+e).prop("checked",!1))}var rangeSlider=function(e){var a=$(".range-slider"),t=$(".range-slider__range"),o=$(".range-slider__value");a.each(function(){o.each(function(){var e=$(this).prev().attr("value");$(this).html(e)}),e?t.on({input:function(){$(this).next().html(this.value)},change:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""))}}):t.on({input:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""))}})})};
Reference in New Issue View Git Blame Copy Permalink