@sailingrotevista/rotevista-dash 1.0.0

package/app.js

@@ -0,0 +1,462 @@
+// ==========================================================================
+// 1. CONFIGURAZIONE E COSTANTI
+// ==========================================================================
+const SIGNALK_SERVER_IP = "192.168.111.240:3000"; // Indirizzo IP e porta server SignalK
+const ALARM_DANGER_DEPTH = 2.5;                   // Allarme rosso + suono (metri)
+const ALARM_WARNING_DEPTH = 5.0;                  // Pre-allarme giallo (metri)
+
+const RENDER_INTERVAL_MS = 1000;                  // Refresh UI (1 sec)
+const TIMEOUT_MS = 5000;                          // Watchdog: oscura dato se manca per 5 sec
+
+const SMOOTH_WINDOW_MS = 2000;                    // Media veloce (2 sec) per lancette SVG
+const LONG_AVG_WINDOW_MS = 60000;                 // Media lunga (60 sec) per riquadri "MEAN"
+
+const MAX_HISTORY_SAMPLES = 60;                   // Pixel max per sparklines
+const REAL_SAMPLE_INTERVAL = 5000;                // Campionamento sparkline reale (5 sec)
+const SIM_SAMPLE_INTERVAL = 1000;                 // Campionamento sparkline simulazione (1 sec)
+
+const STABILITY_TIME_TOLERANCE_MS = 2000;         // Tolleranza riempimento buffer (es. 58s su 60s)
+const STABILITY_CONFIDENCE_THRESHOLD = 0.90;      // Indice circolare (R) minimo per non lampeggiare
+const MIN_SPEED_FOR_STABILITY_KTS = 0.5;          // Sotto questa velocità NON lampeggia nulla (barca ferma)
+
+// ==========================================================================
+// 2. VARIABILI GLOBALI E STATO
+// ==========================================================================
+let simulationMode = false;
+let socket;
+let renderInterval = null;
+let simInterval = null;
+let lastAvgUIUpdate = 0;
+let audioCtx = null, lastAlarmTime = 0;
+let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
+
+const store = {
+    raw: {},
+    timestamps: {},
+    smoothBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [], leeway: [] },
+    longBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
+    histories: { stw: [], sog: [], depth: [], tws: [] },
+    lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0 }
+};
+
+const ui = {
+    stw: document.getElementById('stw'), sog: document.getElementById('sog'),
+    hdg: document.getElementById('hdg'), cog: document.getElementById('cog'),
+    awsSvg: document.getElementById('aws-val-svg'), awa: document.getElementById('awa-pointer'),
+    twa: document.getElementById('twa-pointer'), track: document.getElementById('track-pointer'),
+    tws: document.getElementById('tws'), depth: document.getElementById('depth'),
+    twaAvg: document.getElementById('twa-avg'), awaAvg: document.getElementById('awa-avg'),
+    twdAvg: document.getElementById('twd-avg'), twdArrow: document.getElementById('twd-arrow'),
+    leewayMask: document.getElementById('leeway-mask-rect'), leewayVal: document.getElementById('leeway-val'),
+    tackHdg: document.getElementById('tack-hdg'), tackCog: document.getElementById('tack-cog'),
+    status: document.getElementById('status')
+};
+
+// ==========================================================================
+// 3. FUNZIONI MATEMATICHE E HELPER
+// ==========================================================================
+function radToDeg(rad) { return rad * (180 / Math.PI); }
+function degToRad(deg) { return deg * (Math.PI / 180); }
+function msToKts(ms) { return ms * 1.94384; }
+function ktsToMs(kts) { return kts / 1.94384; }
+
+function getShortestRotation(curr, target) {
+    let diff = (target - curr) % 360;
+    if (diff > 180) diff -= 360; else if (diff < -180) diff += 360;
+    return curr + diff;
+}
+
+function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
+    const now = Date.now();
+    const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
+    if (validData.length === 0) return null;
+    
+    let sumSin = 0, sumCos = 0;
+    validData.forEach(item => { sumSin += Math.sin(item.val); sumCos += Math.cos(item.val); });
+    
+    let R = Math.sqrt(sumSin * sumSin + sumCos * sumCos) / validData.length;
+    let timeSpan = validData[validData.length - 1].time - validData[0].time;
+    let isStable = (timeSpan >= windowMs - STABILITY_TIME_TOLERANCE_MS) && (R > STABILITY_CONFIDENCE_THRESHOLD);
+    let avgRad = Math.atan2(sumSin, sumCos);
+    let avgDeg = Math.round(radToDeg(avgRad));
+    let finalVal = signed ? avgDeg : (avgDeg + 360) % 360;
+    
+    return { val: finalVal, stable: isStable };
+}
+
+function cleanBuffer(bufferArray, windowMs) {
+    const now = Date.now();
+    while (bufferArray.length > 0 && (now - bufferArray[0].time) > windowMs) bufferArray.shift();
+}
+
+// ==========================================================================
+// 4. GESTIONE DATI IN INGRESSO (SIGNALK / SIMULATORE)
+// ==========================================================================
+function processIncomingData(path, val) {
+    const now = Date.now();
+    store.timestamps[path] = now;
+    store.raw[path] = val;
+
+    if (path === "navigation.headingTrue") { store.smoothBuf.hdg.push({ val: val, time: now }); store.longBuf.hdg.push({ val: val, time: now }); }
+    if (path === "navigation.courseOverGroundTrue") { store.smoothBuf.cog.push({ val: val, time: now }); store.longBuf.cog.push({ val: val, time: now }); }
+    if (path === "environment.wind.angleApparent") { store.smoothBuf.awa.push({ val: val, time: now }); store.longBuf.awa.push({ val: val, time: now }); }
+    if (path === "environment.wind.angleTrueWater") { store.smoothBuf.twa.push({ val: val, time: now }); store.longBuf.twa.push({ val: val, time: now }); }
+
+    // Calcolo TWD in locale
+    if (path === "environment.wind.angleTrueWater" || path === "navigation.headingTrue") {
+        if (store.raw["navigation.headingTrue"] !== undefined && store.raw["environment.wind.angleTrueWater"] !== undefined) {
+            let twdRad = (store.raw["navigation.headingTrue"] + store.raw["environment.wind.angleTrueWater"]) % (2 * Math.PI);
+            if (twdRad < 0) twdRad += (2 * Math.PI);
+            store.raw["environment.wind.directionTrue"] = twdRad;
+            store.timestamps["environment.wind.directionTrue"] = now;
+        }
+    }
+
+    if (store.raw["environment.wind.directionTrue"] !== undefined) {
+        store.smoothBuf.twd.push({ val: store.raw["environment.wind.directionTrue"], time: now });
+        store.longBuf.twd.push({ val: store.raw["environment.wind.directionTrue"], time: now });
+    }
+
+    // Calcolo Leeway in locale
+    if (path === "environment.wind.angleTrueWater" || path === "environment.wind.speedTrue" || path === "navigation.speedThroughWater") {
+        if (store.raw["environment.wind.angleTrueWater"] !== undefined && store.raw["environment.wind.speedTrue"] !== undefined && store.raw["navigation.speedThroughWater"] !== undefined) {
+            const twsKts = msToKts(store.raw["environment.wind.speedTrue"]);
+            const stwKts = msToKts(store.raw["navigation.speedThroughWater"]);
+            const stwSafe = Math.max(stwKts, 0.1);
+            let leewayDeg = - (12 * twsKts / (stwSafe * stwSafe)) * Math.sin(store.raw["environment.wind.angleTrueWater"]);
+            leewayDeg = Math.max(-20, Math.min(20, leewayDeg));
+            store.raw["navigation.leewayAngle"] = degToRad(leewayDeg);
+            store.timestamps["navigation.leewayAngle"] = now;
+            store.smoothBuf.leeway.push({ val: degToRad(leewayDeg), time: now });
+        }
+    } else if (path === "navigation.leewayAngle") {
+        store.smoothBuf.leeway.push({ val: val, time: now });
+    }
+}
+
+// ==========================================================================
+// 5. MOTORE DI RENDERING PRINCIPALE (UI LOOP)
+// ==========================================================================
+function startDisplayLoop() {
+    if (renderInterval) clearInterval(renderInterval);
+    
+    renderInterval = setInterval(() => {
+        const now = Date.now();
+
+        // --- WATCHDOG TIMEOUT ---
+        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)) {
+                pathsToWatch[p][pathsToWatch[p] === ui.awsSvg ? 'textContent' : 'innerText'] = "---";
+                if (p === "environment.depth.belowTransducer") ui.depth.classList.remove('alarm-warning', 'alarm-danger');
+                delete store.raw[p];
+            }
+        }
+
+        // --- RENDER DATI ISTANTANEI ---
+        if (store.raw["navigation.speedThroughWater"] !== undefined) {
+            const stw = msToKts(store.raw["navigation.speedThroughWater"]); ui.stw.innerText = stw.toFixed(1); manageHistory('stw', stw);
+        }
+        if (store.raw["navigation.speedOverGround"] !== undefined) {
+            const sog = msToKts(store.raw["navigation.speedOverGround"]); ui.sog.innerText = sog.toFixed(1); manageHistory('sog', 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 tws = msToKts(store.raw["environment.wind.speedTrue"]); ui.tws.innerText = tws.toFixed(1); manageHistory('tws', tws);
+        }
+        if (store.raw["environment.wind.speedApparent"] !== undefined) {
+            ui.awsSvg.textContent = msToKts(store.raw["environment.wind.speedApparent"]).toFixed(1);
+        }
+
+        // --- RENDER QUADRANTE VENTO (SMOOTHING 2s) ---
+        const smoothLeewayObj = getCircularAverageFromBuffer(store.smoothBuf.leeway, SMOOTH_WINDOW_MS, true);
+        const smoothLeeway = smoothLeewayObj ? smoothLeewayObj.val : null;
+        
+        const smoothAwaObj = getCircularAverageFromBuffer(store.smoothBuf.awa, SMOOTH_WINDOW_MS, true);
+        if (smoothAwaObj !== null) { curAwaRot = getShortestRotation(curAwaRot, smoothAwaObj.val); ui.awa.setAttribute('transform', `rotate(${curAwaRot}, 200, 200)`); }
+        
+        const smoothTwaObj = getCircularAverageFromBuffer(store.smoothBuf.twa, SMOOTH_WINDOW_MS, true);
+        if (smoothTwaObj !== null) { curTwaRot = getShortestRotation(curTwaRot, smoothTwaObj.val); ui.twa.setAttribute('transform', `rotate(${curTwaRot}, 200, 200)`); }
+        
+        if (smoothLeeway !== null) {
+            updateLeewayDisplay(smoothLeeway);
+            curTrackRot = getShortestRotation(curTrackRot, smoothLeeway); ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
+        }
+        
+        // --- RENDER MEDIE LUNGHE E TACK (Ogni 3s su buffer di 60s) ---
+        if (now - lastAvgUIUpdate > 3000) {
+            let hdgObj = getCircularAverageFromBuffer(store.longBuf.hdg, LONG_AVG_WINDOW_MS, false);
+            let cogObj = getCircularAverageFromBuffer(store.longBuf.cog, LONG_AVG_WINDOW_MS, false);
+            let awObj = getCircularAverageFromBuffer(store.longBuf.awa, LONG_AVG_WINDOW_MS, true);
+            let twObj = getCircularAverageFromBuffer(store.longBuf.twa, LONG_AVG_WINDOW_MS, true);
+            let twdObj = getCircularAverageFromBuffer(store.longBuf.twd, LONG_AVG_WINDOW_MS, false);
+
+            // Lettura velocità per soppressione allarmi stabilità all'ormeggio
+            let currentSogKts = 0;
+            if (store.histories.sog && store.histories.sog.length > 0) {
+                currentSogKts = store.histories.sog[store.histories.sog.length - 1];
+            } else if (store.raw["navigation.speedOverGround"] !== undefined) {
+                currentSogKts = msToKts(store.raw["navigation.speedOverGround"]);
+            }
+
+            const updateMeanUI = (el, obj) => {
+                if (!obj) {
+                    el.innerHTML = `---&deg;`;
+                    el.classList.remove('unstable-data');
+                } else {
+                    el.innerHTML = `${obj.val.toString().padStart(3, '0')}&deg;`;
+                    let isEffectivelyStable = obj.stable || (currentSogKts < MIN_SPEED_FOR_STABILITY_KTS);
+                    if (isEffectivelyStable) el.classList.remove('unstable-data');
+                    else el.classList.add('unstable-data');
+                }
+            };
+
+            updateMeanUI(ui.hdg, hdgObj);
+            updateMeanUI(ui.cog, cogObj);
+            updateMeanUI(ui.awaAvg, awObj);
+            updateMeanUI(ui.twaAvg, twObj);
+            updateMeanUI(ui.twdAvg, twdObj);
+            
+            // Calcolo TACK (Mure Opposte)
+            if (hdgObj && twObj && hdgObj.val !== null && twObj.val !== null) {
+                let tackAngleOffset = twObj.val * 2;
+                let newHdg = (hdgObj.val - tackAngleOffset + 360) % 360;
+                ui.tackHdg.innerHTML = `${Math.round(newHdg).toString().padStart(3, '0')}&deg;`;
+                
+                if (cogObj && cogObj.val !== null) {
+                    let newCog = (cogObj.val - tackAngleOffset + 360) % 360;
+                    ui.tackCog.innerHTML = `${Math.round(newCog).toString().padStart(3, '0')}&deg;`;
+                } else {
+                    ui.tackCog.innerHTML = `---&deg;`;
+                }
+
+                // Lampeggio TACK con esenzione per barca ferma applicata
+                let tackMathStable = hdgObj.stable && twObj.stable && (!cogObj || cogObj.stable);
+                let tackEffectivelyStable = tackMathStable || (currentSogKts < MIN_SPEED_FOR_STABILITY_KTS);
+                
+                if (tackEffectivelyStable) {
+                    ui.tackHdg.classList.remove('unstable-data');
+                    ui.tackCog.classList.remove('unstable-data');
+                } else {
+                    ui.tackHdg.classList.add('unstable-data');
+                    ui.tackCog.classList.add('unstable-data');
+                }
+            } else {
+                ui.tackHdg.innerHTML = `---&deg;`;
+                ui.tackCog.innerHTML = `---&deg;`;
+                ui.tackHdg.classList.remove('unstable-data');
+                ui.tackCog.classList.remove('unstable-data');
+            }
+
+            if (twdObj !== null) {
+                curTwdRoseRot = getShortestRotation(curTwdRoseRot, twdObj.val);
+                ui.twdArrow.setAttribute('transform', `rotate(${curTwdRoseRot}, 20, 20)`);
+            }
+            lastAvgUIUpdate = now;
+        }
+
+        // Pulizia ciclica dei buffer per evitare memory leak
+        cleanBuffer(store.smoothBuf.hdg, SMOOTH_WINDOW_MS); cleanBuffer(store.smoothBuf.cog, SMOOTH_WINDOW_MS);
+        cleanBuffer(store.smoothBuf.awa, SMOOTH_WINDOW_MS); cleanBuffer(store.smoothBuf.twa, SMOOTH_WINDOW_MS);
+        cleanBuffer(store.smoothBuf.twd, SMOOTH_WINDOW_MS); cleanBuffer(store.smoothBuf.leeway, SMOOTH_WINDOW_MS);
+        cleanBuffer(store.longBuf.awa, LONG_AVG_WINDOW_MS); cleanBuffer(store.longBuf.twa, LONG_AVG_WINDOW_MS);
+        cleanBuffer(store.longBuf.twd, LONG_AVG_WINDOW_MS); cleanBuffer(store.longBuf.hdg, LONG_AVG_WINDOW_MS);
+        cleanBuffer(store.longBuf.cog, LONG_AVG_WINDOW_MS);
+
+    }, RENDER_INTERVAL_MS);
+}
+
+// ==========================================================================
+// 6. ALLARMI AUDIO
+// ==========================================================================
+document.addEventListener('click', () => { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); }, { once: true });
+function playBingBing() {
+    if (!audioCtx) return; 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 checkDepthAlarm(m) {
+    ui.depth.classList.remove('alarm-warning', 'alarm-danger');
+    if (m < ALARM_DANGER_DEPTH) { ui.depth.classList.add('alarm-danger'); playBingBing(); }
+    else if (m < ALARM_WARNING_DEPTH) ui.depth.classList.add('alarm-warning');
+}
+
+// ==========================================================================
+// 7. CONNESSIONE SIGNALK (SAFARI FRIENDLY)
+// ==========================================================================
+let isConnecting = false;
+
+function connect() {
+    // Se siamo in simulazione o se c'è già un tentativo in corso, ci fermiamo
+    if (simulationMode || isConnecting) return;
+    
+    // Se il socket esiste ed è già aperto o in fase di apertura, non facciamo nulla
+    if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
+        return;
+    }
+
+    isConnecting = true;
+
+    try {
+        socket = new WebSocket(`ws://${SIGNALK_SERVER_IP}/signalk/v1/stream?subscribe=all`);
+        
+        socket.onopen = () => {
+            isConnecting = false;
+            ui.status.className = "online";
+            ui.status.innerText = "ONLINE";
+        };
+        
+        socket.onmessage = (e) => {
+            if (simulationMode) return;
+            const d = JSON.parse(e.data);
+            if (d.updates) d.updates.forEach(u => u.values && u.values.forEach(v => processIncomingData(v.path, v.value)));
+        };
+
+        socket.onerror = (err) => {
+            // Non forziamo la chiusura qui. Lasciamo che Safari gestisca l'errore
+            // in modo nativo e faccia scattare onclose da solo.
+            isConnecting = false;
+        };
+
+        socket.onclose = () => {
+            isConnecting = false;
+            if (!simulationMode) {
+                ui.status.className = "offline";
+                ui.status.innerText = "OFFLINE";
+                // Attendiamo ben 5 secondi prima di riprovare, per non infastidire Safari
+                setTimeout(connect, 5000);
+            }
+        };
+    } catch (e) {
+        isConnecting = false;
+        setTimeout(connect, 5000);
+    }
+}
+
+
+// ==========================================================================
+// 8. SIMULATORE / MOTORE FISICO
+// ==========================================================================
+const physicsEngine = {
+    time: 0,
+    config: { hdgStart: Math.random() * 360, hdgDir: Math.random() > 0.5 ? 1 : -1, twdBase: Math.random() * 360, rotSpeed: 360 / 600 },
+    getPolars: function(twaDeg, twsKts) {
+        let eff = 0; const aT = Math.abs(twaDeg);
+        if (aT < 30) eff = 0.1; else if (aT < 45) eff = 0.75; else if (aT < 90) eff = 1.0; else if (aT < 150) eff = 0.85; else eff = 0.65;
+        return Math.min(Math.sqrt(twsKts) * 2.2 * eff, 11.0);
+    },
+    step: function() {
+        this.time++;
+        const hdgDeg = (this.config.hdgStart + (this.time * this.config.rotSpeed * this.config.hdgDir) + 360) % 360;
+        const twdDeg = (this.config.twdBase + Math.sin(this.time / 20) * 15 + 360) % 360;
+        const twsKts = 14 + Math.sin(this.time / 40) * 6;
+        const depthM = 20 + Math.sin(this.time / 25) * 18;
+        let twaDeg = (twdDeg - hdgDeg + 360) % 360; if (twaDeg > 180) twaDeg -= 360;
+        const stwKts = this.getPolars(twaDeg, twsKts);
+        const stwMs = ktsToMs(stwKts), twsMs = ktsToMs(twsKts), twaRad = degToRad(twaDeg);
+        const vAx = twsMs * Math.sin(twaRad), vAy = twsMs * Math.cos(twaRad) + stwMs;
+        const awsMs = Math.sqrt(vAx*vAx + vAy*vAy), awaRad = Math.atan2(vAx, vAy);
+
+        return {
+            "navigation.headingTrue": degToRad(hdgDeg),
+            "navigation.courseOverGroundTrue": degToRad((hdgDeg + 4) % 360), // COG fittizio simulato
+            "navigation.speedThroughWater": stwMs,
+            "navigation.speedOverGround": stwMs * 1.05,
+            "environment.wind.speedTrue": twsMs,
+            "environment.wind.directionTrue": degToRad(twdDeg),
+            "environment.wind.angleTrueWater": twaRad,
+            "environment.wind.speedApparent": awsMs,
+            "environment.wind.angleApparent": awaRad,
+            "environment.depth.belowTransducer": depthM
+        };
+    }
+};
+
+let dC = 0, lC = 0;
+ui.depth.closest('.data-box').addEventListener('click', () => {
+    const n = Date.now(); if (n - lC < 500) dC++; else dC = 1; lC = n;
+    if (dC === 3) {
+        simulationMode = !simulationMode;
+        if (simulationMode) {
+            if (socket) socket.close(); ui.status.innerText = "SIM ATTIVO";
+            if(simInterval) clearInterval(simInterval);
+            simInterval = setInterval(() => { const simulatedData = physicsEngine.step(); for (let path in simulatedData) processIncomingData(path, simulatedData[path]); }, 200);
+        } else location.reload();
+        dC = 0;
+    }
+});
+
+// ==========================================================================
+// 9. FUNZIONI UI GRAFICHE (Sparklines, Leeway, Ticks)
+// ==========================================================================
+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 manageHistory(t, v) {
+    const n = Date.now(), i = simulationMode ? SIM_SAMPLE_INTERVAL : REAL_SAMPLE_INTERVAL;
+    if (n - store.lastUpdates[t] > i || store.histories[t].length === 0) {
+        store.histories[t].push(v); if (store.histories[t].length > MAX_HISTORY_SAMPLES) store.histories[t].shift(); store.lastUpdates[t] = n;
+    }
+    const m = Math.max(...store.histories[t], 1); const c = getDynamicScale(t, m);
+    updateScaleLabels(t, c.scale); drawGraph(store.histories[t], t + '-graph', c.scale, c.gridLines);
+}
+
+function getDynamicScale(t, m) {
+    if (t === 'stw' || t === 'sog') return { scale: 12, gridLines: [3, 6, 9] };
+    const s = { tws: [10, 25, 45, 60], depth: [10, 20, 50, 200] };
+    const av = s[t] || [10, 20, 50]; let sel = av[av.length - 1];
+    for (let x of av) if (m <= x) { sel = x; break; }
+    return { scale: sel, gridLines: [sel/4, sel/2, (sel/4)*3] };
+}
+
+function updateScaleLabels(t, s) { const el = document.getElementById(t + '-scale'); if (el) el.innerHTML = `<span>${s}</span><span>${s/2}</span><span>0</span>`; }
+
+function drawGraph(d, id, s, gl) {
+    const svg = document.getElementById(id); if (!svg || d.length < 2) return;
+    const w = 200, h = 40; let gH = "";
+    gl.forEach(v => { const y = h - (v / s) * h; gH += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />`; });
+    let p = ""; d.forEach((v, i) => { const x = (i/(MAX_HISTORY_SAMPLES - 1))*w; const y = h - (Math.min(v, s)/s)*h; p += `${i===0?'M':'L'} ${x} ${y} `; });
+    const aP = p + ` L ${((d.length-1)/(MAX_HISTORY_SAMPLES - 1))*w} ${h} L 0 ${h} Z`;
+    const clrs = { 'stw-graph': { s: '#2ecc71', f: 'rgba(46, 204, 113, 0.15)' }, 'sog-graph': { s: '#f39c12', f: 'rgba(243, 156, 18, 0.15)' }, 'depth-graph': { s: '#3498db', f: 'rgba(52, 152, 219, 0.15)' }, 'tws-graph': { s: '#f1c40f', f: 'rgba(241, 196, 15, 0.15)' } };
+    svg.innerHTML = `${gH}<path d="${aP}" fill="${clrs[id].f}" stroke="none" /><path d="${p}" fill="none" stroke="${clrs[id].s}" stroke-width="1.5" />`;
+}
+
+function generateTicks() {
+    const c = document.getElementById('ticks');
+    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);
+    }
+}
+
+// ==========================================================================
+// 10. INIZIALIZZAZIONE (Attesa caricamento DOM per Safari)
+// ==========================================================================
+generateTicks();
+startDisplayLoop();
+
+// Attendiamo che il browser abbia finito di renderizzare la grafica
+// prima di aprire il socket, evita blocchi su iPad/iPhone.
+window.addEventListener('load', () => {
+    setTimeout(connect, 500);
+});

package/app.js.txt

@@ -0,0 +1,311 @@
+const SIGNALK_SERVER_IP = "192.168.111.240:3000";
+const ALARM_DANGER_DEPTH = 2.5;
+const ALARM_WARNING_DEPTH = 5.0;
+
+const SMOOTH_WINDOW_MS = 2000;
+const LONG_AVG_WINDOW_MS = 60000;
+const RENDER_INTERVAL_MS = 1000;  
+const TIMEOUT_MS = 5000;
+
+const MAX_HISTORY_SAMPLES = 60;
+const REAL_SAMPLE_INTERVAL = 5000;
+const SIM_SAMPLE_INTERVAL = 1000;
+
+let simulationMode = false;
+let socket;
+let renderInterval = null;
+let simInterval = null;
+let lastAvgUIUpdate = 0;
+let audioCtx = null, lastAlarmTime = 0;
+
+let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
+
+const store = {
+    raw: {},
+    timestamps: {},
+    smoothBuf: { hdg: [], awa: [], twa: [], twd: [], leeway: [] },
+    longBuf: { awa: [], twa: [], twd: [] },
+    histories: { stw: [], sog: [], depth: [], tws: [] },
+    lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0 }
+};
+
+const ui = {
+    stw: document.getElementById('stw'), sog: document.getElementById('sog'),
+    hdg: document.getElementById('hdg'), cog: document.getElementById('cog'),
+    awsSvg: document.getElementById('aws-val-svg'), awa: document.getElementById('awa-pointer'),
+    twa: document.getElementById('twa-pointer'), track: document.getElementById('track-pointer'),
+    tws: document.getElementById('tws'), depth: document.getElementById('depth'),
+    twaAvg: document.getElementById('twa-avg'), awaAvg: document.getElementById('awa-avg'),
+    twdAvg: document.getElementById('twd-avg'), twdArrow: document.getElementById('twd-arrow'),
+    leewayMask: document.getElementById('leeway-mask-rect'), leewayVal: document.getElementById('leeway-val'),
+    status: document.getElementById('status')
+};
+
+function radToDeg(rad) { return rad * (180 / Math.PI); }
+function degToRad(deg) { return deg * (Math.PI / 180); }
+function msToKts(ms) { return ms * 1.94384; }
+function ktsToMs(kts) { return kts / 1.94384; }
+
+function getShortestRotation(curr, target) {
+    let diff = (target - curr) % 360;
+    if (diff > 180) diff -= 360; else if (diff < -180) diff += 360;
+    return curr + diff;
+}
+
+function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
+    const now = Date.now();
+    const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
+    if (validData.length === 0) return null;
+    let sumSin = 0, sumCos = 0;
+    validData.forEach(item => { sumSin += Math.sin(item.val); sumCos += Math.cos(item.val); });
+    let avgRad = Math.atan2(sumSin, sumCos);
+    let avgDeg = Math.round(radToDeg(avgRad));
+    return signed ? avgDeg : (avgDeg + 360) % 360;
+}
+
+function cleanBuffer(bufferArray, windowMs) {
+    const now = Date.now();
+    while (bufferArray.length > 0 && (now - bufferArray[0].time) > windowMs) bufferArray.shift();
+}
+
+function processIncomingData(path, val) {
+    const now = Date.now();
+    store.timestamps[path] = now;
+    store.raw[path] = val;
+
+    if (path === "navigation.headingMagnetic") store.smoothBuf.hdg.push({ val: val, time: now });
+    if (path === "environment.wind.angleApparent") { store.smoothBuf.awa.push({ val: val, time: now }); store.longBuf.awa.push({ val: val, time: now }); }
+    if (path === "environment.wind.angleTrueWater") { store.smoothBuf.twa.push({ val: val, time: now }); store.longBuf.twa.push({ val: val, time: now }); }
+
+    if (path === "environment.wind.angleTrueWater" || path === "navigation.headingMagnetic") {
+        if (store.raw["navigation.headingMagnetic"] !== undefined && store.raw["environment.wind.angleTrueWater"] !== undefined) {
+            let twdRad = (store.raw["navigation.headingMagnetic"] + store.raw["environment.wind.angleTrueWater"]) % (2 * Math.PI);
+            if (twdRad < 0) twdRad += (2 * Math.PI);
+            store.raw["environment.wind.directionTrue"] = twdRad;
+            store.timestamps["environment.wind.directionTrue"] = now;
+        }
+    }
+
+    if (store.raw["environment.wind.directionTrue"] !== undefined) {
+        store.smoothBuf.twd.push({ val: store.raw["environment.wind.directionTrue"], time: now });
+        store.longBuf.twd.push({ val: store.raw["environment.wind.directionTrue"], time: now });
+    }
+
+    if (path === "environment.wind.angleTrueWater" || path === "environment.wind.speedTrue" || path === "navigation.speedThroughWater") {
+        if (store.raw["environment.wind.angleTrueWater"] !== undefined && store.raw["environment.wind.speedTrue"] !== undefined && store.raw["navigation.speedThroughWater"] !== undefined) {
+            const twsKts = msToKts(store.raw["environment.wind.speedTrue"]);
+            const stwKts = msToKts(store.raw["navigation.speedThroughWater"]);
+            const stwSafe = Math.max(stwKts, 0.1);
+            let leewayDeg = - (12 * twsKts / (stwSafe * stwSafe)) * Math.sin(store.raw["environment.wind.angleTrueWater"]);
+            leewayDeg = Math.max(-20, Math.min(20, leewayDeg));
+            store.raw["navigation.leewayAngle"] = degToRad(leewayDeg);
+            store.timestamps["navigation.leewayAngle"] = now;
+            store.smoothBuf.leeway.push({ val: degToRad(leewayDeg), time: now });
+        }
+    } else if (path === "navigation.leewayAngle") {
+        store.smoothBuf.leeway.push({ val: val, time: now });
+    }
+}
+
+// --- RENDER ENGINE PRINCIPALE (1Hz) ---
+function startDisplayLoop() {
+    if (renderInterval) clearInterval(renderInterval);
+    
+    renderInterval = setInterval(() => {
+        const now = Date.now();
+
+        // 1. Watchdog Timeout
+        const pathsToWatch = {
+            "navigation.speedThroughWater": ui.stw, "navigation.speedOverGround": ui.sog,
+            "navigation.headingMagnetic": ui.hdg, "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)) {
+                pathsToWatch[p][pathsToWatch[p] === ui.awsSvg ? 'textContent' : 'innerText'] = "---";
+                if (p === "environment.depth.belowTransducer") ui.depth.classList.remove('alarm-warning', 'alarm-danger');
+                delete store.raw[p];
+            }
+        }
+
+        // 2. Render Istantanei
+        if (store.raw["navigation.speedThroughWater"] !== undefined) {
+            const stw = msToKts(store.raw["navigation.speedThroughWater"]); ui.stw.innerText = stw.toFixed(1); manageHistory('stw', stw);
+        }
+        if (store.raw["navigation.speedOverGround"] !== undefined) {
+            const sog = msToKts(store.raw["navigation.speedOverGround"]); ui.sog.innerText = sog.toFixed(1); manageHistory('sog', 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 tws = msToKts(store.raw["environment.wind.speedTrue"]); ui.tws.innerText = tws.toFixed(1); manageHistory('tws', tws);
+        }
+        if (store.raw["environment.wind.speedApparent"] !== undefined) ui.awsSvg.textContent = msToKts(store.raw["environment.wind.speedApparent"]).toFixed(1);
+
+        // 3. Render Smussati (2s)
+        const smoothHdg = getCircularAverageFromBuffer(store.smoothBuf.hdg, SMOOTH_WINDOW_MS, false);
+        const smoothLeeway = getCircularAverageFromBuffer(store.smoothBuf.leeway, SMOOTH_WINDOW_MS, true);
+        
+        if (smoothHdg !== null) {
+            ui.hdg.innerHTML = `${Math.round(smoothHdg).toString().padStart(3, '0')}&deg;`; // Aggiunto gradi in chiaro
+            if (smoothLeeway !== null) {
+                let cog = (smoothHdg + smoothLeeway + 360) % 360;
+                ui.cog.innerHTML = `${Math.round(cog).toString().padStart(3, '0')}&deg;`;
+            }
+        }
+
+        const smoothAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, SMOOTH_WINDOW_MS, true);
+        if (smoothAwa !== null) { curAwaRot = getShortestRotation(curAwaRot, smoothAwa); ui.awa.setAttribute('transform', `rotate(${curAwaRot}, 200, 200)`); }
+
+        const smoothTwa = getCircularAverageFromBuffer(store.smoothBuf.twa, SMOOTH_WINDOW_MS, true);
+        if (smoothTwa !== null) { curTwaRot = getShortestRotation(curTwaRot, smoothTwa); ui.twa.setAttribute('transform', `rotate(${curTwaRot}, 200, 200)`); }
+
+        if (smoothLeeway !== null) {
+            updateLeewayDisplay(smoothLeeway);
+            curTrackRot = getShortestRotation(curTrackRot, smoothLeeway); ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
+        }
+
+        // 4. Render Medie Lunghe (60s)
+        if (now - lastAvgUIUpdate > 3000) {
+            let awA = getCircularAverageFromBuffer(store.longBuf.awa, LONG_AVG_WINDOW_MS, true);
+            let twA = getCircularAverageFromBuffer(store.longBuf.twa, LONG_AVG_WINDOW_MS, true);
+            let twD = getCircularAverageFromBuffer(store.longBuf.twd, LONG_AVG_WINDOW_MS, false);
+
+            ui.awaAvg.innerHTML = awA === null ? `---&deg;` : `${awA.toString().padStart(3, '0')}&deg;`;
+            ui.twaAvg.innerHTML = twA === null ? `---&deg;` : `${twA.toString().padStart(3, '0')}&deg;`;
+            ui.twdAvg.innerHTML = twD === null ? `---&deg;` : `${twD.toString().padStart(3, '0')}&deg;`;
+            
+            if (twD !== null) { curTwdRoseRot = getShortestRotation(curTwdRoseRot, twD); ui.twdArrow.setAttribute('transform', `rotate(${curTwdRoseRot}, 20, 20)`); }
+            lastAvgUIUpdate = now;
+        }
+
+        cleanBuffer(store.smoothBuf.hdg, SMOOTH_WINDOW_MS); cleanBuffer(store.smoothBuf.awa, SMOOTH_WINDOW_MS);
+        cleanBuffer(store.smoothBuf.twa, SMOOTH_WINDOW_MS); cleanBuffer(store.smoothBuf.twd, SMOOTH_WINDOW_MS);
+        cleanBuffer(store.smoothBuf.leeway, SMOOTH_WINDOW_MS); cleanBuffer(store.longBuf.awa, LONG_AVG_WINDOW_MS);
+        cleanBuffer(store.longBuf.twa, LONG_AVG_WINDOW_MS); cleanBuffer(store.longBuf.twd, LONG_AVG_WINDOW_MS);
+
+    }, RENDER_INTERVAL_MS);
+}
+
+document.addEventListener('click', () => { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); }, { once: true });
+function playBingBing() {
+    if (!audioCtx) return; 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 checkDepthAlarm(m) {
+    ui.depth.classList.remove('alarm-warning', 'alarm-danger');
+    if (m < ALARM_DANGER_DEPTH) { ui.depth.classList.add('alarm-danger'); playBingBing(); }
+    else if (m < ALARM_WARNING_DEPTH) ui.depth.classList.add('alarm-warning');
+}
+
+function connect() {
+    if (simulationMode) return;
+    socket = new WebSocket(`ws://${SIGNALK_SERVER_IP}/signalk/v1/stream?subscribe=all`);
+    socket.onopen = () => { ui.status.className = "online"; ui.status.innerText = "ONLINE"; };
+    socket.onmessage = (e) => {
+        if (simulationMode) return;
+        const d = JSON.parse(e.data);
+        if (d.updates) d.updates.forEach(u => u.values && u.values.forEach(v => processIncomingData(v.path, v.value)));
+    };
+    socket.onclose = () => !simulationMode && setTimeout(connect, 5000);
+}
+
+const physicsEngine = {
+    time: 0,
+    config: { hdgStart: Math.random() * 360, hdgDir: Math.random() > 0.5 ? 1 : -1, twdBase: Math.random() * 360, rotSpeed: 360 / 600 },
+    getPolars: function(twaDeg, twsKts) {
+        let eff = 0; const aT = Math.abs(twaDeg);
+        if (aT < 30) eff = 0.1; else if (aT < 45) eff = 0.75; else if (aT < 90) eff = 1.0; else if (aT < 150) eff = 0.85; else eff = 0.65;
+        return Math.min(Math.sqrt(twsKts) * 2.2 * eff, 11.0);
+    },
+    step: function() {
+        this.time++;
+        const hdgDeg = (this.config.hdgStart + (this.time * this.config.rotSpeed * this.config.hdgDir) + 360) % 360;
+        const twdDeg = (this.config.twdBase + Math.sin(this.time / 20) * 15 + 360) % 360;
+        const twsKts = 14 + Math.sin(this.time / 40) * 6;
+        const depthM = 20 + Math.sin(this.time / 25) * 18;
+        let twaDeg = (twdDeg - hdgDeg + 360) % 360; if (twaDeg > 180) twaDeg -= 360;
+        const stwKts = this.getPolars(twaDeg, twsKts);
+        const stwMs = ktsToMs(stwKts), twsMs = ktsToMs(twsKts), twaRad = degToRad(twaDeg);
+        const vAx = twsMs * Math.sin(twaRad), vAy = twsMs * Math.cos(twaRad) + stwMs;
+        const awsMs = Math.sqrt(vAx*vAx + vAy*vAy), awaRad = Math.atan2(vAx, vAy);
+
+        return {
+            "navigation.headingMagnetic": degToRad(hdgDeg),
+            "navigation.speedThroughWater": stwMs, "navigation.speedOverGround": stwMs * 1.05,
+            "environment.wind.speedTrue": twsMs, "environment.wind.directionTrue": degToRad(twdDeg),
+            "environment.wind.angleTrueWater": twaRad, "environment.wind.speedApparent": awsMs,
+            "environment.wind.angleApparent": awaRad, "environment.depth.belowTransducer": depthM
+        };
+    }
+};
+
+let dC = 0, lC = 0;
+ui.depth.closest('.data-box').addEventListener('click', () => {
+    const n = Date.now(); if (n - lC < 500) dC++; else dC = 1; lC = n;
+    if (dC === 3) {
+        simulationMode = !simulationMode;
+        if (simulationMode) {
+            if (socket) socket.close(); ui.status.innerText = "SIM ENGINE ATTIVO";
+            if(simInterval) clearInterval(simInterval);
+            simInterval = setInterval(() => { const simulatedData = physicsEngine.step(); for (let path in simulatedData) processIncomingData(path, simulatedData[path]); }, 200);
+        } else location.reload();
+        dC = 0;
+    }
+});
+
+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 manageHistory(t, v) {
+    const n = Date.now(), i = simulationMode ? SIM_SAMPLE_INTERVAL : REAL_SAMPLE_INTERVAL;
+    if (n - store.lastUpdates[t] > i || store.histories[t].length === 0) {
+        store.histories[t].push(v); if (store.histories[t].length > MAX_HISTORY_SAMPLES) store.histories[t].shift(); store.lastUpdates[t] = n;
+    }
+    const m = Math.max(...store.histories[t], 1); const c = getDynamicScale(t, m);
+    updateScaleLabels(t, c.scale); drawGraph(store.histories[t], t + '-graph', c.scale, c.gridLines);
+}
+
+function getDynamicScale(t, m) {
+    if (t === 'stw' || t === 'sog') return { scale: 12, gridLines: [3, 6, 9] };
+    const s = { tws: [10, 25, 45, 60], depth: [10, 20, 50, 200] };
+    const av = s[t] || [10, 20, 50]; let sel = av[av.length - 1];
+    for (let x of av) if (m <= x) { sel = x; break; }
+    return { scale: sel, gridLines: [sel/4, sel/2, (sel/4)*3] };
+}
+
+function updateScaleLabels(t, s) { const el = document.getElementById(t + '-scale'); if (el) el.innerHTML = `<span>${s}</span><span>${s/2}</span><span>0</span>`; }
+
+function drawGraph(d, id, s, gl) {
+    const svg = document.getElementById(id); if (!svg || d.length < 2) return;
+    const w = 200, h = 40; let gH = "";
+    gl.forEach(v => { const y = h - (v / s) * h; gH += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />`; });
+    let p = ""; d.forEach((v, i) => { const x = (i/(MAX_HISTORY_SAMPLES - 1))*w; const y = h - (Math.min(v, s)/s)*h; p += `${i===0?'M':'L'} ${x} ${y} `; });
+    const aP = p + ` L ${((d.length-1)/(MAX_HISTORY_SAMPLES - 1))*w} ${h} L 0 ${h} Z`;
+    const clrs = { 'stw-graph': { s: '#2ecc71', f: 'rgba(46, 204, 113, 0.15)' }, 'sog-graph': { s: '#f39c12', f: 'rgba(243, 156, 18, 0.15)' }, 'depth-graph': { s: '#3498db', f: 'rgba(52, 152, 219, 0.15)' }, 'tws-graph': { s: '#f1c40f', f: 'rgba(241, 196, 15, 0.15)' } };
+    svg.innerHTML = `${gH}<path d="${aP}" fill="${clrs[id].f}" stroke="none" /><path d="${p}" fill="none" stroke="${clrs[id].s}" stroke-width="1.5" />`;
+}
+
+function generateTicks() {
+    const c = document.getElementById('ticks');
+    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);
+    }
+}
+generateTicks(); startDisplayLoop(); connect();

package/index.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <link rel="manifest" href="manifest.json">
+    <title>Sailing Dashboard Pro - Final Details</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    
+    <!-- Etichetta di stato connessione SignalK -->
+    <div id="status" class="offline">OFFLINE</div>
+    
+    <div class="main-container">
+        
+        <!-- ======================================================= -->
+        <!-- COLONNA SINISTRA: Dati di navigazione e rotta           -->
+        <!-- ======================================================= -->
+        <div class="side-panel">
+            
+            <!-- STW con Grafico Dinamico (preserveAspectRatio="none" lo adatta in altezza) -->
+            <div class="data-box">
+                <div class="label-row"><span class="label">STW</span><span class="unit">kts</span></div>
+                <span class="value" id="stw">0.0</span>
+                <div class="graph-wrapper">
+                    <svg class="sparkline" id="stw-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
+                    <div class="scale-labels right" id="stw-scale"></div>
+                </div>
+            </div>
+            
+            <!-- SOG con Grafico Dinamico -->
+            <div class="data-box">
+                <div class="label-row"><span class="label">SOG</span><span class="unit">kts</span></div>
+                <span class="value" id="sog">0.0</span>
+                <div class="graph-wrapper">
+                    <svg class="sparkline" id="sog-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
+                    <div class="scale-labels right" id="sog-scale"></div>
+                </div>
+            </div>
+            
+            <!-- Dati Singoli (value-large gestisce font dinamico e allineamento in basso) -->
+            <div class="data-box">
+                <div class="label-row"><span class="label">HEADING MEAN</span></div>
+                <span class="value value-large" id="hdg">000&deg;</span>
+            </div>
+            
+            <div class="data-box">
+                <div class="label-row"><span class="label">COG MEAN</span></div>
+                <span class="value value-large" id="cog">000&deg;</span>
+            </div>
+            
+            <!-- TACK: Previsione Prua e COG sulle mure opposte (Layout a doppia colonna) -->
+            <div class="data-box">
+                <div class="label-row"><span class="label">TACK</span></div>
+                <div class="dual-value-container">
+                    <div class="dual-value-col">
+                        <span class="dual-label">HDG</span>
+                        <span class="value dual-val" id="tack-hdg">---&deg;</span>
+                    </div>
+                    <div class="dual-value-col right-col">
+                        <span class="dual-label">COG</span>
+                        <span class="value dual-val" id="tack-cog">---&deg;</span>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+
+        <!-- ======================================================= -->
+        <!-- CENTRO: Strumento principale del vento e scarroccio     -->
+        <!-- ======================================================= -->
+        <div class="center-panel">
+            <svg id="wind-gauge" viewBox="30 20 340 440" preserveAspectRatio="xMidYMid meet">
+                <defs>
+                    <linearGradient id="axiom-grad" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
+                        <stop offset="100%" style="stop-color:#888888;stop-opacity:1" />
+                    </linearGradient>
+                    <linearGradient id="leeway-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+                        <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" />
+                        <stop offset="25%" style="stop-color:#ff8800;stop-opacity:1" />
+                        <stop offset="50%" style="stop-color:#00ff00;stop-opacity:1" />
+                        <stop offset="75%" style="stop-color:#ff8800;stop-opacity:1" />
+                        <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" />
+                    </linearGradient>
+                    <clipPath id="leeway-clip">
+                        <rect id="leeway-mask-rect" x="125" y="0" width="0" height="12" rx="2" />
+                    </clipPath>
+                </defs>
+                
+                <!-- Sfondo Quadrante -->
+                <circle cx="200" cy="200" r="160" fill="#050505" />
+                <circle cx="200" cy="200" r="125" fill="#121212" />
+                
+                <!-- Settori Colorati: Rosso (sx), Verde (dx), Arancio (poppa) -->
+                <path d="M 82.0 101.0 A 154 154 0 0 1 142.3 57.2" fill="none" stroke="#ff0000" stroke-width="12" opacity="1"/>
+                <path d="M 257.7 57.2 A 154 154 0 0 1 318.0 101.0" fill="none" stroke="#00ff00" stroke-width="12" opacity="1"/>
+                <path d="M 265.1 339.6 A 154 154 0 0 1 134.9 339.6" fill="none" stroke="#ff8800" stroke-width="12" opacity="1"/>
+                
+                <!-- Tacche e Testi -->
+                <g id="ticks"></g>
+                <g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="hanging" font-family="Arial" font-weight="bold">
+                    <text font-size="16" transform="translate(200, 65)">0</text>
+                    <text font-size="16" transform="translate(335, 200) rotate(90)">90</text>
+                    <text font-size="16" transform="translate(65, 200) rotate(-90)">90</text>
+                    <text font-size="16" transform="translate(200, 335) rotate(180)">180</text>
+                    <text font-size="11" transform="translate(267.5, 83) rotate(30)">30</text>
+                    <text font-size="11" transform="translate(317, 132.5) rotate(60)">60</text>
+                    <text font-size="11" transform="translate(317, 267.5) rotate(120)">120</text>
+                    <text font-size="11" transform="translate(267.5, 317) rotate(150)">150</text>
+                    <text font-size="11" transform="translate(132.5, 83) rotate(-30)">30</text>
+                    <text font-size="11" transform="translate(83, 132.5) rotate(-60)">60</text>
+                    <text font-size="11" transform="translate(83, 267.5) rotate(-120)">120</text>
+                    <text font-size="11" transform="translate(132.5, 317) rotate(-150)">150</text>
+                </g>
+                
+                <!-- Puntatori Dinamici -->
+                <g id="track-pointer" transform="rotate(0, 200, 200)"><path d="M200,42 L194,58 L206,58 Z" fill="#007aff" stroke="#fff" stroke-width="0.5" /></g>
+                <path id="boat-icon" d="M200,150 Q165,185 170,250 Q165,190 200,173 Q235,190 230,250 Q235,185 200,150 Z" fill="url(#axiom-grad)" />
+                <g id="aws-display-group" transform="translate(200, 265)">
+                    <text x="0" y="0" fill="#777" font-size="10" font-weight="bold" text-anchor="middle" text-transform="uppercase">Apparent Wind kts</text>
+                    <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>
+                </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>
+                </g>
+                
+                <!-- Barra del Leeway (Scarroccio) -->
+                <g transform="translate(75, 410)">
+                    <text x="125" y="-12" id="leeway-val" fill="#aaa" font-size="11" text-anchor="middle" font-weight="bold">LEEWAY: 0.0&deg;</text>
+                    <rect x="0" y="0" width="250" height="12" fill="#222" rx="3" />
+                    <rect x="0" y="0" width="250" height="12" fill="url(#leeway-grad)" clip-path="url(#leeway-clip)" rx="3" />
+                    
+                    <g stroke="#555" stroke-width="1">
+                        <line x1="0" y1="-2" x2="0" y2="14" />
+                        <line x1="31.25" y1="2" x2="31.25" y2="10" />
+                        <line x1="62.5" y1="2" x2="62.5" y2="10" />
+                        <line x1="93.75" y1="3" x2="93.75" y2="9" />
+                        <line x1="125" y1="-2" x2="125" y2="14" />
+                        <line x1="156.25" y1="3" x2="156.25" y2="9" />
+                        <line x1="187.5" y1="2" x2="187.5" y2="10" />
+                        <line x1="218.75" y1="2" x2="218.75" y2="10" />
+                        <line x1="250" y1="-2" x2="250" y2="14" />
+                    </g>
+                    <g fill="#555" font-size="8" text-anchor="middle" font-weight="bold">
+                        <text x="0" y="24">-20&deg;</text><text x="62.5" y="24">-10</text><text x="125" y="24">0&deg;</text><text x="187.5" y="24">10</text><text x="250" y="24">20&deg;</text>
+                    </g>
+                </g>
+            </svg>
+        </div>
+
+        <!-- ======================================================= -->
+        <!-- COLONNA DESTRA: Profondità e Dati Vento                 -->
+        <!-- ======================================================= -->
+        <div class="side-panel right-panel">
+            
+            <!-- Profondità con Grafico Dinamico -->
+            <div class="data-box">
+                <div class="label-row"><span class="unit">m</span><span class="label">DEPTH</span></div>
+                <span class="value" id="depth">--.-</span>
+                <div class="graph-wrapper">
+                    <div class="scale-labels left" id="depth-scale"></div>
+                    <svg class="sparkline" id="depth-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
+                </div>
+            </div>
+            
+            <!-- TWS con Grafico Dinamico -->
+            <div class="data-box">
+                <div class="label-row"><span class="unit">kts</span><span class="label">TWS</span></div>
+                <span class="value" id="tws">0.0</span>
+                <div class="graph-wrapper">
+                    <div class="scale-labels left" id="tws-scale"></div>
+                    <svg class="sparkline" id="tws-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
+                </div>
+            </div>
+            
+            <!-- Dati Vento Singoli (Font dinamico) -->
+            <div class="data-box">
+                <div class="label-row"><span class="label">TWA MEAN</span></div>
+                <span class="value value-large" id="twa-avg">---&deg;</span>
+            </div>
+            
+            <div class="data-box">
+                <div class="label-row"><span class="label">AWA MEAN</span></div>
+                <span class="value value-large" id="awa-avg">---&deg;</span>
+            </div>
+            
+            <!-- TWD Mean con Mini Bussola integrata -->
+            <div class="data-box">
+                <div class="label-row"><span class="label">TWD MEAN</span></div>
+                <div class="value-with-compass">
+                    <svg class="mini-compass" viewBox="0 0 40 40">
+                        <circle cx="20" cy="20" r="18" fill="none" stroke="#333" stroke-width="2"/>
+                        <g stroke="#555" stroke-width="1">
+                            <line x1="20" y1="2" x2="20" y2="6"/>
+                            <line x1="38" y1="20" x2="34" y2="20"/>
+                            <line x1="20" y1="38" x2="20" y2="34"/>
+                            <line x1="2" y1="20" x2="6" y2="20"/>
+                        </g>
+                        <g id="twd-arrow" transform="rotate(0, 20, 20)">
+                            <path d="M20,5 L17,12 L23,12 Z" fill="#ffff00" />
+                            <line x1="20" y1="5" x2="20" y2="20" stroke="#ffff00" stroke-width="1" />
+                        </g>
+                    </svg>
+                    <span class="value value-large" id="twd-avg">---&deg;</span>
+                </div>
+            </div>
+            
+        </div>
+    </div>
+    
+    <script src="app.js"></script>
+</body>
+</html>

package/manifest.json

@@ -0,0 +1,17 @@
+{
+  "short_name": "WindDash",
+  "name": "Signal K Wind Dashboard",
+  "icons": [
+    {
+      "src": "https://cdn-icons-png.flaticon.com/512/959/959711.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "./index.html",
+  "background_color": "#000000",
+  "display": "standalone",
+  "scope": "./",
+  "theme_color": "#000000",
+  "orientation": "landscape"
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@sailingrotevista/rotevista-dash",
+  "version": "1.0.0",
+  "description": "Dashboard pubblica per Bavaria 39 Rotevista",
+  "main": "index.html",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "signalk-webapp"
+  ],
+  "author": "sailingrotevista",
+  "license": "MIT",
+  "signalk": {
+    "displayName": "Rotevista Dash"
+  }
+}

package/style.css

@@ -0,0 +1,269 @@
+/* ==========================================================================
+   1. BASE E STRUTTURA GENERALE
+   ========================================================================== */
+body {
+    background-color: #000;
+    color: #fff;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    overflow: hidden;
+}
+
+.main-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    align-items: stretch; /* Estende le colonne per tutta l'altezza */
+}
+
+/* ==========================================================================
+   2. PANNELLI LATERALI E DATA-BOX (Riquadri)
+   ========================================================================== */
+.side-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 10px;
+    z-index: 10;
+}
+
+.right-panel {
+    align-items: flex-end;
+    text-align: right;
+}
+
+.data-box {
+    position: relative; /* Necessario per posizionare gli elementi assoluti interni */
+    border-bottom: 1px solid #222;
+    padding: 8px 8px;
+    display: flex;
+    flex-direction: column;
+    min-height: 82px;
+    width: 100%;
+    box-sizing: border-box;
+    flex: 1; /* Distribuisce lo spazio equamente in altezza */
+}
+
+/* ==========================================================================
+   3. TIPOGRAFIA ED ETICHETTE
+   ========================================================================== */
+.label-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 2px;
+    width: 100%;
+}
+
+.label {
+    color: #666;
+    font-size: 0.6rem;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.unit {
+    color: #888;
+    font-size: 0.55rem;
+    font-weight: bold;
+}
+
+/* Valore Numerico Base (usato per i riquadri con grafici) */
+.value {
+    color: #fff;
+    font-size: 2.4rem;
+    font-weight: 600;
+    line-height: 0.9;
+    letter-spacing: -1px;
+    transition: color 0.3s ease;
+    padding-bottom: 5px;
+}
+
+/* Valore Numerico Dinamico (usato per i riquadri SENZA grafici) */
+.value-large {
+    margin-top: auto; /* Spinge il numero verso il basso */
+    /*
+       clamp(min, preferito, max)
+       Minimo: 2.4rem (come i grafici)
+       Preferito: 7.5vh (scala molto in base all'altezza schermo)
+       Massimo: 4.5rem (font molto grande ma sicuro per non sbordare)
+    */
+    font-size: clamp(2.4rem, 7.5vh, 4.5rem);
+    line-height: 0.85; /* Evita che il font grande sposti il layout */
+}
+
+/* Etichetta periodo media (es. per future implementazioni) */
+.period-label {
+    position: absolute;
+    bottom: 4px;
+    left: 8px;
+    font-size: 0.5rem;
+    color: #444;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+.right-panel .period-label { left: auto; right: 8px; }
+
+/* ==========================================================================
+   4. LAYOUT SPECIALI (TACK e TWD COMPASS)
+   ========================================================================== */
+/* Layout a doppia colonna per il riquadro TACK */
+.dual-value-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    width: 100%;
+    margin-top: auto;
+    padding-bottom: 5px;
+}
+
+.dual-value-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; /* Spinge l'etichetta su e il numero giù */
+    width: 48%; /* Lascia un piccolo margine al centro */
+    height: 100%; /* Prende tutta l'altezza disponibile nel contenitore */
+}
+
+.dual-value-col.right-col {
+    align-items: flex-end;
+    text-align: right;
+}
+
+.dual-label {
+    color: #666;
+    font-size: 0.55rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-bottom: auto; /* Mantiene l'etichetta schiacciata verso l'alto */
+}
+
+.value.dual-val {
+    font-size: 1.8rem; /* Font leggermente più piccolo per farne stare due */
+    padding-bottom: 0;
+}
+
+/* Layout Bussolina TWD */
+.value-with-compass {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-top: auto;
+}
+
+.mini-compass {
+    width: 38px;
+    height: 38px;
+    background: rgba(0,0,0,0.2);
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.value-with-compass .value-large {
+    margin-top: 0; /* Annulla il margin-top perché gestito dal padre flex */
+}
+
+/* ==========================================================================
+   5. GRAFICI STORICI (SPARKLINES)
+   ========================================================================== */
+.graph-wrapper {
+    position: relative;
+    width: 100%;
+    flex-grow: 1; /* Il contenitore si espande in altezza */
+    min-height: 20px;
+    margin-top: 4px;
+}
+
+.sparkline {
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 4px;
+}
+
+.scale-labels {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 8px;
+    color: #555;
+    padding: 1px 5px;
+    font-weight: bold;
+}
+.scale-labels.right { right: 0; text-align: right; }
+.scale-labels.left { left: 0; text-align: left; }
+
+/* Colori specifici delle linee dei grafici */
+#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.15); }
+#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.15); }
+#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.15); }
+#tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.15); }
+
+/* ==========================================================================
+   6. PANNELLO CENTRALE (STRUMENTO VENTO SVG)
+   ========================================================================== */
+.center-panel {
+    flex: 3.5;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+#wind-gauge {
+    width: 100%;
+    height: auto;
+    max-height: 95vh;
+    object-fit: contain;
+}
+
+/* ==========================================================================
+   7. STATI, ALLARMI E ANIMAZIONI
+   ========================================================================== */
+/* Stato Connessione */
+#status {
+    position: absolute;
+    top: 5px;
+    right: 15px;
+    font-size: 0.5rem;
+    text-transform: uppercase;
+    z-index: 1000;
+}
+.online { color: #2ecc71; opacity: 0.5; }
+.offline { color: #e74c3c; font-weight: bold; }
+
+/* Animazione fluidità lancette SVG */
+#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow {
+    transition: all 0.6s cubic-bezier(0.1, 0.7, 0.1, 1);
+}
+#leeway-mask-rect { transition: none; } /* Deve essere istantaneo */
+
+/* Allarmi Profondità */
+.alarm-warning { color: #f1c40f !important; }
+.alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
+
+/* Lampeggio dati instabili / Ricalcolo buffer */
+@keyframes blink-unstable {
+    0% { opacity: 1; }
+    50% { opacity: 0.3; }
+    100% { opacity: 1; }
+}
+.unstable-data {
+    animation: blink-unstable 1.5s infinite ease-in-out;
+    color: #f39c12 !important; /* Arancione per evidenziare il ricalcolo */
+}