@sailingrotevista/rotevista-dash 7.0.1 → 7.0.2

package/app.js

@@ -7,6 +7,7 @@
  * Gestisce: Medie Vettoriali, Deviazione Standard, Trend Strategico dinamico,
  * Memoria UI persistente, Modalità Hercules, Focus Split Screen e
  * Rendering Grafico basato sul Tempo Reale (Timeline e Gap Handling).
+ *file app.js
  */
 
 // ==========================================================================
@@ -43,6 +44,7 @@ const DASH_VERSION = "6.0"; // Major Update: Server-Side History RAM Logging (Pr
 let simulationMode = false;
 let displayModeSog = 'SOG';
 let displayModeTws = 'TWS';
+let activeInstrument = 'gauge'; // Modalità di default all'avvio: 'gauge' (analogico) o 'radar' (storico)
 let socket, renderInterval, simInterval;
 let lastAvgUIUpdate = 0; // Chirurgico: Rimosse audioCtx e lastAlarmTime poiché sono già dichiarate in utils.js
 
@@ -663,13 +665,15 @@ function startDisplayLoop() {
                     }
                 }
 
-                // --- AGGIORNAMENTO DELLA BUSSOLA CENTRALE E MINI-COMPASS ---
-                updateCentralGauge(store, ui, now, isNavigating, sogKts, stwKts, rawAws, awsVal);
-                
-                // --- SLOW TIER (Salvataggio stato ogni 10 secondi) ---
-                if (lastAvgUIUpdate++ % 10 === 0) {
-                    saveDashboardState();
-                }
+        // --- AGGIORNAMENTO DELLA BUSSOLA CENTRALE (BATTERY SAVER A 1Hz) ---
+                        if (activeInstrument === 'gauge') {
+                            updateCentralGauge(store, ui, now, isNavigating, sogKts, stwKts, rawAws, awsVal);
+                        }
+                        
+                        // --- SLOW TIER (Salvataggio stato ogni 10 secondi) ---
+                        if (lastAvgUIUpdate++ % 10 === 0) {
+                            saveDashboardState();
+                        }
 
                 if (lastAvgUIUpdate % 3 === 0) {
                     let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, CONFIG.averaging.longWindow * 2, false);
@@ -801,7 +805,7 @@ async function watchConfigChanges() {
 }
 
 /**
- * Recupera lo storico dei grafici pre-popolato dal server Signal K (Pro v6.0)
+ * Recupera lo storico dei grafici e dei radar pre-popolato dal server Signal K (Pro v6.0)
  */
 async function fetchServerHistory() {
     try {
@@ -815,6 +819,12 @@ async function fetchServerHistory() {
                     store.histories[key] = data[key];
                 }
             }
+            // Sincronizza i dati specifici del radar storici, previsionali e i buffer minuto per minuto
+            if (data.windRadarSlots) store.windRadarSlots = data.windRadarSlots;
+            if (data.futureForecast) store.futureForecast = data.futureForecast;
+            if (data.twd) store.twdMinuteBuffer = data.twd;
+            if (data.tws) store.twsMinuteBuffer = data.tws;
+            
             // --- SILLABAZIONE STRATEGICA DELLA BUSSOLA METEO (TWD) ---
             // Se il server ci invia lo storico del TWD, lo inseriamo calcolando i seni e coseni per i vettori
             if (data.twd && data.twd.length > 0) {
@@ -825,7 +835,7 @@ async function fetchServerHistory() {
                     cos: Math.cos(p.val)
                 }));
                 console.log(`📈 Memoria strategica TWD sincronizzata dal server (${data.twd.length} punti).`);
