From 3cd749bf37f1e784e757cde1d39d8cf77d13447e Mon Sep 17 00:00:00 2001 From: znetsixe Date: Thu, 28 May 2026 10:59:31 +0200 Subject: [PATCH] =?UTF-8?q?chore(dashboardAPI):=20inline=20basin=20labels?= =?UTF-8?q?=20=E2=80=94=20tank=20fills=20card=20width?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tank visual now fills the Canvas card edge-to-edge instead of leaving horizontal padding for external name + value label columns. Each threshold's name and value sit INSIDE the tank near its line ('overflow- Level 3.22 m', 'highSafety 3.16 m', etc.), right-aligned at the tank's inner right edge. Tank rectangle, zone tints, threshold lines, header rim, and footer floor all widen from left:80 width:200 → left:10 width:380 to fill the frame. Label colors darkened slightly (e.g. #e54343 → #c92020) to keep contrast against the semi-transparent zone tint backgrounds. Co-Authored-By: Claude Opus 4.7 (1M context) --- config/pumpingStation.json | 64 +++++++++++++++++++------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/config/pumpingStation.json b/config/pumpingStation.json index d51c82b..e71eeb9 100644 --- a/config/pumpingStation.json +++ b/config/pumpingStation.json @@ -234,7 +234,7 @@ { "name": "Zone Spill", "type": "rectangle", - "placement": { "top": 20, "left": 80, "width": 200, "height": {{h_spill}} }, + "placement": { "top": 20, "left": 10, "width": 380, "height": {{h_spill}} }, "background": { "color": { "fixed": "rgba(229, 67, 67, 0.18)" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -242,7 +242,7 @@ { "name": "Zone HighSafety", "type": "rectangle", - "placement": { "top": {{y_overflow}}, "left": 80, "width": 200, "height": {{h_highSafety}} }, + "placement": { "top": {{y_overflow}}, "left": 10, "width": 380, "height": {{h_highSafety}} }, "background": { "color": { "fixed": "rgba(242, 165, 67, 0.16)" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -250,7 +250,7 @@ { "name": "Zone Operating", "type": "rectangle", - "placement": { "top": {{y_highSafety}}, "left": 80, "width": 200, "height": {{h_operating}} }, + "placement": { "top": {{y_highSafety}}, "left": 10, "width": 380, "height": {{h_operating}} }, "background": { "color": { "fixed": "rgba(95, 179, 122, 0.14)" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -258,7 +258,7 @@ { "name": "Zone Dead", "type": "rectangle", - "placement": { "top": {{y_outflow}}, "left": 80, "width": 200, "height": {{h_dead}} }, + "placement": { "top": {{y_outflow}}, "left": 10, "width": 380, "height": {{h_dead}} }, "background": { "color": { "fixed": "rgba(128, 128, 128, 0.20)" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -266,7 +266,7 @@ { "name": "Tank Outline", "type": "rectangle", - "placement": { "top": 20, "left": 80, "width": 200, "height": 520 }, + "placement": { "top": 20, "left": 10, "width": 380, "height": 520 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "#8a8a8a" }, "width": 2 }, "config": { "text": { "mode": "fixed", "fixed": "" } } @@ -274,122 +274,122 @@ { "name": "Line Overflow", "type": "rectangle", - "placement": { "top": {{y_overflow}}, "left": 80, "width": 200, "height": 1 }, + "placement": { "top": {{y_overflow}}, "left": 10, "width": 380, "height": 1 }, "background": { "color": { "fixed": "#e54343" } }, "border": { "color": { "fixed": "#e54343" }, "width": 0 } }, { "name": "Line HighSafety", "type": "rectangle", - "placement": { "top": {{y_highSafety}}, "left": 80, "width": 200, "height": 1 }, + "placement": { "top": {{y_highSafety}}, "left": 10, "width": 380, "height": 1 }, "background": { "color": { "fixed": "#f2a543" } }, "border": { "color": { "fixed": "#f2a543" }, "width": 0 } }, { "name": "Line Inflow", "type": "rectangle", - "placement": { "top": {{y_inflow}}, "left": 80, "width": 200, "height": 1 }, + "placement": { "top": {{y_inflow}}, "left": 10, "width": 380, "height": 1 }, "background": { "color": { "fixed": "#5fb37a" } }, "border": { "color": { "fixed": "#5fb37a" }, "width": 0 } }, { "name": "Line DryRun", "type": "rectangle", - "placement": { "top": {{y_dryRun}}, "left": 80, "width": 200, "height": 1 }, + "placement": { "top": {{y_dryRun}}, "left": 10, "width": 380, "height": 1 }, "background": { "color": { "fixed": "#5b9bd5" } }, "border": { "color": { "fixed": "#5b9bd5" }, "width": 0 } }, { "name": "Line Outflow", "type": "rectangle", - "placement": { "top": {{y_outflow}}, "left": 80, "width": 200, "height": 1 }, + "placement": { "top": {{y_outflow}}, "left": 10, "width": 380, "height": 1 }, "background": { "color": { "fixed": "#bfbfbf" } }, "border": { "color": { "fixed": "#bfbfbf" }, "width": 0 } }, { "name": "Label Overflow Name", "type": "text", - "placement": { "top": {{ty_overflow}}, "left": 4, "width": 76, "height": 16 }, + "placement": { "top": {{ty_overflow}}, "left": 180, "width": 140, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "fixed", "fixed": "overflowLevel" }, "color": { "fixed": "#e54343" }, "size": 11, "align": "right", "valign": "middle" } + "config": { "text": { "mode": "fixed", "fixed": "overflowLevel" }, "color": { "fixed": "#c92020" }, "size": 11, "align": "right", "valign": "middle" } }, { "name": "Label HighSafety Name", "type": "text", - "placement": { "top": {{ty_highSafety}}, "left": 0, "width": 80, "height": 16 }, + "placement": { "top": {{ty_highSafety}}, "left": 180, "width": 140, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "fixed", "fixed": "highSafe" }, "color": { "fixed": "#f2a543" }, "size": 11, "align": "right", "valign": "middle" } + "config": { "text": { "mode": "fixed", "fixed": "highSafety" }, "color": { "fixed": "#cf7e20" }, "size": 11, "align": "right", "valign": "middle" } }, { "name": "Label Inflow Name", "type": "text", - "placement": { "top": {{ty_inflow}}, "left": 4, "width": 76, "height": 16 }, + "placement": { "top": {{ty_inflow}}, "left": 180, "width": 140, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "fixed", "fixed": "inflowLevel" }, "color": { "fixed": "#5fb37a" }, "size": 11, "align": "right", "valign": "middle" } + "config": { "text": { "mode": "fixed", "fixed": "inflowLevel" }, "color": { "fixed": "#3d8a5a" }, "size": 11, "align": "right", "valign": "middle" } }, { "name": "Label DryRun Name", "type": "text", - "placement": { "top": {{ty_dryRun}}, "left": 4, "width": 76, "height": 16 }, + "placement": { "top": {{ty_dryRun}}, "left": 180, "width": 140, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "fixed", "fixed": "dryRunLevel" }, "color": { "fixed": "#5b9bd5" }, "size": 11, "align": "right", "valign": "middle" } + "config": { "text": { "mode": "fixed", "fixed": "dryRunLevel" }, "color": { "fixed": "#3a76a8" }, "size": 11, "align": "right", "valign": "middle" } }, { "name": "Label Outflow Name", "type": "text", - "placement": { "top": {{ty_outflow}}, "left": 4, "width": 76, "height": 16 }, + "placement": { "top": {{ty_outflow}}, "left": 180, "width": 140, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "fixed", "fixed": "outflowLevel" }, "color": { "fixed": "#bfbfbf" }, "size": 11, "align": "right", "valign": "middle" } + "config": { "text": { "mode": "fixed", "fixed": "outflowLevel" }, "color": { "fixed": "#6a6a6a" }, "size": 11, "align": "right", "valign": "middle" } }, { "name": "Value Overflow", "type": "metric-value", - "placement": { "top": {{ty_overflow}}, "left": 286, "width": 90, "height": 16 }, + "placement": { "top": {{ty_overflow}}, "left": 323, "width": 65, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "field", "fixed": "", "field": "overflowLevel" }, "color": { "fixed": "#e54343" }, "size": 11, "align": "left", "valign": "middle" } + "config": { "text": { "mode": "field", "fixed": "", "field": "overflowLevel" }, "color": { "fixed": "#c92020" }, "size": 11, "align": "left", "valign": "middle" } }, { "name": "Value HighSafety", "type": "metric-value", - "placement": { "top": {{ty_highSafety}}, "left": 286, "width": 90, "height": 16 }, + "placement": { "top": {{ty_highSafety}}, "left": 323, "width": 65, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "field", "fixed": "", "field": "highVolumeSafetyLevel" }, "color": { "fixed": "#f2a543" }, "size": 11, "align": "left", "valign": "middle" } + "config": { "text": { "mode": "field", "fixed": "", "field": "highVolumeSafetyLevel" }, "color": { "fixed": "#cf7e20" }, "size": 11, "align": "left", "valign": "middle" } }, { "name": "Value Inflow", "type": "metric-value", - "placement": { "top": {{ty_inflow}}, "left": 286, "width": 90, "height": 16 }, + "placement": { "top": {{ty_inflow}}, "left": 323, "width": 65, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "field", "fixed": "", "field": "inflowLevel" }, "color": { "fixed": "#5fb37a" }, "size": 11, "align": "left", "valign": "middle" } + "config": { "text": { "mode": "field", "fixed": "", "field": "inflowLevel" }, "color": { "fixed": "#3d8a5a" }, "size": 11, "align": "left", "valign": "middle" } }, { "name": "Value DryRun", "type": "metric-value", - "placement": { "top": {{ty_dryRun}}, "left": 286, "width": 90, "height": 16 }, + "placement": { "top": {{ty_dryRun}}, "left": 323, "width": 65, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "field", "fixed": "", "field": "dryRunLevel" }, "color": { "fixed": "#5b9bd5" }, "size": 11, "align": "left", "valign": "middle" } + "config": { "text": { "mode": "field", "fixed": "", "field": "dryRunLevel" }, "color": { "fixed": "#3a76a8" }, "size": 11, "align": "left", "valign": "middle" } }, { "name": "Value Outflow", "type": "metric-value", - "placement": { "top": {{ty_outflow}}, "left": 286, "width": 90, "height": 16 }, + "placement": { "top": {{ty_outflow}}, "left": 323, "width": 65, "height": 16 }, "background": { "color": { "fixed": "transparent" } }, "border": { "color": { "fixed": "transparent" }, "width": 0 }, - "config": { "text": { "mode": "field", "fixed": "", "field": "outflowLevel" }, "color": { "fixed": "#bfbfbf" }, "size": 11, "align": "left", "valign": "middle" } + "config": { "text": { "mode": "field", "fixed": "", "field": "outflowLevel" }, "color": { "fixed": "#6a6a6a" }, "size": 11, "align": "left", "valign": "middle" } }, { "name": "Header Rim", "type": "text", - "placement": { "top": 2, "left": 80, "width": 200, "height": 16 }, + "placement": { "top": 2, "left": 10, "width": 380, "height": 16 }, "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" } @@ -397,7 +397,7 @@ { "name": "Footer Floor", "type": "text", - "placement": { "top": 542, "left": 80, "width": 200, "height": 16 }, + "placement": { "top": 542, "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" }