From fcfa07d24c340b9364b709a655d2cde84f57a0f5 Mon Sep 17 00:00:00 2001
From: Markus Zolliker <markus.zolliker@psi.ch>
Date: Thu, 5 Jun 2025 14:33:54 +0200
Subject: [PATCH] make more generic

---
 flaskserver.py                       |  14 +-
 templates/dil5.html                  | 359 ++++++++++-----------------
 static/UI5.svg => templates/dil5.svg | 144 ++++++-----
 3 files changed, 215 insertions(+), 302 deletions(-)
 rename static/UI5.svg => templates/dil5.svg (98%)
diff --git a/flaskserver.py b/flaskserver.py
index 7f74c37..6c85e8e 100755
--- a/flaskserver.py
+++ b/flaskserver.py
@@ -7,12 +7,18 @@ import threading
 
 app = Flask(__name__)
 
-webpage = sys.argv[1]
+class Args:
+    def __init__(self, webpage='dil5', port='80'):
+        self.webpage = webpage
+        self.port = int(port)
+        print(self.webpage, self.port)
+
+args = Args(*sys.argv[1:])
+
 
 @app.route('/')
 def index():
-    return render_template(f'{webpage}.html')
-
+    return render_template(f'{args.webpage}.html', svg_ui=f'{args.webpage}.svg')
 
 if __name__ == '__main__':
-    app.run(host="0.0.0.0", port=80, debug=True)
+    app.run(host="0.0.0.0", port=args.port, debug=True)
diff --git a/templates/dil5.html b/templates/dil5.html
index 8d27e9d..c330c46 100644
--- a/templates/dil5.html
+++ b/templates/dil5.html
@@ -80,7 +80,6 @@
             border-radius: 12px;
         }
 
-
         .content-container {
             display: flex;
             flex-direction: row;
@@ -90,68 +89,127 @@
     </style>
 </head>
 <body>
-        <div class="content-container">
-            <object id="pump-svg" type="image/svg+xml" data="/static/UI5.svg"></object>
-
-            <div class="control-panel">
-                <h1> DIL5 Control </h1>
-                <p> States </p>
-                <div class="button-container">
-                    <button id = "test-btn" class="control-button" onclick="handleStateClick('TEST')">Test</button>
-                    <button id = "condense-btn" class="control-button" onclick="handleStateClick('CONDENSE')">Condense</button>
-                    <button id = "circulate-btn" class="control-button" onclick="handleStateClick('CIRCULATE')">Circulate</button>
-                    <button id = "remove-btn" class="control-button" onclick="handleStateClick('REMOVE')">Remove</button>
-                    <button id = "manual-btn" class="control-button" onclick="handleStateClick('MANUAL')">Manual</button>
-                </div>
-                <p> Status messages </p>
-                <textarea name="outputtext" id="outputtext" rows="10" cols="30" readonly></textarea>
-            </div>
+<div class="content-container">
+    <! object id="pump-svg" type="image/svg+xml" data="/static/UI5.svg"><! /object>
+    {% include svg_ui %}
+    <div class="control-panel">
+        <h1> DIL5 Control </h1>
+        <p> States </p>
+        <div class="button-container">
+            <button id = "test-btn" class="control-button" onclick="handleStateClick('TEST')">Test</button>
+            <button id = "condense-btn" class="control-button" onclick="handleStateClick('CONDENSE')">Condense</button>
+            <button id = "circulate-btn" class="control-button" onclick="handleStateClick('CIRCULATE')">Circulate</button>
+            <button id = "remove-btn" class="control-button" onclick="handleStateClick('REMOVE')">Remove</button>
+            <button id = "manual-btn" class="control-button" onclick="handleStateClick('MANUAL')">Manual</button>
         </div>
+        <p> Status messages </p>
+        <textarea name="outputtext" id="outputtext" rows="10" cols="30" readonly></textarea>
+    </div>
+</div>
 </body>
 
 <script>
 
-    //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"];
-    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,
-       Druckluft: 1,
-    }
-    // var ctr_state = new Array(ctr_mod.length).fill("init");
-
     const svgElements = {};