-                }
+            }
             console.log("📈 Storico dei grafici pre-popolato caricato dal server.");
         }
     } catch (err) {
@@ -1100,29 +1110,101 @@ window.addEventListener('contextmenu', e => e.preventDefault(), true);
 
 async function init() {
     loadDashboardState();
-    initCompassTicks(); // Genera i ticks sul quadrante usando il modulo gauge.js
     
+    // Disegna la grafica statica delle tacche di calibrazione di entrambi gli strumenti
+    initCompassTicks(); // Tacche del Wind Gauge analogico (gauge.js)
+    initRadarTicks();   // Tacche del Wind Radar storico (weather-radar.js)
+    
+    // 1. COMANDO TATTICO: Gestore Box TWD (Pressione prolungata -> Radar | Tocco rapido in modalità Radar -> Torna a Gauge)
+        const twdBox = document.querySelector('.box-twd');
+        if (twdBox) {
+            let twdPressTimer = null;
+            let longPressTriggered = false; // Flag di controllo della pressione prolungata
+            
+            twdBox.addEventListener('pointerdown', (e) => {
+                longPressTriggered = false;
+                if (activeInstrument === 'gauge') {
+                    twdPressTimer = setTimeout(() => {
+                        activeInstrument = 'radar';
+                        document.getElementById('wind-gauge').style.display = 'none';
+                        document.getElementById('wind-radar').style.display = 'block';
+                        renderRadar(); // Disegna immediatamente il radar all'attivazione
+                        twdPressTimer = null;
+                        longPressTriggered = true; // Segnala che la transizione al radar è avvenuta con successo
+                    }, 1000);
+                }
+            });
+            twdBox.addEventListener('pointerup', () => {
+                if (activeInstrument === 'gauge') {
+                    if (twdPressTimer) {
+                        clearTimeout(twdPressTimer);
+                        twdPressTimer = null;
+                    }
+                } else if (activeInstrument === 'radar') {
+                    if (longPressTriggered) {
+                        // Se l'evento di rilascio appartiene al tocco prolungato che ha appena attivato il radar, lo ignoriamo
+                        longPressTriggered = false;
+                    } else {
+                        // Altrimenti è un tocco rapido indipendente: torna alla bussola analogica
+                        activeInstrument = 'gauge';
+                        document.getElementById('wind-radar').style.display = 'none';
+                        document.getElementById('wind-gauge').style.display = 'block';
+                    }
+                }
+            });
+            twdBox.addEventListener('pointerleave', () => {
+                if (twdPressTimer) {
+                    clearTimeout(twdPressTimer);
+                    twdPressTimer = null;
+                }
+                longPressTriggered = false;
+            });
+        }
+
+    // 2. COMANDO TATTICO: Click in qualsiasi punto del radar per tornare all'analogico
+    const windRadarSvg = document.getElementById('wind-radar');
+    if (windRadarSvg) {
+        windRadarSvg.addEventListener('pointerup', () => {
+            if (activeInstrument === 'radar') {
+                activeInstrument = 'gauge';
+                windRadarSvg.style.display = 'none';
+                document.getElementById('wind-gauge').style.display = 'block';
+            }
+        });
+    }
+
     // Rileviamo se siamo sul Mac tramite file:// (Ambiente di sviluppo locale)
     const isLocalFile = (window.location.protocol === 'file:');
 
-    // 1. CARICAMENTO STORICO GRAFICI REALI DAL CERBO GX
+    // 3. CARICAMENTO STORICO GRAFICI E RADAR REALI DAL CERBO GX
     try {
         await fetchServerHistory();
     } catch (err) {
         console.warn("⚠️ Impossibile caricare lo storico reale dal server.");
     }
 
-    // 2. CARICAMENTO CONFIGURAZIONI REALI (Bypassato su Mac per preservare i tuoi test!)
+    // 4. CARICAMENTO CONFIGURAZIONI REALI (Bypassato su Mac per preservare i tuoi test!)
     if (!isLocalFile) {
         await fetchServerConfig();
     } else {
-        // Mantiene la CONFIG locale di app.js per farti fare le prove delle scale sul Mac
         console.log("🎮 Esecuzione locale file://: utilizzo delle calibrazioni di CONFIG locali di debug.");
     }
     
     startDisplayLoop();
     connect(); // Si collegherà in tempo reale al WebSocket reale della barca
     
+    // 5. POLL LENTO (15 secondi): aggiorna i dati radar in background e, se attivo, li ridisegna
+    setInterval(async () => {
+        try {
+            await fetchServerHistory();
+            if (activeInstrument === 'radar') {
+                renderRadar();
+            }
+        } catch (err) {
+            console.warn("⚠️ Errore aggiornamento periodico storico:", err);
+        }
+    }, 15000);
+
     // Controlla le modifiche di configurazione sul Cerbo solo se non siamo sul Mac via file://
     if (!isLocalFile) {
         setInterval(watchConfigChanges, 10000);

package/charts.js

@@ -5,6 +5,7 @@
  * ==========================================================================
  * 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à) ---

package/gauge.js

@@ -4,6 +4,7 @@
  * ==========================================================================
  * 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)

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 -->
@@ -218,6 +258,7 @@
     <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>

package/index.js

@@ -4,6 +4,7 @@
  * ==========================================================================
  * Definisce l'interfaccia di configurazione in Signal K Admin e crea
  * gli endpoint pubblici per la Dashboard, mantenendo lo storico in RAM.
+ * file index.js
  */
 const https = require('https'); // Importazione del modulo HTTPS nativo di Node.js
 
@@ -172,20 +173,23 @@ module.exports = function (app) {
       raw[path] = val; // BUG RISOLTO: Acquisizione dell'AWA mancante inserita!
     }
     else if (path === 'environment.wind.speedTrue') {
-      lastNativeTwsTime = now; // Rilevato TWS nativo della centralina!
-      manageHistory('tws', val * 1.94384);
+          lastNativeTwsTime = now; // Rilevato TWS nativo della centralina!
+          const cleanVal = (val && typeof val === 'object' && val.value !== undefined) ? val.value : val;
+          manageHistory('tws', cleanVal * 1.94384);
     }
     // --- DECODIFICA PRUA MAGNETICA SERVER-SIDE ---
     else if (path === 'navigation.headingMagnetic') {
       const hasTrueHdg = raw['navigation.headingTrue'] !== undefined;
       if (!hasTrueHdg) {
         const variation = raw['navigation.magneticVariation'] || 0;
-        raw['navigation.headingTrue'] = (val + variation + 2 * Math.PI) % (2 * Math.PI);
+        const cleanVal = (val && typeof val === 'object' && val.value !== undefined) ? val.value : val;
+        raw['navigation.headingTrue'] = (cleanVal + variation + 2 * Math.PI) % (2 * Math.PI);
       }
     }
     else if (path === 'environment.wind.directionTrue') {
       lastNativeTwdTime = now; // Rilevato TWD nativo della centralina!
-      manageHistory('twd', val);
+      const cleanVal = (val && typeof val === 'object' && val.value !== undefined) ? val.value : val;
+      manageHistory('twd', cleanVal);
     }
 
     // 2. Calcolo combinato di FALLBACK (Si attiva solo se la centralina non invia TWS/TWD nativi)

package/package.json

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

package/style.css

@@ -520,3 +520,40 @@ body.night-mode {
 .night-mode .graph-wrapper polygon[style*="#0088cc"] {
     fill: #33aadd !important;
 }
+
+/* ==========================================================================
+   12. INTEGRAZIONE DUAL-SVG COMPASS & RADAR
+   ========================================================================== */
+#wind-gauge, #wind-radar {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    transition: opacity 0.2s ease-in-out;
+}
+
+/* --- OVERRIDE NIGHT MODE PER IL WIND RADAR --- */
+.night-mode #wind-radar circle {
+    fill: #000000 !important;
+    stroke: #220000 !important;
+}
+.night-mode #wind-radar circle:nth-of-type(2),
+.night-mode #radar-hotspot {
+    fill: #050000 !important;
+    stroke: #330000 !important;
+}
+.night-mode #radar-tick-labels {
+    fill: #800000 !important;
+}
+.night-mode #radar-boat-icon {
+    fill: #220000 !important;
+    stroke: #ff0000 !important;
+    stroke-width: 0.8px !important;
+    opacity: 1 !important;
+}
+.night-mode #ora-orbit {
+    stroke: #330000 !important;
+}
+.night-mode #wind-radar circle[stroke="#b0bec5"] {
+    stroke: #440000 !important;
+}

