RnD/dashboardAPI
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(dashboardAPI): double basin row height for pumpingStation

Browse Source 
Basin row grows from h:10 to h:20. Bar gauge, Canvas, and Level/Volume
timeseries all scale proportionally. Canvas internal frame doubled (480x600)
and tank rectangle stretched (height 240→520) so the canvas content fills
the panel instead of letterboxing in the top half. Bottom readouts moved
from y=280 to y=562 to stay just below the taller tank floor.

Flow row + its panels shifted down by 10 grid rows to make room.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
2026-05-28 10:45:51 +02:00
parent 3529c9f970
commit b3972d4a2f
2 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
config/pumpingStation.json
View File

@@ -171,7 +171,7 @@
}, },
"overrides": [] "overrides": []
}, },
"gridPos": { "h": 10, "w": 4, "x": 0, "y": 6 }, "gridPos": { "h": 20, "w": 4, "x": 0, "y": 6 },
"id": 16, "id": 16,
"options": { "options": {
"displayMode": "basic", "displayMode": "basic",
@@ -217,7 +217,7 @@
} }
] ]
}, },
"gridPos": { "h": 10, "w": 8, "x": 4, "y": 6 }, "gridPos": { "h": 20, "w": 8, "x": 4, "y": 6 },
"id": 17, "id": 17,
"options": { "options": {
"inlineEditing": false, "inlineEditing": false,
@@ -227,7 +227,7 @@
"root": { "root": {
"name": "Basin", "name": "Basin",
"type": "frame", "type": "frame",
"placement": { "left": 0, "top": 0, "width": 480, "height": 300 }, "placement": { "left": 0, "top": 0, "width": 480, "height": 600 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "dark-green" } }, "border": { "color": { "fixed": "dark-green" } },
"elements": [ "elements": [
@@ -266,7 +266,7 @@
{ {
"name": "Tank Outline", "name": "Tank Outline",
"type": "rectangle", "type": "rectangle",
"placement": { "top": 20, "left": 80, "width": 200, "height": 240 }, "placement": { "top": 20, "left": 80, "width": 200, "height": 520 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "#8a8a8a" }, "width": 2 }, "border": { "color": { "fixed": "#8a8a8a" }, "width": 2 },
"config": { "text": { "mode": "fixed", "fixed": "" } } "config": { "text": { "mode": "fixed", "fixed": "" } }
@@ -397,7 +397,7 @@
{ {
"name": "Footer Floor", "name": "Footer Floor",
"type": "text", "type": "text",
"placement": { "top": 262, "left": 80, "width": 200, "height": 16 }, "placement": { "top": 542, "left": 80, "width": 200, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "floor (0.00 m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "floor (0.00 m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" }
@@ -405,7 +405,7 @@
{ {
"name": "Readout Level Label", "name": "Readout Level Label",
"type": "text", "type": "text",
"placement": { "top": 280, "left": 8, "width": 70, "height": 16 }, "placement": { "top": 562, "left": 8, "width": 70, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "level" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "level" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" }
@@ -413,7 +413,7 @@
{ {
"name": "Readout Level", "name": "Readout Level",
"type": "metric-value", "type": "metric-value",
"placement": { "top": 280, "left": 82, "width": 86, "height": 16 }, "placement": { "top": 562, "left": 82, "width": 86, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "field", "fixed": "", "field": "level" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" } "config": { "text": { "mode": "field", "fixed": "", "field": "level" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" }
@@ -421,7 +421,7 @@
{ {
"name": "Readout Volume Label", "name": "Readout Volume Label",
"type": "text", "type": "text",
"placement": { "top": 280, "left": 168, "width": 60, "height": 16 }, "placement": { "top": 562, "left": 168, "width": 60, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "volume" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "volume" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" }
@@ -429,7 +429,7 @@
{ {
"name": "Readout Volume", "name": "Readout Volume",
"type": "metric-value", "type": "metric-value",
"placement": { "top": 280, "left": 232, "width": 70, "height": 16 }, "placement": { "top": 562, "left": 232, "width": 70, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "field", "fixed": "", "field": "volume" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" } "config": { "text": { "mode": "field", "fixed": "", "field": "volume" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" }
@@ -437,7 +437,7 @@
{ {
"name": "Readout Fill Label", "name": "Readout Fill Label",
"type": "text", "type": "text",
"placement": { "top": 280, "left": 302, "width": 50, "height": 16 }, "placement": { "top": 562, "left": 302, "width": 50, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "fixed", "fixed": "fill" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" } "config": { "text": { "mode": "fixed", "fixed": "fill" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" }
@@ -445,7 +445,7 @@
{ {
"name": "Readout Fill", "name": "Readout Fill",
"type": "metric-value", "type": "metric-value",
"placement": { "top": 280, "left": 356, "width": 70, "height": 16 }, "placement": { "top": 562, "left": 356, "width": 70, "height": 16 },
"background": { "color": { "fixed": "transparent" } }, "background": { "color": { "fixed": "transparent" } },
"border": { "color": { "fixed": "transparent" }, "width": 0 }, "border": { "color": { "fixed": "transparent" }, "width": 0 },
"config": { "text": { "mode": "field", "fixed": "", "field": "volumePercent" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" } "config": { "text": { "mode": "field", "fixed": "", "field": "volumePercent" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" }
@@ -472,7 +472,7 @@
}, },
"overrides": [] "overrides": []
}, },
"gridPos": { "h": 5, "w": 12, "x": 12, "y": 6 }, "gridPos": { "h": 10, "w": 12, "x": 12, "y": 6 },
"id": 8, "id": 8,
"options": { "options": {
"legend": { "displayMode": "list", "placement": "bottom" }, "legend": { "displayMode": "list", "placement": "bottom" },
@@ -497,7 +497,7 @@
}, },
"overrides": [] "overrides": []
}, },
"gridPos": { "h": 5, "w": 12, "x": 12, "y": 11 }, "gridPos": { "h": 10, "w": 12, "x": 12, "y": 16 },
"id": 9, "id": 9,
"options": { "options": {
"legend": { "displayMode": "list", "placement": "bottom" }, "legend": { "displayMode": "list", "placement": "bottom" },
@@ -514,7 +514,7 @@
"meta": { "emittedFields": ["volume"] } "meta": { "emittedFields": ["volume"] }
}, },
{ {
"gridPos": { "h": 1, "w": 24, "x": 0, "y": 16 }, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 26 },
"id": 10, "id": 10,
"title": "Flow", "title": "Flow",
"type": "row" "type": "row"
@@ -528,7 +528,7 @@
}, },
"overrides": [] "overrides": []
}, },
"gridPos": { "h": 8, "w": 12, "x": 0, "y": 17 }, "gridPos": { "h": 8, "w": 12, "x": 0, "y": 27 },
"id": 11, "id": 11,
"options": { "options": {
"legend": { "displayMode": "list", "placement": "bottom" }, "legend": { "displayMode": "list", "placement": "bottom" },
@@ -553,7 +553,7 @@
}, },
"overrides": [] "overrides": []
}, },
"gridPos": { "h": 8, "w": 12, "x": 12, "y": 17 }, "gridPos": { "h": 8, "w": 12, "x": 12, "y": 27 },
"id": 12, "id": 12,
"options": { "options": {
"legend": { "displayMode": "list", "placement": "bottom" }, "legend": { "displayMode": "list", "placement": "bottom" },

7
src/specificClass.js
View File

@@ -189,9 +189,10 @@ class DashboardApi {
const dryRunLevel = outflowLevel * (1 + dryRunPct / 100); const dryRunLevel = outflowLevel * (1 + dryRunPct / 100);
const highSafetyLevel = overflowLevel * (highPct / 100); const highSafetyLevel = overflowLevel * (highPct / 100);
// Canvas tank: rim at y=20px, floor at y=260px (240px tall). Must match // Canvas tank: rim at y=20px, floor at y=540px (520px tall). Must match
// hard-coded tank rectangle placement in config/pumpingStation.json. // hard-coded tank rectangle placement in config/pumpingStation.json
const TANK_TOP = 20, TANK_BOT = 260, TANK_H = TANK_BOT - TANK_TOP; // (basin row is h:20 grid rows; canvas root frame is 480x600 px).
const TANK_TOP = 20, TANK_BOT = 540, TANK_H = TANK_BOT - TANK_TOP;
const yFor = (v) => +(TANK_BOT - (v / heightBasin) * TANK_H).toFixed(2); const yFor = (v) => +(TANK_BOT - (v / heightBasin) * TANK_H).toFixed(2);
const tyFor = (yLine) => +(yLine - 8).toFixed(2); // centre 16px text on the line const tyFor = (yLine) => +(yLine - 8).toFixed(2); // centre 16px text on the line