@sailingrotevista/rotevista-dash 1.0.23 → 1.0.24

package/app.js

@@ -1,17 +1,33 @@
 // ==========================================================================
-// 1. CONFIGURAZIONE E DEFAULT
+// 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;
@@ -19,13 +35,17 @@ const TIMEOUT_MS = 5000;
 const SIM_SAMPLE_INTERVAL = 1000;
 
 // ==========================================================================
-// 2. STATO GLOBALE E UI
+// 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 Focus e Interazioni
+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',
@@ -33,7 +53,14 @@ 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'),
@@ -49,7 +76,7 @@ const ui = {
 };
 
 // ==========================================================================
-// 3. CARICAMENTO CONFIGURAZIONE
+// 3. CARICAMENTO CONFIGURAZIONE DAL SERVER
 // ==========================================================================
 async function fetchServerConfig() {
     if (!window.location.protocol.includes("http")) return;
@@ -72,9 +99,11 @@ async function fetchServerConfig() {
                     parseNumbers(actual);
                     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 }; // Mapping averaging -> averages
-                    if (actual.scales) { for (let key in actual.scales) { CONFIG.scales[key] = { ...CONFIG.scales[key], ...actual.scales[key] }; } }
-                    console.log("SUCCESS: Config loaded from Server:", CONFIG);
+                    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 dal server.");
                     return;
                 }
             }
@@ -83,7 +112,7 @@ async function fetchServerConfig() {
 }
 
 // ==========================================================================
-// 4. MATEMATICA VETTORIALE
+// 4. MATEMATICA E GESTIONE DATI
 // ==========================================================================
 function radToDeg(rad) { return rad * (180 / Math.PI); }
 function degToRad(deg) { return deg * (Math.PI / 180); }
@@ -91,6 +120,7 @@ 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 con rilevamento stabilità
 function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
     const now = Date.now();
     const validData = bufferArray.filter(item => (now - item.time) <= windowMs);
@@ -104,9 +134,6 @@ function getCircularAverageFromBuffer(bufferArray, windowMs, signed = false) {
     return { val: signed ? avgDeg : (avgDeg + 360) % 360, stable: isStable };
 }
 
-// ==========================================================================
-// 5. GESTIONE DATI IN INGRESSO
-// ==========================================================================
 function processIncomingData(path, val) {
     const now = Date.now(); store.timestamps[path] = now; store.raw[path] = val;
     if (path === "navigation.headingTrue") { store.smoothBuf.hdg.push({ val: val, time: now }); store.longBuf.hdg.push({ val: val, time: now }); }
@@ -114,6 +141,7 @@ function processIncomingData(path, val) {
     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 (True Wind Direction)
     if (path === "navigation.headingTrue" || path === "environment.wind.angleTrueWater" || path === "environment.wind.directionTrue") {
         let twdRad = 0;
         if (path === "environment.wind.directionTrue") twdRad = val;
@@ -127,7 +155,7 @@ function processIncomingData(path, val) {
 }
 
 // ==========================================================================
-// 6. RENDER LOOP
+// 5. MOTORE DI RENDERING PRINCIPALE
 // ==========================================================================
 function startDisplayLoop() {
     renderInterval = setInterval(() => {
@@ -146,6 +174,7 @@ function startDisplayLoop() {
         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)`); }
 
+        // Calcolo 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;
@@ -186,7 +215,7 @@ function startDisplayLoop() {
 }
 
 // ==========================================================================
-// 7. CONNESSIONE SIGNALK (subscribe=self)
+// 6. CONNESSIONE SIGNALK
 // ==========================================================================
 function connect() {
     if (simulationMode) return;
@@ -200,22 +229,15 @@ function connect() {
 }
 
 // ==========================================================================
-// 8. FUNZIONI GRAFICHE (Hercules Mode)
+// 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) {
     const n = Date.now();
-    const dynamicInterval = (CONFIG.graphs.historyMinutes * 60000) / CONFIG.graphs.samples;
-    const interval = simulationMode ? SIM_SAMPLE_INTERVAL : dynamicInterval;
-    
-    if (n - store.lastUpdates[t] > interval || store.histories[t].length === 0) {
-        store.histories[t].push(v);
-        if (store.histories[t].length > CONFIG.graphs.samples) store.histories[t].shift();
-        store.lastUpdates[t] = n;
-    }
-    const mode = graphModes[t];
-    const cfg = calculateScale(t, store.histories[t], mode);
+    const interval = simulationMode ? SIM_SAMPLE_INTERVAL : (CONFIG.graphs.historyMinutes * 60000) / CONFIG.graphs.samples;
+    if (n - store.lastUpdates[t] > interval || store.histories[t].length === 0) { store.histories[t].push(v); if (store.histories[t].length > CONFIG.graphs.samples) store.histories[t].shift(); store.lastUpdates[t] = n; }
+    const mode = graphModes[t], cfg = calculateScale(t, store.histories[t], mode);
     const box = document.getElementById(t + '-graph').closest('.data-box');
     if (mode === 'hercules') box.classList.add('box-hercules'); else box.classList.remove('box-hercules');
     updateScaleLabels(t, cfg.min, cfg.max);
@@ -231,9 +253,7 @@ function calculateScale(type, data, mode) {
         if (span % 2 !== 0) span += 1;
         let min = Math.max(0, Math.floor(avg - (span / 2)));
         return { min, max: min + span };
-    } else {
-        return { min: 0, max: Math.max(s.stdMax, Math.ceil(aMax / s.step) * s.step) };
-    }
+    } else return { min: 0, max: Math.max(s.stdMax, Math.ceil(aMax / s.step) * s.step) };
 }
 
 function updateScaleLabels(t, min, max) {
@@ -244,15 +264,8 @@ 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 w = 200, h = 40, range = max - min || 1;
-    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" />`; });
-    
-    const minutes = CONFIG.graphs.historyMinutes;
-    for (let m = 1; m < minutes; m++) {
-        const x = w - (m / minutes) * w;
-        grids += `<line x1="${x}" y1="0" x2="${x}" y2="${h}" stroke="rgba(255,255,255,0.05)" stroke-width="0.5" />`;
-    }
-    
+    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} `;
@@ -262,44 +275,75 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
             cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" stroke-width="${isHercules?3:2}" class="${isHercules?'line-hercules':''}" />`;
         }
     });
