@sailingrotevista/rotevista-dash 2.0.19 → 2.0.20

package/app.js

@@ -1,5 +1,5 @@
 // ==========================================================================
-// 1. CONFIGURAZIONE E DEFAULT (Sincronizzato con il Plugin SignalK)
+// 1. CONFIGURAZIONE E DEFAULT
 // ==========================================================================
 let CONFIG = {
     alarms: { depthDanger: 2.5, depthWarning: 5.0 },
@@ -22,7 +22,7 @@ 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;
@@ -66,7 +66,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 +74,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 +91,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 +129,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 +157,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,14 +166,7 @@ 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
 // ==========================================================================
 function updateWindTrend() {
     const now = Date.now();
@@ -167,20 +180,18 @@ function updateWindTrend() {
     if (lastShortAvgVal === null) { lastShortAvgVal = shortAvgDeg; lastInstantTwa = instantTwaDeg; return; }
     const dt = (now - lastTrendTime) / 1000; lastTrendTime = now;
 
-    // Gybe Safety
     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
     let diff = (shortAvgDeg - lastShortAvgVal + 540) % 360 - 180; lastShortAvgVal = shortAvgDeg;
     if (dt > 0) {
         let rate = Math.max(-10, Math.min(10, diff / dt));
@@ -211,10 +222,8 @@ function updateWindTrend() {
 }
 
 // ==========================================================================
-// 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,13 +238,13 @@ 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;
@@ -244,36 +253,32 @@ function startDisplayLoop() {
             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 (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" : "#fff"); 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) ? "#f39c12" : "#fff";
             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();
+
+        // HEAVY TIER (2s)
+        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, 60000, false), cObj = getCircularAverageFromBuffer(store.longBuf.cog, 60000, false),
+                awObj = getCircularAverageFromBuffer(store.longBuf.awa, 60000, true), twObj = getCircularAverageFromBuffer(store.longBuf.twa, 60000, true),
+                twdObj = getCircularAverageFromBuffer(store.longBuf.twd, 60000, false);
 
             const upUI = (el, obj, isCompass = false) => {
                 if (!obj || obj.val === null) { el.innerHTML = "---&deg;"; el.classList.remove('unstable-data'); }
@@ -283,11 +288,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 +302,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 +321,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 };
@@ -359,6 +366,9 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
     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}" />`;
 }
 
+// ==========================================================================
+// 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;
@@ -401,7 +411,7 @@ 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;
@@ -411,9 +421,11 @@ function startDynamicSimulation() {
         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;
+
         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);
@@ -424,7 +436,7 @@ function startDynamicSimulation() {
 }
 
 // ==========================================================================
-// 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); } } })();

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/package.json

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

package/style.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   1. BASE E STRUTTURA GENERALE (LIQUID GRID LAYOUT)
+   1. BASE E RESET DI SISTEMA
    ========================================================================== */
 body {
     background-color: #000;
@@ -10,12 +10,16 @@ body {
     height: 100vh;
     width: 100vw;
     overflow: hidden;
+    /* Inibisce i gesti di sistema per favorire Long Press e Swipe della dashboard */
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;
     touch-action: none;
 }
 
+/* ==========================================================================
+   2. LAYOUT PRINCIPALE (LIQUID GRID)
+   ========================================================================== */
 .main-container {
     display: grid;
     width: 100%;
@@ -23,16 +27,13 @@ body {
     padding: 5px;
     box-sizing: border-box;
     gap: 8px;
-    /* Rapporto Standard: Lati 1fr, Centro 1.5fr (Bilanciato) */
+    /* Rapporto Standard: Lati flessibili, Centro bilanciato a 1.5fr */
     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;
@@ -40,13 +41,14 @@ body {
     border-radius: 12px;
     height: 100%;
     overflow: hidden;
-    gap: 2px;
+    gap: 2px; /* Massimizza lo spazio per i 5 box verticali */
 }
 
 .left-panel { grid-column: 1; }
+
 .center-panel {
     grid-column: 2;
-    position: relative;
+    position: relative; /* Indispensabile per posizionare l'etichetta STATUS in alto a dx */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -54,12 +56,16 @@ body {
     height: 100%;
     overflow: hidden;
 }
+
 .right-panel {
     grid-column: 3;
     align-items: flex-end;
     text-align: right;
 }
 
+/* ==========================================================================
+   3. DATA-BOX E TIPOGRAFIA (UNITA' ELASTICHE CQH/CLAMP)
+   ========================================================================== */
 .data-box {
     position: relative;
     border-bottom: 1px solid #222;
@@ -68,78 +74,22 @@ body {
     flex-direction: column;
     width: 100%;
     box-sizing: border-box;
-    container-type: size;
-    flex: 1 1 0px;
+    container-type: size; /* Permette l'uso di cqh per i font */
+    flex: 1 1 0px; /* Distribuzione equa dello spazio verticale disponibile */
     min-height: 0;
     overflow: hidden;
     transition: background-color 0.2s ease;
 }
 
+/* Allineamento speculare dei testi tra colonna SX e DX */
 .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; }
-
-/* 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;
-}
-
-/* Split 60/40: Grafico a Destra */
-.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);
-    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; }
 
+/* Font dinamico per i valori: massimo 22% dell'altezza del box */
 .value {
     color: #fff;
     font-size: clamp(1.2rem, 22cqh, 3rem);
@@ -149,33 +99,65 @@ body {
     padding-bottom: 5px;
 }
 
-.value-large, .dual-value-container, .value-with-compass { margin-top: auto; margin-bottom: auto; }
+/* Centratura verticale automatica per i box senza grafico */
+.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; }
 
+/* --- 5. BUSSOLA TWD (FIX ALLINEAMENTO) --- */
+.value-with-compass {
+    display: flex;
+    justify-content: space-between; /* Bussola a SX, Valore a DX */
+    align-items: center;
+    width: 100%;
+    align-self: stretch; /* Impedisce al pannello DX di schiacciare il widget a destra */
+    gap: 5px;
+}
+
+/* TACK (Mure opposte) Layout */
 .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)
+   4. TACTICAL FOCUS MODE (DUAL SCREEN 60/40)
    ========================================================================== */
-.value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 5px; }
+.focus-active .side-panel:not(.has-focus) { display: none !important; }
 
-.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;
+/* Split: 60% per il grafico scelto, 40% per il vento centrale */
+.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 e tipografia massiccia in Focus Mode */
+.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);
+    padding: 2vw 3vw !important;
+    display: flex;
+    flex-direction: column;
 }
 
+.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; }
+
+.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;
@@ -200,18 +182,10 @@ 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
-   ========================================================================== */
+/* Hercules Mode Visuals */
 .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 .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,8 +193,14 @@ body {
 .right-panel .box-hercules .unit::after { content: " HERCULES"; }
 .right-panel .box-hercules .label:only-child::after { content: " HERCULES"; }
 
+/* Colori standard grafici */
+#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); }
+
 /* ==========================================================================
-   8. STATUS E ANIMAZIONI
+   6. WIDGETS E STATUS
    ========================================================================== */
 #status {
     position: absolute; top: 10px; right: 10px;
@@ -232,19 +212,28 @@ body {
 .online { color: #2ecc71; opacity: 0.5; }
 .offline { color: #e74c3c; font-weight: bold; }
 
+.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;
+}
+
 #awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap {
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+#wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
+
+/* ==========================================================================
+   7. STATI DI ALLARME E INSTABILITÀ
+   ========================================================================== */
 .unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
 .alarm-warning { color: #f1c40f !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 (PORTRAIT MODE)
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
     .main-container { grid-template-columns: 1fr 1fr !important; grid-template-rows: 45vh calc(55vh - 8px) !important; }
@@ -258,7 +247,7 @@ 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; }
@@ -266,6 +255,7 @@ body.night-mode { background-color: #000 !important; color: #ff0000 !important;
 .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); }
 
+/* Grafici Night Mode: Solo linea, no riempimento */
 .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)); }
