@sailingrotevista/rotevista-dash 2.0.19 → 2.0.21

package/app.js

@@ -1,9 +1,16 @@
 // ==========================================================================
-// 1. CONFIGURAZIONE E DEFAULT (Sincronizzato con il Plugin SignalK)
+// 1. CONFIGURAZIONE E DEFAULT
 // ==========================================================================
 let CONFIG = {
     alarms: { depthDanger: 2.5, depthWarning: 5.0 },
-    averages: { smoothWindow: 2000, longWindow: 60000, stabilityTolerance: 2000, stabilityThreshold: 0.90, minSpeed: 0.5 },
+    // Ottimizzato per mare formato: 30s di media e soglia stabilità 85%
+    averages: {
+        smoothWindow: 2000,
+        longWindow: 30000,
+        stabilityTolerance: 2000,
+        stabilityThreshold: 0.85,
+        minSpeed: 0.5
+    },
     graphs: { reef1: 15.0, reef2: 20.0, historyMinutes: 5, samples: 60 },
     scales: {
         stw: { stdMax: 12, hercSpan: 4, step: 2 },
@@ -22,13 +29,13 @@ const SIM_SAMPLE_INTERVAL = 1000;
 // 2. STATO GLOBALE E RIFERIMENTI UI
 // ==========================================================================
 let simulationMode = false;
-let displayModeSog = 'SOG'; // 'SOG' o 'VMG'
+let displayModeSog = 'SOG';
 let socket, renderInterval, simInterval;
 let lastAvgUIUpdate = 0, audioCtx = null, lastAlarmTime = 0;
 let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
 let curBoatCompassRot = 0, curWindCompassRot = 0;
 
-let smoothedLeeway = 0, rotationTrend = 0;
+let smoothedLeeway = 0, rotationTrend = 0, meteoTrend = 0;
 let lastShortAvgVal = null, lastInstantTwa = null;
 let lastTrendTime = Date.now(), lastGybeAlarmTime = 0, lastTWCompute = 0;
 let twDirty = false, isNavigating = false, reconnectDelay = 1000;
@@ -47,6 +54,8 @@ const store = {
     smoothBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
     longBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
     histories: { stw: [], sog: [], depth: [], tws: [], vmg: [] },
+    // Buffer temporaneo per calcolare la media dell'intervallo nei grafici
+    graphTempBuf: { stw: [], sog: [], depth: [], tws: [], vmg: [] },
     lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0, vmg: 0 }
 };
 
@@ -66,7 +75,7 @@ const ui = {
 };
 
 // ==========================================================================
-// 3. UTILITIES DI SISTEMA (MATEMATICA E BUFFER)
+// 3. UTILITIES (MATEMATICA, BUFFER, AUDIO)
 // ==========================================================================
 function radToDeg(rad) { return rad * (180 / Math.PI); }
 function degToRad(deg) { return deg * (Math.PI / 180); }
@@ -74,17 +83,11 @@ function msToKts(ms) { return ms * 1.94384; }
 function ktsToMs(kts) { return kts / 1.94384; }
 function getShortestRotation(curr, target) { let diff = (target - curr) % 360; if (diff > 180) diff -= 360; else if (diff < -180) diff += 360; return curr + diff; }
 
-/**
- * Gestione sicura dei buffer per prevenire memory leak (O(1) complexity).
- */
 function safePush(buffer, val, time, maxLen = 200) {
     buffer.push({ val: val, time: time });
     if (buffer.length > maxLen) { buffer.shift(); }
 }
 
-/**
- * Calcola medie circolari restituendo Radianti.
- */
 function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
     const now = Date.now();
     const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
@@ -97,14 +100,35 @@ function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
     return { val: signed ? avgRad : (avgRad + 2 * Math.PI) % (2 * Math.PI), stable: isStable };
 }
 
+function playBingBing() {
+    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    const n = Date.now(); if (n - lastAlarmTime < 3000) return; lastAlarmTime = n;
+    function b(f, s) { const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); o.frequency.value = f; g.gain.setValueAtTime(0.1, s); g.gain.exponentialRampToValueAtTime(0.01, s + 0.4); o.start(s); o.stop(s + 0.5); }
+    b(880, audioCtx.currentTime); b(880, audioCtx.currentTime + 0.6);
+}
+
+function playGybeAlarm() {
+    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    const n = Date.now(); if (n - lastAlarmTime < 2000) return; lastAlarmTime = n;
+    function note(f, s, d) { const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); o.type = 'square'; o.frequency.value = f; g.gain.setValueAtTime(0.05, s); g.gain.exponentialRampToValueAtTime(0.001, s + d); o.start(s); o.stop(s + d); }
+    for (let i = 0; i < 4; i++) { note(1800, audioCtx.currentTime + (i * 0.15), 0.1); note(1200, audioCtx.currentTime + (i * 0.15) + 0.07, 0.1); }
+}
+
+function checkDepthAlarm(m) {
+    ui.depth.classList.remove('alarm-warning', 'alarm-danger');
+    if (m < CONFIG.alarms.depthDanger) { ui.depth.classList.add('alarm-danger'); playBingBing(); }
+    else if (m < CONFIG.alarms.depthWarning) ui.depth.classList.add('alarm-warning');
+}
+
+function updateLeewayDisplay(deg) {
+    const c = 125, px = 125/20; let w = Math.min(Math.abs(deg)*px, 125);
+    ui.leewayMask.setAttribute('x', deg >= 0 ? c : c - w); ui.leewayMask.setAttribute('width', w);
+    ui.leewayVal.textContent = `LEEWAY: ${deg.toFixed(1)}°`;
+}
+
 // ==========================================================================
-// 4. LOGICA FISICA E CALCOLI
+// 4. MOTORE DI CALCOLO VENTO E DATA ROUTING
 // ==========================================================================