-
-    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#f1c40f' };
-    const aP = pD + ` L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z`;
+    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]}" stroke-width="1.5" />`;
 }
 
 // ==========================================================================
-// 9. EVENTI E INIZIALIZZAZIONE
+// 8. EVENTI, INTERAZIONI E FOCUS MODE
 // ==========================================================================
+
+function toggleFocusMode(type, element) {
+    const container = document.querySelector('.main-container');
+    const parentPanel = element.closest('.side-panel');
+    const isLeft = parentPanel.classList.contains('left-panel');
+
+    isFocusActive = !isFocusActive;
+
+    if (isFocusActive) {
+        container.classList.add('focus-active');
+        container.classList.add(isLeft ? 'focus-side-left' : 'focus-side-right');
+        parentPanel.classList.add('has-focus');
+        element.classList.add('is-focused');
+        blockNextClick = true; // Impedisce al click di rilascio del tocco lungo di chiudere subito
+    } else {
+        container.classList.remove('focus-active', 'focus-side-left', 'focus-side-right');
+        document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('has-focus'));
+        document.querySelectorAll('.data-box').forEach(b => b.classList.remove('is-focused'));
+    }
+}
+
 ['stw', 'sog', 'tws', 'depth'].forEach(type => {
     const el = document.getElementById(type + '-graph').closest('.data-box');
+    
+    // Doppio Click -> Toggle Hercules Zoom
     el.addEventListener('dblclick', (e) => {
-        e.preventDefault(); graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard';
+        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);
     });
+    
+    // Gestione Pressione Prolungata (1s) -> 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: true});
+    ['mouseup', 'mouseleave', 'touchend'].forEach(evt => el.addEventListener(evt, cancelPress));
+    
+    // Click per uscire o per catturare il rilascio del tocco lungo
+    el.addEventListener('click', (e) => {
+        if (blockNextClick) { blockNextClick = false; return; }
+        if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el);
+    });
 });
 
-if (ui.hotspot) {
-    ui.hotspot.addEventListener('click', (e) => {
-        e.preventDefault(); 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(); }
-    });
-}
+// Fullscreen (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(); } }); }
 
+// Allarmi Audio e Depth
+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); }
+
+// ==========================================================================
+// 9. INIZIALIZZAZIONE
+// ==========================================================================
 (function generateTicks() { 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); } } })();
 
 async function init() { await fetchServerConfig(); startDisplayLoop(); connect(); }
 window.addEventListener('load', init);
 
