From 21b76699a576cce7338af4250a049aeb759e79fb Mon Sep 17 00:00:00 2001 From: Markus Zolliker Date: Wed, 4 Jun 2025 07:36:37 +0200 Subject: [PATCH] [WIP] state as of 2025-06-03 --- static/UI5.svg | 11 ++-- templates/dil5.html | 144 +++++++++++++++++++++++--------------------- 2 files changed, 83 insertions(+), 72 deletions(-) diff --git a/static/UI5.svg b/static/UI5.svg index b1a99ed..e054b98 100644 --- a/static/UI5.svg +++ b/static/UI5.svg @@ -35,6 +35,9 @@ + C - var ctr_ids = ["MV9", "turbopumpfill", "MV10", "MV11", "MV12", "MV13", "MV8", "MVB", "MV2", "MV1", "MV3a", "MV3b", "GV1", "GV2", "MV14", "V1fill", "V2fill", "V9fill", "V5fill", "V4fill", "forepumpfill", "compressorfill"]; - 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 = new Array(ctr_mod.length).fill("init"); + //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, + 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 + } + // var ctr_state = new Array(ctr_mod.length).fill("init"); const svgElements = {}; let updateQueue = []; @@ -125,7 +131,10 @@ 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 controlpanelObject = document.getElementById("pump-svg"); + var svgDoc; let active_state = "MANUAL"; let pollTimer; @@ -146,33 +155,15 @@ } function changeControlledValve(mod, state) { - const index = ctr_mod.indexOf(mod); - if (index !== -1 && String(state) !== String(ctr_state[index])) { - ctr_state[index] = state; - const el = svgElements[ctr_ids[index]]; - if (el) { - el.style.fill = state === "true" ? "#66ffbaff" : - state === "false" ? "#ff3067ff" : "#eaeaea"; + if (mod in ctr_state) { + ctr_state[mod] = state; + if (state in colors) { + svgElements[mod].style.fill = colors[state]; + } else { + svgElements[mod].style.fill = "#eaeaea" ; } } } - - function changeControlledValve(mod, state) { - index = ctr_mod.indexOf(mod) - if (index != -1) { - //if (String(state) !== String(ctr_state[index])){ - ctr_state[index] = state; - if (state == "true"){ - svgElements[ctr_ids[index]].style.fill = "#66ffbaff"; - } else if (state == "false"){ - svgElements[ctr_ids[index]].style.fill = "#ff3067ff"; - } else { - svgElements[ctr_ids[index]].style.fill = "#eaeaea" ; - } - //} - } - } - function fillstateID(mod, state) { const index = state_mod.indexOf(mod); @@ -211,7 +202,9 @@ function onOpen(evt) { writeToScreen("Connected to DIL5\n"); //doSend("activate"); - ctr_ids.forEach((id, index) => readTarget(ctr_mod[index])); + for (var mod in ctr_state) { + readValue(mod); + } startPolling(); } @@ -225,8 +218,8 @@ //writeToScreen(`change ${mod}:target "${value}"\n`); } - function readTarget(mod) { - doSend("read " + mod + ":target"); + function readValue(mod) { + doSend("read " + mod + ":value"); } function onClose(evt) { @@ -255,12 +248,11 @@ const param = teile[1].split(" ")[0]; const value = teile[1].split(",")[0].split('[')[1]; - if (["status", "pollinterval"].includes(param)) return; - 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); @@ -282,18 +274,24 @@ } function handleReply(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]; + 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] - if (param === "target") { - - if (ctr_mod.includes(mod)) { - changeControlledValve(mod, value); - } - } else if (param === "value") { - if (param_mod.includes(mod)) { + if (param === "status") { + console.log('S', mod, value) + } + if (param === "status" && value[0] >= 400) { + value = 'error'; + param = 'value'; + } + if (param === "value") { + value = value.toString(); + if (mod in ctr_state) { + changeControlledValve(mod, value); + } else if (param_mod.includes(mod)) { editText(mod, value); } else if (state_mod.includes(mod)) { fillstateID(mod, value); @@ -327,7 +325,8 @@ } else if (msg.startsWith("reply")) { handleReply(msg); } else if (msg.startsWith("error_update")) { - writeToScreen("Error in update: " + msg + '\n'); + // writeToScreen("Error in update: " + msg + '\n'); + console.log(msg); } } @@ -340,25 +339,22 @@ requestAnimationFrame(processUpdateQueue); } - function addClickListener(type, id, svgDoc) { - const element = svgDoc.querySelector("#" + id); + function addClickListener(element, id) { + if (! element) { + console.log(id, 'does not exist'); + return; + } element.addEventListener('click', () => { console.log("click"); - const index = ctr_ids.indexOf(id); - const state = ctr_state[index]; - if (state !== -1) { - const newState = state === "true" ? false : true; - changeTarget(ctr_mod[index], newState); - } - + const state = ctr_state[id]; + let newState = state === "false"; + console.log(id, state, newState); + changeControlledValve(id, "clicked"); + changeTarget(id, newState); }); + element.classList.add('clickable'); } - function loadSVG() { - svgDoc = controlpanelObject.contentDocument; - } - - function startPolling() { pollTimer = setInterval(() => { pollAllStates(); @@ -375,11 +371,11 @@ } async function pollAllStates() { - for (const mod of ctr_mod) { - doSend(`read ${mod}:target`); + for (const mod in ctr_state) { + doSend(`read ${mod}:value`); + doSend(`read ${mod}:status`); await sleep(50); } - await sleep(50); doSend('read turbopump:_speed'); await sleep(50); @@ -403,15 +399,27 @@ doSend(`read ${mod}:value`); } - window.onload = function() { - loadSVG(); + var winLoaded = false; + var svgLoaded = false; + + function afterLoad() { doConnect(); - ctr_ids.forEach(id => { - addClickListener("controls", id, svgDoc); - svgElements[id] = svgDoc.querySelector("#" + id); - }); + svgDoc = controlpanelObject.contentDocument; + for (var id in ctr_state) { + element = svgDoc.querySelector("#" + id); + svgElements[id] = element; + addClickListener(element, id); + element = svgDoc.querySelector("#" + id + "fill"); + if (element) { + svgElements[id] = element; + // addClickListener(element, id); + } + }; requestAnimationFrame(processUpdateQueue); - }; + } + + window.onload = function () { winLoaded = true; if (svgLoaded) afterLoad(); } + controlpanelObject.onload = function () { svgLoaded = true; if (winLoaded) afterLoad(); }