node-red-contrib-senec-cloud-v2 0.2.0 → 0.2.2

package/dist/lib/senec-image-renderer.js

@@ -0,0 +1,872 @@
+"use strict";
+/**
+ * Energy Dashboard Image Renderer (PNG)
+ *
+ * Renders the 4-card, 16:9 energy dashboard (as specified in
+ * docs/00-input/ux/) to a PNG buffer using the pure-JavaScript
+ * `pureimage` library (with optional `canvas` acceleration when
+ * available).
+ *
+ * The layout mirrors the HTML renderer (src/lib/dashboard-html-renderer.ts)
+ * and consumes the same shared DashboardModel, which merges SENEC energy
+ * data (input 1) with Weather data (input 2).
+ *
+ * Because pureimage cannot render emoji glyphs, weather / autarky icons
+ * are drawn as simple vector shapes.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SenecImageRenderer = void 0;
+const dashboard_layout_1 = require("./dashboard-layout");
+class SenecImageRenderer {
+    /**
+     * @param width  Target width in pixels (default 1600, the reference width).
+     * @param height Target height in pixels. If omitted, it is derived from
+     *               the width to preserve the 16:9 reference aspect ratio.
+     */
+    constructor(width = 1600, height) {
+        /** Reference to the loaded pureimage module (when that engine is used). */
+        this.pureImage = null;
+        this.width = width;
+        this.height = height ?? Math.round(width / dashboard_layout_1.DASHBOARD_ASPECT_RATIO);
+        this.fontName = 'SenecSans';
+    }
+    /**
+     * Render the dashboard for the given SENEC + weather data.
+     *
+     * Accepts either a pre-built DashboardModel, or a SenecData object with
+     * an optional WeatherData argument (which are merged internally).
+     *
+     * @returns PNG image as a Buffer.
+     */
+    async render(data, weather) {
+        const model = this.toModel(data, weather);
+        const { canvas, ctx, encode, engine } = this.createCanvas();
+        if (engine === 'pureimage') {
+            await this.ensurePureImageFont();
+        }
+        const restoreWarn = this.suppressPureImagePathWarnings();
+        try {
+            this.drawDashboard(ctx, model);
+        }
+        finally {
+            restoreWarn();
+        }
+        return encode(canvas);
+    }
+    toModel(data, weather) {
+        if (this.isDashboardModel(data)) {
+            return data;
+        }
+        return (0, dashboard_layout_1.buildDashboardModel)(data, weather ?? null);
+    }
+    isDashboardModel(value) {
+        return (value &&
+            typeof value === 'object' &&
+            'current' in value &&
+            'today' in value &&
+            'autarky' in value);
+    }
+    /**
+     * Temporarily filter pureimage's "can't project the same paths" warnings
+     * from console.warn. Returns a function that restores the original.
+     */
+    suppressPureImagePathWarnings() {
+        const original = console.warn;
+        console.warn = (...args) => {
+            if (typeof args[0] === 'string' && args[0].includes("can't project the same paths")) {
+                return;
+            }
+            original.apply(console, args);
+        };
+        return () => {
+            console.warn = original;
+        };
+    }
+    // --------------------------------------------------------------------
+    // Top-level layout
+    // --------------------------------------------------------------------
+    drawDashboard(ctx, model) {
+        // Page + frame background.
+        ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.page;
+        ctx.fillRect(0, 0, this.width, this.height);
+        const outer = this.clamp(10, this.u() * 1.5, 24);
+        const gap = outer;
+        // Reserve a slim status bar at the very bottom.
+        const statusH = this.clamp(14, this.u() * 1.8, 30);
+        const frame = {
+            x: outer,
+            y: outer,
+            w: this.width - 2 * outer,
+            h: this.height - 2 * outer - statusH,
+        };
+        ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.white;
+        ctx.fillRect(frame.x, frame.y, frame.w, frame.h);
+        // 2x2 grid of cards inside the frame.
+        const cardW = (frame.w - gap) / 2;
+        const cardH = (frame.h - gap) / 2;
+        const cards = [
+            { x: frame.x, y: frame.y, w: cardW, h: cardH }, // top-left  Aktuell
+            { x: frame.x + cardW + gap, y: frame.y, w: cardW, h: cardH }, // top-right Heute
+            { x: frame.x, y: frame.y + cardH + gap, w: cardW, h: cardH }, // bot-left  Autarkie
+            { x: frame.x + cardW + gap, y: frame.y + cardH + gap, w: cardW, h: cardH }, // bot-right Wetter
+        ];
+        this.drawFlowCard(ctx, cards[0], dashboard_layout_1.CARD_TITLES.current, model.current, false);
+        this.drawFlowCard(ctx, cards[1], dashboard_layout_1.CARD_TITLES.today, model.today, true);
+        this.drawAutarkyCard(ctx, cards[2], model);
+        this.drawWeatherCard(ctx, cards[3], model);
+        // Status line along the bottom.
+        this.drawStatusLine(ctx, { x: frame.x, y: frame.y + frame.h + gap * 0.2, w: frame.w, h: statusH }, model);
+    }
+    drawStatusLine(ctx, r, model) {
+        const fontSize = Math.max(9, r.h * 0.55);
+        const dotR = r.h * 0.16;
+        const cy = r.y + r.h / 2;
+        // Render right-aligned chips: SENEC then Wetter-API.
+        const chips = [
+            { label: 'SENEC', status: model.status.senec },
+            { label: 'Wetter-API', status: model.status.weather },
+        ];
+        ctx.textBaseline = 'middle';
+        ctx.textAlign = 'left';
+        this.setFont(ctx, fontSize, false);
+        // Measure each chip so we can lay them out from the right edge.
+        const gap = r.h * 0.9;
+        const chipTexts = chips.map((c) => {
+            const state = c.status.ok ? 'OK' : c.status.fallback ? 'Fallback' : 'Fehler';
+            const time = this.shortTime(c.status.timestamp);
+            return { ...c, text: `${c.label}: ${state} ${time}` };
+        });
+        // Compute total width.
+        const widths = chipTexts.map((c) => dotR * 3 + this.textWidth(ctx, c.text));
+        const total = widths.reduce((a, b) => a + b, 0) + gap * (chipTexts.length - 1);
+        let x = r.x + r.w - total;
+        for (let i = 0; i < chipTexts.length; i++) {
+            const c = chipTexts[i];
+            const dotColor = c.status.ok
+                ? dashboard_layout_1.DASHBOARD_PALETTE.green
+                : c.status.fallback
+                    ? dashboard_layout_1.DASHBOARD_PALETTE.orange
+                    : '#e5484d';
+            ctx.beginPath();
+            ctx.arc(x + dotR, cy, dotR, 0, Math.PI * 2);
+            ctx.fillStyle = dotColor;
+            ctx.fill();
+            ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.muted;
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'middle';
+            this.setFont(ctx, fontSize, false);
+            this.text(ctx, c.text, x + dotR * 3, cy);
+            x += widths[i] + gap;
+        }
+    }
+    shortTime(iso) {
+        if (!iso) {
+            return '--:--';
+        }
+        const d = new Date(iso);
+        if (isNaN(d.getTime())) {
+            return '--:--';
+        }
+        const hh = String(d.getHours()).padStart(2, '0');
+        const mm = String(d.getMinutes()).padStart(2, '0');
+        return `${hh}:${mm}`;
+    }
+    drawCardShell(ctx, r, title) {
+        const radius = this.clamp(10, this.u() * 1.125, 18);
+        this.roundedRect(ctx, r.x, r.y, r.w, r.h, radius);
+        ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.white;
+        ctx.fill();
+        ctx.strokeStyle = dashboard_layout_1.DASHBOARD_PALETTE.border;
+        ctx.lineWidth = this.scaleStroke(1);
+        ctx.stroke();
+        const headerH = this.clamp(30, this.u() * 2.875, 46);
+        const titleFont = this.clamp(16, this.u() * 1.875, 30);
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.blue;
+        this.setFont(ctx, titleFont, true);
+        this.text(ctx, title, r.x + r.w / 2, r.y + headerH / 2 + this.u() * 0.6);
+        const padX = this.clamp(10, this.u() * 1.25, 20);
+        const padTop = this.clamp(10, this.u() * 1.125, 18);
+        const padBottom = this.clamp(10, this.u() * 1.25, 20);
+        // Return the inner "flow-area" rect below the header.
+        return {
+            x: r.x + padX,
+            y: r.y + padTop + headerH,
+            w: r.w - 2 * padX,
+            h: r.h - padTop - headerH - padBottom,
+        };
+    }
+    // --------------------------------------------------------------------
+    // Energy-flow cards (Aktuell / Heute)
+    // --------------------------------------------------------------------
+    drawFlowCard(ctx, card, title, values, isToday) {
+        const area = this.drawCardShell(ctx, card, title);
+        // Node diameter: 7% of dashboard width, clamped, mirrors --node-d.
+        const nodeD = this.clamp(58, this.u() * 7.0, 112);
+        const radius = nodeD / 2;
+        const center = this.flowPoint(area, 'hub');
+        const hubR = (nodeD * dashboard_layout_1.NODE_RATIOS.hubDiameter) / 2;
+        // 1) Connectors (behind nodes).
+        this.drawConnector(ctx, this.flowPoint(area, 'solar'), center, dashboard_layout_1.DASHBOARD_PALETTE.solar, nodeD);
+        this.drawConnector(ctx, this.flowPoint(area, 'grid'), center, dashboard_layout_1.DASHBOARD_PALETTE.gray, nodeD);
+        this.drawConnector(ctx, this.flowPoint(area, 'battery'), center, dashboard_layout_1.DASHBOARD_PALETTE.battery, nodeD);
+        this.drawConnector(ctx, this.flowPoint(area, 'wallbox'), center, dashboard_layout_1.DASHBOARD_PALETTE.orange, nodeD);
+        this.drawConnector(ctx, this.flowPoint(area, 'consumption'), center, dashboard_layout_1.DASHBOARD_PALETTE.orange, nodeD);
+        // 2) Energy nodes.
+        this.drawEnergyNode(ctx, this.flowPoint(area, 'solar'), radius, dashboard_layout_1.DASHBOARD_PALETTE.solar, dashboard_layout_1.DASHBOARD_PALETTE.solarHi, values.solar, isToday);
+        this.drawEnergyNode(ctx, this.flowPoint(area, 'grid'), radius, dashboard_layout_1.DASHBOARD_PALETTE.gray, dashboard_layout_1.DASHBOARD_PALETTE.grayHi, values.grid, isToday);
+        this.drawEnergyNode(ctx, this.flowPoint(area, 'battery'), radius, dashboard_layout_1.DASHBOARD_PALETTE.battery, dashboard_layout_1.DASHBOARD_PALETTE.batteryHi, values.battery, isToday);
+        this.drawEnergyNode(ctx, this.flowPoint(area, 'wallbox'), radius, dashboard_layout_1.DASHBOARD_PALETTE.orange, dashboard_layout_1.DASHBOARD_PALETTE.orangeHi, values.wallbox, isToday);
+        this.drawEnergyNode(ctx, this.flowPoint(area, 'consumption'), radius, dashboard_layout_1.DASHBOARD_PALETTE.orange, dashboard_layout_1.DASHBOARD_PALETTE.orangeHi, values.consumption, isToday);
+        // 3) Center hub on top.
+        ctx.beginPath();
+        ctx.arc(center.x, center.y, hubR, 0, Math.PI * 2);
+        ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.white;
+        ctx.fill();
+        ctx.strokeStyle = dashboard_layout_1.DASHBOARD_PALETTE.border;
+        ctx.lineWidth = this.scaleStroke(1);
+        ctx.stroke();
+    }
+    flowPoint(area, id) {
+        const p = dashboard_layout_1.FLOW_POSITIONS[id];
+        return { x: area.x + p.x * area.w, y: area.y + p.y * area.h };
+    }
+    drawConnector(ctx, from, to, color, nodeD) {
+        ctx.lineCap = 'round';
+        ctx.lineWidth = nodeD * dashboard_layout_1.NODE_RATIOS.connectorThickness;
+        ctx.globalAlpha = 0.55;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+        ctx.lineCap = 'butt';
+    }
+    drawEnergyNode(ctx, c, radius, color, colorHi, v, isToday) {
+        // Approximate the radial-gradient highlight with a base fill + a small
+        // lighter accent circle offset toward the top-left.
+        ctx.beginPath();
+        ctx.arc(c.x, c.y, radius, 0, Math.PI * 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+        // Subtle top-left highlight approximating the CSS radial-gradient.
+        ctx.beginPath();
+        ctx.arc(c.x - radius * 0.32, c.y - radius * 0.38, radius * 0.5, 0, Math.PI * 2);
+        ctx.globalAlpha = 0.28;
+        ctx.fillStyle = colorHi;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+        const nodeD = radius * 2;
+        const labelSize = nodeD * dashboard_layout_1.TEXT_RATIOS.label;
+        const unitSize = nodeD * dashboard_layout_1.TEXT_RATIOS.unit;
+        const hintSize = nodeD * dashboard_layout_1.TEXT_RATIOS.hint;
+        const dual = isToday && v.dual;
+        const valueText = dual ? v.dual : v.value;
+        // Slightly smaller value than the raw ratio so it clears the label above.
+        const valueSize = dual
+            ? nodeD * dashboard_layout_1.TEXT_RATIOS.multiValue * 0.96
+            : nodeD * dashboard_layout_1.TEXT_RATIOS.value * 0.94;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.white;
+        // Vertical stack: label, value, (hint), unit — centered on the circle.
+        //
+        // Text "line height" is smaller than the nominal font size (glyph cap
+        // height is roughly 70% of the em box). Using the raw font size as the
+        // per-line height overestimates the block and pushes the visual centre
+        // downward, so we use an effective line height and centre the block of
+        // line centres precisely on c.y.
+        const gap = radius * 0.12;
+        // A little extra breathing room specifically below the label so the large
+        // value does not visually touch it.
+        const labelGap = radius * 0.2;
+        const lineH = (px) => px * 0.72;
+        const lines = [labelSize, valueSize];
+        if (dual) {
+            lines.push(hintSize);
+        }
+        lines.push(unitSize);
+        // Gap that precedes each line (index 0 has none).
+        const gapBefore = (index) => index === 0 ? 0 : index === 1 ? labelGap : gap;
+        // Total height = sum of effective line heights + the gaps between them.
+        const blockH = lines.reduce((sum, px) => sum + lineH(px), 0) +
+            lines.reduce((sum, _px, i) => sum + gapBefore(i), 0);
+        // Centre the block on c.y, then nudge the whole stack slightly downward
+        // (~15% of a line) so the value sits clearly below the label.
+        let top = c.y - blockH / 2 + lineH(valueSize) * 0.15;
+        let idx = 0;
+        const centreOf = (px) => {
+            top += gapBefore(idx);
+            const cy = top + lineH(px) / 2;
+            top += lineH(px);
+            idx += 1;
+            return cy;
+        };
+        const labelY = centreOf(labelSize);
+        const valueY = centreOf(valueSize);
+        const hintY = dual ? centreOf(hintSize) : 0;
+        const unitY = centreOf(unitSize);
+        this.setFont(ctx, labelSize, false);
+        this.fitText(ctx, v.label, c.x, labelY, this.chordWidth(radius, labelY - c.y), labelSize);
+        this.setFont(ctx, valueSize, true);
+        this.fitText(ctx, valueText, c.x, valueY, this.chordWidth(radius, valueY - c.y), valueSize);
+        if (dual) {
+            this.setFont(ctx, hintSize, false);
+            this.fitText(ctx, v.hint || '', c.x, hintY, this.chordWidth(radius, hintY - c.y), hintSize);
+        }
+        this.setFont(ctx, unitSize, false);
+        this.fitText(ctx, v.unit, c.x, unitY, this.chordWidth(radius, unitY - c.y), unitSize);
+    }
+    // --------------------------------------------------------------------
+    // Autarky card
+    // --------------------------------------------------------------------
+    drawAutarkyCard(ctx, card, model) {
+        const area = this.drawCardShell(ctx, card, dashboard_layout_1.CARD_TITLES.autarky);
+        const a = model.autarky;
+        const kpis = [
+            { label: 'Heute', percent: a.todayPercent, color: dashboard_layout_1.DASHBOARD_PALETTE.green, icon: 'leaf' },
+            { label: 'Aktuell', percent: a.currentPercent, color: dashboard_layout_1.DASHBOARD_PALETTE.green, icon: 'bolt' },
+            { label: 'Speicherstatus', percent: a.batterySocPercent, color: dashboard_layout_1.DASHBOARD_PALETTE.statusBlue, icon: 'battery' },
+        ];
+        const colW = area.w / 3;
+        const ringD = this.clamp(78, this.u() * 8.0, 128);
+        const nodeD = this.clamp(58, this.u() * 7.0, 112);
+        const labelSize = nodeD * 0.168;
+        const percentSize = nodeD * 0.375;
+        kpis.forEach((kpi, i) => {
+            const cx = area.x + colW * (i + 0.5);
+            const topY = area.y + area.h * 0.06;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.blue;
+            this.setFont(ctx, labelSize, true);
+            this.text(ctx, kpi.label, cx, topY + labelSize / 2);
+            const percentY = topY + labelSize + percentSize * 0.7;
+            ctx.fillStyle = kpi.color;
+            this.setFont(ctx, percentSize, true);
+            this.text(ctx, `${kpi.percent}%`, cx, percentY);
+            const ringCy = area.y + area.h - ringD / 2 - area.h * 0.04;
+            this.drawRing(ctx, cx, ringCy, ringD / 2, kpi.percent, kpi.color, kpi.icon);
+        });
+    }
+    drawRing(ctx, cx, cy, radius, percent, color, icon) {
+        const stroke = radius * 0.21;
+        const start = -Math.PI / 2;
+        const end = start + (Math.min(100, Math.max(0, percent)) / 100) * Math.PI * 2;
+        // Background track.
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius - stroke / 2, 0, Math.PI * 2);
+        ctx.strokeStyle = dashboard_layout_1.DASHBOARD_PALETTE.ringBg;
+        ctx.lineWidth = stroke;
+        ctx.lineCap = 'butt';
+        ctx.stroke();
+        // Progress arc.
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius - stroke / 2, start, end);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = stroke;
+        ctx.lineCap = 'round';
+        ctx.stroke();
+        ctx.lineCap = 'butt';
+        this.drawGlyph(ctx, icon, cx, cy, radius * 0.5, color);
+    }
+    // --------------------------------------------------------------------
+    // Weather card
+    // --------------------------------------------------------------------
+    drawWeatherCard(ctx, card, model) {
+        const area = this.drawCardShell(ctx, card, dashboard_layout_1.CARD_TITLES.weather);
+        const w = model.weather;
+        const nodeD = this.clamp(58, this.u() * 7.0, 112);
+        if (!w) {
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.muted;
+            this.setFont(ctx, nodeD * 0.22, false);
+            this.text(ctx, 'Keine Wetterdaten', area.x + area.w / 2, area.y + area.h / 2);
+            return;
+        }
+        // Location label (top-right of the weather area). Rendered small and
+        // clear of the metrics block below.
+        if (w.location) {
+            ctx.textAlign = 'right';
+            ctx.textBaseline = 'top';
+            ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.muted;
+            this.setFont(ctx, nodeD * 0.13, false);
+            this.text(ctx, w.location, area.x + area.w, area.y - nodeD * 0.02);
+        }
+        // Top-left: current condition icon + temperature.
+        const iconSize = nodeD * 0.72;
+        const iconCx = area.x + area.w * 0.13;
+        const iconCy = area.y + area.h * 0.24;
+        this.drawWeatherGlyph(ctx, w.icon, iconCx, iconCy, iconSize / 2);
+        const tempSize = nodeD * 0.5;
+        const condSize = nodeD * 0.18;
+        const tempX = area.x + area.w * 0.28;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.main;
+        this.setFont(ctx, tempSize, false);
+        // Sit the temperature slightly above the icon centre.
+        this.text(ctx, `${w.temperature}°C`, tempX, iconCy - tempSize * 0.18);
+        ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.muted;
+        this.setFont(ctx, condSize, false);
+        // Place condition clear of the temperature glyphs' descenders.
+        this.text(ctx, w.condition, tempX, iconCy + tempSize * 0.5 + condSize * 0.75);
+        // Top-right: metrics. Each row stacks value over sublabel with a
+        // dedicated gap; rows are spaced so sublabels never touch the next row.
+        const metricX = area.x + area.w * 0.6;
+        const metricLabelX = metricX + nodeD * 0.3;
+        const mvSize = nodeD * 0.21;
+        const mlSize = nodeD * 0.115;
+        const metrics = [
+            { icon: 'temp', mv: `${w.tempMax}° / ${w.tempMin}°`, ml: 'max / min' },
+            { icon: 'drop', mv: `${w.humidity}%`, ml: 'Luftfeuchte' },
+            { icon: 'wind', mv: `${w.windSpeed} km/h`, ml: w.windDirection },
+        ];
+        // Distribute three rows across the upper ~45% of the card.
+        const mTop = area.y + area.h * 0.09;
+        const mRowH = nodeD * 0.4;
+        for (let i = 0; i < metrics.length; i++) {
+            const m = metrics[i];
+            const rowCy = mTop + mRowH * i + mRowH / 2;
+            this.drawGlyph(ctx, m.icon, metricX, rowCy - mvSize * 0.15, nodeD * 0.1, dashboard_layout_1.DASHBOARD_PALETTE.blue);
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.main;
+            this.setFont(ctx, mvSize, true);
+            this.text(ctx, m.mv, metricLabelX, rowCy - mvSize * 0.42);
+            ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.muted;
+            this.setFont(ctx, mlSize, false);
+            this.text(ctx, m.ml, metricLabelX, rowCy + mvSize * 0.5 + mlSize * 0.2);
+        }
+        // Bottom: 5-day forecast row.
+        const forecast = w.forecast.slice(0, 5);
+        if (forecast.length > 0) {
+            const fY = area.y + area.h * 0.6;
+            const fH = area.h * 0.4;
+            // Separator line.
+            ctx.strokeStyle = '#edf0f4';
+            ctx.lineWidth = this.scaleStroke(1);
+            ctx.beginPath();
+            ctx.moveTo(area.x, fY);
+            ctx.lineTo(area.x + area.w, fY);
+            ctx.stroke();
+            const colW = area.w / forecast.length;
+            const daySize = nodeD * 0.16;
+            const icoSize = nodeD * 0.3;
+            const tempSize = nodeD * 0.16;
+            forecast.forEach((f, i) => {
+                const cx = area.x + colW * (i + 0.5);
+                if (i > 0) {
+                    ctx.strokeStyle = '#edf0f4';
+                    ctx.lineWidth = this.scaleStroke(1);
+                    ctx.beginPath();
+                    ctx.moveTo(area.x + colW * i, fY + fH * 0.1);
+                    ctx.lineTo(area.x + colW * i, fY + fH * 0.9);
+                    ctx.stroke();
+                }
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.blue;
+                this.setFont(ctx, daySize, true);
+                this.text(ctx, f.day, cx, fY + fH * 0.22);
+                this.drawWeatherGlyph(ctx, f.icon, cx, fY + fH * 0.52, icoSize / 2);
+                ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.muted;
+                this.setFont(ctx, tempSize, true);
+                this.text(ctx, `${f.temp}°`, cx, fY + fH * 0.82);
+            });
+        }
+    }
+    // --------------------------------------------------------------------
+    // Icon glyphs (drawn as vectors; pureimage cannot render emoji)
+    // --------------------------------------------------------------------
+    drawGlyph(ctx, kind, cx, cy, r, color) {
+        ctx.fillStyle = color;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = Math.max(1, r * 0.22);
+        ctx.lineCap = 'round';
+        switch (kind) {
+            case 'leaf': {
+                ctx.beginPath();
+                ctx.moveTo(cx - r, cy + r);
+                ctx.quadraticCurveTo(cx - r, cy - r, cx + r, cy - r);
+                ctx.quadraticCurveTo(cx + r, cy + r, cx - r, cy + r);
+                ctx.closePath();
+                ctx.fill();
+                break;
+            }
+            case 'bolt': {
+                ctx.beginPath();
+                ctx.moveTo(cx + r * 0.2, cy - r);
+                ctx.lineTo(cx - r * 0.5, cy + r * 0.1);
+                ctx.lineTo(cx, cy + r * 0.1);
+                ctx.lineTo(cx - r * 0.2, cy + r);
+                ctx.lineTo(cx + r * 0.5, cy - r * 0.1);
+                ctx.lineTo(cx, cy - r * 0.1);
+                ctx.closePath();
+                ctx.fill();
+                break;
+            }
+            case 'battery': {
+                ctx.beginPath();
+                this.rectPath(ctx, cx - r * 0.8, cy - r * 0.5, r * 1.6, r);
+                ctx.fill();
+                ctx.beginPath();
+                this.rectPath(ctx, cx + r * 0.8, cy - r * 0.2, r * 0.2, r * 0.4);
+                ctx.fill();
+                break;
+            }
+            case 'temp': {
+                ctx.beginPath();
+                ctx.arc(cx, cy + r * 0.5, r * 0.5, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.beginPath();
+                ctx.moveTo(cx, cy - r);
+                ctx.lineTo(cx, cy + r * 0.3);
+                ctx.stroke();
+                break;
+            }
+            case 'drop': {
+                ctx.beginPath();
+                ctx.moveTo(cx, cy - r);
+                ctx.quadraticCurveTo(cx + r, cy + r * 0.3, cx, cy + r);
+                ctx.quadraticCurveTo(cx - r, cy + r * 0.3, cx, cy - r);
+                ctx.closePath();
+                ctx.fill();
+                break;
+            }
+            case 'wind': {
+                ctx.beginPath();
+                ctx.moveTo(cx - r, cy - r * 0.4);
+                ctx.lineTo(cx + r * 0.6, cy - r * 0.4);
+                ctx.moveTo(cx - r, cy + r * 0.2);
+                ctx.lineTo(cx + r, cy + r * 0.2);
+                ctx.moveTo(cx - r, cy + r * 0.8);
+                ctx.lineTo(cx + r * 0.3, cy + r * 0.8);
+                ctx.stroke();
+                break;
+            }
+        }
+        ctx.lineCap = 'butt';
+    }
+    /**
+     * Map a weather emoji to a simple vector sun/cloud/rain glyph.
+     */
+    drawWeatherGlyph(ctx, emoji, cx, cy, r) {
+        const isSun = ['☀️', '🌤️'].includes(emoji);
+        const isRain = ['🌧️', '🌦️', '⛈️'].includes(emoji);
+        const isSnow = ['🌨️', '❄️'].includes(emoji);
+        if (isSun) {
+            // Sun rays + disc.
+            ctx.strokeStyle = dashboard_layout_1.DASHBOARD_PALETTE.solar;
+            ctx.lineWidth = Math.max(1, r * 0.12);
+            ctx.lineCap = 'round';
+            for (let i = 0; i < 8; i++) {
+                const a = (i / 8) * Math.PI * 2;
+                ctx.beginPath();
+                ctx.moveTo(cx + Math.cos(a) * r * 0.7, cy + Math.sin(a) * r * 0.7);
+                ctx.lineTo(cx + Math.cos(a) * r, cy + Math.sin(a) * r);
+                ctx.stroke();
+            }
+            ctx.lineCap = 'butt';
+            ctx.beginPath();
+            ctx.arc(cx, cy, r * 0.5, 0, Math.PI * 2);
+            ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.solarHi;
+            ctx.fill();
+        }
+        // Cloud (drawn for most conditions except pure sun).
+        if (!isSun || emoji === '🌤️') {
+            const cloudColor = '#c7d0dc';
+            ctx.fillStyle = cloudColor;
+            ctx.beginPath();
+            ctx.arc(cx - r * 0.4, cy + r * 0.1, r * 0.45, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(cx + r * 0.2, cy - r * 0.1, r * 0.55, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(cx + r * 0.6, cy + r * 0.15, r * 0.4, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            this.rectPath(ctx, cx - r * 0.8, cy + r * 0.1, r * 1.6, r * 0.4);
+            ctx.fill();
+        }
+        if (isRain) {
+            ctx.strokeStyle = dashboard_layout_1.DASHBOARD_PALETTE.statusBlue;
+            ctx.lineWidth = Math.max(1, r * 0.14);
+            ctx.lineCap = 'round';
+            for (let i = -1; i <= 1; i++) {
+                ctx.beginPath();
+                ctx.moveTo(cx + i * r * 0.4, cy + r * 0.5);
+                ctx.lineTo(cx + i * r * 0.4 - r * 0.15, cy + r * 0.9);
+                ctx.stroke();
+            }
+            ctx.lineCap = 'butt';
+        }
+        if (isSnow) {
+            ctx.fillStyle = dashboard_layout_1.DASHBOARD_PALETTE.statusBlue;
+            for (let i = -1; i <= 1; i++) {
+                ctx.beginPath();
+                ctx.arc(cx + i * r * 0.4, cy + r * 0.7, r * 0.1, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+    }
+    rectPath(ctx, x, y, w, h) {
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + w, y);
+        ctx.lineTo(x + w, y + h);
+        ctx.lineTo(x, y + h);
+        ctx.closePath();
+    }
+    // --------------------------------------------------------------------
+    // Canvas / library abstraction
+    // --------------------------------------------------------------------
+    createCanvas() {
+        // Prefer native canvas (faster) when installed, otherwise pureimage.
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const Canvas = require('canvas');
+            const canvas = Canvas.createCanvas(this.width, this.height);
+            const ctx = canvas.getContext('2d');
+            this.enableAntialiasing(ctx);
+            const encode = async (c) => c.toBuffer('image/png');
+            return { canvas, ctx, encode, engine: 'canvas' };
+        }
+        catch {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const PureImage = require('pureimage');
+            this.pureImage = PureImage;
+            const canvas = PureImage.make(this.width, this.height);
+            const ctx = canvas.getContext('2d');
+            this.enableAntialiasing(ctx);
+            const encode = (c) => this.encodePureImage(PureImage, c);
+            return { canvas, ctx, encode, engine: 'pureimage' };
+        }
+    }
+    /**
+     * Turn on antialiasing / image smoothing for whichever engine is active.
+     * Both node-canvas and pureimage expose `imageSmoothingEnabled`; pureimage
+     * also honours an internal `_settings.antialias` flag for paths and text.
+     */
+    enableAntialiasing(ctx) {
+        try {
+            ctx.imageSmoothingEnabled = true;
+            if ('imageSmoothingQuality' in ctx) {
+                ctx.imageSmoothingQuality = 'high';
+            }
+            // pureimage-specific antialias toggle (covers path + glyph edges).
+            if ('_settings' in ctx && ctx._settings) {
+                ctx._settings.antialias = true;
+            }
+            if ('antialias' in ctx) {
+                ctx.antialias = true;
+            }
+        }
+        catch {
+            /* engine does not expose these knobs; ignore */
+        }
+    }
+    /**
+     * pureimage cannot render text without a registered TrueType font.
+     */
+    async ensurePureImageFont() {
+        if (SenecImageRenderer.fontLoaded || !this.pureImage) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const fs = require('fs');
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const path = require('path');
+        const candidates = [
+            process.env.SENEC_FONT_PATH,
+            path.join(__dirname, '..', 'assets', 'fonts', 'senec-sans.ttf'),
+            path.join(__dirname, '..', '..', 'assets', 'fonts', 'senec-sans.ttf'),
+            '/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf',
+            '/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf',
+            'C:\\Windows\\Fonts\\arial.ttf',
+        ].filter((p) => typeof p === 'string' && p.length > 0);
+        const fontPath = candidates.find((p) => {
+            try {
+                return fs.existsSync(p);
+            }
+            catch {
+                return false;
+            }
+        });
+        if (!fontPath) {
+            SenecImageRenderer.fontLoaded = true;
+            return;
+        }
+        const font = this.pureImage.registerFont(fontPath, this.fontName);
+        if (typeof font.loadPromises === 'function') {
+            await font.loadPromises();
+        }
+        else if (typeof font.loadSync === 'function') {
+            font.loadSync();
+        }
+        else if (typeof font.load === 'function') {
+            try {
+                font.load(() => {
+                    /* intentionally ignored */
+                });
+            }
+            catch {
+                /* ignore load errors; shapes still render */
+            }
+            await this.waitForFontLoaded(font);
+        }
+        SenecImageRenderer.fontLoaded = true;
+    }
+    async waitForFontLoaded(font) {
+        const maxTries = 50; // ~500ms max
+        for (let i = 0; i < maxTries; i++) {
+            if (font.loaded) {
+                return;
+            }
+            await new Promise((resolve) => setTimeout(resolve, 10));
+        }
+    }
+    encodePureImage(PureImage, bitmap) {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const { PassThrough } = require('stream');
+        return new Promise((resolve, reject) => {
+            const stream = new PassThrough();
+            const chunks = [];
+            stream.on('data', (chunk) => chunks.push(Buffer.from(chunk)));
+            stream.on('error', reject);
+            const finish = () => resolve(Buffer.concat(chunks));
+            stream.on('end', finish);
+            stream.on('close', finish);
+            Promise.resolve(PureImage.encodePNGToStream(bitmap, stream))
+                .then(() => {
+                stream.end();
+                setImmediate(finish);
+            })
+                .catch(reject);
+        });
+    }
+    // --------------------------------------------------------------------
+    // Geometry helpers
+    // --------------------------------------------------------------------
+    /** The reference unit: ~1% of dashboard width (mirrors CSS --u/1cqw). */
+    u() {
+        return this.width / 100;
+    }
+    clamp(min, value, max) {
+        return Math.min(max, Math.max(min, value));
+    }
+    /** Scale a source-resolution stroke width to the target canvas width. */
+    scaleStroke(px) {
+        return Math.max(1, (px / 1600) * this.width);
+    }
+    /**
+     * Horizontal chord width available inside a circle at a given vertical
+     * offset from the center, minus a small inset so text stays clear of the
+     * edge.
+     */
+    chordWidth(radius, verticalOffset) {
+        const inset = 0.9;
+        const half = Math.sqrt(Math.max(0, radius * radius - verticalOffset * verticalOffset));
+        return 2 * half * inset;
+    }
+    roundedRect(ctx, x, y, w, h, r) {
+        const radius = Math.min(r, w / 2, h / 2);
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + w - radius, y);
+        ctx.arc(x + w - radius, y + radius, radius, -Math.PI / 2, 0);
+        ctx.lineTo(x + w, y + h - radius);
+        ctx.arc(x + w - radius, y + h - radius, radius, 0, Math.PI / 2);
+        ctx.lineTo(x + radius, y + h);
+        ctx.arc(x + radius, y + h - radius, radius, Math.PI / 2, Math.PI);
+        ctx.lineTo(x, y + radius);
+        ctx.arc(x + radius, y + radius, radius, Math.PI, (3 * Math.PI) / 2);
+        ctx.closePath();
+    }
+    // --------------------------------------------------------------------
+    // Text helpers
+    // --------------------------------------------------------------------
+    text(ctx, value, x, y) {
+        let drawX = x;
+        let drawY = y;
+        const align = ctx.textAlign || 'left';
+        if (align === 'center' || align === 'right') {
+            const wdt = this.textWidth(ctx, value);
+            drawX = align === 'center' ? x - wdt / 2 : x - wdt;
+        }
+        const baseline = ctx.textBaseline || 'alphabetic';
+        const fontPx = this.currentFontSize(ctx);
+        if (baseline === 'middle') {
+            drawY = y + fontPx * 0.35;
+        }
+        else if (baseline === 'top') {
+            drawY = y + fontPx * 0.8;
+        }
+        // We compute alignment/baseline offsets ourselves (above), so the
+        // underlying engine must NOT apply its own. pureimage in particular
+        // mis-handles a non-default textAlign/textBaseline and drops the
+        // leading glyph(s) of the string (e.g. "Erzeugung" -> "eugung"), so we
+        // force the engine back to left/alphabetic before drawing and restore
+        // the caller-facing values afterwards.
+        const prevAlign = ctx.textAlign;
+        const prevBaseline = ctx.textBaseline;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'alphabetic';
+        // pureimage can also leak the current path into fillText; resetting it
+        // immediately before drawing text avoids that.
+        ctx.beginPath();
+        ctx.fillText(value, drawX, drawY);
+        ctx.textAlign = prevAlign;
+        ctx.textBaseline = prevBaseline;
+    }
+    textWidth(ctx, value) {
+        try {
+            const m = ctx.measureText(value);
+            if (m && typeof m.width === 'number' && m.width > 0) {
+                return m.width;
+            }
+        }
+        catch {
+            /* fall through to estimate */
+        }
+        return value.length * this.currentFontSize(ctx) * 0.55;
+    }
+    currentFontSize(ctx) {
+        const match = /(\d+(?:\.\d+)?)px/.exec(ctx.font || '');
+        return match ? parseFloat(match[1]) : this.u() * 1.6;
+    }
+    /**
+     * Set the drawing font.
+     *
+     * pureimage 0.4.x only supports the `<size>px <family>` form, so we never
+     * emit a weight prefix and instead convey emphasis through a slightly
+     * larger size.
+     */
+    setFont(ctx, sizePx, emphasis = false) {
+        const size = Math.max(8, Math.round(emphasis ? sizePx * 1.06 : sizePx));
+        ctx.font = `${size}px ${this.fontName}`;
+    }
+    /**
+     * Draw text, automatically shrinking the font so it fits within
+     * `maxWidth`. Preserves the current textAlign/textBaseline.
+     */
+    fitText(ctx, value, x, y, maxWidth, baseSize) {
+        const target = maxWidth * 0.86;
+        let size = Math.max(8, Math.round(baseSize));
+        while (size > 7) {
+            ctx.font = `${size}px ${this.fontName}`;
+            if (this.textWidth(ctx, value) <= target) {
+                break;
+            }
+            size -= 1;
+        }
+        this.text(ctx, value, x, y);
+    }
+}
+exports.SenecImageRenderer = SenecImageRenderer;
+/** Cached across instances: registering a font is a process-wide action. */
+SenecImageRenderer.fontLoaded = false;
+//# sourceMappingURL=senec-image-renderer.js.map