package/utils.js

@@ -3,6 +3,7 @@
  * Sailing Dashboard Pro - Math, Conversions & Audio Utilities
  * ==========================================================================
  * Raccoglie le funzioni pure di calcolo vettoriale e sintesi sonora.
+ *file utils.js
  */
 
 // --- 1. CONVERSIONI STANDARD ---

package/weather-radar.js

@@ -0,0 +1,281 @@
+/**
+ * ==========================================================================
+ * Signal K Wind Radar - Vector Core and Compass Rendering Engine (Modular v6.0)
+ * ==========================================================================
+ * Autore: Sailing Rotevista
+ * Libreria grafica pura per il disegno della bussola radar storica (TWD).
+ * Condivide le risorse, lo stato e i flussi di dati generati da app.js.
+ */
+
+// --- 1. PARAMETRI DI CALCOLO INTERNI ---
+const CALM_THRESHOLD_KTS = 1.5;
+const PRESSURE_FILTER_RATIO = 0.40;
+const ringRadii = [59.0, 67.2, 75.4, 83.6, 91.8, 100.0, 108.2, 116.4];
+const ARC_STROKE_WIDTH = 5.0;
+const BORDER_STROKE_WIDTH = ARC_STROKE_WIDTH + 2; // 7px
+
+// --- 2. FUNZIONI GEOMETRICHE DI SUPPORTO ---
+function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+    const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
+    return {
+        x: centerX + (radius * Math.cos(angleInRadians)),
+        y: centerY + (radius * Math.sin(angleInRadians))
+    };
+}
+
+function describeArc(centerX, centerY, radius, startAngle, endAngle) {
+    const start = polarToCartesian(centerX, centerY, radius, endAngle);
+    const end = polarToCartesian(centerX, centerY, radius, startAngle);
+
+    let arcSweep = endAngle - startAngle;
+    if (arcSweep < 0) arcSweep += 360;
+
+    const largeArcFlag = arcSweep <= 180 ? "0" : "1";
+
+    return [
+        "M", start.x, start.y,
+        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
+    ].join(" ");
+}
+
+// Genera dinamicamente le tacche dei gradi bussola per l'SVG del radar
+function initRadarTicks() {
+    const c = document.getElementById('radar-ticks');
+    if (c) {
+        c.innerHTML = "";
+        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);
+        }
+    }
+}
+
+// --- 3. MOTORE DI CALCOLO DELL'ANELLO 1 (Presente Mobile) ---
+function calculateActive30mRing() {
+    const now = Date.now();
+    const start30m = now - 1800000;
+
+    const twdRecent = (store.twdMinuteBuffer || []).filter(p => p.time >= start30m);
+    const twsRecent = (store.twsMinuteBuffer || []).filter(p => p.time >= start30m);
+
+    if (twdRecent.length === 0) return null;
+
+    const twsVals = twsRecent.map(p => p.val).filter(v => isFinite(v));
+    const maxTws = twsVals.length > 0 ? Math.max(...twsVals) : 0;
+    const minTws = twsVals.length > 0 ? Math.min(...twsVals) : 0;
+
+    if (maxTws < CALM_THRESHOLD_KTS) {
+        return { twsPeak: maxTws, twsMin: minTws, twdMin: 0, twdMax: 360, isCalm: true };
+    }
+
+    let allAngles = [];
+    twdRecent.forEach(p => {
+        allAngles.push(p.val);
+        allAngles.push(p.min);
+        allAngles.push(p.max);
+    });
+
+    let sumSin = 0; let sumCos = 0;
+    allAngles.forEach(a => { sumSin += Math.sin(a); sumCos += Math.cos(a); });
+    const avgAngle = Math.atan2(sumSin, sumCos);
+    const finalAvg = (avgAngle + Math.PI * 2) % (Math.PI * 2);
+
+    let diffs = allAngles.map(a => {
+        let diff = a - finalAvg;
+        return Math.atan2(Math.sin(diff), Math.cos(diff));
+    });
+
+    diffs.sort((a, b) => a - b);
+    const trimCount = Math.floor(diffs.length * 0.05);
+    const activeDiffs = diffs.slice(trimCount, diffs.length - trimCount);
+    const finalDiffs = activeDiffs.length > 0 ? activeDiffs : diffs;
+
+    const minDiff = Math.min(...finalDiffs);
+    const maxDiff = Math.max(...finalDiffs);
+
+    const finalMinDeg = Math.round(radToDeg((finalAvg + minDiff + Math.PI * 2) % (Math.PI * 2)));
+    const finalMaxDeg = Math.round(radToDeg((finalAvg + maxDiff + Math.PI * 2) % (Math.PI * 2)));
+
+    return {
+        twdMin: finalMinDeg,
+        twdMax: finalMaxDeg,
+        twsPeak: maxTws,
+        twsMin: minTws,
+        isCalm: false
+    };
+}
+
+// --- 4. MOTORE GRAFICO DI DISEGNO DEL RADAR ---
+function renderRadar() {
+    const ringsContainer = document.getElementById('radar-rings');
+    const defsContainer = document.getElementById('radar-gradients');
+    
+    if (!ringsContainer || !defsContainer) return; // Protezione se l'SVG del radar non è presente nel DOM
+
+    defsContainer.innerHTML = `
+        <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>
+    `;
+    ringsContainer.innerHTML = '';
+
+    const oraOrbit = document.getElementById('ora-orbit');
+    if (oraOrbit) oraOrbit.setAttribute("r", ringRadii[1]);
+
+    const now = Date.now();
+    const current30mSlot = Math.floor(now / 1800000) * 1800000;
+
+    const radarDataList = [];
+
+    // 1. ANELLO 0: Previsione Futura Open-Meteo
+    if (store.futureForecast) {
+        const twdDeg = Math.round(radToDeg(store.futureForecast.twd));
+        radarDataList.push({
+            twdMin: (twdDeg - 20 + 360) % 360,
+            twdMax: (twdDeg + 20 + 360) % 360,
+            twsPeak: store.futureForecast.tws,
+            isFuture: true
+        });
+    } else {
+        radarDataList.push(null);
+    }
+
+    // 2. ANELLO 1: Presente Mobile (Real-Time Client-Side)
+    const activeRing = calculateActive30mRing();
+    radarDataList.push(activeRing);
+
+    // 3. ANELLI 2-7: Storico consolidato dal server
+    const slots = store.windRadarSlots || [];
+    for (let i = 1; i <= 6; i++) {
+        const targetTimestamp = current30mSlot - (i * 1800000);
+        const matchedSlot = slots.find(s => s.timestamp === targetTimestamp);
+        
+        if (matchedSlot) {
+            radarDataList.push({
+                twdMin: Math.round(radToDeg(matchedSlot.twdMin)),
+                twdMax: Math.round(radToDeg(matchedSlot.twdMax)),
+                twsPeak: matchedSlot.twsPeak,
+                twsMin: matchedSlot.twsMin !== undefined ? matchedSlot.twsMin : matchedSlot.twsPeak,
+                isCalm: matchedSlot.twsPeak < CALM_THRESHOLD_KTS
+            });
+        } else {
+            radarDataList.push(null);
+        }
+    }
+
+    // Disegno degli archi
+    radarDataList.forEach((data, index) => {
+        if (!data) return;
+
+        const radius = ringRadii[index];
+        const gradId = `chord-gradient-${index}`;
+        const opacityValue = 1;
+
+        if (data.isCalm || data.twsPeak < CALM_THRESHOLD_KTS) {
+            const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            circle.setAttribute("cx", "200");
+            circle.setAttribute("cy", "200");
+            circle.setAttribute("r", radius);
+            circle.setAttribute("fill", "none");
+            circle.setAttribute("stroke", document.body.classList.contains('night-mode') ? "#440000" : "#b0bec5");
+            circle.setAttribute("stroke-width", "1.2");
+            circle.setAttribute("stroke-dasharray", "4, 4");
+            ringsContainer.appendChild(circle);
+            return;
+        }
+
+        let strokeColor = '';
+        
+        const getColorForSpeed = (tws) => {
+            const R1 = CONFIG.graphs.reef1 || 15;
+            const R2 = CONFIG.graphs.reef2 || 20;
+            const R3 = R2 + (R2 - R1);
+            if (tws < R1 * 0.4) return '#ffffff';
+            if (tws < R1 * 0.75) return '#00C851';
+            if (tws < R1) return '#ff9800';
+            if (tws < R2) return '#ffaa00';
+            if (tws < R2 + (R3 - R2) * 0.5) return '#ff3b30';
+            return '#9c27b0';
+        };
+
+        const baseTws = data.isFuture && store.futureForecast ? store.futureForecast.tws : (data.twsMin !== undefined ? data.twsMin : data.twsPeak);
+        const peakTws = data.isFuture && store.futureForecast ? store.futureForecast.gust : data.twsPeak;
+
+        const baseColor = getColorForSpeed(baseTws);
+        const peakColor = getColorForSpeed(peakTws);
+
+        if (baseColor !== peakColor) {
+            const startPt = polarToCartesian(200, 200, radius, data.twdMax);
+            const endPt = polarToCartesian(200, 200, radius, data.twdMin);
+            
+            const xml = `
+                <linearGradient id="${gradId}" x1="${startPt.x.toFixed(1)}" y1="${startPt.y.toFixed(1)}" x2="${endPt.x.toFixed(1)}" y2="${endPt.y.toFixed(1)}" gradientUnits="userSpaceOnUse">
+                    <stop offset="0%" stop-color="${baseColor}" />
+                    <stop offset="50%" stop-color="${peakColor}" />
+                    <stop offset="100%" stop-color="${baseColor}" />
+                </linearGradient>
+            `;
+            defsContainer.innerHTML += xml;
+            strokeColor = `url(#${gradId})`;
+        } else {
+            strokeColor = baseColor;
+        }
+
+        const pathData = describeArc(200, 200, radius, data.twdMin, data.twdMax);
+
+        if (!data.isFuture) {
+            const borderPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            borderPath.setAttribute("d", pathData);
+            borderPath.setAttribute("fill", "none");
+            borderPath.setAttribute("stroke", "#000000");
+            borderPath.setAttribute("stroke-width", BORDER_STROKE_WIDTH);
+            borderPath.setAttribute("stroke-linecap", "round");
+            borderPath.setAttribute("opacity", opacityValue);
+            ringsContainer.appendChild(borderPath);
+        }
+
+        const mainPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        mainPath.setAttribute("d", pathData);
+        mainPath.setAttribute("fill", "none");
+        mainPath.setAttribute("stroke", strokeColor);
+        mainPath.setAttribute("stroke-width", ARC_STROKE_WIDTH);
+        mainPath.setAttribute("stroke-linecap", "round");
+        mainPath.setAttribute("opacity", data.isFuture ? "0.5" : opacityValue);
+        mainPath.id = data.isFuture ? "" : (index === 1 ? "active-present-arc" : "");
+        ringsContainer.appendChild(mainPath);
+    });
+
+    // Disegno del LED lampeggiante del meteo-trend
+    if (activeRing && !activeRing.isCalm) {
+        const twdNow = getCircularAverageFromBuffer(store.longBuf.twd, 60000, false);
+        const strategicWindowMs = (isNavigating ? 15 : 60) * 60000;
+        const twdRef = getCircularAverageFromBuffer(store.longBuf.twd, strategicWindowMs, false);
+
+        if (twdNow && twdRef) {
+            let deltaMeteo = radToDeg((twdNow.val - twdRef.val + Math.PI * 3) % (Math.PI * 2) - Math.PI);
+            
+            if (Math.abs(deltaMeteo) > 6.0) {
+                const isSouth = store.raw["navigation.position"] && store.raw["navigation.position"].latitude < 0;
+                let meteoColor = (!isSouth) ? (deltaMeteo < 0 ? "#00C851" : "#ff3b30") : (deltaMeteo > 0 ? "#00C851" : "#ff3b30");
+                
+                const radiusAnello1 = ringRadii[1];
+                const angleTarget = deltaMeteo > 0 ? activeRing.twdMax : activeRing.twdMin;
+                const pt = polarToCartesian(200, 200, radiusAnello1, angleTarget);
+
+                const led = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                led.setAttribute("cx", pt.x.toFixed(1));
+                led.setAttribute("cy", pt.y.toFixed(1));
+                led.setAttribute("r", "5.5");
+                led.setAttribute("fill", meteoColor);
+                led.setAttribute("class", "is-trending");
+                led.setAttribute("filter", "url(#radar-center-glow)");
+                ringsContainer.appendChild(led);
+            }
+        }
+    }
+}