@sailingrotevista/rotevista-dash 1.0.25 → 1.0.27

package/app.js

@@ -1,29 +1,51 @@
 // ==========================================================================
-// 1. CONFIGURAZIONE E STATO
+// 1. CONFIGURAZIONE E DEFAULT (Sincronizzato con il Plugin SignalK)
 // ==========================================================================
 let CONFIG = {
-    alarms: { depthDanger: 2.5, depthWarning: 5.0 },
-    averages: { smoothWindow: 2000, longWindow: 60000, stabilityTolerance: 2000, stabilityThreshold: 0.90, minSpeed: 0.5 },
-    graphs: { reef1: 15.0, reef2: 20.0, historyMinutes: 5, samples: 60 },
+    alarms: {
+        depthDanger: 2.5,
+        depthWarning: 5.0
+    },
+    averages: {
+        smoothWindow: 2000,       // Media veloce per le lancette (ms)
+        longWindow: 60000,        // Media lunga per i dati MEAN (ms)
+        stabilityTolerance: 2000, // Tolleranza riempimento buffer (ms)
+        stabilityThreshold: 0.90, // Indice R minimo per dati stabili
+        minSpeed: 0.5             // Velocità sotto la quale non lampeggia nulla (kts)
+    },
+    graphs: {
+        reef1: 15.0,              // Soglia arancio TWS
+        reef2: 20.0,              // Soglia rossa TWS
+        historyMinutes: 5,        // Durata temporale dei grafici (minuti)
+        samples: 60               // Numero di punti disegnati nel grafico
+    },
     scales: {
-        stw: { stdMax: 12, hercSpan: 4, step: 2 },
-        sog: { stdMax: 12, hercSpan: 4, step: 2 },
-        tws: { stdMax: 25, hercSpan: 10, step: 5 },
+        stw:   { stdMax: 12, hercSpan: 4,  step: 2 },
+        sog:   { stdMax: 12, hercSpan: 4,  step: 2 },
+        tws:   { stdMax: 25, hercSpan: 10, step: 5 },
         depth: { stdMax: 20, hercSpan: 10, step: 10 }
     },
-    server: { fallbackIp: "192.168.111.240:3000" }
+    server: {
+        fallbackIp: "192.168.111.240:3000"
+    }
 };
 
 const RENDER_INTERVAL_MS = 1000;
 const TIMEOUT_MS = 5000;
 const SIM_SAMPLE_INTERVAL = 1000;
 
+// ==========================================================================
+// 2. STATO GLOBALE E RIFERIMENTI UI
+// ==========================================================================
 let simulationMode = false;
 let socket, renderInterval, simInterval;
 let lastAvgUIUpdate = 0, audioCtx = null, lastAlarmTime = 0;
 let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
+
+// Gestione Interazioni (Long Press, Focus, Ghost Clicks)
 let pressTimer, isFocusActive = false, blockNextClick = false;
 
