diff --git a/templates/dil5.html b/templates/dil5.html index 8f30608..8d27e9d 100644 --- a/templates/dil5.html +++ b/templates/dil5.html @@ -37,13 +37,13 @@ background-color: #B8EBE5; border-radius: 12px; } - + .control-panel p { font-size: 20px; font-family:verdana; } - - + + .control-panel h { font-size: 32px; font-family:verdana; @@ -74,13 +74,13 @@ } #outputtext { - width: 100%; + width: 100%; height: 200px; resize: none; border-radius: 12px; } - - + + .content-container { display: flex; flex-direction: row; @@ -92,7 +92,7 @@
- +

DIL5 Control

States

@@ -113,11 +113,21 @@ //var ctr_ids = ["MV9", "turbopump", "MV10", "MV11", "MV12", "MV13", "MV8", "MVB", "MV2", "MV1", "MV3a", "MV3b", "GV1", "GV2", "MV14", "V1", "V2", "V9", "V5", "V4", "pump", "compressor"]; //var ctr_mod = ["MV9", "turbopump", "MV10", "MV11", "MV12", "MV13", "MV8", "MVB", "MV2", "MV1", "MV3a", "MV3b", "GV1", "GV2", "MV14", "V1", "V2", "V9", "V5", "V4", "pump", "compressor"]; - var ctr_state = { - V1: 0, V2: 0, V4: 0, V5: 0, V9: 0, + function v(mod, value) { + } + + function boolstate(mod, value) { + } + + function label(mod, value) { + } + + var modules = { + V1: v, V2: v, V4: v, V5: v, V9: v, MV1: 0, MV2: 0, MV3a: 0, MV3b: 0, MV9: 0, MV10: 0, MV11: 0, MV12: 0, MV13: 0, GV1: 0, GV2: 0, - turbopump: 0, pump: 0, compressor: 0 + turbopump: 0, pump: 0, compressor: 0, + Druckluft: 1, } // var ctr_state = new Array(ctr_mod.length).fill("init"); @@ -131,23 +141,23 @@ var param_unit = [" mbar", " mbar", " mbar", " mbar", " mbar", " Hz", " %"]; var param_mod = ["p1", "p2", "p3", "p4", "p5", "turbopumpspeed", "turbopumpcurrent"]; - var colors = {"true": "#66ffba", "false": "#ff3067", "error": "#ff8000", "clicked": "#ffffff"}; + var colors = {true: "#66ffba", false: "#ff3067", error: "#ff8000", clicked: "#ffffff"}; var controlpanelObject = document.getElementById("pump-svg"); var svgDoc; let active_state = "MANUAL"; - + let pollTimer; const POLL_INTERVAL = 500; function handleStateClick(state) { - changeState("stateMachine", state); + changeState("stateMachine", state); document.getElementById(state.toLowerCase() + "-btn").style.backgroundColor = "white"; document.getElementById(active_state.toLowerCase() + "-btn").style.backgroundColor = "rgb(175, 176, 177)"; active_state = state; } - - + + function updateState(state) { document.getElementById(state.toLowerCase() + "-btn").style.backgroundColor = "white"; document.getElementById(active_state.toLowerCase() + "-btn").style.backgroundColor = "rgb(175, 176, 177)"; @@ -169,8 +179,8 @@ const index = state_mod.indexOf(mod); const element = svgDoc.querySelector("#" + state_ids[index]); if (index !== -1 && element) { - element.style.fill = state === "true" ? "#66ffbaff" : - state === "false" ? "#ff3067ff" : "#eaeaea"; + element.style.fill = state === true ? "#66ffbaff" : + state === false ? "#ff3067ff" : "#eaeaea"; } } @@ -210,7 +220,7 @@ function changeTarget(mod, value) { doSend(`change ${mod}:target ${value}`); - + } function changeState(mod, value) { @@ -219,7 +229,7 @@ } function readValue(mod) { - doSend("read " + mod + ":value"); + doSend("read " + mod + ":value"); } function onClose(evt) { @@ -235,50 +245,16 @@ stopPolling(); websocket.close(); } - + } function doSend(message) { websocket.send(message); } - function handleUpdate(msg) { - const teile = msg.split(":"); - const mod = teile[0].split(" ")[1]; - const param = teile[1].split(" ")[0]; - const value = teile[1].split(",")[0].split('[')[1]; - - if (param === "value") { - if (param_mod.includes(mod)) { - editText(mod, value); - } else if (ctr_mod.includes(mod)) { - console.log(mod, value); - changeControlledValve(mod, value); - } else if (state_mod.includes(mod)) { - fillstateID(mod, value); - } else if (mod == "stateMachine"){ - console.log("StateMaschine") - } - } else if (param === "_speed") { - editText("turbopumpspeed", value); - } else if (param === "_current") { - editText("turbopumpcurrent", value); - } - } - - function handleChange(msg) { - const teile = msg.split(":"); - const mod = teile[0].split(" ")[1]; - const value = teile[1].split(",")[0].split('[')[1]; - changeControlledValve(mod, value); - } - - function handleReply(msg) { - const teile = msg.split(" "); - const modt = teile[1].split(':') - const mod = modt[0] - const param = modt[1] - let value = JSON.parse(teile.slice(2).join(' '))[0] + function handleUpdate(action, modpar, data) { + const [mod, param] = modpar.split(':') + const value = data[0] if (param === "status") { console.log('S', mod, value) @@ -304,7 +280,7 @@ if (active_state != "MANUAL"){ updateState("MANUAL") } - + } } } else if (param === "_speed") { @@ -318,14 +294,14 @@ } function handleMSG(msg) { - if (msg.startsWith("changed")) { - handleChange(msg); - } else if (msg.startsWith("update")) { - handleUpdate(msg); - } else if (msg.startsWith("reply")) { - handleReply(msg); - } else if (msg.startsWith("error_update")) { - // writeToScreen("Error in update: " + msg + '\n'); + const [action, modpar, ...tail] = msg.split(" "); + let data = tail.join(' '); + if (data) { + data = JSON.parse(data) + } + if (action in ["changed", "update", "reply"]) { + handleUpdate(action, modpar, data); + } else { console.log(msg); } } @@ -360,16 +336,16 @@ pollAllStates(); }, POLL_INTERVAL); } - - + + function stopPolling() { clearInterval(pollTimer); } - + function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } - + async function pollAllStates() { for (const mod in ctr_state) { doSend(`read ${mod}:value`); @@ -387,14 +363,14 @@ doSend(`read ${mod}:value`); await sleep(50); } - + for (const mod of param_mod) { doSend(`read ${mod}:value`); await sleep(50); } - + } - + function pollSingle(mod) { doSend(`read ${mod}:value`); } @@ -417,11 +393,11 @@ }; requestAnimationFrame(processUpdateQueue); } - + window.onload = function () { winLoaded = true; if (svgLoaded) afterLoad(); } controlpanelObject.onload = function () { svgLoaded = true; if (winLoaded) afterLoad(); } - +