-    let updateQueue = [];
 
-    var state_ids = ["Airpressure"];
-    var state_mod = ["Druckluft"];
+    var colors = {true: "#66ffba", false: "#ff3067", error: "#ffff00", clicked: "#ffffff", ok: "#ffffff"};
 
-    var param_ids = ["P1txt", "P2txt", "P3txt", "P4txt", "P5txt", "speedtxt", "currenttxt"];
-    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;
-    const POLL_INTERVAL = 500;
+    var description;
+    var changeFuncs = {};
+    var updateValues = {};
+
+    function handle_describing(action, modpar, data) {
+        description = data;
+        for (const mod of Object.keys(data.modules)) {
+            const mdesc = data.modules[mod];
+            if (! mdesc) {
+               console.log('bad mod', mod)
+               continue;
+            }
+            const elems = document.querySelectorAll("[id^='" + mod + ":']");
+            let stateElement = null;
+            let clickElement = null;
+            elems.forEach(elem => {
+                let [parmod, ...func] = elem.id.split('-');
+                const [mod, param] = parmod.split(':');
+                // console.log(mod, param, func);
+                if (func.includes("click")) {
+                    clickElement = elem;
+                    addClickListener(elem, mod, toggleTarget);
+                }
+                if (func.includes("fault")) {
+                    changeFuncs[mod + ":status"] = function (value) {
+                        changeFill(elem, value[0] < 400 ? "ok" : "error");
+                    }
+                }
+                if (func.includes("state")) {
+                    stateElement = elem;
+                    changeFuncs[mod + ":" + (param || 'value')] = function (value) {
+                        changeFill(elem, value);
+                    }
+                }
+                if (func.includes("text")) {
+                    const pat = elem.textContent;
+                    changeFuncs[mod + ":" + (param || 'value')] = function (value) {
+                        elem.textContent = pat.replace('*', value);
+                        elem.style.fill = "#d5d5d5";
+                    }
+                }
+                if (func.includes("command")) {
+                    console.log(func, mod, param);
+                    addClickListener(elem, mod + ":" + param, sendCommand);
+                }
+            })
+            if (stateElement && clickElement) {
+                clickElement.stateElement = stateElement;
+            }
+        }
+        console.log('ACTIVATE', changeFuncs);
+        doSend("activate");
+    }
+
+    function handle_update(action, modpar, data) {
+        if (modpar.startsWith('compressor')) console.log(action, modpar, data);
+        if (modpar in changeFuncs) {
+            updateValues[modpar] = data[0];
+        }
+    }
+
+    handle_reply = handle_update;
+    handle_changed = handle_update;
+
+    function handle_error_update(action, modpar, data) {
+    }
+
+    function handleMSG(msg) {
+        const [action, modpar, ...tail] = msg.split(" ");
+        let data = tail.join(' ');
+        if (data) {
+            data = JSON.parse(data);
+        }
+        handler = window["handle_" + action];
+        if (handler) {
+            handler(action, modpar, data);
+        } else {
+            console.log(msg);
+        }
+    }
+
+    function processUpdates() {
+        let updates = updateValues;
+        updateValues = {};
+        for (const [modpar, value] of Object.entries(updates)) {
+            if (modpar.startsWith('compressor')) console.log('process', modpar, value);
+            changeFuncs[modpar](value);
+        }
+        requestAnimationFrame(processUpdates);
+    }
+
 
     function handleStateClick(state) {
-        changeState("stateMachine", state);
+        changeState("dil", state);
         document.getElementById(state.toLowerCase() + "-btn").style.backgroundColor = "white";
         document.getElementById(active_state.toLowerCase() + "-btn").style.backgroundColor = "rgb(175, 176, 177)";
         active_state = state;
@@ -164,34 +222,13 @@
         active_state = state;
     }
 