+// Modalità Scale (Standard/Hercules) salvate nel browser
 const graphModes = {
     stw: localStorage.getItem('mode_stw') || 'standard',
     sog: localStorage.getItem('mode_sog') || 'standard',
@@ -31,7 +53,13 @@ const graphModes = {
     depth: localStorage.getItem('mode_depth') || 'standard'
 };
 
-const store = { raw: {}, timestamps: {}, smoothBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] }, longBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] }, histories: { stw: [], sog: [], depth: [], tws: [] }, lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0 } };
+const store = {
+    raw: {}, timestamps: {},
+    smoothBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
+    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'),
@@ -47,13 +75,13 @@ const ui = {
 };
 
 // ==========================================================================
-// 3. LOGICA DI COMUNICAZIONE E CALCOLO
+// 3. COMUNICAZIONE CON IL SERVER (FETCH CONFIG)
 // ==========================================================================
-
 async function fetchServerConfig() {
     if (!window.location.protocol.includes("http")) return;
     const pluginID = 'rotevista-dash';
     const possibleUrls = [`/skServer/plugins/${pluginID}/config`, `/plugins/${pluginID}/config` ];
+
     for (let url of possibleUrls) {
         try {
             const response = await fetch(url);
@@ -61,31 +89,48 @@ async function fetchServerConfig() {
                 const data = await response.json();
                 const actual = data.configuration || data;
                 if (actual && typeof actual === 'object') {
-                    const parseNumbers = (obj) => { for (let k in obj) { if (typeof obj[k] === 'object') parseNumbers(obj[k]); else if (!isNaN(obj[k]) && obj[k] !== "") obj[k] = parseFloat(obj[k]); } };
+                    // Normalizzazione dati (conversione stringhe -> numeri)
+                    const parseNumbers = (obj) => {
+                        for (let k in obj) {
+                            if (typeof obj[k] === 'object') parseNumbers(obj[k]);
+                            else if (!isNaN(obj[k]) && obj[k] !== "") obj[k] = parseFloat(obj[k]);
+                        }
+                    };
                     parseNumbers(actual);
+                    // Merge nel sistema locale
                     if (actual.alarms) CONFIG.alarms = { ...CONFIG.alarms, ...actual.alarms };
                     if (actual.graphs) CONFIG.graphs = { ...CONFIG.graphs, ...actual.graphs };
                     if (actual.averaging) CONFIG.averages = { ...CONFIG.averages, ...actual.averaging };
-                    if (actual.scales) { for (let key in actual.scales) { CONFIG.scales[key] = { ...CONFIG.scales[key], ...actual.scales[key] }; } }
-                    console.log("Dashboard: Configurazione caricata."); return;
+                    if (actual.scales) {
+                        for (let key in actual.scales) { CONFIG.scales[key] = { ...CONFIG.scales[key], ...actual.scales[key] }; }
+                    }
+                    console.log("Dashboard: Configurazione caricata dal server.");
+                    return;
                 }
             }
         } catch (e) { }
     }
 }
 
+// ==========================================================================
+// 4. MATEMATICA E GESTIONE DATI
+// ==========================================================================
 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; }
 
+// Calcolo media circolare vettoriale
 function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
-    const now = Date.now(); const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
+    const now = Date.now();
+    const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
     if (validData.length === 0) return null;
-    let sSin = 0, sCos = 0; validData.forEach(item => { sSin += Math.sin(item.val); sCos += Math.cos(item.val); });
+    let sSin = 0, sCos = 0;
+    validData.forEach(item => { sSin += Math.sin(item.val); sCos += Math.cos(item.val); });
     let R = Math.sqrt(sSin * sSin + sCos * sCos) / validData.length;
-    let isStable = (validData[validData.length - 1].time - validData[0].time >= windowMs - CONFIG.averages.stabilityTolerance) && (R > CONFIG.averages.stabilityThreshold);
+    let timeSpan = validData[validData.length - 1].time - validData[0].time;
+    let isStable = (timeSpan >= windowMs - CONFIG.averages.stabilityTolerance) && (R > CONFIG.averages.stabilityThreshold);
     let avgDeg = Math.round(radToDeg(Math.atan2(sSin, sCos)));
     return { val: signed ? avgDeg : (avgDeg + 360) % 360, stable: isStable };
 }
@@ -96,35 +141,45 @@ function processIncomingData(path, val) {
     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 (Vento Reale Direzione Geografica)
     if (path === "navigation.headingTrue" || path === "environment.wind.angleTrueWater" || path === "environment.wind.directionTrue") {
-        let twdRad = 0; if (path === "environment.wind.directionTrue") twdRad = val;
-        else if (store.raw["navigation.headingTrue"] !== undefined && store.raw["environment.wind.angleTrueWater"] !== undefined) { twdRad = (store.raw["navigation.headingTrue"] + store.raw["environment.wind.angleTrueWater"]) % (2 * Math.PI); if (twdRad < 0) twdRad += (2 * Math.PI); }
-        else return;
-        store.smoothBuf.twd.push({ val: twdRad, time: now }); store.longBuf.twd.push({ val: twdRad, time: now });
+        let twdRad = 0;
+        if (path === "environment.wind.directionTrue") twdRad = val;
+        else if (store.raw["navigation.headingTrue"] !== undefined && store.raw["environment.wind.angleTrueWater"] !== undefined) {
+            twdRad = (store.raw["navigation.headingTrue"] + store.raw["environment.wind.angleTrueWater"]) % (2 * Math.PI);
+            if (twdRad < 0) twdRad += (2 * Math.PI);
+        } else return;
+        store.smoothBuf.twd.push({ val: twdRad, time: now });
+        store.longBuf.twd.push({ val: twdRad, time: now });
     }
 }
 
 // ==========================================================================