-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); }
-
+// Simulatore (Triple click su Depth)
 ui.depth.closest('.data-box').addEventListener('click', (function() {
-    let dC = 0, lC = 0;
-    return function() {
-        const n = Date.now(); if (n - lC < 500) dC++; else dC = 1; lC = n;
-        if (dC === 3) { simulationMode = !simulationMode; if (simulationMode) { if (socket) socket.close(); ui.status.innerText = "SIM ATTIVO"; simInterval = setInterval(() => { processIncomingData("navigation.headingTrue", degToRad(Math.random()*360)); processIncomingData("navigation.speedOverGround", ktsToMs(8)); }, 200); } else location.reload(); dC = 0; }
-    };
+    let dC = 0, lC = 0; return function() { const n = Date.now(); if (n - lC < 500) dC++; else dC = 1; lC = n; if (dC === 3) { simulationMode = !simulationMode; if (simulationMode) { if (socket) socket.close(); ui.status.innerText = "SIM ATTIVO"; simInterval = setInterval(() => { processIncomingData("navigation.headingTrue", degToRad(Math.random()*360)); processIncomingData("navigation.speedOverGround", ktsToMs(8)); }, 200); } else location.reload(); dC = 0; } };
 })());

package/index.html

@@ -187,9 +187,27 @@
                 <div class="label-row"><span class="label">TWD MEAN</span></div>
                 <div class="value-with-compass">
                     <svg class="mini-compass" viewBox="0 0 40 40">
-                        <circle cx="20" cy="20" r="18" fill="none" stroke="#333" stroke-width="2"/>
-                        <g stroke="#555" stroke-width="1"><line x1="20" y1="2" x2="20" y2="6"/><line x1="38" y1="20" x2="34" y2="20"/><line x1="20" y1="38" x2="20" y2="34"/><line x1="2" y1="20" x2="6" y2="20"/></g>
-                        <g id="twd-arrow" transform="rotate(0, 20, 20)"><path d="M20,5 L17,12 L23,12 Z" fill="#ffff00" /><line x1="20" y1="5" x2="20" y2="20" stroke="#ffff00" stroke-width="1" /></g>
+                        <!-- Sfondo e bordo bussola -->
+                        <circle cx="20" cy="20" r="19" fill="#151515" stroke="#444" stroke-width="1.5"/>
+                        
+                        <!-- Etichetta Nord (N) -->
+                        <text x="20" y="8" fill="#e74c3c" font-size="6" text-anchor="middle" font-weight="900" font-family="Arial">N</text>
+                        
+                        <!-- Tacche cardinali (E, S, W) -->
+                        <g stroke="#555" stroke-width="0.8">
+                            <line x1="20" y1="11" x2="20" y2="13"/> <!-- Nord marker -->
+                            <line x1="30" y1="20" x2="27" y2="20"/> <!-- Est -->
+                            <line x1="20" y1="30" x2="20" y2="27"/> <!-- Sud -->
+                            <line x1="10" y1="20" x2="13" y2="20"/> <!-- Ovest -->
+                        </g>
+                        
+                        <!-- Freccia TWD (Gialla, forma a punta di freccia aeronautica) -->
+                        <g id="twd-arrow" transform="rotate(0, 20, 20)">
+                            <path d="M20,10 L16,26 L20,23 L24,26 Z" fill="#ffff00" stroke="#000" stroke-width="0.5"/>
+                        </g>
+                        
+                        <!-- Perno centrale -->
+                        <circle cx="20" cy="20" r="1.5" fill="#555" />
                     </svg>
                     <span class="value value-large" id="twd-avg">---&deg;</span>
                 </div>
@@ -200,4 +218,3 @@
     <script src="app.js"></script>
 </body>
 </html>
----Fine Codice ---

package/package.json

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

package/style.css

@@ -1,7 +1,16 @@
 /* ==========================================================================
-   1. BASE E STRUTTURA (GRID LAYOUT)
+   1. BASE E STRUTTURA GENERALE (GRID LAYOUT)
    ========================================================================== */