-
-/**
- * Calcola il Vento Reale partendo dagli Apparenti.
- * Logica Acqua (Vele) vs Terra (Meteo).
- */
 function computeTrueWind() {
     const aws = store.raw["environment.wind.speedApparent"];
     let awa = store.raw["environment.wind.angleApparent"];
@@ -114,21 +138,27 @@ function computeTrueWind() {
     if (aws === undefined || awa === undefined) return;
     if (awa > Math.PI) awa -= 2 * Math.PI;
 
-    // Vento Reale su ACQUA (TWA/TWS)
     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), twa_water = Math.atan2(tw_water_y, tw_water_x);
+    const tws_water = Math.sqrt(tw_water_x * tw_water_x + tw_water_y * tw_water_y);
 
-    // Vento Reale su TERRA (TWD)
     const drift_angle = (cog - hdg + Math.PI * 3) % (2 * Math.PI) - Math.PI;
     const sog_vec_x = sog * Math.cos(drift_angle), sog_vec_y = sog * Math.sin(drift_angle);
     const tw_ground_x = aws * Math.cos(awa) - sog_vec_x, tw_ground_y = aws * Math.sin(awa) - sog_vec_y;
-    let twd_ground = (hdg + Math.atan2(tw_ground_y, tw_ground_x) + 2 * Math.PI) % (2 * Math.PI);
-    
+    const tws_ground = Math.sqrt(tw_ground_x * tw_ground_x + tw_ground_y * tw_ground_y);
+
     const now = Date.now();
-    store.raw["environment.wind.speedTrue"] = tws_water; store.raw["environment.wind.angleTrueWater"] = twa_water; store.raw["environment.wind.directionTrue"] = twd_ground;
+    store.raw["environment.wind.speedTrue"] = tws_water;
     
-    safePush(store.smoothBuf.twa, twa_water, now); safePush(store.longBuf.twa, twa_water, now);
-    safePush(store.smoothBuf.twd, twd_ground, now); safePush(store.longBuf.twd, twd_ground, now);
+    if (tws_water > 0.05) {
+        const twa_water = Math.atan2(tw_water_y, tw_water_x);
+        store.raw["environment.wind.angleTrueWater"] = twa_water;
+        safePush(store.smoothBuf.twa, twa_water, now); safePush(store.longBuf.twa, twa_water, now);
+    }
+    if (tws_ground > 0.05) {
+        let twd_ground = (hdg + Math.atan2(tw_ground_y, tw_ground_x) + 2 * Math.PI) % (2 * Math.PI);
+        store.raw["environment.wind.directionTrue"] = twd_ground;
+        safePush(store.smoothBuf.twd, twd_ground, now); safePush(store.longBuf.twd, twd_ground, now);
+    }
 }
 
 function processIncomingData(path, val) {
@@ -136,7 +166,6 @@ function processIncomingData(path, val) {
     if (path === "navigation.position") store.raw["navigation.position"] = val;
     if (path === "environment.wind.angleApparent") { safePush(store.smoothBuf.awa, val, now); safePush(store.longBuf.awa, val, now); }
 
-    // Dirty flag + Debounce 100ms
     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; }
@@ -146,18 +175,16 @@ function processIncomingData(path, val) {
 }
 
 // ==========================================================================
-// 5. AUDIO E ALLARMI
-// ==========================================================================
-function playBingBing() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const n = Date.now(); if (n - lastAlarmTime < 3000) return; lastAlarmTime = n; function b(f, s) { const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); o.frequency.value = f; g.gain.setValueAtTime(0.1, s); g.gain.exponentialRampToValueAtTime(0.01, s + 0.4); o.start(s); o.stop(s + 0.5); } b(880, audioCtx.currentTime); b(880, audioCtx.currentTime + 0.6); }
-function playGybeAlarm() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const n = Date.now(); if (n - lastAlarmTime < 2000) return; lastAlarmTime = n; function note(f, s, d) { const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); o.type = 'square'; o.frequency.value = f; g.gain.setValueAtTime(0.05, s); g.gain.exponentialRampToValueAtTime(0.001, s + d); o.start(s); o.stop(s + d); } for (let i = 0; i < 4; i++) { note(1800, audioCtx.currentTime + (i * 0.15), 0.1); note(1200, audioCtx.currentTime + (i * 0.15) + 0.07, 0.1); } }
-function checkDepthAlarm(m) { ui.depth.classList.remove('alarm-warning', 'alarm-danger'); if (m < CONFIG.alarms.depthDanger) { ui.depth.classList.add('alarm-danger'); playBingBing(); } else if (m < CONFIG.alarms.depthWarning) ui.depth.classList.add('alarm-warning'); }
-
-// ==========================================================================
-// 6. TREND VENTO E TATTICA
+// 5. TREND VENTO E SICUREZZA
 // ==========================================================================
