@sailingrotevista/rotevista-dash 6.2.8 → 7.0.2

package/charts.js

@@ -0,0 +1,275 @@
+
+/**
+ * ==========================================================================
+ * Sailing Dashboard Pro - Sparkline Graphics Engine
+ * ==========================================================================
+ * Gestisce l'adattamento delle scale dei grafici, l'arrotondamento dei limiti
+ * (Snap a griglia) e la generazione dinamica delle curve SVG.
+ * file charts.js
+ */
+
+// --- 1. MOTORE DI CALCOLO DELLE SCALE (Snap a griglia & Protezione Profondità) ---
+function calculateScale(type, data, mode) {
+    const s = CONFIG.scales[type];
+    const currentVal = data[data.length - 1];
+    
+    if (currentVal === undefined || currentVal === null) {
+        return { min: 0, max: s ? s.stdMax : 10 };
+    }
+
+    if (!store.herculesScales) store.herculesScales = {};
+    if (!store.herculesScales[type]) {
+        store.herculesScales[type] = { min: 0, max: s ? s.stdMax : 10 };
+    }
+    let currentScale = store.herculesScales[type];
+
+    // --- SEZIONE PROFONDITÀ ---
+    if (type === 'depth') {
+        const shallowThreshold = Math.max(s.stdMax, 10);
+        if (store.depthProtectedActive === undefined) store.depthProtectedActive = false;
+
+        const now = Date.now();
+        const depthSafetyWindowMs = 120000; // 2 minuti
+        
+        const recentPoints = store.histories.depth.filter(p => (now - p.time) <= depthSafetyWindowMs);
+        const recentVals = recentPoints.map(p => p.val);
+
+        const localMax = recentVals.length > 0 ? Math.max(...recentVals) : currentVal;
+        const localMin = recentVals.length > 0 ? Math.min(...recentVals) : currentVal;
+
+        if (mode !== 'hercules') {
+            if (!store.depthProtectedActive && currentVal <= shallowThreshold) {
+                store.depthProtectedActive = true;
+            }
+            if (store.depthProtectedActive) {
+                if (localMin > shallowThreshold) {
+                    store.depthProtectedActive = false;
+                }
+            }
+            if (store.depthProtectedActive) {
+                return { min: 0, max: shallowThreshold };
+            }
+            const maxHistorico = Math.max(...data);
+            return { min: 0, max: Math.max(s.stdMax, Math.ceil(maxHistorico / s.step) * s.step) };
+        }
+
+        if (mode === 'hercules') {
+            const roundStep = s.hercSpan;
+            let targetMin = 0;
+            if (localMin > shallowThreshold) {
+                targetMin = Math.max(0, Math.floor(localMin / roundStep) * roundStep);
+            }
+            let targetMax = Math.ceil(localMax / roundStep) * roundStep;
+
+            if (targetMax - targetMin < 4) {
+                targetMax = targetMin + 4;
+            }
+
+            if (currentVal < currentScale.min || currentVal > currentScale.max) {
+                currentScale.min = Math.min(currentScale.min, targetMin);
+                currentScale.max = Math.max(currentScale.max, targetMax);
+            } else {
+                const allStableInTarget = recentVals.every(val => val >= targetMin && val <= targetMax);
+                if (allStableInTarget) {
+                    currentScale.min = targetMin;
+                    currentScale.max = targetMax;
+                }
+            }
+            return { min: currentScale.min, max: currentScale.max };
+        }
+    }
+
+    // --- ALTRI GRAFICI (STW, SOG, TWS) ---
+    if (mode !== 'hercules') {
+        const maxHistorico = Math.max(...data);
+        return { min: 0, max: Math.max(s.stdMax, Math.ceil(maxHistorico / s.step) * s.step) };
+    }
+
+    if (mode === 'hercules') {
+        const roundStep = s.hercSpan;
+        const oneThirdCount = Math.max(1, Math.floor(data.length / 3));
+        const recentThirdData = data.slice(-oneThirdCount);
+
+        const localMin = Math.min(...recentThirdData);
+        const localMax = Math.max(...recentThirdData);
+
+        let targetMin = Math.max(0, Math.floor(localMin / roundStep) * roundStep);
+        let targetMax = Math.ceil(localMax / roundStep) * roundStep;
+
+        if (targetMax - targetMin === 0) {
+            targetMax = targetMin + roundStep;
+        }
+
+        if (currentVal < currentScale.min || currentVal > currentScale.max) {
+            currentScale.min = Math.min(currentScale.min, targetMin);
+            currentScale.max = Math.max(currentScale.max, targetMax);
+        } else {
+            const allStableInTarget = recentThirdData.every(val => val >= targetMin && val <= targetMax);
+            if (allStableInTarget) {
+                currentScale.min = targetMin;
+                currentScale.max = targetMax;
+            }
+        }
+        return { min: currentScale.min, max: currentScale.max };
+    }
+}
+
+// Scrive le etichette delle scale numeriche nei box
+function updateScaleLabels(t, min, max) {
+    const el = document.getElementById(t + '-scale');
+    if (el) el.innerHTML = `<span>${Math.round(max)}</span><span>${Math.round((min+max)/2)}</span><span>${Math.round(min)}</span>`;
+}
+
+// Intercetta e instrada il rinfresco dei grafici
+function refreshGraph(t) {
+    if (t === 'aws') {
+        if (displayModeTws !== 'AWS') return;
+        t = 'tws';
+    }
+    if (t === 'vmg') {
+        if (displayModeSog !== 'VMG') return;
+        t = 'sog';
+    }
+
+    const boxType = t;
+    let rawData;
+
+    if (t === 'tws' && displayModeTws === 'AWS') {
+        rawData = store.histories['aws'];
+    } else {
+        rawData = store.histories[t];
+    }
+
+    if (!rawData || rawData.length < 2) return;
+
+    const values = rawData.map(p => p.val);
+    const mode = graphModes[boxType];
+    const cfg = calculateScale(boxType, values, mode);
+
+    const box = document.querySelector(`.box-${boxType}`);
+    if (box) box.classList.toggle('box-hercules', mode === 'hercules');
+
+    updateScaleLabels(boxType, cfg.min, cfg.max);
+    drawGraph(rawData, boxType + '-graph', cfg.min, cfg.max, t === 'tws', mode === 'hercules');
+}
+
+// Genera fisicamente le curve e le aree SVG
+function drawGraph(d, id, min, max, isTws, isHercules) {
+    const svg = document.getElementById(id);
+    if (!svg || d.length < 2) return;
+
+    const w = 200, h = 40;
+    const range = max - min || 1;
+    const isDepth = (id === 'depth-graph');
+    
+    const latestPoint = d[d.length - 1];
+    const now = latestPoint ? latestPoint.time : Date.now();
+
+    const box = svg.closest('.data-box');
+    const isFocused = isFocusActive && box && box.classList.contains('is-focused');
+
+    const visibleMinutes = CONFIG.graphs.historyMinutes * (isNavigating ? 1 : 2);
+    const viewportMs = visibleMinutes * 60000;
+    const viewportStart = now - viewportMs;
+
+    const visibleData = d.filter(p => p.time >= viewportStart);
+    if (visibleData.length < 2) return;
+
+    const colDanger  = "#ff3b30", colWarning = "#ff9800", colTws = "#2c3e50", colAws = "#5c6bc0";
+    const colDepth   = "#0088cc", colStw = "#00C851", colSog = "#ffbb33", colVmg = "#00b8d4";
+
+    const getColorProps = (val) => {
+        const baseStroke = isFocused ? "4.2" : "1.6";
+        const alertStroke = isFocused ? "4.8" : "2.2";
+        const warnStroke = isFocused ? "4.4" : "1.8";
+
+        let color = colTws, opacity = "0.15", stroke = baseStroke;
+        if (isTws) {
+            const baseWind = (displayModeTws === 'AWS') ? colAws : colTws;
+            if (val >= CONFIG.graphs.reef2) { color = colDanger; opacity = "0.55"; stroke = alertStroke; }
+            else if (val >= CONFIG.graphs.reef1) { color = colWarning; opacity = "0.45"; stroke = warnStroke; }
+            else color = baseWind;
+        } else if (isDepth) {
+            if (val < CONFIG.alarms.depthDanger) { color = colDanger; opacity = "0.55"; stroke = alertStroke; }
+            else if (val < CONFIG.alarms.depthWarning) { color = colWarning; opacity = "0.45"; stroke = warnStroke; }
+            else color = colDepth;
+        } else {
+            if (id === 'stw-graph') color = colStw;
+            else if (id === 'sog-graph') color = (displayModeSog === 'VMG') ? colVmg : colSog;
+        }
+        return { color, opacity, stroke };
+    };
+
+    let grids = "";
+    [0.25, 0.5, 0.75].forEach(p => grids += `<line x1="0" y1="${h-(p*h)}" x2="${w}" y2="${h-(p*h)}" stroke="rgba(0,0,0,0.12)" stroke-width="0.5" vector-effect="non-scaling-stroke" />`);
+
+    const gridInterval = (visibleMinutes <= 15) ? 1 : 5;
+    for (let m = gridInterval; m < visibleMinutes; m += gridInterval) {
+        const x = w - ((m / visibleMinutes) * w);
+        grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(0,0,0,0.08)" stroke-width="0.4" vector-effect="non-scaling-stroke" />`;
+    }
+    
+    if (isDepth) {
+        const dangerVal = CONFIG.alarms.depthDanger;
+        const warningVal = CONFIG.alarms.depthWarning;
+        const marginX = 4;
+        const alarmStrokeWidth = isFocused ? "4.8" : "1.8";
+
+        if (dangerVal >= min && dangerVal <= max) {
+            const p = (dangerVal - min) / range;
+            const y = h - (p * h);
+            grids += `<line x1="${marginX}" y1="${y}" x2="${w - marginX}" y2="${y}" stroke="rgba(255, 59, 48, 0.95)" stroke-width="${alarmStrokeWidth}" stroke-dasharray="12, 6, 2, 6" vector-effect="non-scaling-stroke" />`;
+        }
+        if (warningVal >= min && warningVal <= max) {
+            const p = (warningVal - min) / range;
+            const y = h - (p * h);
+            grids += `<line x1="${marginX}" y1="${y}" x2="${w - marginX}" y2="${y}" stroke="rgba(255, 204, 0, 0.95)" stroke-width="${alarmStrokeWidth}" stroke-dasharray="6 , 2, 6, 12" vector-effect="non-scaling-stroke" />`;
+        }
+    }
+
+    let gradientStops = "", lines = "", areaPath = "";
+    let started = false;
+
+    for (let i = 1; i < visibleData.length; i++) {
+        const pA = visibleData[i - 1];
+        const pB = visibleData[i];
+
+        const x1 = ((pA.time - viewportStart) / viewportMs) * w;
+        const x2 = ((pB.time - viewportStart) / viewportMs) * w;
+        const y1 = h - (Math.max(0, Math.min(1, (pA.val - min) / range)) * h);
+        const y2 = h - (Math.max(0, Math.min(1, (pB.val - min) / range)) * h);
+
+        const props = getColorProps(pB.val);
+        const deltaTime = pB.time - pA.time;
+        const expectedInterval = viewportMs / CONFIG.graphs.samples;
+        const isGap = deltaTime > (expectedInterval * 2.5);
+
+        const offset1 = (x1 / w) * 100, offset2 = (x2 / w) * 100;
+        gradientStops += `<stop offset="${offset1}%" stop-color="${props.color}" stop-opacity="${props.opacity}" />`;
+        gradientStops += `<stop offset="${offset2}%" stop-color="${props.color}" stop-opacity="${props.opacity}" />`;
+
+        if (isGap) {
+            if (started) {
+                areaPath += `L ${x1} ${h} `;
+                started = false;
+            }
+        } else {
+            lines += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" style="stroke:${props.color}; stroke-width:${props.stroke}; stroke-linecap:round; shape-rendering:geometricPrecision;" vector-effect="non-scaling-stroke" />`;
+            if (!started) {
+                areaPath += `M ${Math.max(0, x1)} ${h} L ${Math.max(0, x1)} ${y1} `;
+                started = true;
+            }
+            areaPath += `L ${x2} ${y2} `;
+        }
+    }
+
+    if (started) {
+        const last = visibleData[visibleData.length - 1];
+        const lastX = ((last.time - viewportStart) / viewportMs) * w;
+        areaPath += `L ${lastX} ${h} Z`;
+    }
+
+    const gradId = `grad-${id}`;
+    const defs = `<defs><linearGradient id="${gradId}" x1="0" y1="0" x2="${w}" y2="0" gradientUnits="userSpaceOnUse">${gradientStops}</linearGradient></defs>`;
+    svg.innerHTML = `${defs}${grids}<path d="${areaPath}" fill="url(#${gradId})" stroke="none" />${lines}`;
+}