-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; overflow: hidden; }
+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;
+    overflow: hidden;
+}
 
 .main-container {
     display: grid;
@@ -9,24 +18,23 @@ body { background-color: #000; color: #fff; font-family: -apple-system, BlinkMac
     height: 100%;
     padding: 5px;
     box-sizing: border-box;
-    /* Default Desktop (es. 4:3 o schermi medi) */
+    gap: 8px;
+    /* Proporzioni Desktop Standard */
     grid-template-columns: 1fr 3.5fr 1fr;
     grid-template-rows: 100%;
-    gap: 8px;
-    transition: grid-template-columns 0.4s ease;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* OTTIMIZZAZIONE PER SCHERMI LARGHI (16:10, 16:9, ecc.) */
+/* Ottimizzazione per schermi molto larghi (es. 16:10, 21:9) */
 @media (min-aspect-ratio: 1.6) {
     .main-container {
-        /* Allarghiamo le colonne laterali per sfruttare lo spazio orizzontale */
         grid-template-columns: 1.4fr 3fr 1.4fr;
-        gap: 15px; /* Aumentiamo anche il distacco per eleganza */
+        gap: 15px;
     }
 }
 
 /* ==========================================================================
-   2. PANNELLI LATERALI E RIQUADRI DATI
+   2. PANNELLI E DATA-BOX
    ========================================================================== */
 .side-panel {
     display: flex;
@@ -37,12 +45,19 @@ body { background-color: #000; color: #fff; font-family: -apple-system, BlinkMac
     height: 100%;
 }
 
-.right-panel {
-    align-items: flex-end;
-    text-align: right;
+.left-panel { grid-column: 1; }
+.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;
 }
 
-/* Riquadro singolo: agisce da contenitore per i font dinamici (cqh) */
 .data-box {
     position: relative;
     border-bottom: 1px solid #222;
@@ -51,69 +66,49 @@ body { background-color: #000; color: #fff; font-family: -apple-system, BlinkMac
     flex-direction: column;
     width: 100%;
     box-sizing: border-box;
+    container-type: size; /* Cruciale per il calcolo cqh */
     flex: 1;
-    container-type: size;
-}
-
-/* Definizione altezze proporzionali (25% grafici, 16.6% dati semplici) */
-.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;
-}
+/* Definizione altezze percentuali basate sul Viewport */
+.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. STRUMENTO CENTRALE (WIND GAUGE)
+   3. TACTICAL FOCUS MODE (50/50 SPLIT)
    ========================================================================== */
-.center-panel {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    overflow: hidden;
-}
+.focus-active { grid-template-columns: 1fr 1fr !important; }
+.focus-active .side-panel:not(.has-focus) { display: none !important; }
 
-#wind-gauge {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
+.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; }
 
-/* ==========================================================================
-   4. TIPOGRAFIA DINAMICA (Basata su altezza riquadro - cqh)
-   ========================================================================== */
-.label-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 2px;
-    width: 100%;
-}
+.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.04); }
 
-.label {
-    color: #666;
-    font-size: 0.6rem;
-    font-weight: bold;
-    text-transform: uppercase;
-}
+.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: 35px !important; }
 
