@sailingrotevista/rotevista-dash 4.0.21 → 5.0.3

package/app.js

@@ -1,11 +1,12 @@
 /**
  * ==========================================================================
- * Signal K Wind Dashboard - Pro Version 2.4 (Definitive)
+ * Signal K Wind Dashboard - Pro Version 3.5 (Time-Based Architecture)
  * ==========================================================================
  * Autore: Sailing Rotevista
  * Motore di calcolo tattico per navigazione e crociera.
- * Gestisce: Medie Vettoriali, Deviazione Standard, Trend Strategico a 15min,
- * Memoria UI persistente, Modalità Hercules e Focus Split Screen.
+ * Gestisce: Medie Vettoriali, Deviazione Standard, Trend Strategico dinamico,
+ * Memoria UI persistente, Modalità Hercules, Focus Split Screen e
+ * Rendering Grafico basato sul Tempo Reale (Timeline e Gap Handling).
  */
 
 // ==========================================================================
@@ -17,14 +18,14 @@ let CONFIG = {
         smoothWindow: 2000,
         longWindow: 30000,
         stabilityTolerance: 2000,
-        stabilityThreshold: 0.95,
-        minSpeed: 0,
+        stabilityThreshold: 0.99,
+        minSpeed: 0.5,
         stabilityBreakout: 15
     },
-    graphs: { reef1: 8, reef2: 10.0, historyMinutes: 30, samples: 60 },
+    graphs: { reef1: 10, reef2: 15, historyMinutes: 10, samples: 60 },
     scales: {
-        stw: { stdMax: 8, hercSpan: 4, step: 2 },
-        sog: { stdMax: 8, hercSpan: 4, step: 2 },
+        stw: { stdMax: 4, hercSpan: 4, step: 2 },
+        sog: { stdMax: 4, hercSpan: 4, step: 2 },
         tws: { stdMax: 15, hercSpan: 10, step: 5 },
         depth: { stdMax: 8, hercSpan: 5, step: 5 }
     },
@@ -34,15 +35,15 @@ let CONFIG = {
 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 DASH_VERSION = "3.5"; // Major Update: Time-Based storage and GAP handling
 const sourceLocks = {};
 
-
 // ==========================================================================
 // 2. STATO GLOBALE E RIFERIMENTI UI
 // ==========================================================================
 let simulationMode = false;
-let displayModeSog = 'SOG'; // Può essere 'SOG' o 'VMG'
+let displayModeSog = 'SOG';
+let displayModeTws = 'TWS';
 let socket, renderInterval, simInterval;
 let lastAvgUIUpdate = 0, audioCtx = null, lastAlarmTime = 0;
 let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
@@ -59,7 +60,6 @@ let emaTwaSin = 0;
 let emaTwaCos = 0;
 let firstEmaRun = true;
 
-// Stato dei singoli grafici (Standard vs Hercules Zoom)
 const graphModes = {
     stw: 'standard',
     sog: 'standard',
@@ -73,10 +73,10 @@ const store = {
     timestamps: {},
     smoothBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
     longBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
-    histories: { stw: [], sog: [], depth: [], tws: [], vmg: [] },
-    // Buffer temporaneo per il calcolo della media dell'intervallo del grafico
-    graphTempBuf: { stw: [], sog: [], depth: [], tws: [], vmg: [] },
-    lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0, vmg: 0 }
+    // histories ora conterrà array di oggetti: { time: Date.now(), val: numero }
+    histories: { stw: [], sog: [], depth: [], tws: [], vmg: [], aws: [] },
+    graphTempBuf: { stw: [], sog: [], depth: [], tws: [], vmg: [], aws: [] },
+    lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0, vmg: 0, aws: 0 }
 };
 
 // Riferimenti agli elementi DOM mappati all'avvio
@@ -96,16 +96,13 @@ const ui = {
 };
 
 // ==========================================================================
-// 3. UTILITIES (MATEMATICA, BUFFER, AUDIO, MEMORIA)
+// 3. UTILITIES (MATEMATICA, BUFFER E MEMORIA)
 // ==========================================================================
 function radToDeg(rad) { return rad * (180 / Math.PI); }
 function degToRad(deg) { return deg * (Math.PI / 180); }
 function msToKts(ms) { return ms * 1.94384; }
 function ktsToMs(kts) { return kts / 1.94384; }
 
-/**
- * Calcola il percorso più breve per la rotazione di un puntatore (evita giri di 360°)
- */
 function getShortestRotation(curr, target) {
     let diff = (target - curr) % 360;
     if (diff > 180) diff -= 360;
@@ -113,15 +110,10 @@ function getShortestRotation(curr, target) {
     return curr + diff;
 }
 
-/**
- * Inserisce un dato nel buffer circolare limitandolo a 2000 campioni (30 min)
- */
 /**
  * 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({
@@ -131,21 +123,15 @@ function safePush(buffer, val, time) {
         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 - Versione "Soft Outlier Rejection"
- * Riduce l'impatto degli sbalzi limitando il loro angolo massimo di discostamento.
  */
 function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false, now) {
     now = now || Date.now();
@@ -155,7 +141,6 @@ function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false, now
     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--) {
@@ -163,34 +148,21 @@ function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false, now
         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 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;
         }
@@ -219,9 +191,6 @@ function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false, now
     };
 }
 
