linse/boxweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] state as of 2025-06-03

Browse Source
This commit is contained in:
zolliker
2025-06-04 07:36:37 +02:00
parent 488305c252
commit 21b76699a5
2 changed files with 83 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
static/UI5.svg
View File

@ -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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 190 KiB

144
templates/dil5.html
View File

@ -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_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,34 +155,16 @@
}
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);
const element = svgDoc.querySelector("#" + state_ids[index]);
@ -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(); }
</script>