-.unit {
-    color: #888;
-    font-size: 0.55rem;
-    font-weight: bold;
+/* Bussola Esplosa in Focus Mode */
+.focus-active .is-focused .mini-compass {
+    width: 45vh !important;
+    height: 45vh !important;
 }
 
-/* Valore standard con grafico (STW, SOG, Depth, TWS) */
+.focus-active .is-focused .sparkline path { stroke-width: 0.8px !important; }
+.focus-active .is-focused .line-hercules { stroke-width: 1.2px !important; filter: drop-shadow(0 0 3px #ff0000); }
+
+/* ==========================================================================
+   4. TIPOGRAFIA DINAMICA (ELASTICA CQH)
+   ========================================================================== */
+.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
+.label { color: #666; font-size: 0.6rem; font-weight: bold; text-transform: uppercase; }
+.unit { color: #888; font-size: 0.55rem; font-weight: bold; }
+
 .value {
     color: #fff;
-    /* 22% dell'altezza del box, minimo 1.2rem */
     font-size: clamp(1.2rem, 22cqh, 3rem);
     font-weight: 600;
     line-height: 0.9;
@@ -122,40 +117,30 @@ body { background-color: #000; color: #fff; font-family: -apple-system, BlinkMac
     padding-bottom: 5px;
 }
 
-/* Valore grande senza grafico (Heading, COG, Mean) centrato verticalmente */
 .value-large {
     margin-top: auto;
     margin-bottom: auto;
-    /* 35% dell'altezza del box, minimo 1.5rem */
     font-size: clamp(1.5rem, 35cqh, 4rem);
     line-height: 0.85;
 }
 
-/* ==========================================================================
-   5. LAYOUT SPECIALI (TACK E BUSSOLINA TWD)
-   ========================================================================== */
-/* Box TACK (Doppio valore HDG/COG) */
+/* TACK Layout - Centratura verticale e compattezza */
 .dual-value-container {
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: center;
     width: 100%;
+    /* La "molla" auto sopra e sotto lo tiene al centro esatto del box */
     margin-top: auto;
-    margin-bottom: auto; /* Centratura verticale */
+    margin-bottom: auto;
     padding-bottom: 5px;
 }
 
 .dual-value-col {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
     width: 48%;
-    height: 100%;
-}
-
-.dual-value-col.right-col {
-    align-items: flex-end;
-    text-align: right;
+    /* Rimosso height 100% per non farlo allungare fino al titolo */
 }
 
 .dual-label {
@@ -163,39 +148,47 @@ body { background-color: #000; color: #fff; font-family: -apple-system, BlinkMac
     font-size: 0.55rem;
     font-weight: bold;
     text-transform: uppercase;
-    margin-bottom: auto;
+    margin-bottom: 2px; /* Distanza fissa e piccola dal numero sottostante */
 }
 
 .value.dual-val {
-    font-size: clamp(1rem, 20cqh, 1.8rem);
+    font-size: clamp(1rem, 22cqh, 1.8rem);
     padding-bottom: 0;
+    line-height: 0.9;
 }
 
-/* Box TWD con Mini-Compass */
+/* BUSSOLA TWD: Centrata e proporzionata */
 .value-with-compass {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     margin-top: auto;
-    margin-bottom: auto; /* Centratura verticale */
+    margin-bottom: auto;
+    gap: 8px;
 }
 
 .mini-compass {
-    width: 38px;
-    height: 38px;
-    background: rgba(0,0,0,0.2);
+    /* Impostata a 60% dell'altezza come da tua prova */
+    width: clamp(45px, 60cqh, 120px);
+    height: clamp(45px, 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;
 }
 
 .value-with-compass .value-large {
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 0;
+    flex-grow: 1;
+    text-align: right;
+    font-size: clamp(1.2rem, 35cqh, 4rem);
 }
 
 /* ==========================================================================
-   6. GRAFICI STORICI (SPARKLINES)
+   5. GRAFICI E SCALE
    ========================================================================== */
 .graph-wrapper {
     position: relative;
@@ -205,152 +198,63 @@ body { background-color: #000; color: #fff; font-family: -apple-system, BlinkMac
     margin-top: 4px;
     display: flex;
     align-items: stretch;
-    gap: 4px; /* Ridotto: spazio minimo tra numeri e grafico */
-}
-
-.sparkline {
-    flex-grow: 1;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 4px;
+    gap: 4px;
 }
+.sparkline { flex-grow: 1; height: 100%; background: rgba(255, 255, 255, 0.03); border-radius: 4px; }
+.sparkline path { stroke-width: 1px !important; }
 
 .scale-labels {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    font-size: 10px; /* Aumentato di ~1.5pt */
-    color: #888; /* Leggermente più chiaro per leggibilità */
+    font-size: 10px;
+    color: #666;
     font-weight: bold;
-    min-width: 16px; /* Allargato per il nuovo font */
+    min-width: 16px;
     height: 100%;
     line-height: 1;
-}
-
-/* SIMMETRIA INTERNA:
-   Pannello SX -> Scala a DESTRA (vicino al vento)
-   Pannello DX -> Scala a SINISTRA (vicino al vento)
-*/
-.left-panel .scale-labels {
-    order: 2;
-    text-align: left;
-}
-.left-panel .sparkline {
-    order: 1;
-}
-
-.right-panel .scale-labels {
-    order: 1;
-    text-align: right;
-}
-.right-panel .sparkline {
-    order: 2;
-}
-
-/* Colori linee grafici */
-#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.15); }
-#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.15); }
-#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.15); }
-#tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.15); }
-
-/* Effetto bagliore ROSSO per la linea Hercules */
-.line-hercules {
-    filter: drop-shadow(0 0 5px #ff0000); /* Glow Rosso */
-    stroke-width: 2.2px !important;
-}
-
-/* Sfondo speciale ROSSO SCURO per il box in modalità Hercules */
-.box-hercules {
-    background: rgba(255, 0, 0, 0.08) !important; /* Una punta di rosso nel fondo */
-    border-radius: 10px;
     transition: all 0.3s ease;
 }
 
-.box-hercules .sparkline {
-    background: rgba(255, 0, 0, 0.05); /* Sfondo grafico leggermente rosso */
-}
+.left-panel .scale-labels { order: 2; text-align: left; }
+.left-panel .sparkline { order: 1; }
+.right-panel .scale-labels { order: 1; text-align: right; }
+.right-panel .sparkline { order: 2; }
 
-/* Indicatore "H" più evidente */
-.box-hercules::after {
-    content: "HERCULES";
-    position: absolute;
-    bottom: 4px;
-    right: 35px;
-    font-size: 7px;
-    color: #ff4444;
-    font-weight: 900;
-    letter-spacing: 1px;
-    opacity: 0.8;
-}
+#stw-graph { stroke: #2ecc71; fill: rgba(46, 204, 113, 0.12); }
+#sog-graph { stroke: #f39c12; fill: rgba(243, 156, 18, 0.12); }
+#depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
+#tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.12); }
 
 /* ==========================================================================
-   7. STATI, ALLARMI E ANIMAZIONI
+   6. HERCULES E ANIMAZIONI
    ========================================================================== */
-#status {
-    position: absolute;
-    top: 5px;
-    right: 15px;
-    font-size: 0.5rem;
-    text-transform: uppercase;
-    z-index: 1000;
-}
+.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; }
+.box-hercules::after { content: "HERCULES"; position: absolute; bottom: 4px; right: 35px; font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; opacity: 0.8; }
 
+#status { position: absolute; top: 5px; right: 15px; font-size: 0.5rem; text-transform: uppercase; z-index: 1000; }
 .online { color: #2ecc71; opacity: 0.5; }
 .offline { color: #e74c3c; font-weight: bold; }
 
-/* Fluidità lancette SVG */
-#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow {
-    transition: all 0.6s cubic-bezier(0.1, 0.7, 0.1, 1);
-}
-
+#awa-pointer, #twa-pointer, #track-pointer, #twd-arrow { transition: all 0.6s cubic-bezier(0.1, 0.7, 0.1, 1); }
 #leeway-mask-rect { transition: none; }
-
-/* Allarmi Profondità */
 .alarm-warning { color: #f1c40f !important; }
-.alarm-danger {
-    color: #e74c3c !important;
-    font-weight: 900;
-    animation: blink-unstable 1s infinite;
-}
-
-/* Lampeggio dati instabili (MEAN) */
-@keyframes blink-unstable {
-    0% { opacity: 1; }
-    50% { opacity: 0.3; }
-    100% { opacity: 1; }
-}
+.alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
+@keyframes blink-unstable { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
+.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
 
-.unstable-data {
-    animation: blink-unstable 1.5s infinite ease-in-out;
-    color: #f39c12 !important;
-}
+#wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
 /* ==========================================================================
-   8. RESPONSIVE LAYOUT (max-aspect-ratio: 40/50)
+   7. RESPONSIVE (PORTRAIT)
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
-    .main-container {
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-    }
-
-    /* Vento sopra a tutta larghezza */
-    .center-panel {
-        grid-column: 1 / span 2;
-        grid-row: 1;
-        height: 50vh;
-    }
-
-    /* Colonne dati sotto affiancate */
-    .side-panel.left-panel { grid-column: 1; grid-row: 2; height: 50vh; }
-    .side-panel.right-panel { grid-column: 2; grid-row: 2; height: 50vh; }
-
-    #wind-gauge { max-height: 100%; width: auto; }
-
-    /* Altezze box dimezzate in modalità responsive */
+    .main-container { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
+    .center-panel { grid-column: 1 / span 2; grid-row: 1; height: 50vh; }
+    .left-panel { grid-column: 1; grid-row: 2; height: 50vh; }
+    .right-panel { grid-column: 2; grid-row: 2; height: 50vh; }
     .data-box:nth-child(1), .data-box:nth-child(2) { height: 12.5vh; }
     .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 8.333vh; }
-    
-    /* Font più protettivi per schermi piccoli */
     .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); }
 }