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

chore(dashboardAPI): bigger rim/floor labels with guaranteed clearance

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
znetsixe
2026-05-28 17:59:58 +02:00
parent a16f526964
commit 533f74fe7e
2 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
config/pumpingStation.json
View File

@@ -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" }
}
]
}

9
src/specificClass.js
View File

@@ -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);