-    function changeControlledValve(mod, state) {
-        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 fillstateID(mod, state) {
-        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";
-        }
-    }
-
-    function editText(mod, text) {
-        const index = param_mod.indexOf(mod);
-        if (index !== -1) {
-            const textElement = svgDoc.querySelector("#" + param_ids[index]);
-            if (textElement) {
-                textElement.textContent = text + param_unit[index];
-                textElement.style.fill = "#d5d5d5";
-            }
+    function changeFill(element, state) {
+        stateElement = element.stateElement || element;
+        stateElement.state = state;
+        if (state in colors) {
+            stateElement.style.fill = colors[state];
+        } else {
+            stateElement.style.fill = "#eaeaea" ;
         }
     }
 
@@ -205,22 +242,19 @@
         websocket = new WebSocket("ws://linse-dil5:8010/");
         websocket.onopen = evt => onOpen(evt);
         websocket.onclose = evt => onClose(evt);
-        websocket.onmessage = evt => updateQueue.push(evt.data);
+        websocket.onmessage = evt => handleMSG(evt.data);
         websocket.onerror = evt => onError(evt);
     }
 
     function onOpen(evt) {
         writeToScreen("Connected to DIL5\n");
-        //doSend("activate");
+        doSend("describe");
+        /*
         for (var mod in ctr_state) {
            readValue(mod);
         }
         startPolling();
-    }
-
-    function changeTarget(mod, value) {
-        doSend(`change ${mod}:target ${value}`);
-
+        */
     }
 
     function changeState(mod, value) {
@@ -228,10 +262,6 @@
         //writeToScreen(`change ${mod}:target "${value}"\n`);
     }
 
-    function readValue(mod) {
-        doSend("read " + mod + ":value");
-    }
-
     function onClose(evt) {
         writeToScreen("disconnected\n");
         stopPolling();
@@ -249,153 +279,32 @@
     }
 
     function doSend(message) {
+        console.log('>', message);
         websocket.send(message);
     }
 
-    function handleUpdate(action, modpar, data) {
-        const [mod, param] = modpar.split(':')
-        const value = data[0]
-
-        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);
-             } else if (mod == "stateMachine"){
-                 if (value == "5"){
-                      if (active_state != "TEST"){
-                          updateState("TEST")
-                      }
-                 } else if (value == "4"){
-                     if (active_state != "MANUAL"){
-                         updateState("MANUAL")
-                     }
-
-                 }
-             }
-        } else if (param === "_speed") {
-              editText("turbopumpspeed", value);
-          } else if (param === "_current") {
-              editText("turbopumpcurrent", value);
-          } else if (param === "stateMachine") {
-              console.log(msg)
-              updateState(value)
-          }
+    function toggleTarget(element, mod) {
+        stateElement = element.stateElement || element
+        const newState = stateElement.state === false;
+        console.log('click', element, mod, stateElement.state, newState);
+        changeFill(element, "clicked");
+        doSend(`change ${mod}:target ${newState}`);
     }
 
-    function handleMSG(msg) {
-        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);
-        }
+    function sendCommand(element, modcmd) {
+        console.log('command', modcmd);
+        doSend(`do ${modcmd}`);
     }
 