-// 4. RENDERING LOOP E GRAFICA
+// 5. MOTORE DI RENDERING PRINCIPALE
 // ==========================================================================
-
 function startDisplayLoop() {
     renderInterval = setInterval(() => {
         const now = Date.now();
+
+        // 5.1 Watchdog
         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'] = "---"; delete store.raw[p]; } }
 
+        // 5.2 Renders Istantanei
         if (store.raw["navigation.speedThroughWater"] !== undefined) { const v = msToKts(store.raw["navigation.speedThroughWater"]); ui.stw.innerText = v.toFixed(1); manageHistory('stw', v); }
         let curSog = 0; if (store.raw["navigation.speedOverGround"] !== undefined) { curSog = msToKts(store.raw["navigation.speedOverGround"]); ui.sog.innerText = curSog.toFixed(1); manageHistory('sog', curSog); }
         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 w = msToKts(store.raw["environment.wind.speedTrue"]); ui.tws.innerText = w.toFixed(1); manageHistory('tws', w); }
         if (store.raw["environment.wind.speedApparent"] !== undefined) ui.awsSvg.textContent = msToKts(store.raw["environment.wind.speedApparent"]).toFixed(1);
 
+        // 5.3 Render Quadrante (2s smoothing)
         const smAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, CONFIG.averages.smoothWindow, true);
         if (smAwa) { curAwaRot = getShortestRotation(curAwaRot, smAwa.val); ui.awa.setAttribute('transform', `rotate(${curAwaRot}, 200, 200)`); }
         const smTwa = getCircularAverageFromBuffer(store.smoothBuf.twa, CONFIG.averages.smoothWindow, true);
         if (smTwa) { curTwaRot = getShortestRotation(curTwaRot, smTwa.val); ui.twa.setAttribute('transform', `rotate(${curTwaRot}, 200, 200)`); }
 
+        // Drift Reale (COG-HDG)
         if (store.raw["navigation.courseOverGroundTrue"] && store.raw["navigation.headingTrue"]) {
             let drift = (radToDeg(store.raw["navigation.courseOverGroundTrue"]) - radToDeg(store.raw["navigation.headingTrue"]) + 360) % 360;
             if (curSog < CONFIG.averages.minSpeed) drift = 0;
@@ -132,18 +187,30 @@ function startDisplayLoop() {
             let ds = drift > 180 ? drift - 360 : drift; updateLeewayDisplay(Math.max(-20, Math.min(20, ds)));
         } else updateLeewayDisplay(0);
 
+        // 5.4 Render Medie Lunghe (Ogni 3s)
         if (now - lastAvgUIUpdate > 3000) {
             let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, CONFIG.averages.longWindow, false),
                 cObj = getCircularAverageFromBuffer(store.longBuf.cog, CONFIG.averages.longWindow, false),
                 awObj = getCircularAverageFromBuffer(store.longBuf.awa, CONFIG.averages.longWindow, true),
                 twObj = getCircularAverageFromBuffer(store.longBuf.twa, CONFIG.averages.longWindow, true),
                 twdObj = getCircularAverageFromBuffer(store.longBuf.twd, CONFIG.averages.longWindow, false);
-            const upUI = (el, obj) => { if (!obj) { el.innerHTML = "---&deg;"; el.classList.remove('unstable-data'); } else { el.innerHTML = `${obj.val.toString().padStart(3, '0')}&deg;`; if (obj.stable || curSog < CONFIG.averages.minSpeed) el.classList.remove('unstable-data'); else el.classList.add('unstable-data'); } };
+
+            const upUI = (el, obj) => {
+                if (!obj) { el.innerHTML = "---&deg;"; el.classList.remove('unstable-data'); }
+                else {
+                    el.innerHTML = `${obj.val.toString().padStart(3, '0')}&deg;`;
+                    if (obj.stable || curSog < CONFIG.averages.minSpeed) el.classList.remove('unstable-data'); else el.classList.add('unstable-data');
+                }
+            };
             upUI(ui.hdg, hObj); upUI(ui.cog, cObj); upUI(ui.awaAvg, awObj); upUI(ui.twaAvg, twObj); upUI(ui.twdAvg, twdObj);
+            
+            // TACK
             if (hObj && twObj && hObj.val !== null) {
                 let tA = twObj.val * 2; ui.tackHdg.innerHTML = `${Math.round((hObj.val - tA + 360) % 360).toString().padStart(3, '0')}&deg;`;
                 if (cObj) ui.tackCog.innerHTML = `${Math.round((cObj.val - tA + 360) % 360).toString().padStart(3, '0')}&deg;`;
-                if (hObj.stable && twObj.stable || curSog < CONFIG.averages.minSpeed) { 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'); }
+                let tStable = (hObj.stable && twObj.stable) || (curSog < CONFIG.averages.minSpeed);
+                if (tStable) { 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'); }
             }
             if (twdObj) { curTwdRoseRot = getShortestRotation(curTwdRoseRot, twdObj.val); ui.twdArrow.setAttribute('transform', `rotate(${curTwdRoseRot}, 20, 20)`); }
             lastAvgUIUpdate = now;
@@ -153,6 +220,23 @@ function startDisplayLoop() {
     }, RENDER_INTERVAL_MS);
 }
 
+// ==========================================================================
+// 6. CONNESSIONE SIGNALK (subscribe=self)
+// ==========================================================================
+function connect() {
+    if (simulationMode) return;
+    let addr = (window.location.protocol.includes("http")) ? window.location.host : CONFIG.server.fallbackIp;
+    try {
+        socket = new WebSocket(`ws://${addr}/signalk/v1/stream?subscribe=self`);
+        socket.onopen = () => { ui.status.className = "online"; ui.status.innerText = "ONLINE"; };
+        socket.onmessage = (e) => { 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);
+    } catch (e) { setTimeout(connect, 5000); }
+}
+
+// ==========================================================================
+// 7. FUNZIONI GRAFICHE E SCALATURA
+// ==========================================================================
 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) {
@@ -181,52 +265,30 @@ function updateScaleLabels(t, min, max) {
 }
 
 function drawGraph(d, id, min, max, isTws, isHercules) {
-    const svg = document.getElementById(id);
-    if (!svg || d.length < 2) return;
-    
+    const svg = document.getElementById(id); if (!svg || d.length < 2) return;
     const w = 200, h = 40, range = max - min || 1;
-    const lClass = isHercules ? 'line-hercules' : '';
-
-    // 1. Griglie
-    let grids = "";
-    [0.25, 0.5, 0.75].forEach(p => { grids += `<line x1="0" y1="${h-(p*h)}" x2="${w}" y2="${h-(p*h)}" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />`; });
-    for (let m = 1; m < CONFIG.graphs.historyMinutes; m++) {
-        const x = w - (m / CONFIG.graphs.historyMinutes) * w;
-        grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(255,255,255,0.05)" stroke-width="0.5" />`;
-    }
-
-    // 2. Calcolo Percorsi
+    let grids = ""; [0.25, 0.5, 0.75].forEach(p => { grids += `<line x1="0" y1="${h-(p*h)}" x2="${w}" y2="${h-(p*h)}" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />`; });
+    for (let m = 1; m < CONFIG.graphs.historyMinutes; m++) { const x = w - (m / CONFIG.graphs.historyMinutes) * w; grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(255,255,255,0.05)" stroke-width="0.5" />`; }
     let pD = "", cS = "";
     d.forEach((v, i) => {
-        const x = (i/(CONFIG.graphs.samples-1))*w, y = h-(Math.max(0,Math.min(1,(v-min)/range))*h);
-        pD += `${i===0?'M':'L'} ${x} ${y} `;
-        
-        // Logica segmenti colorati per TWS
+        const x = (i/(CONFIG.graphs.samples-1))*w, y = h-(Math.max(0,Math.min(1,(v-min)/range))*h); pD += `${i===0?'M':'L'} ${x} ${y} `;
         if (isTws && i > 0) {
             const px = ((i-1)/(CONFIG.graphs.samples-1))*w, py = h-(Math.max(0,Math.min(1,(d[i-1]-min)/range))*h);
-            let c = "#f1c40f";
-            if (v >= CONFIG.graphs.reef2) c = "#e74c3c";
-            else if (v >= CONFIG.graphs.reef1) c = "#e67e22";
-            // Lo spessore ora è rimosso da qui e gestito dal CSS tramite la classe
-            cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" class="${lClass}" />`;
+            let c = "#f1c40f"; if (v >= CONFIG.graphs.reef2) c = "#e74c3c"; else if (v >= CONFIG.graphs.reef1) c = "#e67e22";
+            cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" class="${isHercules?'line-hercules':''}" />`;
         }
     });
-
-    // 3. Rendering finale
-    const aP = pD + ` L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z`;
-    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#f1c40f' };
-
-    if (isTws) {
-        svg.innerHTML = `${grids}<path d="${aP}" fill="rgba(241,196,15,0.12)" stroke="none" />${cS}`;
-    } else {
-        svg.innerHTML = `${grids}<path d="${aP}" fill="${clrs[id]}22" stroke="none" /><path d="${pD}" class="${lClass}" fill="none" stroke="${clrs[id]}" />`;
-    }
+    const aP = pD + ` L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z`, clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#f1c40f' };
+    svg.innerHTML = isTws ? `${grids}<path d="${aP}" fill="rgba(241,196,15,0.12)" stroke="none" />${cS}` : `${grids}<path d="${aP}" fill="${clrs[id]}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${clrs[id]}" />`;
 }
 
 // ==========================================================================
-// 5. EVENTI E INTERAZIONI
+// 8. EVENTI E INTERAZIONI (Touch, Focus e Fullscreen)
 // ==========================================================================
 
+// Blocco globale del menu contestuale per Android/iOS
+window.addEventListener('contextmenu', e => e.preventDefault());
+
 function toggleFocusMode(type, element) {
     const container = document.querySelector('.main-container');
     const parentPanel = element.closest('.side-panel');
@@ -238,24 +300,32 @@ function toggleFocusMode(type, element) {
 
 ['stw', 'sog', 'tws', 'depth'].forEach(type => {
     const el = document.getElementById(type + '-graph').closest('.data-box');
+    
+    // Doppio Click -> Hercules Zoom
     el.addEventListener('dblclick', (e) => { if (isFocusActive) return; e.preventDefault(); graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard'; localStorage.setItem('mode_' + type, graphModes[type]); el.style.backgroundColor = "rgba(255,255,255,0.15)"; setTimeout(() => el.style.backgroundColor = "", 200); });
-    const startPress = (e) => { if (!isFocusActive) pressTimer = setTimeout(() => { toggleFocusMode(type, el); if (e.cancelable) e.preventDefault(); }, 1000); };
+    
+    // Long Press -> Tactical Focus
+    const startPress = () => { if (!isFocusActive) pressTimer = setTimeout(() => toggleFocusMode(type, el), 1000); };
     const cancelPress = () => { clearTimeout(pressTimer); };
-    el.addEventListener('mousedown', startPress); el.addEventListener('touchstart', startPress, {passive: false});
-    ['mouseup', 'mouseleave', 'touchend'].forEach(evt => el.addEventListener(evt, cancelPress));
+    el.addEventListener('mousedown', startPress); el.addEventListener('touchstart', startPress, {passive: true});
+    ['mouseup', 'mouseleave', 'touchend', 'touchcancel'].forEach(evt => el.addEventListener(evt, cancelPress));
+    
+    // Click -> Exit Focus o Ghost click filtering
     el.addEventListener('click', (e) => { if (blockNextClick) { blockNextClick = false; return; } if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); });
-    el.addEventListener('contextmenu', (e) => { if (isFocusActive) e.preventDefault(); });
 });
 
+// Fullscreen via Hotspot
 if (ui.hotspot) { ui.hotspot.addEventListener('click', () => { const doc = document.documentElement, isF = document.fullscreenElement || document.webkitFullscreenElement; if (!isF) { if (doc.requestFullscreen) doc.requestFullscreen(); else if (doc.webkitRequestFullscreen) doc.webkitRequestFullscreen(); } else { if (document.exitFullscreen) document.exitFullscreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); } }); }
 
 // ==========================================================================
-// 6. INIZIALIZZAZIONE
+// 9. INIZIALIZZAZIONE
 // ==========================================================================
 (function genTicks() { const c = document.getElementById('ticks'); if (c) { for (let i = 0; i < 360; i += 10) { const l = document.createElementNS("http://www.w3.org/2000/svg", "line"); const m = i % 30 === 0; l.setAttribute("x1", "200"); l.setAttribute("y1", "40"); l.setAttribute("x2", "200"); l.setAttribute("y2", (m ? 60 : 50)); l.setAttribute("stroke", m ? "#fff" : "#666"); l.setAttribute("stroke-width", m ? "2" : "1"); l.setAttribute("transform", `rotate(${i}, 200, 200)`); c.appendChild(l); } } })();
-function connect() { if (simulationMode) return; let addr = (window.location.protocol.includes("http")) ? window.location.host : CONFIG.server.fallbackIp; try { socket = new WebSocket(`ws://${addr}/signalk/v1/stream?subscribe=self`); socket.onopen = () => { ui.status.className = "online"; ui.status.innerText = "ONLINE"; }; socket.onmessage = (e) => { 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); } catch (e) { setTimeout(connect, 5000); } }
+
 async function init() { await fetchServerConfig(); startDisplayLoop(); connect(); }
 window.addEventListener('load', init);
+
+// Allarmi e Audio
 function checkDepthAlarm(m) { ui.depth.classList.remove('alarm-warning', 'alarm-danger'); if (m < CONFIG.alarms.depthDanger) { ui.depth.classList.add('alarm-danger'); playBingBing(); } else if (m < CONFIG.alarms.depthWarning) ui.depth.classList.add('alarm-warning'); }
 function 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); }
 

package/package.json

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

package/style.css

@@ -1,139 +1,92 @@
 /* ==========================================================================
-   1. BASE E STRUTTURA GENERALE (GRID LAYOUT)
+   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;
+    margin: 0; padding: 0;
+    height: 100vh; width: 100vw;
     overflow: hidden;
-    /* Impedisce selezioni accidentali su tutto il corpo dell'app */
+    /* BLOCCO TOTALE GESTI DI SISTEMA (Android/iOS) */
+    -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;
+    touch-action: none;
 }
 
 .main-container {
     display: grid;
-    width: 100%;
-    height: 100%;
-    padding: 5px;
-    box-sizing: border-box;
+    width: 100%; height: 100%;
+    padding: 5px; box-sizing: border-box;
     gap: 8px;
-    /* Desktop Default: 3 colonne */
-    grid-template-columns: 1.5fr 3fr 1.5fr;
+    grid-template-columns: 1.7fr 3fr 1.7fr;
     grid-template-rows: 100%;
-    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Ottimizzazione per schermi molto larghi (16:10, 16:9) */
-@media (min-aspect-ratio: 1.5) {
-    .main-container {
-        grid-template-columns: 2fr 3fr 2fr;
-        gap: 15px;
-    }
+    transition: all 0.4s ease;
 }
 
 /* ==========================================================================
    2. PANNELLI E DATA-BOX
    ========================================================================== */
-.side-panel {
-    display: flex;
-    flex-direction: column;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 12px;
-    z-index: 10;
-    height: 100%;
-    overflow: hidden;
-}
-
+.side-panel { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border-radius: 12px; height: 100%; overflow: hidden; }
 .left-panel { grid-column: 1; }
+.center-panel { grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: hidden; }
 .right-panel { grid-column: 3; align-items: flex-end; text-align: right; }
 
-.center-panel {
-    grid-column: 2;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    overflow: hidden;
-}
-
 .data-box {
     position: relative;
     border-bottom: 1px solid #222;
     padding: 8px 12px;
     display: flex;
     flex-direction: column;
-    width: 100%;
-    box-sizing: border-box;
+    width: 100%; box-sizing: border-box;
     container-type: size;
     flex: 1;
-    overflow: hidden; /* Evita sconfinamenti su iPhone */
+    overflow: hidden;
 }
 
-/* Altezze Proporzionali Desktop */
+/* Altezze Desktop */
 .data-box:nth-child(1), .data-box:nth-child(2) { height: 25vh; }
 .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 16.666vh; }
 
 /* ==========================================================================
-   3. TACTICAL FOCUS MODE (50/50 SPLIT)
+   3. TACTICAL FOCUS MODE (ORIZZONTALE)
    ========================================================================== */
 .focus-active { grid-template-columns: 1fr 1fr !important; }
 .focus-active .side-panel:not(.has-focus) { display: none !important; }
 
-/* Simmetria: se il focus è a sx, il vento va a dx e viceversa */
-.focus-active.focus-side-left .side-panel.has-focus { grid-column: 1; }
-.focus-active.focus-side-left .center-panel { grid-column: 2; }
-.focus-active.focus-side-right .center-panel { grid-column: 1; }
-.focus-active.focus-side-right .side-panel.has-focus { grid-column: 2; }
+/* Simmetria Orizzontale */
+.focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
+.focus-active.focus-side-left .center-panel { grid-column: 2 !important; }
+.focus-active.focus-side-right .center-panel { grid-column: 1 !important; }
+.focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
 
-/* Box Focalizzato a tutto schermo */
 .focus-active .has-focus .data-box:not(.is-focused) { display: none !important; }
-.focus-active .has-focus .data-box.is-focused {
-    height: 100vh !important;
-    border: none;
-    background: rgba(255, 255, 255, 0.05);
-}
+.focus-active .has-focus .data-box.is-focused { height: 100vh !important; border: none; background: rgba(255, 255, 255, 0.05); }
 
+/* Tipografia e Grafica in Focus */
 .focus-active .is-focused .value { font-size: clamp(3rem, 18cqh, 8rem) !important; margin-top: 10px; }
 .focus-active .is-focused .scale-labels { font-size: 22px !important; min-width: 40px !important; }
-
-/* Grafica Linee Sottili in Focus */
 .focus-active .is-focused .sparkline path { stroke-width: 0.8px !important; }
 
 /* ==========================================================================
-   4. TIPOGRAFIA DINAMICA (ELASTICA CQH)
+   4. TIPOGRAFIA DINAMICA (CQH)
    ========================================================================== */
 .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
 .label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
 .unit { color: #888; font-size: 0.6rem; font-weight: bold; }
+.value { color: #fff; font-size: clamp(1.2rem, 22cqh, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -1px; padding-bottom: 5px; }
 
-.value { color: #fff; font-size: clamp(1.2rem, 22cqh, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -1px; transition: color 0.3s ease; padding-bottom: 5px; }
-
-/* Allineamento centrato per box senza grafico */
-.value-large, .dual-value-container, .value-with-compass {
-    margin-top: auto;
-    margin-bottom: auto;
-}
-
+.value-large, .dual-value-container, .value-with-compass { margin-top: auto; margin-bottom: auto; }
 .value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
 
-/* TACK E TWD BUSSOLA */
 .dual-value-container { display: flex; justify-content: space-between; width: 100%; }
 .dual-value-col { display: flex; flex-direction: column; width: 48%; }
 .dual-label { color: #666; font-size: 0.55rem; font-weight: bold; text-transform: uppercase; margin-bottom: 2px; }
 .value.dual-val { font-size: clamp(1rem, 22cqh, 2rem); padding-bottom: 0; line-height: 0.9; }
 
 .value-with-compass { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
-.mini-compass {
-    width: clamp(40px, 60cqh, 120px); height: clamp(40px, 60cqh, 120px);
-    background: #000; border-radius: 50%; flex-shrink: 0; border: 1.5px solid #333;
-    box-shadow: inset 0 0 10px rgba(0,0,0,0.8); transition: all 0.4s ease;
-}
+.mini-compass { width: clamp(40px, 60cqh, 120px); height: clamp(40px, 60cqh, 120px); background: #000; border-radius: 50%; flex-shrink: 0; border: 1.5px solid #333; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); }
 .value-with-compass .value-large { margin: 0; flex-grow: 1; text-align: right; font-size: clamp(1.2rem, 35cqh, 4rem); }
 
 /* ==========================================================================
@@ -141,17 +94,9 @@ body {
    ========================================================================== */
 .graph-wrapper { position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px; display: flex; align-items: stretch; gap: 6px; }
 .sparkline { flex-grow: 1; height: 100%; background: rgba(255, 255, 255, 0.03); border-radius: 4px; }
+.sparkline path, .sparkline line { stroke-width: 1px !important; transition: all 0.3s ease; }
 
-/* Uniforma lo spessore di TUTTI i tipi di linea nei grafici (Standard) */
-.sparkline path,
-.sparkline line {
-    stroke-width: 1px !important;
-    transition: stroke-width 0.3s ease;
-}
-
-.scale-labels { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: #777; font-weight: bold; min-width: 16px; height: 100%; line-height: 1; transition: all 0.3s ease; }
-
-/* Simmetria interna */
+.scale-labels { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: #777; font-weight: bold; min-width: 20px; height: 100%; line-height: 1; }
 .left-panel .scale-labels { order: 2; text-align: left; }
 .left-panel .sparkline { order: 1; }
 .right-panel .scale-labels { order: 1; text-align: right; }
@@ -162,12 +107,8 @@ body {
 #depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
 #tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.12); }
 
-/* HERCULES MODE */
-.line-hercules {
-    filter: drop-shadow(0 0 5px #ff0000);
-    stroke-width: 1.8px !important;
-}
-.box-hercules { background: rgba(255, 0, 0, 0.08) !important; transition: all 0.3s ease; }
+.line-hercules { filter: drop-shadow(0 0 5px #ff0000); stroke-width: 1.8px !important; }
+.box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
 .box-hercules::after { content: "HERCULES"; position: absolute; bottom: 4px; right: 35px; font-size: 7px; color: #ff4444; font-weight: 900; opacity: 0.8; }
 
 /* ==========================================================================
@@ -185,27 +126,37 @@ body {
 #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
 /* ==========================================================================
-   7. RESPONSIVE (PORTRAIT)
+   7. RESPONSIVE (PORTRAIT) - FIX DEFINITIVO 2x2 E FOCUS
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
     .main-container {
         grid-template-columns: 1fr 1fr !important;
-        grid-template-rows: 45vh 55vh !important; /* Calibrato per iPhone */
+        grid-template-rows: 45vh 55vh !important;
     }
 
-    .center-panel { grid-row: 1; grid-column: 1 / span 2; padding: 5px 0; }
-    .left-panel { grid-row: 2; grid-column: 1; }
-    .right-panel { grid-row: 2; grid-column: 2; }
+    /* Ordine Standard Portrait: Vento (1), SX (2), DX (3) */
+    .center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; }
+    .left-panel { grid-row: 2 !important; grid-column: 1 !important; }
+    .right-panel { grid-row: 2 !important; grid-column: 2 !important; }
 
-    /* Focus Mode Verticale */
-    .main-container.focus-active { grid-template-columns: 100% !important; }
-    .focus-active .center-panel { grid-row: 1; height: 45vh !important; }
-    .focus-active .side-panel.has-focus { grid-row: 2; height: 55vh !important; }
+    /* FOCUS MODE IN VERTICALE: Abbandoniamo la Grid, usiamo Flex per sicurezza */
+    .main-container.focus-active {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+    .focus-active .center-panel {
+        flex: 0 0 45vh !important;
+        width: 100% !important;
+    }
+    .focus-active .side-panel.has-focus {
+        flex: 0 0 55vh !important;
+        width: 100% !important;
+        display: flex !important;
+    }
 
-    /* Altezze box iPhone */
+    /* Calibrazione altezze box per Portrait */
     .data-box:nth-child(1), .data-box:nth-child(2) { height: 13.5vh; }
     .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 9.3vh; }
 
-    .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); margin: auto 0; }
-    .value.dual-val { font-size: clamp(0.9rem, 30cqh, 1.4rem); }
+    .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); }
 }