From 8a26e177809592d3c3c32a0410f7bd1b571ef7a1 Mon Sep 17 00:00:00 2001 From: znetsixe Date: Thu, 28 May 2026 11:12:01 +0200 Subject: [PATCH] chore(dashboardAPI): Tank Layout fills card vertically too MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Canvas frame height 600 → 760 px and tank rectangle height 520 → 680 px so the visual fills the card aspect (taller than wide). Floor footer moves to y=702 (was 542) to stay just below the new tank floor. In-canvas bottom readouts (level / volume / fill mini-stats) removed — they were redundant with the Status row Level stat, the bar gauge, and the Level/Volume timeseries, and were getting clipped below the card's visible area anyway. The basin canvas now shows only basin-structure information (geometry, zones, thresholds). Co-Authored-By: Claude Opus 4.7 (1M context) --- config/pumpingStation.json | 54 +++----------------------------------- src/specificClass.js | 8 +++--- 2 files changed, 8 insertions(+), 54 deletions(-) diff --git a/config/pumpingStation.json b/config/pumpingStation.json index e71eeb9..5f655d8 100644 --- a/config/pumpingStation.json +++ b/config/pumpingStation.json @@ -227,7 +227,7 @@ "root": { "name": "Basin", "type": "frame", - "placement": { "left": 0, "top": 0, "width": 400, "height": 600 }, + "placement": { "left": 0, "top": 0, "width": 400, "height": 760 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "dark-green" } }, "elements": [ @@ -266,7 +266,7 @@ { "name": "Tank Outline", "type": "rectangle", - "placement": { "top": 20, "left": 10, "width": 380, "height": 520 }, + "placement": { "top": 20, "left": 10, "width": 380, "height": 680 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "#8a8a8a" }, "width": 2 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -397,58 +397,10 @@ { "name": "Footer Floor", "type": "text", - "placement": { "top": 542, "left": 10, "width": 380, "height": 16 }, + "placement": { "top": 702, "left": 10, "width": 380, "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" } - }, - { - "name": "Readout Level Label", - "type": "text", - "placement": { "top": 562, "left": 4, "width": 50, "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" } - }, - { - "name": "Readout Level", - "type": "metric-value", - "placement": { "top": 562, "left": 56, "width": 80, "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" } - }, - { - "name": "Readout Volume Label", - "type": "text", - "placement": { "top": 562, "left": 140, "width": 50, "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" } - }, - { - "name": "Readout Volume", - "type": "metric-value", - "placement": { "top": 562, "left": 192, "width": 80, "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" } - }, - { - "name": "Readout Fill Label", - "type": "text", - "placement": { "top": 562, "left": 276, "width": 40, "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" } - }, - { - "name": "Readout Fill", - "type": "metric-value", - "placement": { "top": 562, "left": 318, "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" } } ] } diff --git a/src/specificClass.js b/src/specificClass.js index 19d9d63..87f7a33 100644 --- a/src/specificClass.js +++ b/src/specificClass.js @@ -189,10 +189,12 @@ class DashboardApi { const dryRunLevel = outflowLevel * (1 + dryRunPct / 100); const highSafetyLevel = overflowLevel * (highPct / 100); - // Canvas tank: rim at y=20px, floor at y=540px (520px tall). Must match + // Canvas tank: rim at y=20px, floor at y=700px (680px 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; + // (basin row is h:20 grid rows; canvas root frame is 400x760 px — taller + // than wide to match the card's aspect ratio so the tank fills the card + // vertically with no letterboxing). + const TANK_TOP = 20, TANK_BOT = 700, 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