ab0d4ed285
Three user-facing fixes: 1. Outlet was getting pushed below the tank floor by the top-down nudge because its ideal y is already near the bottom. Now outflowLevel is PINNED at its proportional y (like basinHeight is pinned at the rim) and a second bottom-up pass pushes non-pinned items upward from the outlet anchor. Result: outlet stays near the tank floor, dryRunLevel sits right above it, the rest of the stack stays readable. Two anchors, two passes. 2. Zone labels mirrored from the wiki basin-model drawio: - "Spare volume before spilling" (overflowLevel ↔ maxLevel) - "Sewage + tank buffer" (maxLevel ↔ startLevel) - "Tank buffer" (startLevel ↔ minLevel) - "Tank buffer" (minLevel ↔ dryRunLevel) - "Dead volume" (outflowLevel ↔ floor) Each sits at the midpoint of its pair of nudged thresholds and hides when the gap between them is too small to read (< 14 px). 3. basinVolume moved into the SVG as a pinned input above the tank rim (alongside basinHeight), replacing the separate form row. One editor, one diagram — the total volume belongs with the geometry. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
635 lines
31 KiB
HTML
635 lines
31 KiB
HTML
<!--
|
|
| S88-niveau | Primair (blokkleur) | Tekstkleur |
|
|
| ---------------------- | ------------------- | ---------- |
|
|
| **Area** | `#0f52a5` | wit |
|
|
| **Process Cell** | `#0c99d9` | wit |
|
|
| **Unit** | `#50a8d9` | zwart |
|
|
| **Equipment (Module)** | `#86bbdd` | zwart |
|
|
| **Control Module** | `#a9daee` | zwart |
|
|
|
|
-->
|
|
<script src="/pumpingStation/menu.js"></script> <!-- Load the menu script for dynamic dropdowns -->
|
|
<script src="/pumpingStation/configData.js"></script> <!-- Load the config script for node information -->
|
|
|
|
<script>//test
|
|
RED.nodes.registerType("pumpingStation", {
|
|
category: "EVOLV",
|
|
color: "#0c99d9", // color for the node based on the S88 schema
|
|
defaults: {
|
|
name: { value: "" },
|
|
|
|
// Define station-specific properties
|
|
simulator: { value: false },
|
|
basinVolume: { value: 1 }, // m³, total empty basin
|
|
basinHeight: { value: 1 }, // m, floor to top
|
|
inflowLevel: { value: 0.8 }, // m, centre of inlet pipe above floor
|
|
outflowLevel: { value: 0.2 }, // m, centre of outlet pipe above floor
|
|
overflowLevel: { value: 0.9 }, // m, overflow elevation
|
|
defaultFluid: { value: "wastewater" },
|
|
inletPipeDiameter: { value: 0.3 }, // m
|
|
outletPipeDiameter: { value: 0.3 }, // m
|
|
pipelineLength: { value: 80 }, // m
|
|
maxDischargeHead: { value: 24 }, // m
|
|
staticHead: { value: 12 }, // m
|
|
maxInflowRate: { value: 200 }, // m³/h
|
|
temperatureReferenceDegC: { value: 15 },
|
|
timeleftToFullOrEmptyThresholdSeconds:{value:0}, // time threshold to safeguard starting or stopping pumps in seconds
|
|
enableDryRunProtection: { value: true },
|
|
enableOverfillProtection: { value: true },
|
|
dryRunThresholdPercent: { value: 2 },
|
|
overfillThresholdPercent: { value: 98 },
|
|
minHeightBasedOn: { value: "outlet" }, // basis for minimum height check: inlet or outlet
|
|
processOutputFormat: { value: "process" },
|
|
dbaseOutputFormat: { value: "influxdb" },
|
|
|
|
// Advanced reference information
|
|
refHeight: { value: "NAP" }, // reference height
|
|
basinBottomRef: { value: 1 }, // absolute elevation of basin floor
|
|
|
|
//define asset properties
|
|
uuid: { value: "" },
|
|
supplier: { value: "" },
|
|
category: { value: "" },
|
|
assetType: { value: "" },
|
|
model: { value: "" },
|
|
unit: { value: "" },
|
|
|
|
//logger properties
|
|
enableLog: { value: false },
|
|
logLevel: { value: "error" },
|
|
|
|
//physicalAspect
|
|
positionVsParent: { value: "" },
|
|
positionIcon: { value: "" },
|
|
hasDistance: { value: false },
|
|
distance: { value: 0 },
|
|
distanceUnit: { value: "m" },
|
|
distanceDescription: { value: "" },
|
|
|
|
// control strategy
|
|
controlMode: { value: "none" },
|
|
startLevel: { value: null },
|
|
minLevel: { value: null },
|
|
maxLevel: { value: null },
|
|
flowSetpoint: { value: null },
|
|
flowDeadband: { value: null }
|
|
|
|
},
|
|
|
|
inputs: 1,
|
|
outputs: 3,
|
|
inputLabels: ["Input"],
|
|
outputLabels: ["process", "dbase", "parent"],
|
|
icon: "font-awesome/fa-tint",
|
|
|
|
label: function () {
|
|
return this.positionIcon + " PumpingStation";
|
|
},
|
|
|
|
oneditprepare: function() {
|
|
const waitForMenuData = () => {
|
|
if (window.EVOLV?.nodes?.pumpingStation?.initEditor) {
|
|
window.EVOLV.nodes.pumpingStation.initEditor(this);
|
|
} else {
|
|
setTimeout(waitForMenuData, 50);
|
|
}
|
|
};
|
|
// Wait for the menu data to be ready before initializing the editor
|
|
waitForMenuData();
|
|
|
|
// NODE SPECIFIC
|
|
document.getElementById("node-input-basinVolume");
|
|
document.getElementById("node-input-basinHeight");
|
|
document.getElementById("node-input-inflowLevel");
|
|
document.getElementById("node-input-outflowLevel");
|
|
document.getElementById("node-input-overflowLevel");
|
|
document.getElementById("node-input-refHeight");
|
|
document.getElementById("node-input-basinBottomRef");
|
|
|
|
const refHeightEl = document.getElementById("node-input-refHeight");
|
|
if (refHeightEl) {
|
|
refHeightEl.value = this.refHeight || "NAP";
|
|
}
|
|
|
|
const minHeightBasedOnEl = document.getElementById("node-input-minHeightBasedOn");
|
|
if (minHeightBasedOnEl) {
|
|
minHeightBasedOnEl.value = this.minHeightBasedOn;
|
|
}
|
|
|
|
const dryRunToggle = document.getElementById("node-input-enableDryRunProtection");
|
|
const dryRunPercent = document.getElementById("node-input-dryRunThresholdPercent");
|
|
const overfillToggle = document.getElementById("node-input-enableOverfillProtection");
|
|
const overfillPercent = document.getElementById("node-input-overfillThresholdPercent");
|
|
|
|
const toggleInput = (toggleEl, inputEl) => {
|
|
if (!toggleEl || !inputEl) { return; }
|
|
inputEl.disabled = !toggleEl.checked;
|
|
inputEl.parentElement.classList.toggle('disabled', inputEl.disabled);
|
|
};
|
|
|
|
if (dryRunToggle && dryRunPercent) {
|
|
dryRunToggle.checked = !!this.enableDryRunProtection;
|
|
dryRunPercent.value = Number.isFinite(this.dryRunThresholdPercent) ? this.dryRunThresholdPercent : 2;
|
|
dryRunToggle.addEventListener('change', () => toggleInput(dryRunToggle, dryRunPercent));
|
|
toggleInput(dryRunToggle, dryRunPercent);
|
|
}
|
|
|
|
if (overfillToggle && overfillPercent) {
|
|
overfillToggle.checked = !!this.enableOverfillProtection;
|
|
overfillPercent.value = Number.isFinite(this.overfillThresholdPercent) ? this.overfillThresholdPercent : 98;
|
|
overfillToggle.addEventListener('change', () => toggleInput(overfillToggle, overfillPercent));
|
|
toggleInput(overfillToggle, overfillPercent);
|
|
}
|
|
|
|
const timeLeftInput = document.getElementById("node-input-timeleftToFullOrEmptyThresholdSeconds");
|
|
if (timeLeftInput) {
|
|
timeLeftInput.value = Number.isFinite(this.timeleftToFullOrEmptyThresholdSeconds)
|
|
? this.timeleftToFullOrEmptyThresholdSeconds
|
|
: 0;
|
|
}
|
|
|
|
// control mode toggle UI
|
|
const toggleModeSections = (val) => {
|
|
document.querySelectorAll('.ps-mode-section').forEach((el) => el.style.display = 'none');
|
|
const active = document.getElementById(`ps-mode-${val}`);
|
|
if (active) active.style.display = '';
|
|
};
|
|
|
|
const modeSelect = document.getElementById('node-input-controlMode');
|
|
if (modeSelect) {
|
|
modeSelect.value = this.controlMode || 'none';
|
|
toggleModeSections(modeSelect.value);
|
|
modeSelect.addEventListener('change', (e) => toggleModeSections(e.target.value));
|
|
}
|
|
|
|
const setNumberField = (id, val) => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.value = Number.isFinite(val) ? val : '';
|
|
};
|
|
|
|
setNumberField('node-input-startLevel', this.startLevel);
|
|
setNumberField('node-input-minLevel', this.minLevel);
|
|
setNumberField('node-input-maxLevel', this.maxLevel);
|
|
setNumberField('node-input-flowSetpoint', this.flowSetpoint);
|
|
setNumberField('node-input-flowDeadband', this.flowDeadband);
|
|
|
|
// Interactive diagram: place every threshold line/input at its
|
|
// proportional y on the tank, plus compute derived safety levels
|
|
// (dryRunLevel, overfillLevel) that are shown both in the diagram
|
|
// and next to the safety-% fields. Same formulas as
|
|
// specificClass._validateThresholdOrdering.
|
|
const DIAG = { topY: 40, botY: 380 };
|
|
const fNum = (id) => {
|
|
const v = parseFloat(document.getElementById(`node-input-${id}`)?.value);
|
|
return Number.isFinite(v) ? v : null;
|
|
};
|
|
const yForLevel = (val, basinH) => {
|
|
if (val == null || !basinH) return null;
|
|
const y = DIAG.botY - (val / basinH) * (DIAG.botY - DIAG.topY);
|
|
return Math.max(DIAG.topY - 8, Math.min(DIAG.botY + 8, y));
|
|
};
|
|
// Place a row — line, label, input, unit all share the same y.
|
|
// The diagram is a schematic ordered list (value order is
|
|
// preserved, but the y-positions are distributed with a
|
|
// guaranteed minimum gap for readability), not a strictly
|
|
// proportional rendering.
|
|
const placeItem = (id, y) => {
|
|
const line = document.getElementById(`ps-line-${id}`);
|
|
const label = document.getElementById(`ps-label-${id}`);
|
|
const unit = document.getElementById(`ps-unit-${id}`);
|
|
const fo = document.getElementById(`ps-fo-${id}`);
|
|
const sub = document.getElementById(`ps-sub-${id}`);
|
|
const lead = document.getElementById(`ps-leader-${id}`);
|
|
if (line) { line.setAttribute('y1', y); line.setAttribute('y2', y); }
|
|
if (label) label.setAttribute('y', y + 4);
|
|
if (unit) unit.setAttribute('y', y + 4);
|
|
if (fo) fo.setAttribute('y', y - 11);
|
|
if (sub) sub.setAttribute('y', y + 15);
|
|
if (lead) lead.setAttribute('visibility', 'hidden');
|
|
};
|
|
|
|
const redraw = () => {
|
|
const basinH = fNum('basinHeight') || 5;
|
|
|
|
// Derived safety levels (participate in the right-column stack)
|
|
const basedOn = document.getElementById('node-input-minHeightBasedOn')?.value || 'outlet';
|
|
const refLow = basedOn === 'inlet' ? fNum('inflowLevel') : fNum('outflowLevel');
|
|
const dryPct = fNum('dryRunThresholdPercent');
|
|
const ovfPct = fNum('overfillThresholdPercent');
|
|
const ovf = fNum('overflowLevel');
|
|
const dryLvl = (refLow != null && dryPct != null) ? refLow * (1 + dryPct / 100) : null;
|
|
const ovfLvl = (ovf != null && ovfPct != null) ? ovf * (ovfPct / 100) : null;
|
|
|
|
// Right-column stack. TWO anchors: basinHeight pinned at the
|
|
// tank rim (top) and outflowLevel pinned at its proportional y
|
|
// (bottom). Everything between is nudged to maintain a minimum
|
|
// vertical gap via two passes — top-down from the rim, then
|
|
// bottom-up from the outlet — so the dashed lines keep their
|
|
// value-order and outlet stays near the floor where it belongs.
|
|
const items = [
|
|
{ id: 'basinHeight', yIdeal: DIAG.topY, pinned: true },
|
|
{ id: 'overflowLevel', yIdeal: yForLevel(fNum('overflowLevel'), basinH) },
|
|
{ id: 'maxLevel', yIdeal: yForLevel(fNum('maxLevel'), basinH) },
|
|
{ id: 'startLevel', yIdeal: yForLevel(fNum('startLevel'), basinH) },
|
|
{ id: 'minLevel', yIdeal: yForLevel(fNum('minLevel'), basinH) },
|
|
{ id: 'dryRunLevel', yIdeal: yForLevel(dryLvl, basinH) },
|
|
{ id: 'outflowLevel', yIdeal: yForLevel(fNum('outflowLevel'), basinH), pinned: true },
|
|
].filter(it => it.yIdeal != null);
|
|
|
|
const GAP = 36;
|
|
items.sort((a, b) => a.yIdeal - b.yIdeal);
|
|
for (const it of items) it.y = it.yIdeal;
|
|
// Pass 1: top-down — push DOWN to maintain GAP; pinned items don't move
|
|
for (let i = 1; i < items.length; i++) {
|
|
if (items[i].pinned) continue;
|
|
items[i].y = Math.max(items[i].y, items[i - 1].y + GAP);
|
|
}
|
|
// Pass 2: bottom-up — push UP so outflow's pin propagates up the stack
|
|
for (let i = items.length - 2; i >= 0; i--) {
|
|
if (items[i].pinned) continue;
|
|
items[i].y = Math.min(items[i].y, items[i + 1].y - GAP);
|
|
}
|
|
for (const it of items) placeItem(it.id, it.y);
|
|
|
|
// Zone labels between adjacent thresholds (italic, centered).
|
|
// Hidden if either bracketing threshold is missing, or the gap
|
|
// is too small to read (< 14 px).
|
|
const placeZone = (zoneId, topId, botId) => {
|
|
const el = document.getElementById(`ps-zone-${zoneId}`);
|
|
if (!el) return;
|
|
const top = items.find(it => it.id === topId);
|
|
const bot = items.find(it => it.id === botId);
|
|
if (!top || !bot || (bot.y - top.y) < 14) {
|
|
el.setAttribute('visibility', 'hidden'); return;
|
|
}
|
|
el.setAttribute('y', (top.y + bot.y) / 2 + 3);
|
|
el.setAttribute('visibility', 'visible');
|
|
};
|
|
placeZone('spare', 'overflowLevel', 'maxLevel');
|
|
placeZone('sewage', 'maxLevel', 'startLevel');
|
|
placeZone('buffer1', 'startLevel', 'minLevel');
|
|
placeZone('buffer2', 'minLevel', 'dryRunLevel');
|
|
// "Dead volume" sits inside the blue band between outflowLevel and the floor
|
|
const outflowPinned = items.find(it => it.id === 'outflowLevel');
|
|
const deadLbl = document.getElementById('ps-zone-dead');
|
|
if (deadLbl && outflowPinned && (DIAG.botY - outflowPinned.y) > 14) {
|
|
deadLbl.setAttribute('y', (outflowPinned.y + DIAG.botY) / 2 + 3);
|
|
deadLbl.setAttribute('visibility', 'visible');
|
|
} else if (deadLbl) {
|
|
deadLbl.setAttribute('visibility', 'hidden');
|
|
}
|
|
|
|
// Inlet arrow — sole item on the left, no stacking concerns
|
|
const inflowY = yForLevel(fNum('inflowLevel'), basinH);
|
|
if (inflowY != null) {
|
|
const line = document.getElementById('ps-line-inflowLevel');
|
|
const lbl = document.getElementById('ps-label-inflowLevel');
|
|
const sub = document.getElementById('ps-sub-inflowLevel');
|
|
const fo = document.getElementById('ps-fo-inflowLevel');
|
|
const unit = document.getElementById('ps-unit-inflowLevel');
|
|
if (line) { line.setAttribute('y1', inflowY); line.setAttribute('y2', inflowY); }
|
|
if (lbl) lbl.setAttribute('y', inflowY - 4);
|
|
if (sub) sub.setAttribute('y', inflowY + 8);
|
|
if (fo) fo.setAttribute('y', inflowY - 11);
|
|
if (unit) unit.setAttribute('y', inflowY + 4);
|
|
}
|
|
|
|
// Dead-volume band: from the (possibly-nudged) outflow line
|
|
// down to the floor. Use the nudged y so the band meets the
|
|
// outflow line exactly.
|
|
const outflowItem = items.find(it => it.id === 'outflowLevel');
|
|
const deadvol = document.getElementById('ps-deadvol');
|
|
if (deadvol && outflowItem) {
|
|
deadvol.setAttribute('y', outflowItem.y);
|
|
deadvol.setAttribute('height', Math.max(0, DIAG.botY - outflowItem.y));
|
|
}
|
|
|
|
// dryRunLevel label text (derived, read-only)
|
|
const dryLbl = document.getElementById('ps-label-dryRunLevel');
|
|
if (dryLbl) dryLbl.textContent = dryLvl != null
|
|
? `dryRunLevel ≈ ${dryLvl.toFixed(2)} m (safety — from %)`
|
|
: 'dryRunLevel ≈ — m (safety — from %)';
|
|
|
|
// Safety-section readouts (second view, beneath the diagram)
|
|
const d1 = document.getElementById('derived-dryRunLevel');
|
|
if (d1) d1.textContent = dryLvl != null ? `→ dryRunLevel ≈ ${dryLvl.toFixed(2)} m` : '→ dryRunLevel ≈ — m';
|
|
const d2 = document.getElementById('derived-overfillLevel');
|
|
if (d2) d2.textContent = ovfLvl != null ? `→ overfillLevel ≈ ${ovfLvl.toFixed(2)} m` : '→ overfillLevel ≈ — m';
|
|
|
|
// Ordering warning ribbon
|
|
const warn = document.getElementById('ps-warning');
|
|
const issues = [];
|
|
const pairs = [
|
|
['outflowLevel', 'inflowLevel', '<'],
|
|
['inflowLevel', 'overflowLevel', '<'],
|
|
['minLevel', 'startLevel', '<='],
|
|
['startLevel', 'maxLevel', '<'],
|
|
['maxLevel', 'overflowLevel', '<='],
|
|
];
|
|
for (const [a, b, op] of pairs) {
|
|
const av = fNum(a), bv = fNum(b);
|
|
if (av == null || bv == null) continue;
|
|
if (op === '<' ? !(av < bv) : !(av <= bv)) issues.push(`${a} ${op} ${b}`);
|
|
}
|
|
if (warn) {
|
|
if (issues.length) { warn.setAttribute('visibility', 'visible'); warn.textContent = `⚠ Check ordering: ${issues.join(', ')}`; }
|
|
else { warn.setAttribute('visibility', 'hidden'); }
|
|
}
|
|
};
|
|
['basinHeight','overflowLevel','maxLevel','startLevel','minLevel','inflowLevel','outflowLevel',
|
|
'dryRunThresholdPercent','overfillThresholdPercent','minHeightBasedOn'].forEach((id) => {
|
|
const el = document.getElementById(`node-input-${id}`);
|
|
if (el) { el.addEventListener('input', redraw); el.addEventListener('change', redraw); }
|
|
});
|
|
setTimeout(redraw, 60);
|
|
|
|
//------------------- END OF CUSTOM config UI ELEMENTS ------------------- //
|
|
},
|
|
oneditsave: function () {
|
|
const node = this;
|
|
|
|
//window.EVOLV?.nodes?.pumpingStation?.assetMenu?.saveEditor?.(node);
|
|
window.EVOLV?.nodes?.pumpingStation?.loggerMenu?.saveEditor?.(node);
|
|
window.EVOLV?.nodes?.pumpingStation?.positionMenu?.saveEditor?.(node);
|
|
|
|
//node specific
|
|
node.refHeight = document.getElementById("node-input-refHeight").value || "NAP";
|
|
node.minHeightBasedOn = document.getElementById("node-input-minHeightBasedOn").value || "outlet";
|
|
node.simulator = document.getElementById("node-input-simulator").checked;
|
|
|
|
["basinVolume","basinHeight","inflowLevel","outflowLevel","overflowLevel","basinBottomRef","timeleftToFullOrEmptyThresholdSeconds","dryRunThresholdPercent","overfillThresholdPercent"]
|
|
.forEach(field => {
|
|
node[field] = parseFloat(document.getElementById(`node-input-${field}`).value) || 0;
|
|
});
|
|
|
|
node.refHeight = document.getElementById("node-input-refHeight").value || "";
|
|
node.enableDryRunProtection = document.getElementById("node-input-enableDryRunProtection").checked;
|
|
node.enableOverfillProtection = document.getElementById("node-input-enableOverfillProtection").checked;
|
|
|
|
// control strategy
|
|
node.controlMode = document.getElementById('node-input-controlMode').value || 'none';
|
|
|
|
const parseNum = (id) => parseFloat(document.getElementById(id)?.value);
|
|
node.startLevel = parseNum('node-input-startLevel');
|
|
node.minLevel = parseNum('node-input-minLevel');
|
|
node.maxLevel = parseNum('node-input-maxLevel');
|
|
node.flowSetpoint = parseNum('node-input-flowSetpoint');
|
|
node.flowDeadband = parseNum('node-input-flowDeadband');
|
|
|
|
},
|
|
|
|
});
|
|
</script>
|
|
|
|
<!-- Main UI -->
|
|
|
|
<script type="text/html" data-template-name="pumpingStation">
|
|
|
|
<h4>Simulation</h4>
|
|
<div class="form-row">
|
|
<label for="node-input-simulator"><i class="fa fa-play-circle"></i> Simulator</label>
|
|
<input type="checkbox" id="node-input-simulator" style="width:20px;vertical-align:baseline;" />
|
|
<span>Run station in simulated mode</span>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h4>Basin parameters</h4>
|
|
<p style="font-size:12px;color:#777;margin:0 0 8px 0;">Heights are measured from the basin floor (0 m). Enter values next to each line — the diagram scales to whatever you enter.</p>
|
|
|
|
<style>
|
|
#ps-basin-diagram input[type=number] {
|
|
width: 100%; height: 20px; box-sizing: border-box;
|
|
font-size: 11px; padding: 1px 4px; margin: 0;
|
|
border: 1px solid #ccc; border-radius: 3px; background: #fff;
|
|
}
|
|
#ps-basin-diagram input[type=number]:focus { outline: 1px solid #0c99d9; border-color: #0c99d9; }
|
|
</style>
|
|
|
|
<svg id="ps-basin-diagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 430"
|
|
style="display:block;width:100%;max-width:540px;margin:0 0 12px 0;background:#fff;border:1px solid #e5e5e5;border-radius:4px;"
|
|
font-family="Arial,sans-serif" font-size="11">
|
|
<defs>
|
|
<marker id="ps-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#1F4E79" />
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- Tank body -->
|
|
<rect x="200" y="40" width="120" height="340" fill="#F0F8FF" stroke="#333" stroke-width="1.5" />
|
|
<!-- Dead-volume band (y + height updated dynamically below outflowLevel) -->
|
|
<rect id="ps-deadvol" x="201" width="118" fill="#AACCE0" />
|
|
<!-- basinVolume — pinned above the rim -->
|
|
<text id="ps-label-basinVolume" x="330" y="19" fill="#333" font-weight="600">basin volume</text>
|
|
<foreignObject id="ps-fo-basinVolume" x="425" y="4" width="70" height="22">
|
|
<input xmlns="http://www.w3.org/1999/xhtml" type="number" id="node-input-basinVolume" min="0" step="0.1" />
|
|
</foreignObject>
|
|
<text id="ps-unit-basinVolume" x="500" y="19" fill="#555">m³</text>
|
|
|
|
<!-- Zone labels (mid-tank italic, positioned dynamically at midpoint between adjacent thresholds) -->
|
|
<text id="ps-zone-spare" x="260" text-anchor="middle" fill="#B78200" font-size="10" font-style="italic" visibility="hidden">Spare volume before spilling</text>
|
|
<text id="ps-zone-sewage" x="260" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Sewage + tank buffer</text>
|
|
<text id="ps-zone-buffer1" x="260" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Tank buffer</text>
|
|
<text id="ps-zone-buffer2" x="260" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Tank buffer</text>
|
|
<text id="ps-zone-dead" x="260" text-anchor="middle" fill="#444" font-size="10" font-style="italic" visibility="hidden">Dead volume</text>
|
|
|
|
|
|
<!-- basinHeight — always at tank rim (y=40 in viewBox coords) -->
|
|
<line id="ps-line-basinHeight" x1="195" y1="40" x2="325" y2="40" stroke="#333" stroke-width="1.5" />
|
|
<text id="ps-label-basinHeight" x="330" y="44" fill="#333">basinHeight</text>
|
|
<foreignObject id="ps-fo-basinHeight" x="425" y="29" width="70" height="22">
|
|
<input xmlns="http://www.w3.org/1999/xhtml" type="number" id="node-input-basinHeight" min="0" step="0.1" />
|
|
</foreignObject>
|
|
<text id="ps-unit-basinHeight" x="500" y="44" fill="#555">m</text>
|
|
|
|
<!-- overflowLevel -->
|
|
<line id="ps-line-overflowLevel" x1="195" x2="325" stroke="#C0392B" stroke-dasharray="4 2" stroke-width="1.5" />
|
|
<text id="ps-label-overflowLevel" x="330" fill="#C0392B">overflowLevel</text>
|
|
<foreignObject id="ps-fo-overflowLevel" x="425" width="70" height="22">
|
|
<input xmlns="http://www.w3.org/1999/xhtml" type="number" id="node-input-overflowLevel" min="0" step="0.01" />
|
|
</foreignObject>
|
|
<text id="ps-unit-overflowLevel" x="500" fill="#555">m</text>
|
|
|
|
<!-- maxLevel -->
|
|
<line id="ps-line-maxLevel" x1="195" x2="325" stroke="#D68910" stroke-dasharray="4 2" stroke-width="1.5" />
|
|
<text id="ps-label-maxLevel" x="330" fill="#D68910">maxLevel</text>
|
|
<foreignObject id="ps-fo-maxLevel" x="425" width="70" height="22">
|
|
<input xmlns="http://www.w3.org/1999/xhtml" type="number" id="node-input-maxLevel" min="0" step="0.01" />
|
|
</foreignObject>
|
|
<text id="ps-unit-maxLevel" x="500" fill="#555">m</text>
|
|
|
|
<!-- startLevel -->
|
|
<line id="ps-line-startLevel" x1="195" x2="325" stroke="#1E8449" stroke-dasharray="4 2" stroke-width="1.5" />
|
|
<text id="ps-label-startLevel" x="330" fill="#1E8449">startLevel</text>
|
|
<foreignObject id="ps-fo-startLevel" x="425" width="70" height="22">
|
|
<input xmlns="http://www.w3.org/1999/xhtml" type="number" id="node-input-startLevel" min="0" step="0.01" />
|
|
</foreignObject>
|
|
<text id="ps-unit-startLevel" x="500" fill="#555">m</text>
|
|
|
|
<!-- Inlet — arrow + input on the left -->
|
|
<line id="ps-line-inflowLevel" x1="140" x2="200" stroke="#1F4E79" stroke-width="2" marker-end="url(#ps-arrow)" />
|
|
<text id="ps-label-inflowLevel" x="135" text-anchor="end" fill="#1F4E79" font-weight="bold">Inlet</text>
|
|
<text id="ps-sub-inflowLevel" x="135" text-anchor="end" fill="#777" font-size="9">bottom of pipe</text>
|
|
<foreignObject id="ps-fo-inflowLevel" x="5" width="70" height="22">
|
|
<input xmlns="http://www.w3.org/1999/xhtml" type="number" id="node-input-inflowLevel" min="0" step="0.01" />
|
|
</foreignObject>
|
|
<text id="ps-unit-inflowLevel" x="80" fill="#555">m</text>
|
|
|
|
<!-- minLevel -->
|
|
<line id="ps-line-minLevel" x1="195" x2="325" stroke="#6C3483" stroke-dasharray="4 2" stroke-width="1.5" />
|
|
<text id="ps-label-minLevel" x="330" fill="#6C3483">minLevel</text>
|
|
<foreignObject id="ps-fo-minLevel" x="425" width="70" height="22">
|
|
<input xmlns="http://www.w3.org/1999/xhtml" type="number" id="node-input-minLevel" min="0" step="0.01" />
|
|
</foreignObject>
|
|
<text id="ps-unit-minLevel" x="500" fill="#555">m</text>
|
|
|
|
<!-- dryRunLevel (derived, read-only) -->
|
|
<line id="ps-line-dryRunLevel" x1="195" x2="325" stroke="#C0392B" stroke-dasharray="1 2" stroke-width="1" opacity="0.6" />
|
|
<text id="ps-label-dryRunLevel" x="330" fill="#C0392B" font-size="10" font-style="italic">dryRunLevel ≈ — m (safety — from %)</text>
|
|
|
|
<!-- Outlet — arrow on right, input below the threshold column -->
|
|
<line id="ps-line-outflowLevel" x1="320" x2="360" stroke="#1F4E79" stroke-width="2" marker-end="url(#ps-arrow)" />
|
|
<text id="ps-label-outflowLevel" x="365" fill="#1F4E79" font-weight="bold">Outlet</text>
|
|
<text id="ps-sub-outflowLevel" x="365" fill="#777" font-size="9">top of pipe</text>
|
|
<foreignObject id="ps-fo-outflowLevel" x="425" width="70" height="22">
|
|
<input xmlns="http://www.w3.org/1999/xhtml" type="number" id="node-input-outflowLevel" min="0" step="0.01" />
|
|
</foreignObject>
|
|
<text id="ps-unit-outflowLevel" x="500" fill="#555">m</text>
|
|
|
|
<!-- Floor / datum -->
|
|
<line x1="195" y1="380" x2="325" y2="380" stroke="#000" stroke-width="2" />
|
|
<text x="330" y="384" fill="#000">0 m (datum)</text>
|
|
|
|
<!-- Leader lines: shown when the input row had to be nudged off its threshold's ideal y -->
|
|
<line id="ps-leader-basinHeight" x1="0" y1="0" x2="0" y2="0" stroke="#bbb" stroke-width="0.6" stroke-dasharray="2 2" visibility="hidden" />
|
|
<line id="ps-leader-overflowLevel" x1="0" y1="0" x2="0" y2="0" stroke="#bbb" stroke-width="0.6" stroke-dasharray="2 2" visibility="hidden" />
|
|
<line id="ps-leader-maxLevel" x1="0" y1="0" x2="0" y2="0" stroke="#bbb" stroke-width="0.6" stroke-dasharray="2 2" visibility="hidden" />
|
|
<line id="ps-leader-startLevel" x1="0" y1="0" x2="0" y2="0" stroke="#bbb" stroke-width="0.6" stroke-dasharray="2 2" visibility="hidden" />
|
|
<line id="ps-leader-minLevel" x1="0" y1="0" x2="0" y2="0" stroke="#bbb" stroke-width="0.6" stroke-dasharray="2 2" visibility="hidden" />
|
|
<line id="ps-leader-dryRunLevel" x1="0" y1="0" x2="0" y2="0" stroke="#bbb" stroke-width="0.6" stroke-dasharray="2 2" visibility="hidden" />
|
|
<line id="ps-leader-outflowLevel" x1="0" y1="0" x2="0" y2="0" stroke="#bbb" stroke-width="0.6" stroke-dasharray="2 2" visibility="hidden" />
|
|
|
|
<!-- Ordering-warning ribbon -->
|
|
<text id="ps-warning" x="260" y="410" text-anchor="middle" fill="#C0392B" font-size="10" font-style="italic" visibility="hidden"></text>
|
|
</svg>
|
|
|
|
<hr>
|
|
|
|
<h4>Control Strategy</h4>
|
|
<div class="form-row">
|
|
<label for="node-input-controlMode"><i class="fa fa-sliders"></i> Control mode</label>
|
|
<select id="node-input-controlMode">
|
|
<option value="none">None / Manual</option>
|
|
<option value="levelbased">Level-based</option>
|
|
<option value="flowbased">Flow-based</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="ps-mode-levelbased" class="ps-mode-section">
|
|
<p style="font-size:12px;color:#777;margin:0;">Level-based uses <code>minLevel</code> / <code>startLevel</code> / <code>maxLevel</code> from the diagram above.</p>
|
|
</div>
|
|
|
|
<div id="ps-mode-flowbased" class="ps-mode-section" style="display:none">
|
|
<div class="form-row">
|
|
<label for="node-input-flowSetpoint">Flow setpoint</label>
|
|
<input type="number" id="node-input-flowSetpoint" placeholder="m3/h" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-flowDeadband">Deadband</label>
|
|
<input type="number" id="node-input-flowDeadband" placeholder="m3/h" />
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h4>Reference</h4>
|
|
|
|
<!-- Reference data -->
|
|
<div class="form-row">
|
|
<label for="node-input-minHeightBasedOn"><i class="fa fa-arrows-v"></i> Minimum Height Based On</label>
|
|
<select id="node-input-minHeightBasedOn" style="width:60%;">
|
|
<option value="inlet">Inlet Elevation</option>
|
|
<option value="outlet">Outlet Elevation</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-refHeight"><i class="fa fa-map-marker"></i> Reference height</label>
|
|
<select id="node-input-refHeight" style="width:60%;">
|
|
<option value="NAP">NAP</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-input-basinBottomRef"><i class="fa fa-level-down"></i> Basin floor above datum (m)</label>
|
|
<input type="number" id="node-input-basinBottomRef" step="0.01" />
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h4>Safety</h4>
|
|
|
|
<!-- Safety settings -->
|
|
<div class="form-row">
|
|
<label for="node-input-timeleftToFullOrEmptyThresholdSeconds"><i class="fa fa-clock-o"></i> Time To Empty/Full (s)</label>
|
|
<input type="number" id="node-input-timeleftToFullOrEmptyThresholdSeconds" min="0" step="1" />
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-input-enableDryRunProtection">
|
|
<i class="fa fa-shield"></i> Dry-run Protection
|
|
</label>
|
|
<input type="checkbox" id="node-input-enableDryRunProtection" style="width:20px;vertical-align:baseline;" />
|
|
<span>Prevent pumps from running on low volume</span>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-dryRunThresholdPercent" style="padding-left:20px;">Low Volume Threshold (%)</label>
|
|
<input type="number" id="node-input-dryRunThresholdPercent" min="0" max="100" step="0.1" style="width:80px;" />
|
|
<span id="derived-dryRunLevel" style="margin-left:8px;color:#777;font-size:12px;">→ dryRunLevel ≈ — m</span>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<label for="node-input-enableOverfillProtection">
|
|
<i class="fa fa-exclamation-triangle"></i> Overfill Protection
|
|
</label>
|
|
<input type="checkbox" id="node-input-enableOverfillProtection" style="width:20px;vertical-align:baseline;" />
|
|
<span>Stop filling when approaching overflow</span>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-overfillThresholdPercent" style="padding-left:20px;">High Volume Threshold (%)</label>
|
|
<input type="number" id="node-input-overfillThresholdPercent" min="0" max="100" step="0.1" style="width:80px;" />
|
|
<span id="derived-overfillLevel" style="margin-left:8px;color:#777;font-size:12px;">→ overfillLevel ≈ — m</span>
|
|
</div>
|
|
<hr>
|
|
|
|
<h3>Output Formats</h3>
|
|
<div class="form-row">
|
|
<label for="node-input-processOutputFormat"><i class="fa fa-random"></i> Process Output</label>
|
|
<select id="node-input-processOutputFormat" style="width:60%;">
|
|
<option value="process">process</option>
|
|
<option value="json">json</option>
|
|
<option value="csv">csv</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-dbaseOutputFormat"><i class="fa fa-database"></i> Database Output</label>
|
|
<select id="node-input-dbaseOutputFormat" style="width:60%;">
|
|
<option value="influxdb">influxdb</option>
|
|
<option value="json">json</option>
|
|
<option value="csv">csv</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Shared asset/logger/position menus -->
|
|
<div id="asset-fields-placeholder"></div>
|
|
<div id="logger-fields-placeholder"></div>
|
|
<div id="position-fields-placeholder"></div>
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script type="text/html" data-help-name="pumpingStation">
|
|
|
|
|
|
</script>
|