[WIP] state as of 2025-06-03

static/UI5.svg

@@ -35,6 +35,9 @@
       </cc:Work>
     </rdf:RDF>
   </metadata>
+  <style>
+    .clickable { cursor: pointer; }
+  </style>
   <g
      id="layer1">
     <rect
@@ -1096,7 +1099,7 @@
          d="M 7.4785367,0.10085959 A 7.3994137,7.3994137 0 0 0 2.3857065,2.1781345 L 3.9649627,3.7761327 7.622842,7.4768917 11.253297,3.7357495 12.717392,2.227123 A 7.3994137,7.3994137 0 0 0 7.4785367,0.10085959 Z M 7.622842,7.4768917 3.9861406,11.211356 2.4023987,12.837548 a 7.3994137,7.3994137 0 0 0 5.1717719,2.061583 7.3994137,7.3994137 0 0 0 5.2099094,-2.192756 l -1.509046,-1.529204 z" />
     </g>
     <g
-       id="Turbopump"
+       id="turbopump"
        transform="matrix(0.53261448,0,0,0.5306284,11.505972,19.120712)">
       <circle
          style="fill:#fdfdfd;fill-opacity:1;stroke:#000000;stroke-width:0.203155;stroke-miterlimit:4;stroke-dasharray:none"
@@ -1117,7 +1120,7 @@
          r="2.4583855" />
     </g>
     <g
-       id="layer1-2"
+       id="compressor"
        transform="matrix(0.53262338,0,0,0.53005683,78.710446,121.10944)">
       <circle
          style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.203;stroke-miterlimit:4;stroke-dasharray:none"
@@ -1142,7 +1145,7 @@
            y="10.102062">C</tspan></text>
     </g>
     <g
-       id="Forepump"
+       id="pump"
        transform="matrix(-0.5326173,0,0,-0.53005302,19.344229,128.33328)">
       <circle
          style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.203155;stroke-miterlimit:4;stroke-dasharray:none"
@@ -1151,7 +1154,7 @@
          cy="7.5"
          r="7.3984227" />
       <path
-         id="forepumpfill"
+         id="pumpfill"
          style="fill:#eaeaea;fill-opacity:1;stroke:#000000;stroke-width:0.19776;stroke-miterlimit:4;stroke-dasharray:none"
          d="M 7.4876578,0.11585699 A 7.4011203,7.4011203 0 0 0 5.2686718,0.4569214 L 2.7174058,5.5470502 0.50358778,9.9648678 A 7.4011203,7.4011203 0 0 0 7.4876578,14.918054 7.4011203,7.4011203 0 0 0 14.491364,9.9095748 L 12.294083,5.5392987 9.7443668,0.468807 A 7.4011203,7.4011203 0 0 0 7.4876578,0.11585699 Z" />
       <text

templates/dil5.html

@@ -111,9 +111,15 @@
 
 <script>
 
-    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_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_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_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 (mod in ctr_state) {
-        if (index !== -1 && String(state) !== String(ctr_state[index])) {
+            ctr_state[mod] = state;
-            ctr_state[index] = state;
+            if (state in colors) {
-            const el = svgElements[ctr_ids[index]];
+                svgElements[mod].style.fill = colors[state];
-            if (el) {
+            } else {
-                el.style.fill = state === "true" ? "#66ffbaff" :
+                svgElements[mod].style.fill = "#eaeaea" ;
-                                state === "false" ? "#ff3067ff" : "#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) {
+    function readValue(mod) {
-        doSend("read " + mod + ":target");  
+        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 teile = msg.split(" ");
-        const mod = teile[0].split(" ")[1];
+        const modt = teile[1].split(':')
-        const param = teile[1].split(" ")[0];
+        const mod = modt[0]
-        const value = teile[1].split(",")[0].split('[')[1];
+        const param = modt[1]
+        let value = JSON.parse(teile.slice(2).join(' '))[0]
 
-        if (param === "target") {
+        if (param === "status") {
-          
+           console.log('S', mod, value)
-          if (ctr_mod.includes(mod)) {
+        }
-              changeControlledValve(mod, value);
+        if (param === "status" && value[0] >= 400) {
-          }
+            value = 'error';
-        } else if (param === "value") {
+            param = 'value';
-             if (param_mod.includes(mod)) {
+        }
+        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) {
+    function addClickListener(element, id) {
-        const element = svgDoc.querySelector("#" + 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[id];
-            const state = ctr_state[index];
+            let newState = state === "false";
-            if (state !== -1) {
+            console.log(id, state, newState);
-                const newState = state === "true" ? false : true;
+            changeControlledValve(id, "clicked");
-                changeTarget(ctr_mod[index], newState);
+            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) {
+        for (const mod in ctr_state) {
-            doSend(`read ${mod}:target`);
+            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() {
+    var winLoaded = false;
-        loadSVG();
+    var svgLoaded = false;
+
+    function afterLoad() {
         doConnect();
-        ctr_ids.forEach(id => {
+        svgDoc = controlpanelObject.contentDocument;
-            addClickListener("controls", id, svgDoc);
+        for (var id in ctr_state) {
-            svgElements[id] = svgDoc.querySelector("#" + id);
+            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(); }
 </script>