package/gauge.js

@@ -0,0 +1,82 @@
+/**
+ * ==========================================================================
+ * Sailing Dashboard Pro - Central Compass & Wind Gauge Engine
+ * ==========================================================================
+ * Gestisce l'aggiornamento grafico dei puntatori analogici (AWA, TWA),
+ * dello scarroccio (Leeway), della rotta (Track) e dei trend della bussola.
+ * file gauge,js
+ */
+
+// 1. VARIABILI DI STATO DELLE ROTAZIONI (Estratte da app.js)
+let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
+let curBoatCompassRot = 0, curWindCompassRot = 0;
+let smoothedLeeway = 0;
+
+/**
+ * Aggiorna la visualizzazione grafica dello scarroccio (Leeway Slider)
+ */
+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)}°`;
+}
+
+/**
+ * Genera dinamicamente i ticks sul quadrante della bussola centrale (ex genTicks)
+ */
+function initCompassTicks() {
+    const c = document.getElementById('ticks');
+    if (c) {
+        c.innerHTML = ""; // Pulisce i tick esistenti prima del disegno
+        for (let i = 0; i < 360; i += 10) {
+            const l = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            const m = i % 30 === 0;
+            l.setAttribute("x1", "200"); l.setAttribute("y1", "40"); l.setAttribute("x2", "200"); l.setAttribute("y2", (m ? 60 : 50));
+            l.setAttribute("stroke", m ? "#000" : "#bbb"); l.setAttribute("stroke-width", m ? "2" : "1");
+            l.setAttribute("transform", `rotate(${i}, 200, 200)`); c.appendChild(l);
+        }
+    }
+}
+
+/**
+ * Aggiorna tutti gli elementi analogici della Bussola Centrale e del Mini Compass
+ */
+function updateCentralGauge(store, ui, now, isNavigating, sogKts, stwKts, rawAws, awsVal) {
+    
+    // A. Visualizzazione Testuale dell'Apparent Wind (AWS) al centro della bussola
+    if (rawAws !== undefined && rawAws !== null && !isNaN(awsVal)) {
+        const strVal = awsVal.toFixed(1);
+        let awsSvgEl = document.getElementById('aws-val-svg');
+        if (awsSvgEl) {
+            if (awsSvgEl.textContent !== strVal) {
+                awsSvgEl.textContent = strVal;
+            }
+        }
+    }
+
+    // B. Rotazione dei puntatori analogici di AWA (Apparent) e TWA (True)
+    const smAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, 2000, true);
+    const smTwa = getCircularAverageFromBuffer(store.smoothBuf.twa, 2000, true);
+    if (smAwa) ui.awa.setAttribute('transform', `rotate(${curAwaRot = getShortestRotation(curAwaRot, radToDeg(smAwa.val))}, 200, 200)`);
+    if (smTwa) ui.twa.setAttribute('transform', `rotate(${curTwaRot = getShortestRotation(curTwaRot, radToDeg(smTwa.val))}, 200, 200)`);
+    
+    // C. Calcolo dello Scarroccio (Leeway) e orientamento del vettore Track
+    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) % (2 * Math.PI) - Math.PI);
+        smoothedLeeway = (sogKts < CONFIG.averaging.minSpeed) ? 0 : (smoothedLeeway * 0.9) + (driftDeg * 0.1);
+        curTrackRot = getShortestRotation(curTrackRot, smoothedLeeway);
+        ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
+        ui.leewayVal.style.color = (Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7) ? "#ff9800" : "";
+        updateLeewayDisplay(Math.max(-20, Math.min(20, smoothedLeeway)));
+    }
+
+    // D. Orientamento delle icone della barca e del vento nel Mini-Compass (TWD)
+    const smHdgIcons = getCircularAverageFromBuffer(store.smoothBuf.hdg, 2000, false);
+    const smTwdIcons = getCircularAverageFromBuffer(store.smoothBuf.twd, 2000, false);
+    if (smHdgIcons && smTwdIcons) {
+        curWindCompassRot = getShortestRotation(curWindCompassRot, radToDeg(smTwdIcons.val));
+        ui.twdArrow.setAttribute('transform', `rotate(${curWindCompassRot}, 20, 20)`);
+        curBoatCompassRot = getShortestRotation(curBoatCompassRot, radToDeg(smHdgIcons.val));
+        ui.twdBoat.setAttribute('transform', `rotate(${curBoatCompassRot}, 20, 20)`);
+    }
+}

package/index.html

@@ -63,104 +63,144 @@
         </div>
 
         <!-- BUSSOLA CENTRALE -->
-        <div class="box-gauge">
-            <!-- STATO CONNESSIONE -->
-            <div id="status" class="offline">OFFLINE</div>
-            <svg id="wind-gauge" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet">
-                <defs>
-                    <clipPath id="boat-clip"><circle cx="200" cy="200" r="50" /></clipPath>
-                    <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>
-                    <linearGradient id="leeway-night-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-                        <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" />
-                        <stop offset="50%" style="stop-color:#330000;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>
-                    <filter id="center-glow" x="-20%" y="-20%" width="140%" height="140%">
-                        <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#aaaaaa" flood-opacity="0.5" />
-                    </filter>
-                </defs>
-                
-                <circle cx="200" cy="200" r="160" fill="#050505" />
-                <circle cx="200" cy="200" r="125" fill="#121212" />
-                
-                <path d="M 82.0 101.0 A 154 154 0 0 1 142.3 57.2" fill="none" stroke="#ff0000" stroke-width="12" />
-                <path d="M 257.7 57.2 A 154 154 0 0 1 318.0 101.0" fill="none" stroke="#00ff00" stroke-width="12" />
-                <path d="M 265.1 339.6 A 154 154 0 0 1 134.9 339.6" fill="none" stroke="#ff8800" stroke-width="12" />
-                
-                <g id="ticks"></g>
-                
-                <g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-weight="bold">
-                    <text font-size="16" transform="translate(200, 74)">0</text>
-                    <text font-size="16" transform="translate(326, 200) rotate(90)">90</text>
-                    <text font-size="16" transform="translate(74, 200) rotate(-90)">90</text>
-                    <text font-size="16" transform="translate(200, 326) rotate(180)">180</text>
-                    <text font-size="11" transform="translate(262.5, 91.7) rotate(30)">30</text>
-                    <text font-size="11" transform="translate(308.3, 137.5) rotate(60)">60</text>
-                    <text font-size="11" transform="translate(308.3, 262.5) rotate(120)">120</text>
-                    <text font-size="11" transform="translate(262.5, 308.3) rotate(150)">150</text>
-                    <text font-size="11" transform="translate(137.5, 91.7) rotate(-30)">30</text>
-                    <text font-size="11" transform="translate(91.7, 137.5) rotate(-60)">60</text>
-                    <text font-size="11" transform="translate(91.7, 262.5) rotate(-120)">120</text>
-                    <text font-size="11" transform="translate(137.5, 308.3) rotate(-150)">150</text>
-                </g>
-                
-                <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>
-                
-                <circle id="fullscreen-hotspot" cx="200" cy="200" r="55" fill="#181818" stroke="#333" stroke-width="1" filter="url(#center-glow)" cursor="pointer" />
-                
-                <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)" transform="translate(0, 5)" clip-path="url(#boat-clip)" style="pointer-events: none;" />
-                
-                <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.9">
-                    <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.9">
-                    <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>
-                    <circle id="trend-gauge-cw"  cx="215" cy="110" r="4" fill="#bbb" />
-                    <circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#bbb" />
-                </g>
-                
-                <g transform="translate(75, 395)">
-                    <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="62.5" y1="2" x2="62.5" y2="10" />
-                        <line x1="125" y1="-2" x2="125" y2="14" /><line x1="187.5" y1="2" x2="187.5" 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>
+                <div class="box-gauge">
+                    <!-- STATO CONNESSIONE -->
+                    <div id="status" class="offline">OFFLINE</div>
+                    
+                    <!-- BUSSOLA 1: ANALOGICA STANDARD (Visibile all'avvio) -->
+                    <svg id="wind-gauge" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet">
+                        <defs>
+                            <clipPath id="boat-clip"><circle cx="200" cy="200" r="50" /></clipPath>
+                            <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>
+                            <linearGradient id="leeway-night-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+                                <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" />
+                                <stop offset="50%" style="stop-color:#330000;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>
+                            <filter id="center-glow" x="-20%" y="-20%" width="140%" height="140%">
+                                <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#aaaaaa" flood-opacity="0.5" />
+                            </filter>
+                        </defs>
+                        
+                        <circle cx="200" cy="200" r="160" fill="#050505" />
+                        <circle cx="200" cy="200" r="125" fill="#121212" />
+                        
+                        <path d="M 82.0 101.0 A 154 154 0 0 1 142.3 57.2" fill="none" stroke="#ff0000" stroke-width="12" />
+                        <path d="M 257.7 57.2 A 154 154 0 0 1 318.0 101.0" fill="none" stroke="#00ff00" stroke-width="12" />
+                        <path d="M 265.1 339.6 A 154 154 0 0 1 134.9 339.6" fill="none" stroke="#ff8800" stroke-width="12" />
+                        
+                        <g id="ticks"></g>
+                        
+                        <g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-weight="bold">
+                            <text font-size="16" transform="translate(200, 74)">0</text>
+                            <text font-size="16" transform="translate(326, 200) rotate(90)">90</text>
+                            <text font-size="16" transform="translate(74, 200) rotate(-90)">90</text>
+                            <text font-size="16" transform="translate(200, 326) rotate(180)">180</text>
+                            <text font-size="11" transform="translate(262.5, 91.7) rotate(30)">30</text>
+                            <text font-size="11" transform="translate(308.3, 137.5) rotate(60)">60</text>
+                            <text font-size="11" transform="translate(308.3, 262.5) rotate(120)">120</text>
+                            <text font-size="11" transform="translate(262.5, 308.3) rotate(150)">150</text>
+                            <text font-size="11" transform="translate(137.5, 91.7) rotate(-30)">30</text>
+                            <text font-size="11" transform="translate(91.7, 137.5) rotate(-60)">60</text>
+                            <text font-size="11" transform="translate(91.7, 262.5) rotate(-120)">120</text>
+                            <text font-size="11" transform="translate(137.5, 308.3) rotate(-150)">150</text>
+                        </g>
+                        
+                        <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>
+                        
+                        <circle id="fullscreen-hotspot" cx="200" cy="200" r="55" fill="#181818" stroke="#333" stroke-width="1" filter="url(#center-glow)" cursor="pointer" />
+                        
+                        <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)" transform="translate(0, 5)" clip-path="url(#boat-clip)" style="pointer-events: none;" />
+                        
+                        <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.9">
+                            <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.9">
+                            <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>
+                            <circle id="trend-gauge-cw"  cx="215" cy="110" r="4" fill="#bbb" />
+                            <circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#bbb" />
+                        </g>
+                        
+                        <g transform="translate(75, 395)">
+                            <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="62.5" y1="2" x2="62.5" y2="10" />
+                                <line x1="125" y1="-2" x2="125" y2="14" /><line x1="187.5" y1="2" x2="187.5" 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>
+
+                    <!-- BUSSOLA 2: RADAR HISTORICAL (Nascosto all'avvio) -->
+                    <svg id="wind-radar" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet" style="display: none;">
+                        <defs id="radar-gradients">
+                            <clipPath id="radar-boat-clip"><circle cx="200" cy="200" r="50" /></clipPath>
+                            <filter id="radar-center-glow" x="-20%" y="-20%" width="140%" height="140%">
+                                <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#aaaaaa" flood-opacity="0.5" />
+                            </filter>
+                        </defs>
+                        
+                        <circle cx="200" cy="200" r="160" fill="rgb(252, 252, 252)" />
+                        <circle cx="200" cy="200" r="125" fill="rgb(240, 240, 240)" />
+                        
+                        <g id="radar-ticks"></g>
+                        
+                        <g id="radar-tick-labels" fill="#000000" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-weight="bold">
+                            <text font-size="16" transform="translate(200, 74)">N</text>
+                            <text font-size="16" transform="translate(326, 200) rotate(90)">E</text>
+                            <text font-size="16" transform="translate(74, 200) rotate(-90)">W</text>
+                            <text font-size="16" transform="translate(200, 326) rotate(180)">S</text>
+                            
+                            <text font-size="11" transform="translate(262.5, 91.7) rotate(30)">30</text>
+                            <text font-size="11" transform="translate(308.3, 137.5) rotate(60)">60</text>
+                            <text font-size="11" transform="translate(308.3, 262.5) rotate(120)">120</text>
+                            <text font-size="11" transform="translate(262.5, 308.3) rotate(150)">150</text>
+                            <text font-size="11" transform="translate(137.5, 91.7) rotate(-30)">330</text>
+                            <text font-size="11" transform="translate(91.7, 137.5) rotate(-60)">300</text>
+                            <text font-size="11" transform="translate(91.7, 262.5) rotate(-120)">240</text>
+                            <text font-size="11" transform="translate(137.5, 308.3) rotate(-150)">210</text>
+                        </g>
+
+                        <circle id="ora-orbit" cx="200" cy="200" r="67.2" fill="none" stroke="#cfd8dc" stroke-width="1.2" stroke-dasharray="4, 4" />
+                        <g id="radar-rings"></g>
+
+                        <circle id="radar-hotspot" cx="200" cy="200" r="55" fill="rgb(238, 238, 238)" stroke="#e0e0e0" stroke-width="1" filter="url(#radar-center-glow)" cursor="pointer" />
+                        <path id="radar-boat-icon" d="M200,150 Q165,185 170,250 Q165,190 200,173 Q235,190 230,250 Q235,185 200,150 Z"
+                              fill="#000000" transform="translate(0, 5)" clip-path="url(#radar-boat-clip)" style="pointer-events: none;" />
+                    </svg>
+                </div>
 
         <!-- COLONNA DESTRA -->
         <!-- NOTA: Etichetta a SX e Unità a DX nel codice, il CSS usa row-reverse per specchiarli sul bordo -->
@@ -215,7 +255,10 @@
             </div>
         </div>
     </div>
-    
+    <script src="utils.js"></script>
+    <script src="charts.js"></script>
+    <script src="gauge.js"></script>
+    <script src="weather-radar.js"></script>
     <script src="app.js?v=6.0"></script>
 </body>
 </html>