@sailingrotevista/rotevista-dash 4.0.19 → 4.0.21

package/app.js

@@ -17,7 +17,7 @@ let CONFIG = {
         smoothWindow: 2000,
         longWindow: 30000,
         stabilityTolerance: 2000,
-        stabilityThreshold: 0.85,
+        stabilityThreshold: 0.95,
         minSpeed: 0,
         stabilityBreakout: 15
     },
@@ -35,6 +35,8 @@ const RENDER_INTERVAL_MS = 1000;
 const TIMEOUT_MS = 5000;
 const SIM_SAMPLE_INTERVAL = 1000;
 const DASH_VERSION = "2.4"; // Versione per la gestione della memoria locale
+const sourceLocks = {};
+
 
 // ==========================================================================
 // 2. STATO GLOBALE E RIFERIMENTI UI
@@ -53,6 +55,10 @@ let twDirty = false, isNavigating = false, reconnectDelay = 1000;
 
 let pressTimer, isFocusActive = false;
 
+let emaTwaSin = 0;
+let emaTwaCos = 0;
+let firstEmaRun = true;
+
 // Stato dei singoli grafici (Standard vs Hercules Zoom)
 const graphModes = {
     stw: 'standard',
@@ -110,39 +116,106 @@ function getShortestRotation(curr, target) {
 /**
  * Inserisce un dato nel buffer circolare limitandolo a 2000 campioni (30 min)
  */
-function safePush(buffer, val, time, maxLen = 2000) {
-    buffer.push({ val: val, time: time });
-    if (buffer.length > maxLen) { buffer.shift(); }
+/**
+ * Inserimento sicuro nel buffer con trigonometria precaricata e pruning automatico
+ */
+function safePush(buffer, val, time) {
+    // --- PROTEZIONE ANTI-NaN (FONDAMENTALE ALL'AVVIO) ---
+    // Se il valore è nullo, non definito o non è un numero, ignoriamo l'inserimento
+    if (val === null || val === undefined || isNaN(val)) return;
+
+    buffer.push({
+        val: val,
+        time: time,
+        sin: Math.sin(val),
+        cos: Math.cos(val)
+    });
+
+    // Teniamo sempre in memoria il DOPPIO della storia impostata (per la modalità ancoraggio)
+    // + 1 minuto di margine
+    const maxHistoryMs = (CONFIG.graphs.historyMinutes * 60000 * 2) + 60000;
+
+    while (buffer.length > 0 && (time - buffer[0].time) > maxHistoryMs) {
+        buffer.shift();
+    }
+
+    // Tetto massimo di campioni per sicurezza (circa 2 ore a 5Hz)
+    if (buffer.length > 36000) buffer.shift();
 }
 
 /**
- * Media Circolare Vettoriale: Calcola angolo medio, stabilità R e deviazione standard (±)
+ * Media Circolare Vettoriale - Versione "Soft Outlier Rejection"
+ * Riduce l'impatto degli sbalzi limitando il loro angolo massimo di discostamento.
  */
-function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
-    const now = Date.now();
-    const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
-    if (validData.length === 0) return null;
-    
-    let sSin = 0, sCos = 0;
-    validData.forEach(item => {
-        sSin += Math.sin(item.val);
-        sCos += Math.cos(item.val);
-    });
-    
-    let R = Math.sqrt(sSin * sSin + sCos * sCos) / validData.length;
-    let historyDuration = (validData.length > 2) ? (validData[validData.length - 1].time - validData[0].time) : 0;
-    
-    // Un dato è stabile se abbiamo abbastanza storia e la coerenza vettoriale R è alta
-    let isStable = (historyDuration > 10000) && (R > CONFIG.averaging.stabilityThreshold);
-    let avgRad = Math.atan2(sSin, sCos);
+function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false, now) {
+    now = now || Date.now();
+    const len = bufferArray.length;
+    if (len === 0) return null;
+
+    let sSin = 0, sCos = 0, count = 0;
+    let newestTime = 0, oldestTime = 0;
+
+    // 1. MEDIA PILOTA: Guardiamo l'ultima frazione di dati (es. max 15 campioni) per sapere dove punta "ora"
+    let pilotSin = 0, pilotCos = 0;
+    const pilotSamples = Math.min(len, 15);
+    for (let i = len - 1; i >= len - pilotSamples; i--) {
+        pilotSin += bufferArray[i].sin;
+        pilotCos += bufferArray[i].cos;
+    }
+    const pilotRad = Math.atan2(pilotSin, pilotCos);
+
+    // Il limite elastico in radianti (basato sul tuo stabilityBreakout in gradi)
+    const limitRad = (CONFIG.averaging.stabilityBreakout || 15) * (Math.PI / 180);
+
+    // 2. CALCOLO AMMORTIZZATO
+    for (let i = len - 1; i >= 0; i--) {
+        const item = bufferArray[i];
+        if ((now - item.time) > windowMs) break;
+
+        // Troviamo la differenza angolare (da -Pi a +Pi) tra il dato e la Media Pilota
+        let diffRad = Math.atan2(
+            Math.sin(item.val - pilotRad),
+            Math.cos(item.val - pilotRad)
+        );
+
+        let finalSin, finalCos;
+
+        // Se lo scarto è maggiore del limite, "Pattiniamo" (Ammortizzazione)
+        if (Math.abs(diffRad) > limitRad) {
+            // Tronchiamo la differenza al limite massimo consentito (mantenendo il segno)
+            const clampedDiff = Math.sign(diffRad) * limitRad;
+            // Ricalcoliamo l'angolo ammortizzato
+            const clampedRad = pilotRad + clampedDiff;
+            
+            finalSin = Math.sin(clampedRad);
+            finalCos = Math.cos(clampedRad);
+        } else {
+            // Il dato è buono, usiamo i valori precalcolati
+            finalSin = item.sin;
+            finalCos = item.cos;
+        }
+
+        sSin += finalSin;
+        sCos += finalCos;
+
+        if (count === 0) newestTime = item.time;
+        oldestTime = item.time;
+        count++;
+    }
+
+    if (count === 0) return null;
 
-    // Calcolo della Deviazione Standard Circolare (±) in gradi
-    let deviation = (R < 1 && R > 0) ? Math.round(Math.sqrt(-2 * Math.log(R)) * (180 / Math.PI)) : 0;
+    const R = Math.hypot(sSin, sCos) / count;
+    const avgRad = Math.atan2(sSin, sCos);
+    const finalVal = signed ? avgRad : (avgRad + Math.PI * 2) % (Math.PI * 2);
+    const historyDuration = (count > 2) ? (newestTime - oldestTime) : 0;
+    const safeR = Math.max(R, 1e-9);
 
     return {
-        val: signed ? avgRad : (avgRad + 2 * Math.PI) % (2 * Math.PI),
-        stable: isStable,
-        dev: deviation
+        val: finalVal,
+        stable: historyDuration > 10000 && R > CONFIG.averaging.stabilityThreshold,
+        dev: (R < 1) ? Math.round(Math.sqrt(-2 * Math.log(safeR)) * (180 / Math.PI)) : 0,
+        samples: count
     };
 }
 
@@ -291,14 +364,58 @@ function computeTrueWind() {
     }
 }
 
-function processIncomingData(path, val) {
-    const now = Date.now(); store.timestamps[path] = now; store.raw[path] = val;
-    if (path === "environment.wind.angleApparent") { safePush(store.smoothBuf.awa, val, now); safePush(store.longBuf.awa, val, now); }
-    const twPaths = ["environment.wind.speedApparent", "environment.wind.angleApparent", "navigation.speedThroughWater", "navigation.speedOverGround", "navigation.headingTrue", "navigation.courseOverGroundTrue"];
-    if (twPaths.includes(path)) twDirty = true;
-    if (twDirty && (now - lastTWCompute > 100)) { computeTrueWind(); lastTWCompute = now; twDirty = false; }
-    if (path === "navigation.headingTrue") { safePush(store.smoothBuf.hdg, val, now); safePush(store.longBuf.hdg, val, now); }
-    if (path === "navigation.courseOverGroundTrue") { safePush(store.smoothBuf.cog, val, now); safePush(store.longBuf.cog, val, now); }
+function processIncomingData(path, val, source) {
+    const now = Date.now();
+
+    // --- 1. FILTRO SORGENTE STICKY (Elimina conflitti yacht_device vs Unknown) ---
+    if (!sourceLocks[path] || sourceLocks[path].label === source || (now - sourceLocks[path].lastSeen > 2000)) {
+        sourceLocks[path] = { label: source, lastSeen: now };
+    } else {
+        // Se arriva un dato da un'altra sorgente mentre il lock è attivo, lo scartiamo
+        return;
+    }
+
+    // --- 2. AGGIORNAMENTO DATI (Solo per la sorgente eletta) ---
+    store.timestamps[path] = now;
+    store.raw[path] = val;
+
+    // Buffer per AWA (Vento Apparente)
+    if (path === "environment.wind.angleApparent") {
+        safePush(store.smoothBuf.awa, val, now);
+        safePush(store.longBuf.awa, val, now);
+    }
+    
+    // Buffer per HDG (Prua)
+    if (path === "navigation.headingTrue") {
+        safePush(store.smoothBuf.hdg, val, now);
+        safePush(store.longBuf.hdg, val, now);
+    }
+
+    // Buffer per COG (Rotta Fondo)
+    if (path === "navigation.courseOverGroundTrue") {
+        safePush(store.smoothBuf.cog, val, now);
+        safePush(store.longBuf.cog, val, now);
+    }
+
+    // --- 3. TRIGGER CALCOLO VENTO REALE (TWA/TWS/TWD) ---
+    const twPaths = [
+        "environment.wind.speedApparent",
+        "environment.wind.angleApparent",
+        "navigation.speedThroughWater",
+        "navigation.speedOverGround",
+        "navigation.headingTrue",
+        "navigation.courseOverGroundTrue"
+    ];
+
+    if (twPaths.includes(path)) {
+        twDirty = true;
+        // Calcolo limitato a 10Hz per non pesare sulla CPU
+        if (twDirty && (now - lastTWCompute > 100)) {
+            computeTrueWind();
+            lastTWCompute = now;
+            twDirty = false;
+        }
+    }
 }
 
 // ==========================================================================
@@ -312,8 +429,9 @@ function updateWindTrend() {
     
     // STRATEGIA (Bussola TWD): 1 min vs 30 minuti (tendenza meteo profonda)
     const twdNow = getCircularAverageFromBuffer(store.longBuf.twd, 60000, false);
-    const twdRef = getCircularAverageFromBuffer(store.longBuf.twd, 1800000, false); // 1.800.000 ms = 30 min
-    
+    const multiplier = isNavigating ? 1 : 2;
+    const strategicWindowMs = CONFIG.graphs.historyMinutes * 60000 * multiplier;
+    const twdRef = getCircularAverageFromBuffer(store.longBuf.twd, strategicWindowMs, false);
     if (!twaNow || !twaRef || !twdNow || !twdRef) return;
     const compassDots = { cw: document.getElementById('trend-dot-cw'), ccw: document.getElementById('trend-dot-ccw') };
     const gaugeDots = { cw: document.getElementById('trend-gauge-cw'), ccw: document.getElementById('trend-gauge-ccw') };
@@ -357,12 +475,41 @@ function updateWindTrend() {
         }
     } else { [gaugeDots.cw, gaugeDots.ccw].forEach(el => { if(el){ el.classList.remove('is-trending'); el.setAttribute('fill', '#bbb'); }}); }
 
-    // ALLARME STRAMBATA (GYBE)
-    const instTwa = radToDeg(store.raw["environment.wind.angleTrueWater"] || 0);
-    if (Math.abs(instTwa) > 155 && Math.sign(instTwa) !== Math.sign(lastInstantTwa)) {
-        if (isNavigating && (now - lastGybeAlarmTime > 5000)) { lastGybeAlarmTime = now; playGybeAlarm(); }
-    }
-    lastInstantTwa = instTwa;
+    // --- LOGICA ALLARME STRAMBATA (GYBE) FILTRATA ---
+        const instTwaRad = store.raw["environment.wind.angleTrueWater"];
+        
+        if (instTwaRad !== undefined) {
+            // Calcolo Alfa basato sulla Steering Precision (più precisione = filtro più lento e stabile)
+            const dynamicAlpha = Math.max(0.05, 1.1 - CONFIG.averaging.stabilityThreshold);
+
+            const currentSin = Math.sin(instTwaRad);
+            const currentCos = Math.cos(instTwaRad);
+
+            if (firstEmaRun) {
+                emaTwaSin = currentSin;
+                emaTwaCos = currentCos;
+                firstEmaRun = false;
+            } else {
+                // Media Esponenziale Vettoriale
+                emaTwaSin = (currentSin * dynamicAlpha) + (emaTwaSin * (1 - dynamicAlpha));
+                emaTwaCos = (currentCos * dynamicAlpha) + (emaTwaCos * (1 - dynamicAlpha));
+            }
+
+            // Angolo risultante filtrato
+            const smoothedTwaDeg = radToDeg(Math.atan2(emaTwaSin, emaTwaCos));
+
+            // Verifichiamo il cambio di mure (> 155° e inversione di segno confermata dal filtro)
+            if (Math.abs(smoothedTwaDeg) > 155) {
+                if (Math.sign(smoothedTwaDeg) !== Math.sign(lastInstantTwa) && lastInstantTwa !== null) {
+                    if (isNavigating && (now - lastGybeAlarmTime > 60000)) {
+                        lastGybeAlarmTime = now;
+                        playGybeAlarm();
+                        console.log(`⚠️ GYBE ALARM: TWA ${smoothedTwaDeg.toFixed(1)}°`);
+                    }
+                }
+            }
+            lastInstantTwa = smoothedTwaDeg;
+        }
 }
 
 // ==========================================================================
@@ -385,12 +532,13 @@ function refreshGraph(t) {
  * upUI: Aggiornamento valori digitali con logica anti-ritardo (Istantaneo vs Media)
  */
 const upUI = (el, obj, instantRaw, isCompass = false) => {
-    if (!obj || obj.val === null || instantRaw === undefined) {
-        el.innerHTML = "---&deg;"; el.classList.remove('unstable-data');
+    if (!obj || obj.val === null || isNaN(obj.val) || instantRaw === undefined) {
+            el.innerHTML = "---&deg;"; 
+            el.classList.remove('unstable-data');
     } else {
         let valDeg = Math.round(radToDeg(obj.val));
         let mainVal = (isCompass ? ((valDeg + 360) % 360).toString().padStart(3, '0') : valDeg) + "&deg;";
-        let dev = (obj.dev > 1 && obj.dev < 90) ? `<span style="font-size: 0.35em; opacity: 0.5; margin-left: 4px; vertical-align: middle;">&plusmn;${obj.dev}</span>` : "";
+        let dev = (obj.dev > 1 && obj.dev < 90) ? `<span style="font-size: 0.8em; opacity: 0.4; margin-left: 6px;">&plusmn;${obj.dev}</span>` : "";
         el.innerHTML = mainVal + dev;
         
         let diff = Math.abs((radToDeg(instantRaw) - radToDeg(obj.val) + 540) % 360 - 180);
@@ -512,30 +660,39 @@ function startDisplayLoop() {
             upUI(ui.twaAvg, twObj, store.raw["environment.wind.angleTrueWater"], false);
             upUI(ui.twdAvg, twdObj, store.raw["environment.wind.directionTrue"], true);
 
-            // --- LOGICA TACK STRATEGICA (Riflessione geometrica su TWD) ---
+            // --- LOGICA TACK STRATEGICA (VETTORIALE) ---
             if (hObj && twdObj) {
-                const tH = radToDeg((2 * twdObj.val - hObj.val + Math.PI * 2) % (Math.PI * 2));
-                const unstableH = !hObj.stable || !twdObj.stable || hObj.dev > CONFIG.averaging.stabilityBreakout || twdObj.dev > CONFIG.averaging.stabilityBreakout;
+                // Funzione interna per riflettere un angolo rispetto all'asse del vento (TWD)
+                const reflectAngle = (targetRad, axisRad) => {
+                    const diffSin = Math.sin(axisRad - targetRad);
+                    const diffCos = Math.cos(axisRad - targetRad);
+                    return Math.atan2(Math.sin(axisRad) * diffCos + Math.cos(axisRad) * diffSin,
+                                      Math.cos(axisRad) * diffCos - Math.sin(axisRad) * diffSin);
+                };
+
+                const unstableH = !hObj.stable || !twdObj.stable || hObj.dev > CONFIG.averaging.stabilityBreakout;
 
                 if (!isNavigating) {
-                    ui.tackHdg.innerHTML = "---&deg;"; ui.tackHdg.classList.remove('unstable-data');
+                    ui.tackHdg.innerHTML = "---&deg;";
                 } else if (unstableH) {
                     ui.tackHdg.innerHTML = "---&deg;"; ui.tackHdg.classList.add('unstable-data');
                 } else {
-                    ui.tackHdg.innerHTML = `${Math.round((tH + 360) % 360).toString().padStart(3, '0')}&deg;`;
+                    const reflectedH = reflectAngle(hObj.val, twdObj.val);
+                    const outH = (radToDeg(reflectedH) + 360) % 360;
+                    ui.tackHdg.innerHTML = `${Math.round(outH).toString().padStart(3, '0')}&deg;`;
                     ui.tackHdg.classList.remove('unstable-data');
                 }
 
                 if (cObj) {
-                    const tC = radToDeg((2 * twdObj.val - cObj.val + Math.PI * 2) % (Math.PI * 2));
-                    const unstableC = !cObj.stable || !twdObj.stable || cObj.dev > CONFIG.averaging.stabilityBreakout || twdObj.dev > CONFIG.averaging.stabilityBreakout;
-                    
+                    const unstableC = !cObj.stable || !twdObj.stable || cObj.dev > CONFIG.averaging.stabilityBreakout;
                     if (!isNavigating) {
-                        ui.tackCog.innerHTML = "---&deg;"; ui.tackCog.classList.remove('unstable-data');
+                        ui.tackCog.innerHTML = "---&deg;";
                     } else if (unstableC) {
                         ui.tackCog.innerHTML = "---&deg;"; ui.tackCog.classList.add('unstable-data');
                     } else {
-                        ui.tackCog.innerHTML = `${Math.round((tC + 360) % 360).toString().padStart(3, '0')}&deg;`;
+                        const reflectedC = reflectAngle(cObj.val, twdObj.val);
+                        const outC = (radToDeg(reflectedC) + 360) % 360;
+                        ui.tackCog.innerHTML = `${Math.round(outC).toString().padStart(3, '0')}&deg;`;
                         ui.tackCog.classList.remove('unstable-data');
                     }
                 }
@@ -556,7 +713,7 @@ function startDisplayLoop() {
 // 8. CONFIGURAZIONE E GRAFICI UTILS
 // ==========================================================================
 /**
- * Recupera la configurazione e forza la sovrascrittura di ogni parametro.
+ * Recupera la configurazione dal server e applica migrazioni automatiche per le vecchie versioni
  */
 async function fetchServerConfig() {
     try {
@@ -567,19 +724,27 @@ async function fetchServerConfig() {
         // Stampa di debug per verificare cosa riceve il client
         console.log("🔍 Configurazione ricevuta dal Server:", data);
 
-        // Merge intelligente dei dati ricevuti nel CONFIG esistente
+        // Merge intelligente dei dati ricevuti
         Object.assign(CONFIG.alarms, data.alarms || {});
         Object.assign(CONFIG.graphs, data.graphs || {});
         Object.assign(CONFIG.averaging, data.averaging || {});
         
-        // Per le scale, siccome sono nidificate, facciamo un loop
+        // --- LOGICA DI MIGRAZIONE SILENZIOSA ---
+        // Se il valore ricevuto è il vecchio default (0.85) o inferiore, lo portiamo al nuovo standard 0.95.
+        // Questo è necessario perché con i nuovi filtri "Soft" lo 0.85 non farebbe quasi mai lampeggiare gli allarmi.
+        if (CONFIG.averaging.stabilityThreshold <= 0.85) {
+            CONFIG.averaging.stabilityThreshold = 0.95;
+            console.log("♻️ Migrazione Silenziosa: Rilevato vecchio parametro stabilità (<= 0.85). Aggiornato a 0.95 per ottimizzazione filtri.");
+        }
+
+        // Per le scale, siccome sono nidificate, facciamo un loop di merge profondo
         if (data.scales) {
             for (let key in data.scales) {
                 if (CONFIG.scales[key]) Object.assign(CONFIG.scales[key], data.scales[key]);
             }
         }
 
-        console.log("✅ Configurazione applicata. Alarmi attivi:", CONFIG.alarms);
+        console.log("✅ Configurazione applicata. Stabilità attiva:", CONFIG.averaging.stabilityThreshold);
     } catch (err) {
         console.warn("⚠️ Utilizzo default locali. Motivo:", err.message);
     }
@@ -691,10 +856,13 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
                  style="stroke: ${color}; stroke-width: ${strokeWidth}; stroke-linecap: round; shape-rendering: geometricPrecision;" />`;
                  
         if (i === 1) areaPath += `L ${x1} ${y1} `;
-        areaPath += `L ${x2} ${y2} `;
-    }
-    
-    areaPath += `L ${w} ${h} Z`;
+            areaPath += `L ${x2} ${y2} `;
+            
+            // Salviamo l'ultima coordinata X calcolata per chiudere correttamente il path
+            if (i === d.length - 1) {
+                areaPath += `L ${x2} ${h} Z`;
+            }
+        }
 
     // 4. Iniezione del Gradiente
     const gradId = `grad-${id}`;
@@ -775,7 +943,22 @@ function connect() {
     try {
         socket = new WebSocket(`ws://${addr}/signalk/v1/stream?subscribe=self`);
         socket.onopen = () => { ui.status.className = "online"; ui.status.innerText = "ONLINE"; reconnectDelay = 1000; };
-        socket.onmessage = (e) => { const d = JSON.parse(e.data); if (d.updates) d.updates.forEach(u => u.values && u.values.forEach(v => processIncomingData(v.path, v.value))); };
+        
+        socket.onmessage = (e) => {
+            const d = JSON.parse(e.data);
+            if (d.updates) {
+                d.updates.forEach(u => {
+                    // 1. Estraiamo il nome del sensore/sorgente (es. "yacht_device" o "Unknown")
+                    const sourceLabel = u.source ? (u.source.label || u.source.talker || "Unknown") : "Unknown";
+                    
+                    // 2. Passiamo il nome della sorgente come TERZO parametro
+                    if (u.values) {
+                        u.values.forEach(v => processIncomingData(v.path, v.value, sourceLabel));
+                    }
+                });
+            }
+        };
+
         socket.onclose = () => { if (!simulationMode) { ui.status.className = "offline"; ui.status.innerText = "RECONNECTING..."; setTimeout(connect, reconnectDelay); reconnectDelay = Math.min(reconnectDelay * 1.5, 10000); } };
     } catch (e) { setTimeout(connect, reconnectDelay); }
 }

package/index.js

@@ -127,10 +127,10 @@ module.exports = function (app) {
             default: 0.5
           },
           stabilityThreshold: {
-            type: 'number',
-            title: 'Steering Precision (Sensitivity)',
-            description: "Controls how strictly the system judges your course coherence. 0.95 requires pro precision; 0.85 is more realistic for cruising in waves.",
-            default: 0.85
+              type: 'number',
+              title: 'Steering Precision (Sensitivity)',
+              description: "How strictly the system judges data coherence (0.0 to 1.0). Due to internal smoothing, 0.97-0.98 requires racing precision; 0.93-0.95 is ideal for cruising in waves. Below this, the display rarely alerts for instability.",
+                default: 0.95 
           },
           stabilityBreakout: {
             type: 'number',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sailingrotevista/rotevista-dash",
-  "version": "4.0.19",
+  "version": "4.0.21",
   "description": "Public Wind Dashboard with navigation and course aids",
   "main": "index.js",
   "publishConfig": {

package/settings.json

@@ -1,18 +1,18 @@
 {
   "alarms": {
     "depthDanger": 2.5,
-    "depthWarning": 5.0
+    "depthWarning": 3.5
   },
   "graphs": {
     "reef1": 15.0,
     "reef2": 20.0,
-    "historyMinutes": 5
+    "historyMinutes": 30
   },
   "averaging": {
     "longWindow": 30000,
     "smoothWindow": 2000,
     "minSpeed": 0.5,
-    "stabilityThreshold": 0.85,
+    "stabilityThreshold": 0.95,
     "stabilityBreakout": 15
   },
   "scales": {

package/style.css

@@ -122,6 +122,12 @@ body {
     .box-twd #twd-avg { font-size: clamp(1.4rem, 45cqh, 20cqw) !important; }
 }
 
+/* --- OTTIMIZZAZIONE SPECIFICA TWD PER EVITARE ANDATA A CAPO in landscape--- */
+.box-twd .value-large {
+    /* Riduciamo il limite di larghezza (18cqw) per far spazio al simbolo ± rimpicciolendo il testo se serve */
+    font-size: clamp(1.2rem, 55cqh, 18cqw) !important;
+}
+
 /* --- BOX TACK (Mure Opposte) --- */
 .box-tack .dual-value-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
 .box-tack .dual-value-col { display: flex; flex-direction: column; justify-content: center; }
@@ -169,7 +175,7 @@ body.night-mode .alarm-danger {
 
 .focus-active .is-focused .sparkline path,
 .focus-active .is-focused .sparkline line {
-    stroke-width: 1.5px !important;
+    stroke-width: 1.5px !important; /* Un briciolo più spessa per la stabilità visiva su schermi grandi */
 }
 
 .focus-active.focus-side-left {
@@ -435,10 +441,11 @@ body.night-mode {
 
 /* --- 10.3 GRAFICI (STILE DINAMICO NIGHT MODE) --- */
 .night-mode .graph-wrapper {
-    background: rgba(10, 0, 0, 0.8) !important;
+    background: rgba(10, 0, 0, 0.8) !important; /* Sfondo scurissimo per alto contrasto */
     border: 1px solid #330000;
 }
 
+/* Griglia temporale (minuti e livelli): quasi impercettibile */
 .night-mode .sparkline line[stroke="rgba(0,0,0,0.12)"],
 .night-mode .sparkline line[stroke="rgba(0,0,0,0.08)"] {
     stroke: rgba(255, 0, 0, 0.1) !important; /* Griglia temporale rossa soffusa */