From b3972d4a2fa79a3ad29047b3bb48c45ee51639f7 Mon Sep 17 00:00:00 2001 From: znetsixe Date: Thu, 28 May 2026 10:45:51 +0200 Subject: [PATCH] chore(dashboardAPI): double basin row height for pumpingStation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- config/pumpingStation.json | 32 ++++++++++++++++---------------- src/specificClass.js | 7 ++++--- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/config/pumpingStation.json b/config/pumpingStation.json index e8bf747..621a636 100644 --- a/config/pumpingStation.json +++ b/config/pumpingStation.json @@ -171,7 +171,7 @@ }, "overrides": [] }, - "gridPos": { "h": 10, "w": 4, "x": 0, "y": 6 }, + "gridPos": { "h": 20, "w": 4, "x": 0, "y": 6 }, "id": 16, "options": { "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, "options": { "inlineEditing": false, @@ -227,7 +227,7 @@ "root": { "name": "Basin", "type": "frame", - "placement": { "left": 0, "top": 0, "width": 480, "height": 300 }, + "placement": { "left": 0, "top": 0, "width": 480, "height": 600 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "dark-green" } }, "elements": [ @@ -266,7 +266,7 @@ { "name": "Tank Outline", "type": "rectangle", - "placement": { "top": 20, "left": 80, "width": 200, "height": 240 }, + "placement": { "top": 20, "left": 80, "width": 200, "height": 520 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "#8a8a8a" }, "width": 2 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -397,7 +397,7 @@ { "name": "Footer Floor", "type": "text", - "placement": { "top": 262, "left": 80, "width": 200, "height": 16 }, + "placement": { "top": 542, "left": 80, "width": 200, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "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", "type": "text", - "placement": { "top": 280, "left": 8, "width": 70, "height": 16 }, + "placement": { "top": 562, "left": 8, "width": 70, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "fixed", "fixed": "level" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" } @@ -413,7 +413,7 @@ { "name": "Readout Level", "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" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "field", "fixed": "", "field": "level" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" } @@ -421,7 +421,7 @@ { "name": "Readout Volume Label", "type": "text", - "placement": { "top": 280, "left": 168, "width": 60, "height": 16 }, + "placement": { "top": 562, "left": 168, "width": 60, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "fixed", "fixed": "volume" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" } @@ -429,7 +429,7 @@ { "name": "Readout Volume", "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" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "field", "fixed": "", "field": "volume" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" } @@ -437,7 +437,7 @@ { "name": "Readout Fill Label", "type": "text", - "placement": { "top": 280, "left": 302, "width": 50, "height": 16 }, + "placement": { "top": 562, "left": 302, "width": 50, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "fixed", "fixed": "fill" }, "color": { "fixed": "#888888" }, "size": 10, "align": "right", "valign": "middle" } @@ -445,7 +445,7 @@ { "name": "Readout Fill", "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" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "field", "fixed": "", "field": "volumePercent" }, "color": { "fixed": "#1a1a1a" }, "size": 12, "align": "left", "valign": "middle" } @@ -472,7 +472,7 @@ }, "overrides": [] }, - "gridPos": { "h": 5, "w": 12, "x": 12, "y": 6 }, + "gridPos": { "h": 10, "w": 12, "x": 12, "y": 6 }, "id": 8, "options": { "legend": { "displayMode": "list", "placement": "bottom" }, @@ -497,7 +497,7 @@ }, "overrides": [] }, - "gridPos": { "h": 5, "w": 12, "x": 12, "y": 11 }, + "gridPos": { "h": 10, "w": 12, "x": 12, "y": 16 }, "id": 9, "options": { "legend": { "displayMode": "list", "placement": "bottom" }, @@ -514,7 +514,7 @@ "meta": { "emittedFields": ["volume"] } }, { - "gridPos": { "h": 1, "w": 24, "x": 0, "y": 16 }, + "gridPos": { "h": 1, "w": 24, "x": 0, "y": 26 }, "id": 10, "title": "Flow", "type": "row" @@ -528,7 +528,7 @@ }, "overrides": [] }, - "gridPos": { "h": 8, "w": 12, "x": 0, "y": 17 }, + "gridPos": { "h": 8, "w": 12, "x": 0, "y": 27 }, "id": 11, "options": { "legend": { "displayMode": "list", "placement": "bottom" }, @@ -553,7 +553,7 @@ }, "overrides": [] }, - "gridPos": { "h": 8, "w": 12, "x": 12, "y": 17 }, + "gridPos": { "h": 8, "w": 12, "x": 12, "y": 27 }, "id": 12, "options": { "legend": { "displayMode": "list", "placement": "bottom" }, diff --git a/src/specificClass.js b/src/specificClass.js index 0729a1e..19d9d63 100644 --- a/src/specificClass.js +++ b/src/specificClass.js @@ -189,9 +189,10 @@ class DashboardApi { const dryRunLevel = outflowLevel * (1 + dryRunPct / 100); const highSafetyLevel = overflowLevel * (highPct / 100); - // Canvas tank: rim at y=20px, floor at y=260px (240px tall). Must match - // hard-coded tank rectangle placement in config/pumpingStation.json. - const TANK_TOP = 20, TANK_BOT = 260, TANK_H = TANK_BOT - TANK_TOP; + // Canvas tank: rim at y=20px, floor at y=540px (520px tall). Must match + // hard-coded tank rectangle placement in config/pumpingStation.json + // (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 tyFor = (yLine) => +(yLine - 8).toFixed(2); // centre 16px text on the line