From 533f74fe7e97a73a30e411e40d4e55b5ca49d837 Mon Sep 17 00:00:00 2001 From: znetsixe Date: Thu, 28 May 2026 17:59:58 +0200 Subject: [PATCH] chore(dashboardAPI): bigger rim/floor labels with guaranteed clearance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rim ('rim (X m)') and floor ('floor (0.00 m)') captions now use the same size 14 font as the threshold labels (was size 10 — visibly smaller and hard to read on a high-resolution dashboard). To make room for the larger text while ensuring rim/floor can NEVER overlap the topmost (overflow) or bottommost (outflow) threshold lines at any basin geometry, the tank's vertical margins are bumped from 40 px to 48 px each: TANK_TOP: 40 -> 48, TANK_BOT: 720 -> 712, TANK_H: 680 -> 664 Rim placement: top:1, bottom:95 (4 % tall band at the top, spanning 7.6 -> 38 px). Floor placement: top:95, bottom:1 (4 % tall band at the bottom). The topmost threshold line (overflow at max basinHeight) sits at TANK_TOP=48 px, leaving 10 px clearance above the line. Same for the bottommost (outflow) line. Color: #8a8a8a -> #6a6a6a (slightly darker so it reads at the bigger size). Co-Authored-By: Claude Opus 4.7 (1M context) --- config/pumpingStation.json | 12 ++++++------ src/specificClass.js | 9 ++++++--- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/config/pumpingStation.json b/config/pumpingStation.json index 9edfbb2..dd4c686 100644 --- a/config/pumpingStation.json +++ b/config/pumpingStation.json @@ -235,7 +235,7 @@ "name": "Zone Spill", "type": "rectangle", "constraint": { "horizontal": "scale", "vertical": "scale" }, - "placement": { "top": 5.26, "left": 2.5, "right": 2.5, "bottom": {{zb_spill}} }, + "placement": { "top": 6.32, "left": 2.5, "right": 2.5, "bottom": {{zb_spill}} }, "background": { "color": { "fixed": "rgba(229, 67, 67, 0.18)" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -271,7 +271,7 @@ "name": "Tank Outline", "type": "rectangle", "constraint": { "horizontal": "scale", "vertical": "scale" }, - "placement": { "top": 5.26, "left": 2.5, "right": 2.5, "bottom": 5.27 }, + "placement": { "top": 6.32, "left": 2.5, "right": 2.5, "bottom": 6.32 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "#8a8a8a" }, "width": 2 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -410,19 +410,19 @@ "name": "Header Rim", "type": "text", "constraint": { "horizontal": "scale", "vertical": "scale" }, - "placement": { "top": 2.63, "left": 2.5, "right": 2.5, "bottom": 95.26 }, + "placement": { "top": 1, "left": 2.5, "right": 2.5, "bottom": 95 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "fixed", "fixed": "rim ({{heightBasin}} m)" }, "color": { "fixed": "#8a8a8a" }, "size": 10, "align": "center", "valign": "middle" } + "config": { "text": { "mode": "fixed", "fixed": "rim ({{heightBasin}} m)" }, "color": { "fixed": "#6a6a6a" }, "size": 14, "align": "center", "valign": "middle" } }, { "name": "Footer Floor", "type": "text", "constraint": { "horizontal": "scale", "vertical": "scale" }, - "placement": { "top": 95.26, "left": 2.5, "right": 2.5, "bottom": 2.63 }, + "placement": { "top": 95, "left": 2.5, "right": 2.5, "bottom": 1 }, "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" } + "config": { "text": { "mode": "fixed", "fixed": "floor (0.00 m)" }, "color": { "fixed": "#6a6a6a" }, "size": 14, "align": "center", "valign": "middle" } } ] } diff --git a/src/specificClass.js b/src/specificClass.js index 0185c60..edfc434 100644 --- a/src/specificClass.js +++ b/src/specificClass.js @@ -194,10 +194,13 @@ class DashboardApi { // Grafana interprets placement values as PERCENTAGES of the panel size, // not pixels — so the basin stretches to fill the card at any viewport // and stays centered without letterboxing. - // Tank reference: rim at y=40px (5.26%), floor at y=720px (94.74%), - // centred vertically with 40px top/bottom margins for rim/floor labels. + // Tank reference: rim at y=48px (6.32%), floor at y=712px (93.68%), + // centred vertically with 48px top/bottom margins. Margins are sized + // so the size-14 'rim (X m)' and 'floor (0.00 m)' captions fit with + // ~10 px clearance from the topmost/bottommost threshold line — labels + // can never collide with a line at any basin geometry. const FRAME_W = 400, FRAME_H = 760; - const TANK_TOP = 40, TANK_BOT = 720, TANK_H = TANK_BOT - TANK_TOP; + const TANK_TOP = 48, TANK_BOT = 712, TANK_H = TANK_BOT - TANK_TOP; const yp = (v) => +(v / FRAME_H * 100).toFixed(2); const xp = (v) => +(v / FRAME_W * 100).toFixed(2); const hp = (v) => +(v / FRAME_H * 100).toFixed(2);