-    function processUpdateQueue() {
-        if (updateQueue.length > 0) {
-            const queueCopy = updateQueue.slice();
-            updateQueue = [];
-            queueCopy.forEach(msg => handleMSG(msg));
-        }
-        requestAnimationFrame(processUpdateQueue);
-    }
-
-    function addClickListener(element, id) {
-        if (! element) {
-           console.log(id, 'does not exist');
-           return;
-        }
-        element.addEventListener('click', () => {
-            console.log("click");
-            const state = ctr_state[id];
-            let newState = state === "false";
-            console.log(id, state, newState);
-            changeControlledValve(id, "clicked");
-            changeTarget(id, newState);
-        });
+    function addClickListener(element, arg, func) {
+        element.addEventListener('click', () => { func(element, arg); });
         element.classList.add('clickable');
     }
 
-    function startPolling() {
-        pollTimer = setInterval(() => {
-            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`);
-            doSend(`read ${mod}:status`);
-            await sleep(50);
-        }
-        await sleep(50);
-        doSend('read turbopump:_speed');
-        await sleep(50);
-        doSend('read turbopump:_current');
-        await sleep(50);
-        doSend('read stateMachine:value');
-
-        for (const mod of state_mod) {
-            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`);
-    }
-
-    var winLoaded = false;
-    var svgLoaded = false;
-
-    function afterLoad() {
+    window.onload = function () {
         doConnect();
-        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);
+        requestAnimationFrame(processUpdates);
     }
-
-    window.onload = function () { winLoaded = true; if (svgLoaded) afterLoad(); }
-    controlpanelObject.onload = function () { svgLoaded = true; if (winLoaded) afterLoad(); }
 </script>
 
 
diff --git a/static/UI5.svg b/templates/dil5.svg
similarity index 98%
rename from static/UI5.svg
rename to templates/dil5.svg
index e054b98..a655782 100644
--- a/static/UI5.svg
+++ b/templates/dil5.svg
@@ -194,13 +194,13 @@
       <text
          xml:space="preserve"
          style="font-style:normal;font-weight:normal;font-size:4.93889px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
-         x="2.0713389"
-         y="11.939757"
+         x="1.5"
+         y="12"
          id="text5281-1"><tspan
            id="tspan5279-9"
-           x="2.0713389"
-           y="11.939757"
-           style="font-size:4.93889px;stroke-width:0.264583">tank</tspan></text>
+           x="1.5"
+           y="12"
+           style="font-size:4.93889px;stroke-width:0.264583">dump</tspan></text>
     </g>
     <image
        preserveAspectRatio="none"
@@ -1029,7 +1029,7 @@
          y="87.252464"
          style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">V1</tspan></text>
     <g
-       id="V2"
+       id="V2:-click"
        transform="matrix(0,0.53064927,-0.53262264,0,33.750878,85.672937)">
       <circle
          style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.200818;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
@@ -1038,12 +1038,12 @@
          cy="7.5"
          r="7.399591" />
       <path
-         id="V2fill"
+         id="V2:-state"
          style="fill:#eaeaea;fill-opacity:1;stroke:#000000;stroke-width:0.201173;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          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="V9"
+       id="V9:-click"
        transform="matrix(-0.53064926,0,0,-0.53262263,41.618315,112.52004)">
       <circle
          style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.200818;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
@@ -1052,26 +1052,26 @@
          cy="7.5"
          r="7.399591" />
       <path
-         id="V9fill"
+         id="V9:-state"
          style="fill:#eaeaea;fill-opacity:1;stroke:#000000;stroke-width:0.201173;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          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="V4"
+       id="V4:-click"
        transform="matrix(-0.53064926,0,0,-0.53262263,73.51314,112.45885)">
       <circle
          style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.200818;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         id="path3329-8-7"
+         id="V4:-fault"
          cx="7.5"
          cy="7.5"
          r="7.399591" />
       <path
-         id="V4fill"
+         id="V4:-state"
          style="fill:#eaeaea;fill-opacity:1;stroke:#000000;stroke-width:0.201173;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          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="V5"
+       id="V5:-click"
        transform="matrix(-0.53064926,0,0,-0.53262263,67.314505,139.2629)">
       <circle
          style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.200818;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
@@ -1080,12 +1080,12 @@
          cy="7.5"
          r="7.399591" />
       <path
-         id="V5fill"
+         id="V5:-state"
          style="fill:#eaeaea;fill-opacity:1;stroke:#000000;stroke-width:0.201173;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          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="V1"
+       id="V1:-click"
        transform="matrix(0,-0.53064926,0.53262263,0,78.785186,90.162619)">
       <circle
          style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.200818;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
@@ -1094,12 +1094,12 @@
          cy="7.5"
          r="7.399591" />
       <path
-         id="V1fill"
+         id="V1:-state"
          style="fill:#eaeaea;fill-opacity:1;stroke:#000000;stroke-width:0.201173;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          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:-click"
        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"
@@ -1109,7 +1109,7 @@
          r="7.3984227"
          transform="scale(-1)" />
       <path
-         id="turbopumpfill"
+         id="turbopump:-state"
          style="fill:#eaeaea;fill-opacity:1;stroke:#000000;stroke-width:0.19776;stroke-miterlimit:4;stroke-dasharray:none"
          d="m 7.5265849,14.899826 a 7.4011203,7.4011203 0 0 0 2.218985,-0.341065 L 12.296836,9.468632 14.510655,5.050814 A 7.4011203,7.4011203 0 0 0 7.5265849,0.09762795 7.4011203,7.4011203 0 0 0 0.52287723,5.1061077 L 2.7201593,9.4763835 5.2698747,14.546875 a 7.4011203,7.4011203 0 0 0 2.2567102,0.352951 z" />
       <circle
@@ -1120,16 +1120,16 @@
          r="2.4583855" />
     </g>
     <g
-       id="compressor"
+       id="compressor:-click"
        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"
-         id="path2145-1"
+         id="compressor:-fault"
          cx="7.5"
          cy="7.5"
          r="7.3984227" />
       <path
-         id="compressorfill"
+         id="compressor:-state"
          style="fill:#eaeaea;fill-opacity:1;stroke:#000000;stroke-width:0.19776;stroke-miterlimit:4;stroke-dasharray:none"
          d="m 7.5072276,0.11585702 a 7.4011203,7.4011203 0 0 0 -2.218986,0.3410644 L 2.7369761,5.5470502 0.52315795,9.9648682 A 7.4011203,7.4011203 0 0 0 7.5072276,14.918054 7.4011203,7.4011203 0 0 0 14.510934,9.9095745 L 12.313653,5.5392987 9.7639375,0.46880702 a 7.4011203,7.4011203 0 0 0 -2.2567099,-0.35295 z" />
       <text
@@ -1145,16 +1145,16 @@
            y="10.102062">C</tspan></text>
     </g>
     <g
-       id="pump"
+       id="forepump:-click"
        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"
-         id="path2145-0"
+         id="forepump:-fault"
          cx="7.5"
          cy="7.5"
          r="7.3984227" />
       <path
-         id="pumpfill"
+         id="forepump:-state"
          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
@@ -1170,59 +1170,59 @@
            y="-6.4436622">F</tspan></text>
     </g>
     <path
-       id="MV12"
+       id="MV12:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814449;stroke-opacity:1"
        d="m 13.266878,33.455881 2.160236,0.0049 2.160237,0.0049 -1.084676,1.699686 -1.084676,1.699685 -1.075561,-1.70457 z m 4.305485,6.818285 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.701492 1.08304,-1.701493 1.077181,1.704571 z" />
     <path
-       id="MV11"
+       id="MV11:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 13.315436,110.8152 2.160236,0.005 2.160237,0.005 -1.084676,1.69969 -1.084676,1.69969 -1.075561,-1.70457 z m 4.305485,6.81829 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.70149 1.08304,-1.7015 1.077181,1.70458 z" />
     <path
-       id="GV1"
+       id="GV1:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 80.671245,8.308152 2.160236,0.0049 2.160237,0.0049 -1.084676,1.699686 -1.084676,1.699685 -1.075561,-1.70457 z m 4.305485,6.818285 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.701492 1.08304,-1.701493 1.077181,1.704572 z" />
     <path
-       id="MV3b"
+       id="MV3b:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 80.529504,27.348702 2.160236,0.0049 2.160238,0.0049 -1.084677,1.699686 -1.084676,1.699685 -1.075561,-1.70457 z m 4.305485,6.818285 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.701492 1.08304,-1.701493 1.077181,1.704571 z" />
     <path
-       id="MV3a"
+       id="MV3a:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 80.529505,36.372884 2.160236,0.0049 2.160237,0.0049 -1.084676,1.699686 -1.084676,1.699685 -1.075561,-1.70457 z m 4.305485,6.818285 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.701492 1.08304,-1.701493 1.077181,1.704571 z" />
     <path
-       id="MV1"
+       id="MV1:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 80.547346,54.79595 2.160236,0.0049 2.160237,0.0049 -1.084676,1.699686 -1.084676,1.699685 -1.075561,-1.70457 z m 4.305485,6.818285 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.701492 1.08304,-1.701493 1.077181,1.704571 z" />
     <path
-       id="MVB"
+       id="MVB:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 71.136402,17.282291 2.160236,0.0049 2.160237,0.0049 -1.084676,1.699686 -1.084676,1.699685 -1.075561,-1.70457 z m 4.305485,6.818285 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.701492 1.08304,-1.701493 1.077181,1.704571 z" />
     <path
-       id="MV14"
+       id="MV14:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 47.993658,95.447208 2.160236,0.0049 2.160237,0.0049 -1.084676,1.699686 -1.084676,1.699685 -1.075561,-1.70457 z m 4.305485,6.818282 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.70149 1.08304,-1.701491 1.077181,1.704571 z" />
     <path
-       id="MV13"
+       id="MV13:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 48.118046,75.635161 2.160236,0.0049 2.160237,0.0049 -1.084676,1.699686 -1.084676,1.699685 -1.075561,-1.70457 z m 4.305485,6.818285 -2.160221,-0.003 -2.160223,-0.003 1.08304,-1.701492 1.08304,-1.701493 1.07718,1.704571 z" />
     <path
-       id="MV8"
+       id="MV8:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 12.963974,11.31703 -0.0049,2.160236 -0.0049,2.160237 -1.699686,-1.084676 -1.6996854,-1.084676 1.7045704,-1.075561 z m -6.8182854,4.305485 0.003,-2.160221 0.003,-2.160223 1.701492,1.08304 1.701493,1.08304 -1.704571,1.077181 z" />
     <path
-       id="GV2"
+       id="GV2:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 64.405018,1.5797274 -0.0049,2.160236 -0.0049,2.1602371 -1.699687,-1.0846761 -1.699685,-1.084676 1.70457,-1.0755611 z m -6.818286,4.305485 0.003,-2.1602211 0.003,-2.1602229 1.701492,1.0830399 1.701493,1.0830401 -1.704571,1.0771809 z" />
     <path
-       id="MV2"
+       id="MV2:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 79.878419,49.582703 -0.0049,2.160236 -0.0049,2.160237 -1.699687,-1.084676 -1.699685,-1.084676 1.70457,-1.075561 z m -6.818286,4.305485 0.003,-2.160221 0.003,-2.160223 1.701492,1.08304 1.701493,1.08304 -1.704571,1.077181 z" />
     <path
-       id="MV10"
+       id="MV10:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 13.030813,99.743715 -0.0049,2.160235 -0.0049,2.16024 -1.699686,-1.08468 -1.6996854,-1.08467 1.7045704,-1.07557 z m -6.8182853,4.305485 0.003,-2.16022 0.003,-2.160215 1.701492,1.083035 1.7014931,1.08304 -1.7045711,1.07718 z" />
     <path
-       id="MV9"
+       id="MV9:-click-state"
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.0814448;stroke-opacity:1"
        d="m 26.050418,106.41723 -0.0049,2.16024 -0.0049,2.16023 -1.699686,-1.08467 -1.699686,-1.08468 1.704571,-1.07556 z m -6.818286,4.30549 0.003,-2.16022 0.003,-2.16023 1.701493,1.08304 1.701493,1.08304 -1.704571,1.07718 z" />
     <text
@@ -1230,71 +1230,71 @@
        style="font-style:normal;font-weight:normal;font-size:2.82223px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
        x="24.996986"
        y="14.393418"
-       id="P3txt"><tspan
+       id="p3:-text"><tspan
          id="tspan2857-15-9"
          x="24.996986"
          y="14.393418"
-         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">x  mbar</tspan></text>
+         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">* mbar</tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:2.82223px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
        x="26.113924"
        y="46.21619"
-       id="P4txt"><tspan
+       id="p4:-text"><tspan
          id="tspan2857-15-9-9"
          x="26.113924"
          y="46.21619"
-         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">x  mbar</tspan></text>
+         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">* mbar</tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:2.82222px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
        x="25.756571"
        y="132.41373"
-       id="P5txt"><tspan
+       id="p5:-text"><tspan
          id="tspan2857-15-9-3"
          x="25.756571"
          y="132.41373"
-         style="font-size:2.82222px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">x  mbar</tspan></text>
+         style="font-size:2.82222px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">* mbar</tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:2.82222px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
        x="85.813934"
        y="114.90757"
-       id="P2txt"><tspan
+       id="p2:-text"><tspan
          id="tspan2857-15-9-9-2"
          x="85.813934"
          y="114.90757"
-         style="font-size:2.82222px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">x  mbar</tspan></text>
+         style="font-size:2.82222px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">* mbar</tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:2.82223px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
        x="54.460369"
        y="121.08282"
-       id="P1txt"><tspan
+       id="p1:-text"><tspan
          id="tspan2857-15-9-9-2-4"
          x="54.460369"
          y="121.08282"
-         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">x mbar</tspan></text>
+         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">* mbar</tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:2.82223px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
        x="19.930603"
        y="22.033382"
-       id="Turbopumpspeedtxt"><tspan
+       id="turbopump:_speed-text"><tspan
          id="tspan2857-15-9-8"
          x="19.930603"
          y="22.033382"
-         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">speed: </tspan></text>
+         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">speed: * Hz</tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:2.82223px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
        x="19.836363"
        y="25.367538"
-       id="Turbopumppowertxt"><tspan
+       id="turbopump:_current-text"><tspan
          id="tspan2857-15-9-8-6"
          x="19.836363"
          y="25.367538"
-         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">current: </tspan></text>
+         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">current: * %</tspan></text>
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
@@ -1305,9 +1305,27 @@
          x="6.1898136"
          y="101.19585"
          style="stroke-width:0.264583" /></text>
+    <g id="safety:reset-command">
+      <circle
+         style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.2;stroke-opacity:1"
+         id="safety:reset-command-fault"
+         cx="95"
+         cy="7"
+         r="4" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:2.82223px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+         x="92.5"
+         y="136.50789"
+         id="P1txt-0"><tspan
+           id="tspan2857-15-9-9-2-4-3"
+           x="92"
+           y="8"
+           style="font-size:2.82223px;fill:#000000;fill-opacity:1;stroke-width:0.264583">reset</tspan></text>
+      </g>
     <circle
        style="fill:#eaeaea;fill-opacity:1;stroke:#eaeaea;stroke-width:0.2;stroke-opacity:1"
-       id="Airpressure"
+       id="airpressure:-state"
        cx="96.168175"
        cy="131.08609"
        r="2.5" />
@@ -1331,25 +1349,5 @@
          x="94.167931"
          y="139.35733"
          style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">air</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-weight:normal;font-size:2.82223px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
-       x="30.396635"
-       y="21.934099"
-       id="speedtxt"><tspan
-         id="tspan2857-15-9-8-9"
-         x="30.396635"
-         y="21.934099"
-         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">x Hz </tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-weight:normal;font-size:2.82223px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
-       x="31.776958"
-       y="25.303286"
-       id="currenttxt"><tspan
-         id="tspan2857-15-9-8-9-6"
-         x="31.776958"
-         y="25.303286"
-         style="font-size:2.82223px;fill:#d5d5d5;fill-opacity:1;stroke-width:0.264583">x % </tspan></text>
   </g>
 </svg>