-/**
- * Salva lo stato attuale della dashboard (dati e preferenze UI) nel browser
- */
 function saveDashboardState() {
     try {
         const focusedBox = document.querySelector('.data-box.is-focused');
@@ -236,6 +205,7 @@ function saveDashboardState() {
             histories: store.histories,
             longBuf: store.longBuf,
             displayModeSog: displayModeSog,
+            displayModeTws: displayModeTws,
             graphModes: graphModes,
             isNightMode: document.body.classList.contains('night-mode'),
             isFocusActive: isFocusActive,
@@ -246,9 +216,6 @@ function saveDashboardState() {
     } catch (e) { console.error("Save error:", e); }
 }
 
-/**
- * Carica e ripristina lo stato salvato (entro i 20 minuti di vecchiaia)
- */
 function loadDashboardState() {
     const saved = localStorage.getItem('rotevista_dash_state');
     if (!saved) return;
@@ -261,24 +228,24 @@ function loadDashboardState() {
             if (state.longBuf) Object.assign(store.longBuf, state.longBuf);
             if (state.graphModes) Object.assign(graphModes, state.graphModes);
             
-            // Ripristino SOG/VMG
             if (state.displayModeSog) {
                 displayModeSog = state.displayModeSog;
                 const labelEl = document.getElementById('sog-vmg-label');
                 if (labelEl) labelEl.textContent = displayModeSog;
             }
-
-            // Ripristino Tema Notte
+            if (state.displayModeTws) {
+                displayModeTws = state.displayModeTws;
+                const labelEl = document.getElementById('tws-aws-label');
+                if (labelEl) labelEl.textContent = displayModeTws;
+            }
             if (state.isNightMode) document.body.classList.add('night-mode');
 
-            // Ripristino Focus (Dual Screen)
             if (state.isFocusActive && state.focusedBoxType) {
                 setTimeout(() => {
                     const el = document.querySelector(`.box-${state.focusedBoxType}`);
                     if (el) { isFocusActive = false; toggleFocusMode(state.focusedBoxType, el); }
                 }, 200);
             }
-            console.log("Stato ripristinato con successo dalla cache.");
         }
     } catch (e) { localStorage.removeItem('rotevista_dash_state'); }
 }
@@ -314,13 +281,10 @@ function playGybeAlarm() {
 }
 
 function checkDepthAlarm(m) {
-    // Rimuoviamo sempre le classi prima di riapplicarle
     ui.depth.classList.remove('alarm-warning', 'alarm-danger', 'blink-alarm');
-    
-    // Logica di confronto dinamica
     if (m < CONFIG.alarms.depthDanger) {
         ui.depth.classList.add('alarm-danger', 'blink-alarm');
-        playBingBing(); // Il tuo suono di allarme
+        playBingBing();
     } else if (m < CONFIG.alarms.depthWarning) {
         ui.depth.classList.add('alarm-warning');
     }
@@ -341,11 +305,9 @@ function computeTrueWind() {
     const hdg = store.raw["navigation.headingTrue"] || 0, cog = store.raw["navigation.courseOverGroundTrue"] || 0;
     if (aws === undefined || awa === undefined) return;
 
-    // Vento Reale Rispetto all'acqua (TWA/TWS Water)
     const tw_water_x = aws * Math.cos(awa) - stw, tw_water_y = aws * Math.sin(awa);
     const tws_water = Math.sqrt(tw_water_x * tw_water_x + tw_water_y * tw_water_y);
 
-    // Vento Reale Rispetto al fondo (TWD Ground)
     const drift = (cog - hdg + Math.PI * 3) % (2 * Math.PI) - Math.PI;
     const tw_ground_x = aws * Math.cos(awa) - sog * Math.cos(drift), tw_ground_y = aws * Math.sin(awa) - sog * Math.sin(drift);
     const tws_ground = Math.sqrt(tw_ground_x * tw_ground_x + tw_ground_y * tw_ground_y);
@@ -367,49 +329,37 @@ function computeTrueWind() {
 function processIncomingData(path, val, source) {
     const now = Date.now();
 
-    // --- 1. FILTRO SORGENTE STICKY (Elimina conflitti yacht_device vs Unknown) ---
+    // FILTRO SORGENTE STICKY
     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"
+        "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;
@@ -423,20 +373,20 @@ function processIncomingData(path, val, source) {
 // ==========================================================================
 function updateWindTrend() {
     const now = Date.now();
-    // TATTICA (Lancetta): 2s vs 10s (reazione rapida per trim)
     const twaNow = getCircularAverageFromBuffer(store.longBuf.twa, 2000, true);
     const twaRef = getCircularAverageFromBuffer(store.longBuf.twa, 10000, true);
     
-    // STRATEGIA (Bussola TWD): 1 min vs 30 minuti (tendenza meteo profonda)
     const twdNow = getCircularAverageFromBuffer(store.longBuf.twd, 60000, false);
     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') };
 
-    // TREND METEO (Bussola Centrale TWD)
+    // TREND METEO
     let deltaMeteo = radToDeg((twdNow.val - twdRef.val + Math.PI * 3) % (Math.PI * 2) - Math.PI);
     if (Math.abs(deltaMeteo) > 6.0) {
         const isSouth = store.raw["navigation.position"]?.latitude < 0;
@@ -450,20 +400,17 @@ function updateWindTrend() {
         }
     } else { [compassDots.cw, compassDots.ccw].forEach(el => { if(el){ el.classList.remove('is-trending'); el.setAttribute('fill', '#bbb'); }}); }
 
-    // TREND TATTICO (Lancetta Arancione)
+    // TREND TATTICO
     let deltaTac = radToDeg((twaNow.val - twaRef.val + Math.PI * 3) % (2 * Math.PI) - Math.PI);
     const curTwaDeg = radToDeg(twaNow.val);
     if (Math.abs(deltaTac) > 3.0) {
-        // Calcolo logica tattica: LIFT (Verde), HEADER (Rosso) o NEUTRO (Grigio)
         let absTwa = Math.abs(curTwaDeg);
         let tacticColor;
-
-        // Se siamo tra 75° e 105° (Traverso), il cambio è considerato neutro
         if (absTwa > 75 && absTwa < 105) {
-            tacticColor = "#bbb"; // Grigio/Bianco sporco neutro
+            tacticColor = "#bbb";
         } else {
             let isLift = (curTwaDeg > 0) ? (deltaTac > 0) : (deltaTac < 0);
-            if (absTwa >= 90) isLift = !isLift; // Inversione logica per andature portanti
+            if (absTwa >= 90) isLift = !isLift;
             tacticColor = isLift ? "#27ae60" : "#c0392b";
         }
         if (deltaTac > 0) {
@@ -475,65 +422,45 @@ function updateWindTrend() {
         }
     } else { [gaugeDots.cw, gaugeDots.ccw].forEach(el => { if(el){ el.classList.remove('is-trending'); el.setAttribute('fill', '#bbb'); }}); }
 
-    // --- 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);
+    // ALLARME STRAMBATA (EMA FILTERED)
+    const instTwaRad = store.raw["environment.wind.angleTrueWater"];
+    if (instTwaRad !== undefined) {
+        const dynamicAlpha = Math.max(0.05, 1.1 - CONFIG.averaging.stabilityThreshold);
+        const currentSin = Math.sin(instTwaRad);
+        const currentCos = Math.cos(instTwaRad);
 
-            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));
-            }
+        if (firstEmaRun) {
+            emaTwaSin = currentSin; emaTwaCos = currentCos; firstEmaRun = false;
+        } else {
+            emaTwaSin = (currentSin * dynamicAlpha) + (emaTwaSin * (1 - dynamicAlpha));
+            emaTwaCos = (currentCos * dynamicAlpha) + (emaTwaCos * (1 - dynamicAlpha));
+        }
 
-            // Angolo risultante filtrato
-            const smoothedTwaDeg = radToDeg(Math.atan2(emaTwaSin, emaTwaCos));
+        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)}°`);
-                    }
+        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;
         }
+        lastInstantTwa = smoothedTwaDeg;
+    }
 }
 
 // ==========================================================================
 // 7. RENDERING ENGINE E AGGIORNAMENTO UI
 // ==========================================================================
-function refreshGraph(t) {
-    const type = (t === 'vmg') ? 'sog' : t;
-    const data = store.histories[t]; if (!data || data.length < 2) return;
-    const mode = graphModes[type], cfg = calculateScale(type, data, mode);
-    
-    // Gestione visualizzazione Hercules Zoom (sfondo rosso)
-    const box = document.querySelector(`.box-${type}`);
-    if (box) box.classList.toggle('box-hercules', mode === 'hercules');
-    
-    updateScaleLabels(type, cfg.min, cfg.max);
-    drawGraph(data, type + '-graph', cfg.min, cfg.max, t === 'tws', mode === 'hercules');
-}
 
 /**
- * upUI: Aggiornamento valori digitali con logica anti-ritardo (Istantaneo vs Media)
+ * upUI: Aggiornamento valori digitali
  */
 const upUI = (el, obj, instantRaw, isCompass = false) => {
     if (!obj || obj.val === null || isNaN(obj.val) || instantRaw === undefined) {
-            el.innerHTML = "---&deg;"; 
+            el.innerHTML = "---&deg;";
             el.classList.remove('unstable-data');
     } else {
         let valDeg = Math.round(radToDeg(obj.val));
@@ -542,7 +469,6 @@ const upUI = (el, obj, instantRaw, isCompass = false) => {
         el.innerHTML = mainVal + dev;
         
         let diff = Math.abs((radToDeg(instantRaw) - radToDeg(obj.val) + 540) % 360 - 180);
-        // Allarme lampeggio solo se in navigazione E (R bassa O deviazione alta O salto istantaneo brusco)
         if (isNavigating && (!obj.stable || obj.dev > CONFIG.averaging.stabilityBreakout || diff > CONFIG.averaging.stabilityBreakout)) el.classList.add('unstable-data');
         else el.classList.remove('unstable-data');
     }
@@ -551,102 +477,143 @@ const upUI = (el, obj, instantRaw, isCompass = false) => {
 /**
  * Loop principale di aggiornamento interfaccia (1Hz)
  */
-/**
- * Loop principale di aggiornamento interfaccia (1Hz)
- * Gestisce la gerarchia di aggiornamento Live (1s), Heavy (2s) e Slow (3s).
- */
 function startDisplayLoop() {
     renderInterval = setInterval(() => {
         const now = Date.now();
+        const isNight = document.body.classList.contains('night-mode');
+        
         const stwKts = msToKts(store.raw["navigation.speedThroughWater"] || 0);
         const sogKts = msToKts(store.raw["navigation.speedOverGround"] || 0);
         
-        // Verifica stato navigazione basato su soglia impostata
         isNavigating = stwKts > CONFIG.averaging.minSpeed || sogKts > CONFIG.averaging.minSpeed;
 
-        // --- TIER LIVE (1s): CONTROLLO TIMEOUT DATI ---
-        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 };
+        // --- AGGIORNAMENTO STATUS CON CONTEGGIO MINUTI REALE ---
+        const viewportMinutes = CONFIG.graphs.historyMinutes * (isNavigating ? 1 : 2);
+        const requiredMs = viewportMinutes * 60000;
+        const oldestStw = store.histories.stw ? store.histories.stw[0] : null;
+
+        if (oldestStw) {
+            const availableMs = now - oldestStw.time;
+            if (availableMs >= requiredMs) {
+                ui.status.innerText = `ONLINE ${viewportMinutes}min`;
+            } else {
+                const availableMin = Math.max(1, Math.floor(availableMs / 60000));
+                ui.status.innerText = `ONLINE ${availableMin}/${viewportMinutes}min`;
+            }
+        } else {
+            ui.status.innerText = `ONLINE`;
+        }
+        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];
             }
         }
 
-        // --- AGGIORNAMENTO DATI ISTANTANEI ---
+        // --- AGGIORNAMENTO VELOCITÀ SULL'ACQUA (STW) ---
         if (store.raw["navigation.speedThroughWater"] !== undefined) {
-            ui.stw.innerText = stwKts.toFixed(1); manageHistory('stw', stwKts);
+            ui.stw.innerText = stwKts.toFixed(1);
+            ui.stw.style.color = ""; // Neutro
+            manageHistory('stw', stwKts);
         }
         
-        // --- LOGICA SOG / VMG E COLORI DINAMICI ---
+        // --- LOGICA SOG / VMG ---
         if (store.raw["navigation.speedOverGround"] !== undefined) {
-            const vmg = Math.abs(stwKts * Math.cos(store.raw["environment.wind.angleTrueWater"] || 0));
-            manageHistory('vmg', vmg); manageHistory('sog', sogKts);
+            const vmgVal = Math.abs(stwKts * Math.cos(store.raw["environment.wind.angleTrueWater"] || 0));
+            manageHistory('vmg', vmgVal);
+            manageHistory('sog', sogKts);
             
-            const labelEl = document.getElementById('sog-vmg-label');
+            const labelSogVmg = document.getElementById('sog-vmg-label');
             if (displayModeSog === 'VMG') {
-                ui.sog.innerText = vmg.toFixed(1);
-                // AGGIORNATO AL NUOVO COLORE CYAN VIBRANTE (#00b8d4)
-                ui.sog.style.setProperty('color', '#00b8d4', 'important');
-                if (labelEl) labelEl.textContent = 'VMG';
+                ui.sog.innerText = vmgVal.toFixed(1);
+                ui.sog.style.setProperty('color', '#00b8d4', 'important'); // Cyan
+                if (labelSogVmg) labelSogVmg.textContent = 'VMG';
             } else {
                 ui.sog.innerText = sogKts.toFixed(1);
-                if (labelEl) labelEl.textContent = 'SOG';
+                if (labelSogVmg) labelSogVmg.textContent = 'SOG';
                 
-                // Colore Corrente: Giallo Caldo per corrente a favore, Rosso per corrente contraria
-                // (Allineiamo il colore della corrente a favore con il #ffbb33 usato nei grafici)
-                if (sogKts - stwKts > 0.3) ui.sog.style.setProperty('color', '#ffbb33', 'important');
-                else if (sogKts - stwKts < -0.3) ui.sog.style.setProperty('color', '#ff3b30', 'important'); // Rosso vivido
-                else ui.sog.style.color = ""; // Torna normale
+                if (isNavigating) {
+                    const lastSog = store.histories.sog.length > 0 ? store.histories.sog[store.histories.sog.length - 1].val : sogKts;
+                    const lastStw = store.histories.stw.length > 0 ? store.histories.stw[store.histories.stw.length - 1].val : stwKts;
+                    const drift = lastSog - lastStw;
+
+                    if (drift < -0.3) ui.sog.style.setProperty('color', '#ff3b30', 'important'); // Contro
+                    else if (drift > 0.3) ui.sog.style.setProperty('color', '#00C851', 'important'); // Favore
+                    else ui.sog.style.setProperty('color', '#ffbb33', 'important'); // Neutro SOG
+                } else {
+                    ui.sog.style.color = "";
+                }
             }
         }
 
+        // --- AGGIORNAMENTO PROFONDITÀ (DEPTH) ---
         if (store.raw["environment.depth.belowTransducer"] !== undefined) {
             ui.depth.innerText = store.raw["environment.depth.belowTransducer"].toFixed(1);
             checkDepthAlarm(store.raw["environment.depth.belowTransducer"]);
             manageHistory('depth', store.raw["environment.depth.belowTransducer"]);
         }
 
-        if (store.raw["environment.wind.speedTrue"] !== undefined) {
-            const twsKts = msToKts(store.raw["environment.wind.speedTrue"]);
-            ui.tws.innerText = twsKts.toFixed(1);
+        // --- 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;
+        
+        if (store.raw["environment.wind.speedTrue"] !== undefined) manageHistory('tws', twsVal);
+        if (store.raw["environment.wind.speedApparent"] !== undefined) manageHistory('aws', awsVal);
+
+        if (store.raw["environment.wind.speedTrue"] !== undefined || store.raw["environment.wind.speedApparent"] !== undefined) {
+            const labelWind = document.getElementById('tws-aws-label');
+            const currentWind = (displayModeTws === 'AWS') ? awsVal : twsVal;
             
-            // Colore Reef: se normale usiamo "", il CSS metterà Nero (giorno) o Rosso (notte)
-            if (twsKts >= CONFIG.graphs.reef2) ui.tws.style.setProperty('color', '#e74c3c', 'important');
-            else if (twsKts >= CONFIG.graphs.reef1) ui.tws.style.setProperty('color', '#e67e22', 'important');
-            else ui.tws.style.color = "";
+            ui.tws.innerText = currentWind.toFixed(1);
+            if (labelWind) labelWind.textContent = displayModeTws;
 
-            manageHistory('tws', twsKts);
+            if (currentWind >= CONFIG.graphs.reef2) {
+                ui.tws.style.setProperty('color', '#ff3b30', 'important');
+            } else if (currentWind >= CONFIG.graphs.reef1) {
+                ui.tws.style.setProperty('color', '#ff9800', 'important');
+            } else {
+                if (displayModeTws === 'AWS') {
+                    ui.tws.style.setProperty('color', '#5c6bc0', 'important');
+                } else {
+                    const navyNight = isNight ? '#6c8ea0' : '#2c3e50';
+                    ui.tws.style.setProperty('color', navyNight, 'important');
+                }
+            }
         }
 
         if (store.raw["environment.wind.speedApparent"] !== undefined) {
-            ui.awsSvg.textContent = msToKts(store.raw["environment.wind.speedApparent"]).toFixed(1);
+            ui.awsSvg.textContent = awsVal.toFixed(1);
         }
 
-        // --- PUNTATORI ANALOGICI (Smoothing 2s) ---
+        // --- PUNTATORI ANALOGICI ---
         const smAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, 2000, true);
         const smTwa = getCircularAverageFromBuffer(store.smoothBuf.twa, 2000, true);
-        if (smAwa) { curAwaRot = getShortestRotation(curAwaRot, radToDeg(smAwa.val)); ui.awa.setAttribute('transform', `rotate(${curAwaRot}, 200, 200)`); }
-        if (smTwa) { curTwaRot = getShortestRotation(curTwaRot, radToDeg(smTwa.val)); ui.twa.setAttribute('transform', `rotate(${curTwaRot}, 200, 200)`); }
+        if (smAwa) ui.awa.setAttribute('transform', `rotate(${curAwaRot = getShortestRotation(curAwaRot, radToDeg(smAwa.val))}, 200, 200)`);
+        if (smTwa) ui.twa.setAttribute('transform', `rotate(${curTwaRot = getShortestRotation(curTwaRot, radToDeg(smTwa.val))}, 200, 200)`);
         
-        // --- CALCOLO LEEWAY E TRACK POINTER ---
         if (store.raw["navigation.courseOverGroundTrue"] !== undefined && store.raw["navigation.headingTrue"] !== undefined) {
             let driftDeg = radToDeg((store.raw["navigation.courseOverGroundTrue"] - store.raw["navigation.headingTrue"] + Math.PI * 3) % (Math.PI * 2) - Math.PI);
-            // Azzeramento sotto soglia minima impostata
             smoothedLeeway = (sogKts < CONFIG.averaging.minSpeed) ? 0 : (smoothedLeeway * 0.9) + (driftDeg * 0.1);
-            curTrackRot = getShortestRotation(curTrackRot, smoothedLeeway); ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
-            ui.leewayVal.style.color = (Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7) ? "#e67e22" : "";
+            curTrackRot = getShortestRotation(curTrackRot, smoothedLeeway);
+            ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
+            ui.leewayVal.style.color = (Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7) ? "#ff9800" : "";
             updateLeewayDisplay(Math.max(-20, Math.min(20, smoothedLeeway)));
         }
         
-        updateWindTrend();
-
-        // TIER HEAVY (2s) - Grafici e Persistenza Browser
+        // --- HEAVY TIER (2s) E SLOW TIER (3s) ---
         if (lastAvgUIUpdate++ % 2 === 0) {
             ['stw', 'sog', 'depth', 'tws'].forEach(refreshGraph);
             saveDashboardState();
         }
 
-        // TIER SLOW (3s) - Medie Lunghe e Calcolo TACK
         if (lastAvgUIUpdate % 3 === 0) {
             let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, CONFIG.averaging.longWindow * 2, false);
             let cObj = getCircularAverageFromBuffer(store.longBuf.cog, CONFIG.averaging.longWindow, false);
@@ -660,50 +627,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 (VETTORIALE) ---
             if (hObj && twdObj) {
-                // 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 dS = Math.sin(axisRad - targetRad);
+                    const dC = Math.cos(axisRad - targetRad);
+                    return Math.atan2(Math.sin(axisRad) * dC + Math.cos(axisRad) * dS, Math.cos(axisRad) * dC - Math.sin(axisRad) * dS);
                 };
-
                 const unstableH = !hObj.stable || !twdObj.stable || hObj.dev > CONFIG.averaging.stabilityBreakout;
-
-                if (!isNavigating) {
-                    ui.tackHdg.innerHTML = "---&deg;";
-                } else if (unstableH) {
-                    ui.tackHdg.innerHTML = "---&deg;"; ui.tackHdg.classList.add('unstable-data');
-                } else {
-                    const reflectedH = reflectAngle(hObj.val, twdObj.val);
-                    const outH = (radToDeg(reflectedH) + 360) % 360;
-                    ui.tackHdg.innerHTML = `${Math.round(outH).toString().padStart(3, '0')}&deg;`;
+                if (!isNavigating) ui.tackHdg.innerHTML = "---&deg;";
+                else if (unstableH) { ui.tackHdg.innerHTML = "---&deg;"; ui.tackHdg.classList.add('unstable-data'); }
+                else {
+                    const rH = (radToDeg(reflectAngle(hObj.val, twdObj.val)) + 360) % 360;
+                    ui.tackHdg.innerHTML = `${Math.round(rH).toString().padStart(3, '0')}&deg;`;
                     ui.tackHdg.classList.remove('unstable-data');
                 }
-
                 if (cObj) {
                     const unstableC = !cObj.stable || !twdObj.stable || cObj.dev > CONFIG.averaging.stabilityBreakout;
-                    if (!isNavigating) {
-                        ui.tackCog.innerHTML = "---&deg;";
-                    } else if (unstableC) {
-                        ui.tackCog.innerHTML = "---&deg;"; ui.tackCog.classList.add('unstable-data');
-                    } else {
-                        const reflectedC = reflectAngle(cObj.val, twdObj.val);
-                        const outC = (radToDeg(reflectedC) + 360) % 360;
-                        ui.tackCog.innerHTML = `${Math.round(outC).toString().padStart(3, '0')}&deg;`;
+                    if (!isNavigating) ui.tackCog.innerHTML = "---&deg;";
+                    else if (unstableC) { ui.tackCog.innerHTML = "---&deg;"; ui.tackCog.classList.add('unstable-data'); }
+                    else {
+                        const rC = (radToDeg(reflectAngle(cObj.val, twdObj.val)) + 360) % 360;
+                        ui.tackCog.innerHTML = `${Math.round(rC).toString().padStart(3, '0')}&deg;`;
                         ui.tackCog.classList.remove('unstable-data');
                     }
                 }
             }
             
-            // Rotazione Mini-Bussole
             const smHdgIcons = getCircularAverageFromBuffer(store.smoothBuf.hdg, 2000, false);
             const smTwdIcons = getCircularAverageFromBuffer(store.smoothBuf.twd, 2000, false);
             if (smHdgIcons && smTwdIcons) {
-                curWindCompassRot = getShortestRotation(curWindCompassRot, radToDeg(smTwdIcons.val)); ui.twdArrow.setAttribute('transform', `rotate(${curWindCompassRot}, 20, 20)`);
-                curBoatCompassRot = getShortestRotation(curBoatCompassRot, radToDeg(smHdgIcons.val)); ui.twdBoat.setAttribute('transform', `rotate(${curBoatCompassRot}, 20, 20)`);
+                curWindCompassRot = getShortestRotation(curWindCompassRot, radToDeg(smTwdIcons.val));
+                ui.twdArrow.setAttribute('transform', `rotate(${curWindCompassRot}, 20, 20)`);
+                curBoatCompassRot = getShortestRotation(curBoatCompassRot, radToDeg(smHdgIcons.val));
+                ui.twdBoat.setAttribute('transform', `rotate(${curBoatCompassRot}, 20, 20)`);
             }
         }
     }, RENDER_INTERVAL_MS);
@@ -712,53 +668,57 @@ function startDisplayLoop() {
 // ==========================================================================
 // 8. CONFIGURAZIONE E GRAFICI UTILS
 // ==========================================================================
-/**
- * Recupera la configurazione dal server e applica migrazioni automatiche per le vecchie versioni
- */
 async function fetchServerConfig() {
     try {
         const response = await fetch('/rotevista-config');
         if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
         const data = await response.json();
 
-        // Stampa di debug per verificare cosa riceve il client
-        console.log("🔍 Configurazione ricevuta dal Server:", data);
-
-        // Merge intelligente dei dati ricevuti
         Object.assign(CONFIG.alarms, data.alarms || {});
         Object.assign(CONFIG.graphs, data.graphs || {});
         Object.assign(CONFIG.averaging, data.averaging || {});
         
-        // --- 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. Stabilità attiva:", CONFIG.averaging.stabilityThreshold);
     } catch (err) {
         console.warn("⚠️ Utilizzo default locali. Motivo:", err.message);
     }
 }
 
+/**
+ * Rielaborazione Storica Time-Based (Rimuove accumulo e gestisce il Pruning dinamicamente)
+ */
 function manageHistory(t, v) {
-    const n = Date.now(), interval = (CONFIG.graphs.historyMinutes * 60000) / CONFIG.graphs.samples;
+    const n = Date.now();
+    const interval = (CONFIG.graphs.historyMinutes * 60000) / CONFIG.graphs.samples;
+
     if (!store.graphTempBuf[t]) store.graphTempBuf[t] = [];
     store.graphTempBuf[t].push(v);
+
     if (n - store.lastUpdates[t] > interval || store.histories[t].length === 0) {
         const avg = store.graphTempBuf[t].reduce((a, b) => a + b, 0) / store.graphTempBuf[t].length;
-        store.histories[t].push(avg);
-        if (store.histories[t].length > CONFIG.graphs.samples) store.histories[t].shift();
-        store.graphTempBuf[t] = []; store.lastUpdates[t] = n;
+
+        // NUOVO STORAGE TIME-BASED
+        store.histories[t].push({ time: n, val: avg });
+
+        // PRUNING DINAMICO
+        const maxViewportMinutes = CONFIG.graphs.historyMinutes * 2;
+        const maxHistoryMs = (maxViewportMinutes * 60000) + 30000;
+
+        while (store.histories[t].length > 0 && (n - store.histories[t][0].time) > maxHistoryMs) {
+            store.histories[t].shift();
+        }
+
+        store.graphTempBuf[t] = [];
+        store.lastUpdates[t] = n;
     }
 }
 
@@ -778,12 +738,36 @@ function updateScaleLabels(t, min, max) {
 }
 
 /**
- * drawGraph: Disegna i grafici con griglia temporale intelligente
- * Usa un Gradiente Lineare SVG dinamico per eliminare le giunzioni dei poligoni.
+ * refreshGraph: Recupero dati, switch AWS/TWS e passaggio a motore grafico.
  */
+function refreshGraph(t) {
+    const boxType = (t === 'vmg') ? 'sog' : t;
+    let rawData;
+
+    if (t === 'tws' && displayModeTws === 'AWS') {
+        rawData = store.histories['aws'];
+    } else {
+        rawData = store.histories[t];
+    }
+
+    if (!rawData || rawData.length < 2) return;
+
+    // ESTRAZIONE SOLO VALORI NUMERICI per calculateScale()
+    const values = rawData.map(p => p.val);
+    const mode = graphModes[boxType];
+    const cfg = calculateScale(boxType, values, mode);
+
+    const box = document.querySelector(`.box-${boxType}`);
+    if (box) box.classList.toggle('box-hercules', mode === 'hercules');
+
+    updateScaleLabels(boxType, cfg.min, cfg.max);
+
+    // Passiamo tutto l'array (oggetti) al nuovo motore
+    drawGraph(rawData, boxType + '-graph', cfg.min, cfg.max, t === 'tws', mode === 'hercules');
+}
+
 /**
- * drawGraph: Disegna i grafici con griglia temporale intelligente
- * Versione bilanciata: 1.5px per allarmi critici, 1px per il resto.
+ * drawGraph: Motore SVG con Timeline Reale e Gestione GAP
  */
 function drawGraph(d, id, min, max, isTws, isHercules) {
     const svg = document.getElementById(id);
@@ -792,96 +776,112 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
     const w = 200, h = 40;
     const range = max - min || 1;
     const isDepth = (id === 'depth-graph');
-    const samples = CONFIG.graphs.samples;
-
-    // 1. Griglia (Sottile 0.5px)
-    let grids = "";
-    [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" />`;
-    });
-    const gridInterval = (CONFIG.graphs.historyMinutes <= 15) ? 1 : 5;
-    for (let m = gridInterval; m < CONFIG.graphs.historyMinutes; m += gridInterval) {
-        const x = w - (m / CONFIG.graphs.historyMinutes) * w;
-        grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(0,0,0,0.08)" stroke-width="0.5" />`;
-    }
+    const now = Date.now();
 
-    // 2. Tavolozza Colori Vividi
-    const baseColorTws = "#2c3e50";
-    const baseColorDepth = "#0088cc";
-
-    const getColor = (val) => {
-        if (isTws) return (val >= CONFIG.graphs.reef2) ? "#ff3b30" : (val >= CONFIG.graphs.reef1 ? "#ff9800" : baseColorTws);
-        if (isDepth) return (val < CONFIG.alarms.depthDanger) ? "#ff3b30" : (val < CONFIG.alarms.depthWarning ? "#ff9800" : baseColorDepth);
-        switch(id) {
-            case 'stw-graph': return "#00C851";
-            case 'sog-graph': return (displayModeSog === 'VMG') ? "#00b8d4" : "#ffbb33";
-            default: return baseColorTws;
+    // VIEWPORT TEMPORALE DINAMICO
+    const visibleMinutes = CONFIG.graphs.historyMinutes * (isNavigating ? 1 : 2);
+    const viewportMs = visibleMinutes * 60000;
+    const viewportStart = now - viewportMs;
+
+    // FILTRO DATI VISIBILI (Gestisce Compressione/Zoom in modo naturale)
+    const visibleData = d.filter(p => p.time >= viewportStart);
+    if (visibleData.length < 2) return;
+
+    // COLORI
+    const colDanger  = "#ff3b30", colWarning = "#ff9800", colTws = "#2c3e50", colAws = "#5c6bc0";
+    const colDepth   = "#0088cc", colStw = "#00C851", colSog = "#ffbb33", colVmg = "#00b8d4";
+
+    const getColorProps = (val) => {
+        let color = colTws, opacity = "0.15", stroke = "1";
+        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"; }
+            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"; }
+            else color = colDepth;
+        } else {
+            if (id === 'stw-graph') color = colStw;
+            else if (id === 'sog-graph') color = (displayModeSog === 'VMG') ? colVmg : colSog;
         }
+        return { color, opacity, stroke };
     };
 
-    // 3. Creazione Gradiente e Linee
-    let gradientStops = "";
-    let lines = "";
-    let areaPath = `M 0 ${h} `;
-
-    for (let i = 1; i < d.length; i++) {
-        const percentPrev = ((i - 1) / (samples - 1)) * 100;
-        const percentCurr = (i / (samples - 1)) * 100;
-
-        const x1 = ((i - 1) / (samples - 1)) * w;
-        const y1 = h - (Math.max(0, Math.min(1, (d[i - 1] - min) / range)) * h);
-        const x2 = (i / (samples - 1)) * w;
-        const y2 = h - (Math.max(0, Math.min(1, (d[i] - min) / range)) * h);
-        
-        const color = getColor(d[i]);
-        
-        // Logica Opacità e Spessore (Tua configurazione)
-        let fillOpacity = "0.15";
-        let strokeWidth = "1";
-
-        if (color === "#ff3b30") {
-            fillOpacity = "0.85"; // Rosso: Molto visibile
-            strokeWidth = "1.5";  // Rosso: Più marcato
-        } else if (color === "#ff9800") {
-            fillOpacity = "0.45"; // Arancio: Velo medio
-            strokeWidth = "1";    // Arancio: Sottile
-        }
+    // GRIGLIA ORIZZONTALE
+    let grids = "";
+    [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" />`);
 
-        // Costruzione Gradiente (stacchi netti tra i colori)
-        gradientStops += `<stop offset="${percentPrev}%" stop-color="${color}" stop-opacity="${fillOpacity}" />`;
-        gradientStops += `<stop offset="${percentCurr}%" stop-color="${color}" stop-opacity="${fillOpacity}" />`;
+    // GRIGLIA VERTICALE VERA
+    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" />`;
+    }
 
-        // Disegno Linea con precisione geometrica
-        lines += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" 
-                 style="stroke: ${color}; stroke-width: ${strokeWidth}; stroke-linecap: round; shape-rendering: geometricPrecision;" />`;
-                 
-        if (i === 1) areaPath += `L ${x1} ${y1} `;
-            areaPath += `L ${x2} ${y2} `;
+    // RENDER TIME-BASED
+    let gradientStops = "", lines = "", areaPath = "";
+    let started = false;
+
+    for (let i = 1; i < visibleData.length; i++) {
+        const pA = visibleData[i - 1];
+        const pB = visibleData[i];
+
+        // POSIZIONE X ESATTA AL MILLISECONDO
+        const x1 = ((pA.time - viewportStart) / viewportMs) * w;
+        const x2 = ((pB.time - viewportStart) / viewportMs) * w;
+        const y1 = h - (Math.max(0, Math.min(1, (pA.val - min) / range)) * h);
+        const y2 = h - (Math.max(0, Math.min(1, (pB.val - min) / range)) * h);
+
+        const props = getColorProps(pB.val);
+
+        // GESTIONE GAP TEMPORALI (Network loss)
+        const deltaTime = pB.time - pA.time;
+        const expectedInterval = viewportMs / CONFIG.graphs.samples;
+        const isGap = deltaTime > (expectedInterval * 2.5);
+
+        // STOPS GRADIENTE
+        const offset1 = (x1 / w) * 100, offset2 = (x2 / w) * 100;
+        gradientStops += `<stop offset="${offset1}%" stop-color="${props.color}" stop-opacity="${props.opacity}" />`;
+        gradientStops += `<stop offset="${offset2}%" stop-color="${props.color}" stop-opacity="${props.opacity}" />`;
+
+        // --- FIX: GESTIONE AREA E LINEE DURANTE I GAP ---
+        if (isGap) {
+            // Se c'è un buco nei dati e avevamo già iniziato a disegnare...
+            if (started) {
+                // Chiudiamo il pezzo di area precedente scendendo verticalmente (Z non serve qui)
+                areaPath += `L ${x1} ${h} `;
+                started = false; // Resettiamo il flag per far ripartire l'area al prossimo punto
+            }
+        } else {
+            // I dati sono continui, disegniamo la linea superiore
+            lines += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" style="stroke:${props.color}; stroke-width:${props.stroke}; stroke-linecap:round; shape-rendering:geometricPrecision;" />`;
             
-            // Salviamo l'ultima coordinata X calcolata per chiudere correttamente il path
-            if (i === d.length - 1) {
-                areaPath += `L ${x2} ${h} Z`;
+            // Gestione Area
+            if (!started) {
+                // Iniziamo un nuovo pezzo di area dal fondo, saliamo a y1
+                areaPath += `M ${Math.max(0, x1)} ${h} L ${Math.max(0, x1)} ${y1} `;
+                started = true;
             }
+            // Aggiungiamo il punto attuale
+            areaPath += `L ${x2} ${y2} `;
         }
+    }
 
-    // 4. Iniezione del Gradiente
-    const gradId = `grad-${id}`;
-    const defs = `
-        <defs>
-            <linearGradient id="${gradId}" x1="0%" y1="0%" x2="100%" y2="0%">
-                ${gradientStops}
-            </linearGradient>
-        </defs>
-    `;
-
-    // 5. Render Finale
-    if (isTws || isDepth) {
-        svg.innerHTML = `${defs}${grids}<path d="${areaPath}" fill="url(#${gradId})" stroke="none" />${lines}`;
-    } else {
-        // Per STW/SOG usiamo il colore dell'ultimo punto con area fissa 0.15
-        const currentPathColor = getColor(d[d.length - 1]);
-        svg.innerHTML = `${grids}<path d="${areaPath}" fill="${currentPathColor}" fill-opacity="0.15" stroke="none" />${lines}`;
+    // CHIUSURA FINALE DELL'AREA (Solo se non siamo finiti dentro un gap)
+    if (started) {
+        const last = visibleData[visibleData.length - 1];
+        const lastX = ((last.time - viewportStart) / viewportMs) * w;
+        areaPath += `L ${lastX} ${h} Z`; // Z chiude automaticamente il path tornando al punto 'M' iniziale
     }
+
+    // GRADIENTE
+    const gradId = `grad-${id}`;
+    const defs = `<defs><linearGradient id="${gradId}" x1="0" y1="0" x2="${w}" y2="0" gradientUnits="userSpaceOnUse">${gradientStops}</linearGradient></defs>`;
+    
+    // RENDER FINALE
+    svg.innerHTML = `${defs}${grids}<path d="${areaPath}" fill="url(#${gradId})" stroke="none" />${lines}`;
 }
 
 // ==========================================================================
@@ -898,13 +898,49 @@ function toggleFocusMode(type, element) {
 ['stw', 'sog', 'tws', 'depth'].forEach(type => {
     const el = document.getElementById(type + '-graph').closest('.data-box');
     let lastTapTime = 0, tapTimeout, isLongPressActive = false;
-    el.addEventListener('pointerdown', (e) => { isLongPressActive = false; pressTimer = setTimeout(() => { if (!isFocusActive) { isLongPressActive = true; toggleFocusMode(type, el); lastTapTime = 0; } }, 1000); });
+
+    el.addEventListener('pointerdown', (e) => {
+        isLongPressActive = false;
+        pressTimer = setTimeout(() => {
+            if (!isFocusActive) {
+                isLongPressActive = true;
+                toggleFocusMode(type, el);
+                lastTapTime = 0;
+            }
+        }, 1000);
+    });
+
     el.addEventListener('pointerup', (e) => {
-        clearTimeout(pressTimer); if (isLongPressActive) return;
-        const currentTime = new Date().getTime(), tapDelay = currentTime - lastTapTime;
-        if (tapDelay < 300 && tapDelay > 0) { clearTimeout(tapTimeout); graphModes[type] = (graphModes[type] === 'standard') ? 'hercules' : 'standard'; localStorage.setItem('mode_' + type, graphModes[type]); refreshGraph(type); lastTapTime = 0; }
-        else { lastTapTime = currentTime; tapTimeout = setTimeout(() => { if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); else if (!isFocusActive && type === 'sog') { displayModeSog = (displayModeSog === 'SOG') ? 'VMG' : 'SOG'; el.style.backgroundColor = "rgba(0, 0, 0, 0.05)"; setTimeout(() => el.style.backgroundColor = "", 150); } }, 250); }
+        clearTimeout(pressTimer);
+        if (isLongPressActive) return;
+
+        const currentTime = new Date().getTime();
+        const tapDelay = currentTime - lastTapTime;
+
+        if (tapDelay < 300 && tapDelay > 0) {
+            clearTimeout(tapTimeout);
+            graphModes[type] = (graphModes[type] === 'standard') ? 'hercules' : 'standard';
+            localStorage.setItem('mode_' + type, graphModes[type]);
+            refreshGraph(type);
+            lastTapTime = 0;
+        } else {
+            lastTapTime = currentTime;
+            tapTimeout = setTimeout(() => {
+                if (isFocusActive && el.classList.contains('is-focused')) {
+                    toggleFocusMode(type, el);
+                } else if (!isFocusActive) {
+                    if (type === 'sog') {
+                        displayModeSog = (displayModeSog === 'SOG') ? 'VMG' : 'SOG';
+                    } else if (type === 'tws') {
+                        displayModeTws = (displayModeTws === 'TWS') ? 'AWS' : 'TWS';
+                    }
+                    el.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+                    setTimeout(() => el.style.backgroundColor = "", 150);
+                }
+            }, 250);
+        }
     });
+
     el.addEventListener('pointerleave', () => clearTimeout(pressTimer));
 });
 
@@ -948,10 +984,7 @@ function connect() {
             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));
                     }

package/index.html

@@ -168,7 +168,10 @@
         </div>
 
         <div class="data-box box-tws">
-            <div class="label-row"><span class="label">TWS</span><span class="unit">kts</span></div>
+            <div class="label-row">
+                <span class="label" id="tws-aws-label">TWS</span>
+                <span class="unit">kts</span>
+            </div>
             <span class="value" id="tws">0.0</span>
             <div class="graph-wrapper">
                 <div class="scale-labels" id="tws-scale"></div>

package/index.js

@@ -84,19 +84,19 @@ module.exports = function (app) {
           reef1: {
             type: 'number',
             title: '1st Reef Alert (Orange)',
-            description: "Wind speed (TWS) at which the graph turns orange, suggesting it's time to prepare for the first sail reduction.",
+            description: "Wind speed at which the graph turns orange. This threshold applies to the active mode: in TWS it indicates weather intensity, in AWS it indicates pressure on sails/rigging.",
             default: 15.0
           },
           reef2: {
             type: 'number',
             title: '2nd Reef Alert (Red)',
-            description: "Wind speed (TWS) at which the graph turns red, indicating urgent need for sail reduction.",
+            description: "Critical wind speed at which the graph turns red. This threshold applies to the active mode: in TWS it warns of high sea state, in AWS it warns of excessive load on the mast/sails.",
             default: 20.0
           },
           historyMinutes: {
             type: 'number',
             title: 'Strategic Timeline (Minutes)',
-            description: "Total duration shown in the charts. Vertical grid lines mark 1-minute intervals for short durations and 5-minute intervals for long ones.",
+            description: "Sets the time duration for all charts. It also defines the comparison window for the Strategic Weather Trend (the dot in the TWD compass) to detect long-term wind shifts.",
             default: 5,
             enum: [5, 10, 15, 30, 60]
           }

package/package.json

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