@sailingrotevista/rotevista-dash 6.0.9 → 6.0.12

package/app.js

@@ -115,6 +115,17 @@ function getShortestRotation(curr, target) {
     return curr + diff;
 }
 
+/**
+ * Scrive il testo nel DOM/SVG solo se il valore è realmente cambiato.
+ * Utilizza innerHTML perché è l'unico metodo sicuro al 100% per forzare il ridisegno dei testi negli SVG.
+ */
+function safeSetText(el, text) {
+    if (!el) return;
+    if (el.innerHTML !== text) {
+        el.innerHTML = text;
+    }
+}
+
 /**
  * Inserimento sicuro nel buffer con trigonometria precaricata e pruning automatico
  */
@@ -600,21 +611,22 @@ function startDisplayLoop() {
         ui.status.className = (socket && socket.readyState === WebSocket.OPEN) ? "online" : "offline";
 
         // --- WATCHDOG: CONTROLLO TIMEOUT ---
-        const watch = {
-            "navigation.speedThroughWater": ui.stw, "navigation.speedOverGround": ui.sog,
-            "navigation.headingTrue": ui.hdg, "navigation.courseOverGroundTrue": ui.cog,
-            "environment.wind.speedApparent": ui.awsSvg, "environment.depth.belowTransducer": ui.depth,
-            "environment.wind.speedTrue": ui.tws
-        };
-        for (let p in watch) {
-            if (!store.timestamps[p] || (now - store.timestamps[p] > TIMEOUT_MS)) {
-                watch[p].innerText = "---"; delete store.raw[p];
+            const watch = {
+                "navigation.speedThroughWater": ui.stw, "navigation.speedOverGround": ui.sog,
+                "navigation.headingTrue": ui.hdg, "navigation.courseOverGroundTrue": ui.cog,
+                "environment.wind.speedApparent": ui.awsSvg, "environment.depth.belowTransducer": ui.depth,
+                "environment.wind.speedTrue": ui.tws
+            };
+            for (let p in watch) {
+                if (!store.timestamps[p] || (now - store.timestamps[p] > TIMEOUT_MS)) {
+                    safeSetText(watch[p], "---"); // Sostituito innerText con la funzione protetta!
+                    delete store.raw[p];
+                }
             }
-        }
 
         // --- AGGIORNAMENTO VELOCITÀ SULL'ACQUA (STW) ---
         if (store.raw["navigation.speedThroughWater"] !== undefined) {
-            ui.stw.innerText = stwKts.toFixed(1);
+            safeSetText(ui.stw, stwKts.toFixed(1));
             ui.stw.style.color = ""; // Neutro
             manageHistory('stw', stwKts);
         }
@@ -627,11 +639,11 @@ function startDisplayLoop() {
             
             const labelSogVmg = document.getElementById('sog-vmg-label');
             if (displayModeSog === 'VMG') {
-                ui.sog.innerText = vmgVal.toFixed(1);
+                safeSetText(ui.sog, vmgVal.toFixed(1));
                 ui.sog.style.setProperty('color', '#00b8d4', 'important'); // Cyan
                 if (labelSogVmg) labelSogVmg.textContent = 'VMG';
             } else {
-                ui.sog.innerText = sogKts.toFixed(1);
+                safeSetText(ui.sog, sogKts.toFixed(1));
                 if (labelSogVmg) labelSogVmg.textContent = 'SOG';
                 
                 if (isNavigating) {
@@ -650,23 +662,29 @@ function startDisplayLoop() {
 
         // --- AGGIORNAMENTO PROFONDITÀ (DEPTH) ---
         if (store.raw["environment.depth.belowTransducer"] !== undefined) {
-            ui.depth.innerText = store.raw["environment.depth.belowTransducer"].toFixed(1);
+            safeSetText(ui.depth, store.raw["environment.depth.belowTransducer"].toFixed(1));
             checkDepthAlarm(store.raw["environment.depth.belowTransducer"]);
             manageHistory('depth', store.raw["environment.depth.belowTransducer"]);
         }
 
-        // --- GESTIONE VENTO (TWS / AWS SWITCH) ---
-        const twsVal = store.raw["environment.wind.speedTrue"] ? msToKts(store.raw["environment.wind.speedTrue"]) : 0;
-        const awsVal = store.raw["environment.wind.speedApparent"] ? msToKts(store.raw["environment.wind.speedApparent"]) : 0;
+        // --- GESTIONE VENTO (TWS / AWS SWITCH & BUSSOLA) ---
+                
+        // Estrazione dati sicura: controlliamo esplicitamente se il dato esiste, altrimenti 0
+        const rawTws = store.raw["environment.wind.speedTrue"];
+        const rawAws = store.raw["environment.wind.speedApparent"];
+        
+        const twsVal = (rawTws !== undefined && rawTws !== null) ? msToKts(rawTws) : 0;
+        const awsVal = (rawAws !== undefined && rawAws !== null) ? msToKts(rawAws) : 0;
         
-        if (store.raw["environment.wind.speedTrue"] !== undefined) manageHistory('tws', twsVal);
-        if (store.raw["environment.wind.speedApparent"] !== undefined) manageHistory('aws', awsVal);
+        if (rawTws !== undefined && rawTws !== null) manageHistory('tws', twsVal);
+        if (rawAws !== undefined && rawAws !== null) manageHistory('aws', awsVal);
 
-        if (store.raw["environment.wind.speedTrue"] !== undefined || store.raw["environment.wind.speedApparent"] !== undefined) {
+        // Disegno testo casella destra (TWS o AWS)
+        if (rawTws !== undefined || rawAws !== undefined) {
             const labelWind = document.getElementById('tws-aws-label');
             const currentWind = (displayModeTws === 'AWS') ? awsVal : twsVal;
             
-            ui.tws.innerText = currentWind.toFixed(1);
+            safeSetText(ui.tws, currentWind.toFixed(1));
             if (labelWind) labelWind.textContent = displayModeTws;
 
             if (currentWind >= CONFIG.graphs.reef2) {
@@ -683,8 +701,21 @@ function startDisplayLoop() {
             }
         }
 
-        if (store.raw["environment.wind.speedApparent"] !== undefined) {
-            ui.awsSvg.textContent = awsVal.toFixed(1);
+        // --- SBLOCCO FORZATO TESTO BUSSOLA (AWS) ---
+        if (rawAws !== undefined && rawAws !== null && !isNaN(awsVal)) {
+            const strVal = awsVal.toFixed(1);
+            // Recupero robusto dell'elemento
+            let awsSvgEl = document.getElementById('aws-val-svg');
+            
+            if (awsSvgEl) {
+                // Trucco anti-congelamento SVG: se il testo non combacia, lo forziamo usando
+                // textContent (standard SVG) invece di innerHTML (standard HTML).
+                if (awsSvgEl.textContent !== strVal) {
+                    awsSvgEl.textContent = strVal;
+                }
+            } else {
+                console.error("ERRORE: Elemento SVG bussola ('aws-val-svg') non trovato nel documento!");
+            }
         }
 
         // --- PUNTATORI ANALOGICI ---
@@ -702,9 +733,8 @@ function startDisplayLoop() {
             updateLeewayDisplay(Math.max(-20, Math.min(20, smoothedLeeway)));
         }
         
-        // --- HEAVY TIER (2s) E SLOW TIER (3s) ---
-        if (lastAvgUIUpdate++ % 2 === 0) {
-            ['stw', 'sog', 'depth', 'tws'].forEach(refreshGraph);
+        // --- SLOW TIER (Salvataggio stato ogni 10 secondi) ---
+        if (lastAvgUIUpdate++ % 10 === 0) {
             saveDashboardState();
         }
 
@@ -949,6 +979,10 @@ function manageHistory(type, value) {
 
     // --- 7. STORAGE STORICO ---
     store.histories[type].push({ val: finalValue, time: now });
+    
+    // --- TRIGGER STRATEGIA 1 (EVENT-DRIVEN) ---
+    // Ridisegnamo lo strumento SOLO nell'esatto istante in cui viene generato un nuovo punto storico!
+    refreshGraph(type);
 
     // --- 8. PRUNING DINAMICO ---
     const maxViewportMinutes = historyMinutes * 2;
@@ -958,9 +992,8 @@ function manageHistory(type, value) {
         store.histories[type].shift();
     }
 
-    // Reset per il prossimo bucket
+    // Reset per il prossimo bucket (sincronizzato)
     store.graphTempBuf[type] = [];
-    // Spostiamo il timer esattamente al confine del secchiello assoluto appena concluso
     store.lastUpdates[type] = Math.floor(now / bucketIntervalMs) * bucketIntervalMs;
 }
 
@@ -1018,30 +1051,36 @@ function calculateScale(type, data, mode) {
             return { min: 0, max: Math.max(s.stdMax, Math.ceil(maxHistorico / s.step) * s.step) };
         }
 
-        // --- 1.2 HERCULES PROFONDITÀ (0 IN BASSO, SNAP SUL MAX SENZA PADDING) ---
+        // --- 1.2 HERCULES PROFONDITÀ (BASE 0 IN ACQUE BASSE, FLUTTUANTE AL LARGO) ---
         if (mode === 'hercules') {
             const roundStep = s.hercSpan; // Passo di griglia selezionato dall'utente
+            const shallowThreshold = Math.max(s.stdMax, 10); // Es. 20m
             
             let targetMin = 0;
+            // Se siamo in acque profonde, lasciamo che il minimo fluttui per mostrare i micro-dettagli
+            if (localMin > shallowThreshold) {
+                targetMin = Math.max(0, Math.floor(localMin / roundStep) * roundStep);
+            }
+            
             let targetMax = Math.ceil(localMax / roundStep) * roundStep;
 
-            // Impediamo una scala inferiore a 4 metri per sicurezza visiva
-            const absoluteMinSpan = 4;
-            if (targetMax < absoluteMinSpan) {
-                targetMax = absoluteMinSpan;
+            // Impediamo uno span inferiore a 4 metri per evitare grafici piatti
+            if (targetMax - targetMin < 4) {
+                targetMax = targetMin + 4;
             }
 
-            // Regola asimmetrica per il MAX (Espansione istantanea, contrazione a 2 minuti)
-            if (currentVal > currentScale.max) {
-                currentScale.max = targetMax;
+            // Regola asimmetrica per il MIN e il MAX (Espansione istantanea, contrazione a 2 minuti)
+            if (currentVal < currentScale.min || currentVal > currentScale.max) {
+                currentScale.min = Math.min(currentScale.min, targetMin);
+                currentScale.max = Math.max(currentScale.max, targetMax);
             } else {
-                const allStableInTarget = recentVals.every(val => val <= targetMax);
+                const allStableInTarget = recentVals.every(val => val >= targetMin && val <= targetMax);
                 if (allStableInTarget) {
+                    currentScale.min = targetMin;
                     currentScale.max = targetMax;
                 }
             }
 
-            currentScale.min = 0;
             return { min: currentScale.min, max: currentScale.max };
         }
     }
@@ -1100,10 +1139,21 @@ function updateScaleLabels(t, min, max) {
 }
 
 /**
- * refreshGraph: Recupero dati, switch AWS/TWS e passaggio a motore grafico.
+ * refreshGraph: Recupero dati, switch AWS/TWS/VMG e passaggio a motore grafico.
+ * Redirige e protegge i canali secondari (AWS/VMG) evitando ridisegni inutili.
  */
 function refreshGraph(t) {
-    const boxType = (t === 'vmg') ? 'sog' : t;
+    // Redirezione di sicurezza dei canali secondari (AWS / VMG) verso i contenitori principali
+    if (t === 'aws') {
+        if (displayModeTws !== 'AWS') return; // Se non stiamo visualizzando AWS a schermo, ignora il rinfresco
+        t = 'tws';
+    }
+    if (t === 'vmg') {
+        if (displayModeSog !== 'VMG') return; // Se non stiamo visualizzando VMG a schermo, ignora il rinfresco
+        t = 'sog';
+    }
+
+    const boxType = t;
     let rawData;
 
     if (t === 'tws' && displayModeTws === 'AWS') {
@@ -1128,6 +1178,7 @@ function refreshGraph(t) {
 /**
  * drawGraph: Motore SVG con Timeline Reale e Gestione GAP
  * Risolve i conflitti di orologio (Clock Drift) tra Cerbo GX e Tablet.
+ * Integra la reattività dello spessore della curva in modalità Dual Screen (Focus).
  */
 function drawGraph(d, id, min, max, isTws, isHercules) {
     const svg = document.getElementById(id);
@@ -1142,6 +1193,10 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
     const latestPoint = d[d.length - 1];
     const now = latestPoint ? latestPoint.time : Date.now();
 
+    // --- RILEVAMENTO DINAMICO DUAL SCREEN BLINDATO ---
+    const box = svg.closest('.data-box');
+    const isFocused = isFocusActive && box && box.classList.contains('is-focused');
+
     const visibleMinutes = CONFIG.graphs.historyMinutes * (isNavigating ? 1 : 2);
     const viewportMs = visibleMinutes * 60000;
     const viewportStart = now - viewportMs;
@@ -1153,15 +1208,20 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
     const colDepth   = "#0088cc", colStw = "#00C851", colSog = "#ffbb33", colVmg = "#00b8d4";
 
     const getColorProps = (val) => {
-        let color = colTws, opacity = "0.15", stroke = "1";
+        // Se siamo in Dual Screen (focus), aumentiamo lo spessore base della curva di un filino (da 1.6 a 2.2)
+        const baseStroke = isFocused ? "4.2" : "1.6";
+        const alertStroke = isFocused ? "4.8" : "2.2";
+        const warnStroke = isFocused ? "4.4" : "1.8";
+
+        let color = colTws, opacity = "0.15", stroke = baseStroke;
         if (isTws) {
             const baseWind = (displayModeTws === 'AWS') ? colAws : colTws;
-            if (val >= CONFIG.graphs.reef2) { color = colDanger; opacity = "0.55"; stroke = "1.2"; }
-            else if (val >= CONFIG.graphs.reef1) { color = colWarning; opacity = "0.45"; stroke = "1"; }
+            if (val >= CONFIG.graphs.reef2) { color = colDanger; opacity = "0.55"; stroke = alertStroke; }
+            else if (val >= CONFIG.graphs.reef1) { color = colWarning; opacity = "0.45"; stroke = warnStroke; }
             else color = baseWind;
         } else if (isDepth) {
-            if (val < CONFIG.alarms.depthDanger) { color = colDanger; opacity = "0.55"; stroke = "1.2"; }
-            else if (val < CONFIG.alarms.depthWarning) { color = colWarning; opacity = "0.45"; stroke = "1"; }
+            if (val < CONFIG.alarms.depthDanger) { color = colDanger; opacity = "0.55"; stroke = alertStroke; }
+            else if (val < CONFIG.alarms.depthWarning) { color = colWarning; opacity = "0.45"; stroke = warnStroke; }
             else color = colDepth;
         } else {
             if (id === 'stw-graph') color = colStw;
@@ -1171,14 +1231,37 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
     };
 
     let grids = "";
-    // Tracciamo 3 linee simmetriche al 25%, 50% (centrale) e 75%.
-    // La linea al 50% passerà sempre in modo matematicamente esatto dietro il valore medio stampato.
-    [0.25, 0.5, 0.75].forEach(p => grids += `<line x1="0" y1="${h-(p*h)}" x2="${w}" y2="${h-(p*h)}" stroke="rgba(0,0,0,0.12)" stroke-width="0.5" />`);
+    // --- GRIGLIE ORIZZONTALI (Spessore fisso a 0.5px, non deformabile) ---
+    [0.25, 0.5, 0.75].forEach(p => grids += `<line x1="0" y1="${h-(p*h)}" x2="${w}" y2="${h-(p*h)}" stroke="rgba(0,0,0,0.12)" stroke-width="0.5" vector-effect="non-scaling-stroke" />`);
 
+    // --- GRIGLIE VERTICALI (Spessore fisso a 0.4px, non deformabile) ---
     const gridInterval = (visibleMinutes <= 15) ? 1 : 5;
     for (let m = gridInterval; m < visibleMinutes; m += gridInterval) {
         const x = w - ((m / visibleMinutes) * w);
-        grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(0,0,0,0.08)" stroke-width="0.5" />`;
+        grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(0,0,0,0.08)" stroke-width="0.4" vector-effect="non-scaling-stroke" />`;
+    }
+    
+    // --- DISEGNO LINEE DI SICUREZZA ALLARME PROFONDITÀ (DANGER & WARNING) ---
+    if (isDepth) {
+        const dangerVal = CONFIG.alarms.depthDanger;     // Es. 2.5m
+        const warningVal = CONFIG.alarms.depthWarning;   // Es. 3.5m
+        const marginX = 4; // Margine per non toccare i bordi esterni
+
+        // Spessore dinamico per gli allarmi: 4.8px in Dual Screen, 1.8px nella griglia normale
+        const alarmStrokeWidth = isFocused ? "4.8" : "1.8";
+
+        // Linea Rossa Viva (Spessore dinamico, con il tuo tratteggio alternato personalizzato)
+        if (dangerVal >= min && dangerVal <= max) {
+            const p = (dangerVal - min) / range;
+            const y = h - (p * h);
+            grids += `<line x1="${marginX}" y1="${y}" x2="${w - marginX}" y2="${y}" stroke="rgba(255, 59, 48, 0.95)" stroke-width="${alarmStrokeWidth}" stroke-dasharray="12, 6, 2, 6" vector-effect="non-scaling-stroke" />`;
+        }
+        // Linea Giallo Oro Viva (Spessore dinamico, con il tuo tratteggio alternato personalizzato)
+        if (warningVal >= min && warningVal <= max) {
+            const p = (warningVal - min) / range;
+            const y = h - (p * h);
+            grids += `<line x1="${marginX}" y1="${y}" x2="${w - marginX}" y2="${y}" stroke="rgba(255, 204, 0, 0.95)" stroke-width="${alarmStrokeWidth}" stroke-dasharray="6 , 2, 6, 12" vector-effect="non-scaling-stroke" />`;
+        }
     }
 
     let gradientStops = "", lines = "", areaPath = "";
@@ -1208,7 +1291,8 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
                 started = false;
             }
         } else {
-            lines += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" style="stroke:${props.color}; stroke-width:${props.stroke}; stroke-linecap:round; shape-rendering:geometricPrecision;" />`;
+            // Curva del grafico: spessore reattivo al focus e protezione da deformazione (non-scaling)
+            lines += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" style="stroke:${props.color}; stroke-width:${props.stroke}; stroke-linecap:round; shape-rendering:geometricPrecision;" vector-effect="non-scaling-stroke" />`;
             if (!started) {
                 areaPath += `M ${Math.max(0, x1)} ${h} L ${Math.max(0, x1)} ${y1} `;
                 started = true;
@@ -1235,8 +1319,20 @@ function toggleFocusMode(type, element) {
     const container = document.querySelector('.main-container');
     const isLeft = ['stw', 'sog', 'hdg', 'cog', 'tack'].includes(type);
     isFocusActive = !isFocusActive;
-    if (isFocusActive) { container.classList.add('focus-active', isLeft ? 'focus-side-left' : 'focus-side-right'); element.classList.add('is-focused'); }
-    else { container.classList.remove('focus-active', 'focus-side-left', 'focus-side-right'); document.querySelectorAll('.data-box').forEach(b => b.classList.remove('is-focused')); }
+    if (isFocusActive) {
+        container.classList.add('focus-active', isLeft ? 'focus-side-left' : 'focus-side-right');
+        element.classList.add('is-focused');
+    } else {
+        container.classList.remove('focus-active', 'focus-side-left', 'focus-side-right');
+        document.querySelectorAll('.data-box').forEach(b => b.classList.remove('is-focused'));
+    }
+    
+    // --- FORZATURA REDRAW IMMEDIATO DUAL SCREEN ---
+    // Quando entriamo o usciamo dal Focus, ridisegnamo subito lo strumento
+    // interessato per applicare istantaneamente il cambio di spessore della linea!
+    if (['stw', 'sog', 'tws', 'depth'].includes(type)) {
+        refreshGraph(type);
+    }
 }
 
 ['stw', 'sog', 'tws', 'depth'].forEach(type => {
@@ -1275,8 +1371,10 @@ function toggleFocusMode(type, element) {
                 } else if (!isFocusActive) {
                     if (type === 'sog') {
                         displayModeSog = (displayModeSog === 'SOG') ? 'VMG' : 'SOG';
+                        refreshGraph('sog'); // --- FORZA RINFRESCO ISTANTANEO AL CAMBIO SOG/VMG ---
                     } else if (type === 'tws') {
                         displayModeTws = (displayModeTws === 'TWS') ? 'AWS' : 'TWS';
+                        refreshGraph('tws'); // --- FORZA RINFRESCO ISTANTANEO AL CAMBIO TWS/AWS ---
                     }
                     el.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
                     setTimeout(() => el.style.backgroundColor = "", 150);
@@ -1404,22 +1502,45 @@ async function init() {
     // RICONNESSIONE RAPIDA AL RISVEGLIO (VISIBILITY WATCHDOG)
     // ==========================================================================
     
-    // Quando sblocchi l'iPad o riapri il browser, forziamo la chiusura del vecchio
-    // WebSocket orfano. Questo farà scattare immediatamente connect() e la sincronizzazione.
+    // Quando sblocchi l'iPad o riapri la scheda, sincronizziamo in modo intelligente
     document.addEventListener('visibilitychange', () => {
         if (document.visibilityState === 'visible') {
-            console.log("⏰ Schermo sbloccato: forzatura riconnessione rapida.");
-            if (socket) {
-                try {
-                    socket.close(); // Fa scattare onclose -> connect() -> onopen -> fetchServerHistory()
-                } catch (e) {
+            // 1. Se la connessione è già attiva e sana, scarichiamo solo lo storico senza disconnetterci
+            if (socket && socket.readyState === WebSocket.OPEN) {
+                console.log("⏰ Schermo sbloccato: connessione attiva, sincronizzazione dello storico.");
+                fetchServerHistory().then(() => {
+                    ['stw', 'sog', 'depth', 'tws'].forEach(refreshGraph);
+                }).catch(err => {});
+            }
+            // 2. Se la connessione è persa o morta, forzatura riconnessione rapida
+            else {
+                console.log("⏰ Schermo sbloccato: connessione assente, forzatura riconnessione rapida.");
+                if (socket) {
+                    try {
+                        socket.close();
+                    } catch (e) {
+                        connect();
+                    }
+                } else {
                     connect();
                 }
-            } else {
-                connect();
             }
         }
     });
+
+    // Rileva se il dispositivo è andato in sospensione misurando il ritardo dei secondi
+    let lastHeartbeat = Date.now();
+    setInterval(() => {
+        const now = Date.now();
+        const diff = now - lastHeartbeat;
+        lastHeartbeat = now;
+        
+        // Se passano più di 6 secondi tra un ciclo e l'altro (invece di 1 secondo),
+        // significa che il PC era in sospensione. Avviamo il risveglio.
+        if (diff > 6000) {
+            handleWakeUp();
+        }
+    }, 1000);
 }
 
 

package/package.json

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

package/style.css

@@ -175,8 +175,7 @@ body.night-mode .alarm-danger {
 
 .focus-active .is-focused .sparkline path,
 .focus-active .is-focused .sparkline line {
-    stroke-width: 1.5px !important; /* Un briciolo più spessa per la stabilità visiva su schermi grandi */
-}
+  }
 
 .focus-active.focus-side-left {
     grid-template-columns: 3fr 2fr !important;
@@ -415,7 +414,6 @@ body.night-mode .alarm-danger {
 rect[fill="#222"] { fill: #eee !important; }
 #leeway-val { color: #000 !important; }
 
-#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
 #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
 /* ==========================================================================