+/**
+ * Analizza i trend di rotazione del vento su due scale temporali:
+ * 1. Tattica (veloce): per la regolazione delle vele (sulla lancetta TWA)
+ * 2. Strategica (lenta): per le previsioni meteo a lungo termine (bussola TWD)
+ */
 function updateWindTrend() {
     const now = Date.now();
-    const twaAvgObj = getCircularAverageFromBuffer(store.longBuf.twa, 60000, true);
+    const twaAvgObj = getCircularAverageFromBuffer(store.longBuf.twa, 30000, true);
     const shortAvg = getCircularAverageFromBuffer(store.longBuf.twd, 5000, false);
     const instantTwaRad = store.raw["environment.wind.angleTrueWater"];
 
@@ -167,54 +194,66 @@ function updateWindTrend() {
     if (lastShortAvgVal === null) { lastShortAvgVal = shortAvgDeg; lastInstantTwa = instantTwaDeg; return; }
     const dt = (now - lastTrendTime) / 1000; lastTrendTime = now;
 
-    // Gybe Safety
+    // ALLARME STRAMBATA
     const gybeDetected = (Math.abs(instantTwaDeg) > 155 && Math.sign(instantTwaDeg) !== Math.sign(lastInstantTwa));
     lastInstantTwa = instantTwaDeg;
-    if (gybeDetected && isNavigating && (now - lastGybeAlarmTime > 5000)) { lastGybeAlarmTime = now; playGybeAlarm(); }
-    
+
     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') };
 
+    if (gybeDetected && isNavigating && (now - lastGybeAlarmTime > 5000)) { lastGybeAlarmTime = now; playGybeAlarm(); }
     if (now - lastGybeAlarmTime < 4000 && isNavigating) {
         [compassDots.cw, compassDots.ccw, gaugeDots.cw, gaugeDots.ccw].forEach(el => { if (el) { el.classList.add('is-gybing'); el.classList.remove('is-trending'); el.setAttribute('fill', '#ff0000'); }});
         return;
     }
 
-    // Trend calculation con Clamping e Alpha adattivo
+    // CALCOLO TREND
     let diff = (shortAvgDeg - lastShortAvgVal + 540) % 360 - 180; lastShortAvgVal = shortAvgDeg;
     if (dt > 0) {
         let rate = Math.max(-10, Math.min(10, diff / dt));
-        const alpha = Math.min(1, dt / 5);
-        rotationTrend = rotationTrend * (1 - alpha) + rate * alpha;
+        // Tattico (veloce ~15s)
+        const alphaT = Math.min(1, dt / 15);
+        rotationTrend = rotationTrend * (1 - alphaT) + rate * alphaT;
+        // Strategico (molto lento ~8-10min)
+        const alphaM = Math.min(1, dt / 500);
+        meteoTrend = meteoTrend * (1 - alphaM) + rate * alphaM;
     }
 
-    if (Math.abs(rotationTrend) > 1.0) {
-        const pos = store.raw["navigation.position"], isSouth = pos && pos.latitude < 0;
-        let meteoColor = (!isSouth) ? (rotationTrend < 0 ? "#00ff00" : "#ff0000") : (rotationTrend > 0 ? "#00ff00" : "#ff0000");
-        let isLift = (twaAvgDeg > 0) ? (rotationTrend > 0) : (rotationTrend < 0);
-        const absTwa = Math.abs(twaAvgDeg);
-        if (absTwa >= 90 && absTwa < 160) isLift = !isLift; else if (absTwa >= 160) isLift = false;
-        const tacticColor = isLift ? "#00ff00" : "#ff0000";
+    // VISUALIZZAZIONE METEO (Bussola Centrale)
+    if (Math.abs(meteoTrend) > 0.2) {
+        const isSouth = store.raw["navigation.position"]?.latitude < 0;
+        let meteoColor = (!isSouth) ? (meteoTrend < 0 ? "#27ae60" : "#c0392b") : (meteoTrend > 0 ? "#27ae60" : "#c0392b");
+        if (meteoTrend > 0) {
+            if (compassDots.cw) { compassDots.cw.classList.add('is-trending'); compassDots.cw.setAttribute('fill', meteoColor); }
+            if (compassDots.ccw) { compassDots.ccw.classList.remove('is-trending'); compassDots.ccw.setAttribute('fill', '#bbb'); }
+        } else {
+            if (compassDots.ccw) { compassDots.ccw.classList.add('is-trending'); compassDots.ccw.setAttribute('fill', meteoColor); }
+            if (compassDots.cw) { compassDots.cw.classList.remove('is-trending'); compassDots.cw.setAttribute('fill', '#bbb'); }
+        }
+    } else {
+        [compassDots.cw, compassDots.ccw].forEach(el => { if (el) { el.classList.remove('is-trending'); el.setAttribute('fill', '#bbb'); }});
+    }
 
+    // VISUALIZZAZIONE TATTICA (Lancetta Vento)
+    if (Math.abs(rotationTrend) > 3.0) {
+        let isLift = (twaAvgDeg > 0) ? (rotationTrend > 0) : (rotationTrend < 0);
+        if (Math.abs(twaAvgDeg) >= 90) isLift = !isLift;
+        const tacticColor = isLift ? "#27ae60" : "#c0392b";
         if (rotationTrend > 0) {
-            if (compassDots.cw) { compassDots.cw.classList.add('is-trending'); compassDots.cw.setAttribute('fill', meteoColor); }
             if (gaugeDots.cw) { gaugeDots.cw.classList.add('is-trending'); gaugeDots.cw.setAttribute('fill', tacticColor); }
-            [compassDots.ccw, gaugeDots.ccw].forEach(el => { if(el) { el.classList.remove('is-trending', 'is-gybing'); el.setAttribute('fill', '#ffffff'); }});
+            if (gaugeDots.ccw) { gaugeDots.ccw.classList.remove('is-trending'); gaugeDots.ccw.setAttribute('fill', '#bbb'); }
         } else {
-            if (compassDots.ccw) { compassDots.ccw.classList.add('is-trending'); compassDots.ccw.setAttribute('fill', meteoColor); }
             if (gaugeDots.ccw) { gaugeDots.ccw.classList.add('is-trending'); gaugeDots.ccw.setAttribute('fill', tacticColor); }
-            [compassDots.cw, gaugeDots.cw].forEach(el => { if(el) { el.classList.remove('is-trending', 'is-gybing'); el.setAttribute('fill', '#ffffff'); }});
+            if (gaugeDots.cw) { gaugeDots.cw.classList.remove('is-trending'); gaugeDots.cw.setAttribute('fill', '#bbb'); }
         }
     } else {
-        [compassDots.cw, compassDots.ccw, gaugeDots.cw, gaugeDots.ccw].forEach(el => { if (el) { el.classList.remove('is-trending', 'is-gybing'); el.setAttribute('fill', '#ffffff'); }});
+        [gaugeDots.cw, gaugeDots.ccw].forEach(el => { if (el) { el.classList.remove('is-trending'); el.setAttribute('fill', '#bbb'); }});
     }
 }
 
 // ==========================================================================
-// 7. RENDERING ENGINE (TIERED RENDERING)
+// 6. RENDERING ENGINE (TIERED)
 // ==========================================================================
-function updateLeewayDisplay(deg) { const c = 125, px = 125/20; let w = Math.min(Math.abs(deg)*px, 125); ui.leewayMask.setAttribute('x', deg >= 0 ? c : c - w); ui.leewayMask.setAttribute('width', w); ui.leewayVal.textContent = `LEEWAY: ${deg.toFixed(1)}°`; }
-
 function refreshGraph(t) {
     const type = (t === 'vmg') ? 'sog' : t;
     const data = store.histories[t]; if (!data || data.length < 2) return;
@@ -229,51 +268,50 @@ function startDisplayLoop() {
     renderInterval = setInterval(() => {
         const now = Date.now(); tick++;
 
-        // --- LIVE TIER (1s) ---
-        const pathsToWatch = { "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 pathsToWatch) { if (!store.timestamps[p] || (now - store.timestamps[p] > TIMEOUT_MS)) { if (pathsToWatch[p] === ui.awsSvg) ui.awsSvg.textContent = "---"; else pathsToWatch[p].innerText = "---"; delete store.raw[p]; } }
-
         const stwKts = msToKts(store.raw["navigation.speedThroughWater"] || 0), sogKts = msToKts(store.raw["navigation.speedOverGround"] || 0);
         isNavigating = stwKts > CONFIG.averages.minSpeed || sogKts > CONFIG.averages.minSpeed;
 
+        // LIVE TIER (1s)
+        const pathsToWatch = { "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 pathsToWatch) { if (!store.timestamps[p] || (now - store.timestamps[p] > TIMEOUT_MS)) { if (pathsToWatch[p] === ui.awsSvg) ui.awsSvg.textContent = "---"; else pathsToWatch[p].innerText = "---"; delete store.raw[p]; } }
+
         if (store.raw["navigation.speedThroughWater"] !== undefined) { ui.stw.innerText = stwKts.toFixed(1); manageHistory('stw', stwKts); }
         if (store.raw["navigation.speedOverGround"] !== undefined) {
             const twaRad = store.raw["environment.wind.angleTrueWater"], vmgKts = (twaRad !== undefined) ? Math.abs(stwKts * Math.cos(twaRad)) : 0;
             manageHistory('vmg', vmgKts); manageHistory('sog', sogKts);
-            if (displayModeSog === 'VMG') { ui.sog.innerText = vmgKts.toFixed(1); ui.sog.style.color = "#64ffda"; document.getElementById('sog-vmg-label').textContent = 'VMG'; }
-            else { ui.sog.innerText = sogKts.toFixed(1); ui.sog.style.color = (sogKts-stwKts > 0.3) ? "#2ecc71" : (sogKts-stwKts < -0.3 ? "#e74c3c" : "#fff"); document.getElementById('sog-vmg-label').textContent = 'SOG'; }
+            if (displayModeSog === 'VMG') {
+                ui.sog.innerText = vmgKts.toFixed(1); ui.sog.style.color = "#16a085"; document.getElementById('sog-vmg-label').textContent = 'VMG';
+            } else {
+                ui.sog.innerText = sogKts.toFixed(1);
+                ui.sog.style.color = (sogKts - stwKts > 0.3) ? "#27ae60" : (sogKts - stwKts < -0.3 ? "#c0392b" : "#000");
+                document.getElementById('sog-vmg-label').textContent = 'SOG';
+            }
         }
         if (store.raw["environment.depth.belowTransducer"] !== undefined) { const d = store.raw["environment.depth.belowTransducer"]; ui.depth.innerText = d.toFixed(1); checkDepthAlarm(d); manageHistory('depth', d); }
-        if (store.raw["environment.wind.speedTrue"] !== undefined) { const twsKts = msToKts(store.raw["environment.wind.speedTrue"]); ui.tws.innerText = twsKts.toFixed(1); ui.tws.style.color = (twsKts >= CONFIG.graphs.reef2) ? "#e74c3c" : (twsKts >= CONFIG.graphs.reef1 ? "#e67e22" : "#fff"); manageHistory('tws', twsKts); }
+        if (store.raw["environment.wind.speedTrue"] !== undefined) { ui.tws.innerText = msToKts(store.raw["environment.wind.speedTrue"]).toFixed(1); ui.tws.style.color = (msToKts(store.raw["environment.wind.speedTrue"]) >= CONFIG.graphs.reef2) ? "#e74c3c" : (msToKts(store.raw["environment.wind.speedTrue"]) >= CONFIG.graphs.reef1 ? "#e67e22" : "#000"); manageHistory('tws', msToKts(store.raw["environment.wind.speedTrue"])); }
         if (store.raw["environment.wind.speedApparent"] !== undefined) ui.awsSvg.textContent = msToKts(store.raw["environment.wind.speedApparent"]).toFixed(1);
 
-        const smAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, CONFIG.averages.smoothWindow, true);
+        const smAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, 2000, true);
         if (smAwa) { curAwaRot = getShortestRotation(curAwaRot, radToDeg(smAwa.val)); ui.awa.setAttribute('transform', `rotate(${curAwaRot}, 200, 200)`); }
-        const smTwa = getCircularAverageFromBuffer(store.smoothBuf.twa, CONFIG.averages.smoothWindow, true);
+        const smTwa = getCircularAverageFromBuffer(store.smoothBuf.twa, 2000, true);
         if (smTwa) { curTwaRot = getShortestRotation(curTwaRot, radToDeg(smTwa.val)); ui.twa.setAttribute('transform', `rotate(${curTwaRot}, 200, 200)`); }
 
         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);
             if (sogKts < CONFIG.averages.minSpeed) smoothedLeeway = 0; else smoothedLeeway = (smoothedLeeway * 0.9) + (driftDeg * 0.1);
             curTrackRot = getShortestRotation(curTrackRot, smoothedLeeway); ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
-            const isContaminated = Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7; ui.leewayVal.style.color = isContaminated ? "#f39c12" : "#fff";
+            ui.leewayVal.style.color = (Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7) ? "#e67e22" : "#000";
             updateLeewayDisplay(Math.max(-20, Math.min(20, smoothedLeeway)));
         }
-        
-        updateWindTrend(); // Fast update
 
-        // --- HEAVY TIER (2s) ---
-        if (tick % 2 === 0) {
-            refreshGraph('stw'); refreshGraph(displayModeSog === 'VMG' ? 'vmg' : 'sog'); refreshGraph('depth'); refreshGraph('tws');
-        }
+        updateWindTrend();
+        if (tick % 2 === 0) { refreshGraph('stw'); refreshGraph(displayModeSog === 'VMG' ? 'vmg' : 'sog'); refreshGraph('depth'); refreshGraph('tws'); }
 
-        // --- SLOW TIER (3s) ---
+        // SLOW TIER (3s)
         if (tick % 3 === 0) {
-            let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, CONFIG.averages.longWindow, false),
-                cObj = getCircularAverageFromBuffer(store.longBuf.cog, CONFIG.averages.longWindow, false),
-                awObj = getCircularAverageFromBuffer(store.longBuf.awa, CONFIG.averages.longWindow, true),
-                twObj = getCircularAverageFromBuffer(store.longBuf.twa, CONFIG.averages.longWindow, true),
-                twdObj = getCircularAverageFromBuffer(store.longBuf.twd, CONFIG.averages.longWindow, false);
+            let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, 30000, false), cObj = getCircularAverageFromBuffer(store.longBuf.cog, 30000, false),
+                awObj = getCircularAverageFromBuffer(store.longBuf.awa, 30000, true), twObj = getCircularAverageFromBuffer(store.longBuf.twa, 30000, true),
+                twdObj = getCircularAverageFromBuffer(store.longBuf.twd, 30000, false);
 
             const upUI = (el, obj, isCompass = false) => {
                 if (!obj || obj.val === null) { el.innerHTML = "---&deg;"; el.classList.remove('unstable-data'); }
@@ -283,11 +321,12 @@ function startDisplayLoop() {
                 }
             };
             upUI(ui.hdg, hObj, true); upUI(ui.cog, cObj, true); upUI(ui.awaAvg, awObj, false); upUI(ui.twaAvg, twObj, false); upUI(ui.twdAvg, twdObj, true);
-            if (hObj && twObj && hObj.val !== null) {
-                const tackHdgDeg = radToDeg((hObj.val - (twObj.val * 2) + Math.PI * 2) % (Math.PI * 2));
+            
+            if (hObj && twObj) {
+                const tackHdgDeg = radToDeg((hObj.val + twObj.val * 2 + Math.PI * 2) % (Math.PI * 2));
                 ui.tackHdg.innerHTML = `${Math.round((tackHdgDeg + 360) % 360).toString().padStart(3, '0')}&deg;`;
                 if (cObj) {
-                    const tackCogDeg = radToDeg((cObj.val - (twObj.val * 2) + Math.PI * 2) % (Math.PI * 2));
+                    const tackCogDeg = radToDeg((cObj.val + twObj.val * 2 + Math.PI * 2) % (Math.PI * 2));
                     ui.tackCog.innerHTML = `${Math.round((tackCogDeg + 360) % 360).toString().padStart(3, '0')}&deg;`;
                 }
             }
@@ -296,13 +335,14 @@ function startDisplayLoop() {
                 curWindCompassRot = getShortestRotation(curWindCompassRot, radToDeg(smTwd.val)); ui.twdArrow.setAttribute('transform', `rotate(${curWindCompassRot}, 20, 20)`);
                 curBoatCompassRot = getShortestRotation(curBoatCompassRot, radToDeg(smHdg.val)); ui.twdBoat.setAttribute('transform', `rotate(${curBoatCompassRot}, 20, 20)`);
             }
+            lastAvgUIUpdate = now;
         }
         if (tick % 60 === 0) tick = 0;
     }, RENDER_INTERVAL_MS);
 }
 
 // ==========================================================================