@@ -273,6 +263,11 @@ body.night-mode { background-color: #000 !important; color: #ff0000 !important;
 .night-mode #tws-graph line:not([stroke*="rgba"]) { stroke: #ff3333 !important; stroke-width: 1.8px !important; }
 .night-mode .scale-labels { color: #660000 !important; }
 
+/* Hercules & special in Night */
+.night-mode .box-hercules { background: rgba(60, 0, 0, 0.2) !important; }
+.night-mode .line-hercules { filter: drop-shadow(0 0 6px #ff0000) !important; }
+
+/* Wind Gauge Night */
 .night-mode #wind-gauge circle { stroke: #330000; }
 .night-mode #ticks line { stroke: #4d0000 !important; }
 .night-mode #tick-labels { fill: #800000 !important; }
@@ -281,23 +276,22 @@ body.night-mode { background-color: #000 !important; color: #ff0000 !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 */
+/* Settori Vento Night (Destra tratteggiata) */
 .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 */
+/* Leeway & Pointer 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; }
 
+.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; }
+
 /* Bussola TWD Night */
 .night-mode .mini-compass { border-color: #330000; background: #000; }
 .night-mode .mini-compass text { fill: #800000 !important; }
@@ -309,9 +303,21 @@ body.night-mode { background-color: #000 !important; color: #ff0000 !important;
    ========================================================================== */
 @keyframes blink-trend { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
 
+/* Stato base dei pallini di trend: discreti al 30% */
 #trend-dot-cw, #trend-dot-ccw, #trend-gauge-cw, #trend-gauge-ccw {
     opacity: 0.3;
     transition: opacity 0.3s ease;
 }
 
-.is-trending { a
+/* Quando attivi: brillano al 100% e lampeggiano */
+.is-trending {
+    opacity: 1 !important;
+    animation: blink-trend 1s infinite !important;
+}
+
+/* Allarme Strambata: Rosso fisso con bagliore neon massimo */
+.is-gybing {
+    opacity: 1 !important;
+    animation: none !important;
+    filter: drop-shadow(0 0 8px #ff0000) !important;
+}