const UI_INITIAL_GUI = 200; const UI_TITEL = 0; const UI_BUTTON = 1; const UI_PAD = 2; const UI_CPAD = 3; 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 FOR = 0; const BACK = 1; const LEFT = 2; const RIGHT = 3; const CENTER = 4; // Colors 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) { //console.log(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 element; if(data.parentControl) { element = $("#tab"+data.parentControl); } else { element = $("#row") } element.append( "
" + data.label + "

" + data.value + "
" ); break; case UI_BUTTON: var element; if(data.parentControl) { element = $("#tab"+data.parentControl); } else { element = $("#row") } element.append( "
" + data.label + "

" ); $("#" + 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 = "