-// 8. INTERAZIONI E RETE
+// 7. CONFIGURAZIONE E GRAFICI UTILS
 // ==========================================================================
 async function fetchServerConfig() {
     if (!window.location.protocol.includes("http")) return;
@@ -314,7 +354,7 @@ async function fetchServerConfig() {
             if (response.ok) {
                 const data = await response.json();
                 const actual = data.configuration || data;
-                if (actual && typeof actual === 'object') {
+                if (actual) {
                     const parseNumbers = (obj) => { for (let k in obj) { if (typeof obj[k] === 'object') parseNumbers(obj[k]); else if (!isNaN(obj[k]) && obj[k] !== "") obj[k] = parseFloat(obj[k]); } };
                     parseNumbers(actual);
                     if (actual.alarms) CONFIG.alarms = { ...CONFIG.alarms, ...actual.alarms };
@@ -328,8 +368,19 @@ async function fetchServerConfig() {
 }
 
 function manageHistory(t, v) {
-    const n = Date.now(); const interval = simulationMode ? SIM_SAMPLE_INTERVAL : (CONFIG.graphs.historyMinutes * 60000) / CONFIG.graphs.samples;
-    if (n - store.lastUpdates[t] > interval || store.histories[t].length === 0) { store.histories[t].push(v); if (store.histories[t].length > CONFIG.graphs.samples) store.histories[t].shift(); store.lastUpdates[t] = n; }
+    const n = Date.now();
+    const interval = simulationMode ? SIM_SAMPLE_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 sum = store.graphTempBuf[t].reduce((a, b) => a + b, 0);
+        const avg = sum / 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;
+    }
 }
 
 function calculateScale(type, data, mode) {
@@ -343,22 +394,29 @@ function updateScaleLabels(t, min, max) { const el = document.getElementById(t +
 function drawGraph(d, id, min, max, isTws, isHercules) {
     const svg = document.getElementById(id); if (!svg || d.length < 2) return;
     const w = 200, h = 40, range = max - min || 1;
-    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(255,255,255,0.08)" stroke-width="0.5" />`; });
-    for (let m = 1; m < CONFIG.graphs.historyMinutes; m++) { const x = w - (m / CONFIG.graphs.historyMinutes) * w; grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(255,255,255,0.05)" stroke-width="0.5" />`; }
+    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" />`; });
+    for (let m = 1; m < CONFIG.graphs.historyMinutes; m++) {
+        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" />`;
+    }
     let pD = ""; let cS = "";
     d.forEach((v, i) => {
         const x = (i/(CONFIG.graphs.samples-1))*w, y = h-(Math.max(0,Math.min(1,(v-min)/range))*h); pD += `${i===0?'M':'L'} ${x} ${y} `;
         if (isTws && i > 0) {
             const px = ((i-1)/(CONFIG.graphs.samples-1))*w, py = h-(Math.max(0,Math.min(1,(d[i-1]-min)/range))*h);
-            let c = (v >= CONFIG.graphs.reef2) ? "#e74c3c" : (v >= CONFIG.graphs.reef1 ? "#e67e22" : "#fff");
+            let c = (v >= CONFIG.graphs.reef2) ? "#e74c3c" : (v >= CONFIG.graphs.reef1 ? "#e67e22" : "#000");
             cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" class="${isHercules?'line-hercules':''}" />`;
         }
     });
-    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#ffffff' };
-    const colorKey = id === 'sog-graph' && displayModeSog === 'VMG' ? '#64ffda' : clrs[id];
-    svg.innerHTML = isTws ? `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="rgba(255,255,255,0.08)" stroke="none" />${cS}` : `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="${colorKey}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${colorKey}" />`;
+    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#000' };
+    const colorKey = id === 'sog-graph' && displayModeSog === 'VMG' ? '#16a085' : clrs[id];
+    svg.innerHTML = isTws ? `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="rgba(0,0,0,0.05)" stroke="none" />${cS}` : `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="${colorKey}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${colorKey}" />`;
 }
 
+// ==========================================================================
+// 8. INTERAZIONI E RETE
+// ==========================================================================
 function toggleFocusMode(type, element) {
     const container = document.querySelector('.main-container'); const parentPanel = element.closest('.side-panel'); const isLeft = parentPanel.classList.contains('left-panel');
     isFocusActive = !isFocusActive;
@@ -374,7 +432,7 @@ function toggleFocusMode(type, element) {
         clearTimeout(pressTimer); if (isLongPressActive) return;
         const currentTime = new Date().getTime(), tapDelay = currentTime - lastTapTime;
         if (tapDelay < 300 && tapDelay > 0) { clearTimeout(tapTimeout); if (!isFocusActive) { graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard'; localStorage.setItem('mode_' + type, graphModes[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(100, 255, 218, 0.1)"; setTimeout(() => el.style.backgroundColor = "", 150); } }, 250); }
+        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); }
     });
     el.addEventListener('pointerleave', () => clearTimeout(pressTimer));
 });
@@ -401,32 +459,29 @@ ui.depth.closest('.data-box').addEventListener('click', (function() { let dC = 0
 
 function startDynamicSimulation() {
     ui.status.innerText = "SIM ATTIVO";
-    let sim = { hdg: 45, tws: 12, twd: 45, depth: 12, stw: 5, leeway: 0, currentSpeed: 1.5, currentDir: 90, startTime: Date.now() };
+    let sim = { hdg: 45, tws: 12, twd: 90, depth: 12, stw: 5, leeway: 0, currentSpeed: 1.5, currentDir: 90, startTime: Date.now() };
     simInterval = setInterval(() => {
         const elapsed = (Date.now() - sim.startTime) / 1000;
-        if (elapsed > 120 && elapsed < 121) sim.twd = Math.random() * 360;
         sim.twd = (sim.twd + (Math.sin(elapsed / 20) * 0.5) + 360) % 360;
-        const inGust = (elapsed % 40) < 5; const targetTws = (inGust ? 18 : 10) + Math.sin(elapsed / 10) * 2;
+        const targetTws = 10 + Math.sin(elapsed / 10) * 2;
         sim.tws += (targetTws - sim.tws) * 0.05; sim.hdg = (sim.hdg + (Math.random() - 0.5) * 1 + 360) % 360;
         let twaRel = (sim.twd - sim.hdg + 360) % 360; if (twaRel > 180) twaRel -= 360;
-        let targetStw = 3 + (4 * Math.sin((Math.abs(twaRel) - 45) * Math.PI / 125)); sim.stw += (Math.max(3, Math.min(8, targetStw)) - sim.stw) * 0.05;
-        const rawLeeway = Math.sin(degToRad(twaRel)) * 4; sim.leeway += (rawLeeway - sim.leeway) * 0.05;
-        const bX = sim.stw * Math.sin(degToRad(sim.hdg + sim.leeway)), bY = sim.stw * Math.cos(degToRad(sim.hdg + sim.leeway));
-        const cX = sim.currentSpeed * Math.sin(degToRad(sim.currentDir)), cY = sim.currentSpeed * Math.cos(degToRad(sim.currentDir));
-        const sog = Math.sqrt(Math.pow(bX + cX, 2) + Math.pow(bY + cY, 2)), cog = (radToDeg(Math.atan2(bX + cX, bY + cY)) + 360) % 360;
+        let targetStw = 5; sim.stw += (targetStw - sim.stw) * 0.05;
+        const bX = sim.stw * Math.sin(degToRad(sim.hdg)), bY = sim.stw * Math.cos(degToRad(sim.hdg));
+        const sog = sim.stw, cog = sim.hdg;
         const twaRad = degToRad(twaRel), aws = Math.sqrt(Math.pow(sim.stw, 2) + Math.pow(sim.tws, 2) + 2 * sim.stw * sim.tws * Math.cos(twaRad));
         const awa = Math.atan2(sim.tws * Math.sin(twaRad), sim.stw + sim.tws * Math.cos(twaRad));
         processIncomingData("environment.wind.speedApparent", ktsToMs(aws)); processIncomingData("environment.wind.angleApparent", awa);
         processIncomingData("environment.depth.belowTransducer", sim.depth); processIncomingData("navigation.headingTrue", degToRad(sim.hdg));
         processIncomingData("navigation.speedThroughWater", ktsToMs(sim.stw)); processIncomingData("navigation.speedOverGround", ktsToMs(sog));
-        processIncomingData("navigation.courseOverGroundTrue", degToRad(cog)); processIncomingData("navigation.position", { latitude: 45.0, longitude: 12.0 });
+        processIncomingData("navigation.courseOverGroundTrue", degToRad(cog));
     }, 1000);
 }
 
 // ==========================================================================
-// 11. INIT
+// 10. INIT
 // ==========================================================================
 window.addEventListener('contextmenu', e => e.preventDefault(), true);
-(function genTicks() { const c = document.getElementById('ticks'); if (c) { for (let i = 0; i < 360; i += 10) { const l = document.createElementNS("http://www.w3.org/2000/svg", "line"); const m = i % 30 === 0; l.setAttribute("x1", "200"); l.setAttribute("y1", "40"); l.setAttribute("x2", "200"); l.setAttribute("y2", (m ? 60 : 50)); l.setAttribute("stroke", m ? "#fff" : "#666"); l.setAttribute("stroke-width", m ? "2" : "1"); l.setAttribute("transform", `rotate(${i}, 200, 200)`); c.appendChild(l); } } })();
+(function genTicks() { const c = document.getElementById('ticks'); if (c) { for (let i = 0; i < 360; i += 10) { const l = document.createElementNS("http://www.w3.org/2000/svg", "line"); const m = i % 30 === 0; l.setAttribute("x1", "200"); l.setAttribute("y1", "40"); l.setAttribute("x2", "200"); l.setAttribute("y2", (m ? 60 : 50)); l.setAttribute("stroke", m ? "#000" : "#bbb"); l.setAttribute("stroke-width", m ? "2" : "1"); l.setAttribute("transform", `rotate(${i}, 200, 200)`); c.appendChild(l); } } })();
 async function init() { await fetchServerConfig(); startDisplayLoop(); connect(); }
 window.addEventListener('load', init);

package/index.html

@@ -158,16 +158,24 @@
                     <text id="aws-val-svg" x="0" y="42" fill="#fff" font-size="52" font-weight="bold" text-anchor="middle">0.0</text>
                 </g>
 
-                <g id="awa-pointer" transform="rotate(0, 200, 200)" opacity="0.85">
-                    <path d="M200,80 L211,95 L200,145 L189,95 Z" fill="#ff8c00" stroke="#000" stroke-width="1" />
-                    <text x="200" y="102" fill="#000" font-size="11" font-weight="900" text-anchor="middle" font-family="Arial Black">A</text>
+                <!-- Lancetta Apparente (AWA) - Versione allungata -->
+                <g id="awa-pointer" transform="rotate(0, 200, 200)" opacity="0.9">
+                    <!-- Ho portato 75 -> 70 (fuori) e 145 -> 155 (dentro) -->
+                    <path d="M 200,70 L 213,95 L 200,145 L 187,95 Z"
+                          fill="#ff8c00" stroke="#000" stroke-width="1" />
+                    <text x="200" y="90" fill="#000" font-size="10" font-weight="900" text-anchor="middle" font-family="Arial Black">A</text>
                 </g>
-                
-                <g id="twa-pointer" transform="rotate(0, 200, 200)" opacity="0.85">
-                    <path d="M200,90 L206,98 L200,125 L194,98 Z" fill="#ffff00" stroke="#000" stroke-width="0.8" />
-                    <text x="200" y="104" fill="#000" font-size="8" font-weight="900" text-anchor="middle" font-family="Arial Black">T</text>
-                    <circle id="trend-gauge-cw"  cx="215" cy="110" r="4" fill="#ffffff" opacity="0.3" />
-                    <circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#ffffff" opacity="0.3" />
+
+                <!-- Lancetta Reale (TWA) - FORMA A GOCCIA (Secondaria/Piccola) -->
+                <g id="twa-pointer" transform="rotate(0, 200, 200)" opacity="0.9">
+                    <!-- Goccia piccola: inizia a y=92, punta a y=128 -->
+                    <path d="M 200,92 A 8,8 0 0 1 208,100 C 208,108 200,128 200,128 C 200,128 192,108 192,100 A 8,8 0 0 1 200,92 Z"
+                          fill="#ffff00" stroke="#000" stroke-width="0.8" />
+                    <text x="200" y="106" fill="#000" font-size="9" font-weight="900" text-anchor="middle" font-family="Arial Black">T</text>
+                    
+                    <!-- Pallini Trend (Sempre agganciati alla rotazione del TWA) -->
+                    <circle id="trend-gauge-cw"  cx="215" cy="110" r="4" fill="#ffffff" />
+                    <circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#ffffff" />
                 </g>
                 
                 <g transform="translate(75, 395)">

package/index.js

@@ -63,8 +63,8 @@ module.exports = function (app) {
           longWindow: {
             type: 'number',
             title: 'Long Average Window (ms)',
-            description: "Time buffer used for 'MEAN' values (e.g., 60000ms = 1 min). Higher values provide more stability but slower reaction.",
-            default: 60000
+            description: "Time buffer for 'MEAN' values. Larger windows produce smoother numbers but increase the 'Unstable' (orange) alerts during maneuvers or in gusty conditions, as data coherence decreases over time.",
+            default: 30000
           },
           smoothWindow: {
             type: 'number',

package/package.json

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

package/settings.json

@@ -8,11 +8,11 @@
     "red": 20.0
   },
   "averages": {
-    "long_window": 60000,
+    "long_window": 3000,
     "smooth_window": 2000
   },
   "hercules_ranges": {
     "speed": 4.0,
     "wind": 10.0
   }
-}
+}

package/style.css

@@ -1,9 +1,9 @@
 /* ==========================================================================
-   1. BASE E STRUTTURA GENERALE (LIQUID GRID LAYOUT)
+   1. BASE E RESET DI SISTEMA (GIORNO: SFONDO CHIARO)
    ========================================================================== */
 body {
-    background-color: #000;
-    color: #fff;
+    background-color: #fff;
+    color: #000;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
     margin: 0;
     padding: 0;
@@ -16,6 +16,9 @@ body {
     touch-action: none;
 }
 
+/* ==========================================================================
+   2. LAYOUT PRINCIPALE (LIQUID GRID)
+   ========================================================================== */
 .main-container {
     display: grid;
     width: 100%;
@@ -23,20 +26,16 @@ body {
     padding: 5px;
     box-sizing: border-box;
     gap: 8px;
-    /* Rapporto Standard: Lati 1fr, Centro 1.5fr (Bilanciato) */
     grid-template-columns: minmax(180px, 1fr) minmax(auto, 1.5fr) minmax(180px, 1fr);
     grid-template-rows: 100%;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     justify-content: stretch;
 }
 
-/* ==========================================================================
-   2. PANNELLI E DATA-BOX
-   ========================================================================== */
 .side-panel {
     display: flex;
     flex-direction: column;
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(0, 0, 0, 0.03);
     border-radius: 12px;
     height: 100%;
     overflow: hidden;
@@ -44,6 +43,7 @@ body {
 }
 
 .left-panel { grid-column: 1; }
+
 .center-panel {
     grid-column: 2;
     position: relative;
@@ -54,15 +54,19 @@ body {
     height: 100%;
     overflow: hidden;
 }
+
 .right-panel {
     grid-column: 3;
     align-items: flex-end;
     text-align: right;
 }
 
+/* ==========================================================================
+   3. DATA-BOX E TIPOGRAFIA
+   ========================================================================== */
 .data-box {
     position: relative;
-    border-bottom: 1px solid #222;
+    border-bottom: 1px solid #eee;
     padding: 2px 4px;
     display: flex;
     flex-direction: column;
@@ -78,108 +82,74 @@ body {
 .left-panel .data-box { align-items: flex-start; text-align: left; }
 .right-panel .data-box { align-items: flex-end; text-align: right; }
 
-/* ==========================================================================
-   3. TACTICAL FOCUS MODE (DUAL SCREEN 60/40)
-   ========================================================================== */
-
-/* Nasconde i pannelli non attivi */
-.focus-active .side-panel:not(.has-focus) { display: none !important; }
+.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
+.label { color: #888; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
+.unit { color: #aaa; font-size: 0.6rem; font-weight: bold; }
 
-/* Split 60/40: Grafico a Sinistra */
-.focus-active.focus-side-left {
-    grid-template-columns: 3fr 2fr !important;
-}
-.focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
-.focus-active.focus-side-left .center-panel {
-    grid-column: 2 !important;
-    justify-content: center !important;
-    align-items: center !important;
+.value {
+    color: #000;
+    font-size: clamp(1.2rem, 22cqh, 3rem);
+    font-weight: 600;
+    line-height: 0.9;
+    letter-spacing: -1px;
+    padding-bottom: 5px;
 }
 
-/* Split 60/40: Grafico a Destra */
-.focus-active.focus-side-right {
-    grid-template-columns: 2fr 3fr !important;
+.value-large, .dual-value-container, .value-with-compass {
+    margin-top: auto;
+    margin-bottom: auto;
 }
-.focus-active.focus-side-right .center-panel {
-    grid-column: 1 !important;
-    justify-content: center !important;
-    align-items: center !important;
+
+.value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
+
+.value-with-compass {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    align-self: stretch;
+    gap: 5px;
 }
+
+.dual-value-container { display: flex; justify-content: space-between; width: 100%; }
+.dual-value-col { display: flex; flex-direction: column; width: 48%; }
+.dual-label { color: #888; font-size: 0.55rem; font-weight: bold; text-transform: uppercase; margin-bottom: 2px; }
+.value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
+
+/* ==========================================================================
+   4. TACTICAL FOCUS MODE
+   ========================================================================== */
+.focus-active .side-panel:not(.has-focus) { display: none !important; }
+.focus-active.focus-side-left { grid-template-columns: 3fr 2fr !important; }
+.focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
+.focus-active.focus-side-left .center-panel { grid-column: 2 !important; justify-content: center !important; align-items: center !important; }
+.focus-active.focus-side-right { grid-template-columns: 2fr 3fr !important; }
+.focus-active.focus-side-right .center-panel { grid-column: 1 !important; justify-content: center !important; align-items: center !important; }
 .focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
 
-/* Espansione Box Focalizzato */
 .focus-active .has-focus .data-box:not(.is-focused) { display: none !important; }
 .focus-active .has-focus .data-box.is-focused {
     height: 100vh !important;
     border: none;
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(0, 0, 0, 0.02);
     padding: 2vw 3vw !important;
     display: flex;
     flex-direction: column;
 }
 
-/* Tipografia Massiccia Focus Mode */
 .focus-active .is-focused .value { font-size: clamp(4rem, 25cqh, 10rem) !important; margin-top: 15px; }
 .focus-active .is-focused .scale-labels { font-size: clamp(14px, 1.8vw, 22px) !important; min-width: 50px !important; }
 .focus-active .is-focused .label-row .label { font-size: 2rem !important; }
 .focus-active .is-focused .label-row .unit { font-size: 2rem !important; }
-
 .focus-active .is-focused .sparkline path { stroke-width: 2.5px !important; }
-
-/* Protezione Wind Gauge nel 40% di spazio */
-.focus-active .center-panel svg#wind-gauge {
-    max-width: 95% !important;
-    max-height: 85vh !important;
-}
-
-/* ==========================================================================
-   4. TIPOGRAFIA DINAMICA E ELASTICA
-   ========================================================================== */
-.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
-
-.label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
-.unit { color: #888; font-size: 0.6rem; font-weight: bold; }
-
-.value {
-    color: #fff;
-    font-size: clamp(1.2rem, 22cqh, 3rem);
-    font-weight: 600;
-    line-height: 0.9;
-    letter-spacing: -1px;
-    padding-bottom: 5px;
-}
-
-.value-large, .dual-value-container, .value-with-compass { margin-top: auto; margin-bottom: auto; }
-.value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
-
-.dual-value-container { display: flex; justify-content: space-between; width: 100%; }
-.dual-value-col { display: flex; flex-direction: column; width: 48%; }
-.dual-label { color: #666; font-size: 0.55rem; font-weight: bold; text-transform: uppercase; margin-bottom: 2px; }
-.value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
-
-/* ==========================================================================
-   5. WIDGETS (BUSSOLA TWD)
-   ========================================================================== */
-.value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 5px; }
-
-.mini-compass {
-    width: min(80cqh, 42cqw);
-    height: min(80cqh, 42cqw);
-    aspect-ratio: 1 / 1;
-    flex-shrink: 0;
-    background: #000;
-    border-radius: 50%;
-    border: 1.5px solid #333;
-    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
-    transition: all 0.4s ease;
-}
+.focus-active .center-panel svg#wind-gauge { max-width: 95% !important; max-height: 85vh !important; }
 
 /* ==========================================================================
-   6. GRAFICI E SCALE
-   ========================================================================== */
+   5. GRAFICI, SCALE E HERCULES MODE
+   ========================================================================= */
 .graph-wrapper {
     position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px;
-    display: flex; align-items: stretch; background: rgba(255, 255, 255, 0.03);
+    display: flex; align-items: stretch; background: rgba(0, 0, 0, 0.04);
     border-radius: 4px; gap: 0px !important;
 }
 
@@ -191,7 +161,7 @@ body {
 
 .scale-labels {
     display: flex; flex-direction: column; justify-content: space-between;
-    font-size: 8px; color: #777; font-weight: bold; min-width: 12px;
+    font-size: 8px; color: #444; font-weight: bold; min-width: 12px;
     height: 100%; line-height: 1; padding: 0; border: none !important;
 }
 
@@ -200,18 +170,9 @@ body {
 .right-panel .scale-labels { order: 1; text-align: right; padding-right: 4px; }
 .right-panel .sparkline { order: 2; }
 
-#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.12); }
-#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.12); }
-#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
-#tws-graph { stroke: #ffffff; fill: rgba(255, 255, 255, 0.08); }
-
-/* ==========================================================================
-   7. HERCULES MODE
-   ========================================================================== */
 .line-hercules { filter: drop-shadow(0 0 5px #ff0000); stroke-width: 1.8px !important; }
-.box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
-.box-hercules .scale-labels { color: #ff8888; }
-
+.box-hercules { background: rgba(255, 0, 0, 0.05) !important; }
+.box-hercules .scale-labels { color: #ff5555; }
 .box-hercules .unit::before, .box-hercules .unit::after, .box-hercules .label::before {
     font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
 }
@@ -219,32 +180,67 @@ body {
 .right-panel .box-hercules .unit::after { content: " HERCULES"; }
 .right-panel .box-hercules .label:only-child::after { content: " HERCULES"; }
 
+#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.12); }
+#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.12); }
+#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
+#tws-graph { stroke: #000000; fill: rgba(0, 0, 0, 0.08); }
+
 /* ==========================================================================
-   8. STATUS E ANIMAZIONI
+   6. WIDGETS E STATUS (GIORNO)
    ========================================================================== */
 #status {
     position: absolute; top: 10px; right: 10px;
     font-size: 0.6rem; font-weight: 900;
     text-transform: uppercase; z-index: 1000;
-    letter-spacing: 1px; background: rgba(0,0,0,0.4);
+    letter-spacing: 1px; background: rgba(0,0,0,0.05);
     padding: 2px 6px; border-radius: 4px;
 }
-.online { color: #2ecc71; opacity: 0.5; }
-.offline { color: #e74c3c; font-weight: bold; }
+.online { color: #27ae60; opacity: 0.8; }
+.offline { color: #c0392b; font-weight: bold; }
+
+.mini-compass {
+    width: min(80cqh, 42cqw); height: min(80cqh, 42cqw); aspect-ratio: 1 / 1;
+    flex-shrink: 0; background: #f0f0f0;
+    border-radius: 50%; border: 1.5px solid #ddd;
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); transition: all 0.4s ease;
+}
+
+/* Inversione elementi Mini Bussola TWD - Giorno */
+.mini-compass text:last-of-type { fill: #000 !important; opacity: 0.4; } /* La "S" nera */
+#twd-boat-wrap path { fill: #000 !important; opacity: 0.3; } /* Barca interna nera */
+#twd-wind-chevron { stroke: #000 !important; } /* Forza il triangolino vento a nero in giorno */
 
 #awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap {
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
-.alarm-warning { color: #f1c40f !important; }
+#wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
+
+/* Quadrante Vento Centrale - Giorno */
+#wind-gauge circle[fill="#050505"] { fill: #fcfcfc; }
+#wind-gauge circle[fill="#121212"] { fill: #f0f0f0; }
+#boat-icon { fill: #000 !important; opacity: 1; }
+#tick-labels { fill: #444 !important; }
+#aws-val-svg { fill: #000 !important; }
+#aws-display-group text { fill: #333 !important; }
+#fullscreen-hotspot { fill: #eee !important; stroke: #ccc !important; }
+#ticks line[stroke="#fff"] { stroke: #000 !important; }
+#ticks line[stroke="#666"] { stroke: #bbb !important; }
+
+/* Leeway Container - Giorno */
+rect[fill="#222"] { fill: #eee !important; }
+#leeway-val { color: #000 !important; }
+
+/* ==========================================================================
+   7. STATI DI ALLARME
+   ========================================================================== */
+.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #e67e22 !important; }
+.alarm-warning { color: #f39c12 !important; }
 .alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
 @keyframes blink-unstable { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
 
-#wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
-
 /* ==========================================================================
-   9. RESPONSIVE (PORTRAIT)
+   8. RESPONSIVE
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
     .main-container { grid-template-columns: 1fr 1fr !important; grid-template-rows: 45vh calc(55vh - 8px) !important; }
@@ -258,10 +254,10 @@ body {
 }
 
 /* ==========================================================================
-   10. NIGHT MODE (TACTICAL RED)
+   9. NIGHT MODE (TACTICAL RED)
    ========================================================================== */
 body.night-mode { background-color: #000 !important; color: #ff0000 !important; }
-.night-mode .side-panel { background: rgba(20, 0, 0, 0.4); border: 1px solid #330000; }
+.night-mode .side-panel { background: rgba(20, 0, 0, 0.4) !important; border: 1px solid #330000; }
 .night-mode .data-box { border-bottom-color: #260000; }
 .night-mode .label, .night-mode .unit, .night-mode .dual-label { color: #800000 !important; }
 .night-mode .value, .night-mode .value-large { color: #ff3333 !important; text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); }
@@ -269,43 +265,50 @@ body.night-mode { background-color: #000 !important; color: #ff0000 !important;
 .night-mode .graph-wrapper { background: rgba(30, 0, 0, 0.3) !important; }
 .night-mode .sparkline path:first-of-type { display: none !important; }
 .night-mode .sparkline path { fill: none !important; stroke: #ff3333 !important; stroke-width: 1.8px !important; opacity: 1 !important; filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4)); }
-.night-mode .sparkline line { stroke: #4d0000 !important; stroke-width: 0.7px !important; }
+
+.night-mode .sparkline line { stroke: rgba(255, 0, 0, 0.15) !important; stroke-width: 0.7px !important; }
 .night-mode #tws-graph line:not([stroke*="rgba"]) { stroke: #ff3333 !important; stroke-width: 1.8px !important; }
 .night-mode .scale-labels { color: #660000 !important; }
 
+.night-mode .box-hercules { background: rgba(60, 0, 0, 0.2) !important; }
+.night-mode .line-hercules { filter: drop-shadow(0 0 6px #ff0000) !important; }
+
+/* Fix Bussola Centrale Night */
 .night-mode #wind-gauge circle { stroke: #330000; }
+.night-mode #wind-gauge circle[fill="#050505"] { fill: #050505 !important; }
+.night-mode #wind-gauge circle[fill="#121212"] { fill: #121212 !important; }
+.night-mode #fullscreen-hotspot { fill: #000 !important; stroke: #330000 !important; }
+
 .night-mode #ticks line { stroke: #4d0000 !important; }
 .night-mode #tick-labels { fill: #800000 !important; }
-.night-mode #boat-icon { fill: #330000 !important; opacity: 0.6; }
+.night-mode #boat-icon { fill: #330000 !important; opacity: 0.6 !important; }
 .night-mode #aws-val-svg { fill: #ff3333 !important; }
 .night-mode #aws-display-group text { fill: #ff3333 !important; }
 .night-mode #center-glow feDropShadow { flood-color: #ff0000 !important; flood-opacity: 0.6 !important; }
 
-/* Settori Vento Night */
+/* Bussola TWD Night */
+.night-mode .mini-compass { border-color: #330000; background: #000; }
+.night-mode .mini-compass text { fill: #800000 !important; }
+.night-mode .mini-compass text:last-of-type { fill: #800000 !important; opacity: 1; } /* La "S" torna rossa */
+.night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; } /* Barca torna rossa */
+.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; stroke-width: 3px !important; opacity: 1 !important; filter: drop-shadow(0 0 4px #ff0000); transform-origin: center; }
+
+/* Vento e Leeway Night */
 .night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #660000 !important; opacity: 0.8; }
 .night-mode #wind-gauge path[stroke="#00ff00"] { stroke: #660000 !important; stroke-dasharray: 4, 3; opacity: 0.8; }
 .night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; stroke-width: 8; }
-
-/* Lancette Night */
-.night-mode #awa-pointer path { fill: #ff0000; stroke: #000; }
-.night-mode #twa-pointer path { fill: #800000; stroke: #000; }
-.night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
-
-/* Leeway Night */
 .night-mode rect[fill="url(#leeway-grad)"] { fill: url(#leeway-night-grad) !important; }
 .night-mode #leeway-val { fill: #ff3333 !important; }
 .night-mode g[stroke="#555"] line { stroke: #4d0000 !important; }
 .night-mode g[fill="#555"] text { fill: #660000 !important; }
 .night-mode rect[fill="#222"] { fill: #0a0000 !important; stroke: #200000; }
 
-/* Bussola TWD Night */
-.night-mode .mini-compass { border-color: #330000; background: #000; }
-.night-mode .mini-compass text { fill: #800000 !important; }
-.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; stroke-width: 3px !important; opacity: 1 !important; filter: drop-shadow(0 0 4px #ff0000); transform-origin: center; }
-.night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; }
+.night-mode #awa-pointer path { fill: #ff0000; stroke: #000; }
+.night-mode #twa-pointer path { fill: #800000; stroke: #000; }
+.night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
 
 /* ==========================================================================
-   11. TREND VENTO E ALLARME STRAMBATA (GYBE)
+   10. TREND VENTO E ALLARME STRAMBATA
    ========================================================================== */
 @keyframes blink-trend { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
 
@@ -314,4 +317,13 @@ body.night-mode { background-color: #000 !important; color: #ff0000 !important;
     transition: opacity 0.3s ease;
 }
 
-.is-trending { a
+.is-trending {
+    opacity: 1 !important;
+    animation: blink-trend 1s infinite !important;
+}
+
+.is-gybing {
+    opacity: 1 !important;
+    animation: none !important;
+    filter: drop-shadow(0 0 8px #ff0000) !important;
+}

package/test.html

@@ -68,4 +68,3 @@
     </script>
 </body>
 </html>
----Fine Codice ---