@sailingrotevista/rotevista-dash 2.0.20 → 2.0.22

package/app.js

@@ -3,7 +3,14 @@
 // ==========================================================================
 let CONFIG = {
     alarms: { depthDanger: 2.5, depthWarning: 5.0 },
-    averages: { smoothWindow: 2000, longWindow: 60000, stabilityTolerance: 2000, stabilityThreshold: 0.90, minSpeed: 0.5 },
+    // Ottimizzato per mare formato: 30s di media e soglia stabilità 85%
+    averages: {
+        smoothWindow: 2000,
+        longWindow: 30000,
+        stabilityTolerance: 2000,
+        stabilityThreshold: 0.85,
+        minSpeed: 0.5
+    },
     graphs: { reef1: 15.0, reef2: 20.0, historyMinutes: 5, samples: 60 },
     scales: {
         stw: { stdMax: 12, hercSpan: 4, step: 2 },
@@ -28,7 +35,7 @@ let lastAvgUIUpdate = 0, audioCtx = null, lastAlarmTime = 0;
 let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
 let curBoatCompassRot = 0, curWindCompassRot = 0;
 
-let smoothedLeeway = 0, rotationTrend = 0;
+let smoothedLeeway = 0, rotationTrend = 0, meteoTrend = 0;
 let lastShortAvgVal = null, lastInstantTwa = null;
 let lastTrendTime = Date.now(), lastGybeAlarmTime = 0, lastTWCompute = 0;
 let twDirty = false, isNavigating = false, reconnectDelay = 1000;
@@ -47,6 +54,8 @@ const store = {
     smoothBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
     longBuf: { hdg: [], cog: [], awa: [], twa: [], twd: [] },
     histories: { stw: [], sog: [], depth: [], tws: [], vmg: [] },
+    // Buffer temporaneo per calcolare la media dell'intervallo nei grafici
+    graphTempBuf: { stw: [], sog: [], depth: [], tws: [], vmg: [] },
     lastUpdates: { stw: 0, sog: 0, depth: 0, tws: 0, vmg: 0 }
 };
 
@@ -168,9 +177,14 @@ function processIncomingData(path, val) {
 // ==========================================================================
 // 5. TREND VENTO E SICUREZZA
 // ==========================================================================
+/**
+ * Analizza i trend di rotazione del vento su due scale temporali:
+ * 1. Tattica (veloce): per la regolazione delle vele (sulla lancetta TWA)
+ * 2. Strategica (lenta): per le previsioni meteo a lungo termine (bussola TWD)
+ */
 function updateWindTrend() {
     const now = Date.now();
-    const twaAvgObj = getCircularAverageFromBuffer(store.longBuf.twa, 60000, true);
+    const twaAvgObj = getCircularAverageFromBuffer(store.longBuf.twa, 30000, true);
     const shortAvg = getCircularAverageFromBuffer(store.longBuf.twd, 5000, false);
     const instantTwaRad = store.raw["environment.wind.angleTrueWater"];
 
@@ -180,6 +194,7 @@ function updateWindTrend() {
     if (lastShortAvgVal === null) { lastShortAvgVal = shortAvgDeg; lastInstantTwa = instantTwaDeg; return; }
     const dt = (now - lastTrendTime) / 1000; lastTrendTime = now;
 
+    // ALLARME STRAMBATA
     const gybeDetected = (Math.abs(instantTwaDeg) > 155 && Math.sign(instantTwaDeg) !== Math.sign(lastInstantTwa));
     lastInstantTwa = instantTwaDeg;
 
@@ -192,32 +207,47 @@ function updateWindTrend() {
         return;
     }
 
+    // CALCOLO TREND
     let diff = (shortAvgDeg - lastShortAvgVal + 540) % 360 - 180; lastShortAvgVal = shortAvgDeg;
     if (dt > 0) {
         let rate = Math.max(-10, Math.min(10, diff / dt));
-        const alpha = Math.min(1, dt / 5);
-        rotationTrend = rotationTrend * (1 - alpha) + rate * alpha;
+        // Tattico (veloce ~15s)
+        const alphaT = Math.min(1, dt / 15);
+        rotationTrend = rotationTrend * (1 - alphaT) + rate * alphaT;
+        // Strategico (molto lento ~8-10min)
+        const alphaM = Math.min(1, dt / 500);
+        meteoTrend = meteoTrend * (1 - alphaM) + rate * alphaM;
     }
 
-    if (Math.abs(rotationTrend) > 1.0) {
-        const pos = store.raw["navigation.position"], isSouth = pos && pos.latitude < 0;
-        let meteoColor = (!isSouth) ? (rotationTrend < 0 ? "#00ff00" : "#ff0000") : (rotationTrend > 0 ? "#00ff00" : "#ff0000");
-        let isLift = (twaAvgDeg > 0) ? (rotationTrend > 0) : (rotationTrend < 0);
-        const absTwa = Math.abs(twaAvgDeg);
-        if (absTwa >= 90 && absTwa < 160) isLift = !isLift; else if (absTwa >= 160) isLift = false;
-        const tacticColor = isLift ? "#00ff00" : "#ff0000";
+    // VISUALIZZAZIONE METEO (Bussola Centrale)
+    if (Math.abs(meteoTrend) > 0.2) {
+        const isSouth = store.raw["navigation.position"]?.latitude < 0;
+        let meteoColor = (!isSouth) ? (meteoTrend < 0 ? "#27ae60" : "#c0392b") : (meteoTrend > 0 ? "#27ae60" : "#c0392b");
+        if (meteoTrend > 0) {
+            if (compassDots.cw) { compassDots.cw.classList.add('is-trending'); compassDots.cw.setAttribute('fill', meteoColor); }
+            if (compassDots.ccw) { compassDots.ccw.classList.remove('is-trending'); compassDots.ccw.setAttribute('fill', '#bbb'); }
+        } else {
+            if (compassDots.ccw) { compassDots.ccw.classList.add('is-trending'); compassDots.ccw.setAttribute('fill', meteoColor); }
+            if (compassDots.cw) { compassDots.cw.classList.remove('is-trending'); compassDots.cw.setAttribute('fill', '#bbb'); }
+        }
+    } else {
+        [compassDots.cw, compassDots.ccw].forEach(el => { if (el) { el.classList.remove('is-trending'); el.setAttribute('fill', '#bbb'); }});
+    }
 
+    // VISUALIZZAZIONE TATTICA (Lancetta Vento)
+    if (Math.abs(rotationTrend) > 3.0) {
+        let isLift = (twaAvgDeg > 0) ? (rotationTrend > 0) : (rotationTrend < 0);
+        if (Math.abs(twaAvgDeg) >= 90) isLift = !isLift;
+        const tacticColor = isLift ? "#27ae60" : "#c0392b";
         if (rotationTrend > 0) {
-            if (compassDots.cw) { compassDots.cw.classList.add('is-trending'); compassDots.cw.setAttribute('fill', meteoColor); }
             if (gaugeDots.cw) { gaugeDots.cw.classList.add('is-trending'); gaugeDots.cw.setAttribute('fill', tacticColor); }
-            [compassDots.ccw, gaugeDots.ccw].forEach(el => { if(el) { el.classList.remove('is-trending', 'is-gybing'); el.setAttribute('fill', '#ffffff'); }});
+            if (gaugeDots.ccw) { gaugeDots.ccw.classList.remove('is-trending'); gaugeDots.ccw.setAttribute('fill', '#bbb'); }
         } else {
-            if (compassDots.ccw) { compassDots.ccw.classList.add('is-trending'); compassDots.ccw.setAttribute('fill', meteoColor); }
             if (gaugeDots.ccw) { gaugeDots.ccw.classList.add('is-trending'); gaugeDots.ccw.setAttribute('fill', tacticColor); }
-            [compassDots.cw, gaugeDots.cw].forEach(el => { if(el) { el.classList.remove('is-trending', 'is-gybing'); el.setAttribute('fill', '#ffffff'); }});
+            if (gaugeDots.cw) { gaugeDots.cw.classList.remove('is-trending'); gaugeDots.cw.setAttribute('fill', '#bbb'); }
         }
     } else {
-        [compassDots.cw, compassDots.ccw, gaugeDots.cw, gaugeDots.ccw].forEach(el => { if (el) { el.classList.remove('is-trending', 'is-gybing'); el.setAttribute('fill', '#ffffff'); }});
+        [gaugeDots.cw, gaugeDots.ccw].forEach(el => { if (el) { el.classList.remove('is-trending'); el.setAttribute('fill', '#bbb'); }});
     }
 }
 
@@ -249,11 +279,16 @@ function startDisplayLoop() {
         if (store.raw["navigation.speedOverGround"] !== undefined) {
             const twaRad = store.raw["environment.wind.angleTrueWater"], vmgKts = (twaRad !== undefined) ? Math.abs(stwKts * Math.cos(twaRad)) : 0;
             manageHistory('vmg', vmgKts); manageHistory('sog', sogKts);
-            if (displayModeSog === 'VMG') { ui.sog.innerText = vmgKts.toFixed(1); ui.sog.style.color = "#64ffda"; document.getElementById('sog-vmg-label').textContent = 'VMG'; }
-            else { ui.sog.innerText = sogKts.toFixed(1); ui.sog.style.color = (sogKts-stwKts > 0.3) ? "#2ecc71" : (sogKts-stwKts < -0.3 ? "#e74c3c" : "#fff"); document.getElementById('sog-vmg-label').textContent = 'SOG'; }
+            if (displayModeSog === 'VMG') {
+                ui.sog.innerText = vmgKts.toFixed(1); ui.sog.style.color = "#16a085"; document.getElementById('sog-vmg-label').textContent = 'VMG';
+            } else {
+                ui.sog.innerText = sogKts.toFixed(1);
+                ui.sog.style.color = (sogKts - stwKts > 0.3) ? "#27ae60" : (sogKts - stwKts < -0.3 ? "#c0392b" : "#000");
+                document.getElementById('sog-vmg-label').textContent = 'SOG';
+            }
         }
         if (store.raw["environment.depth.belowTransducer"] !== undefined) { const d = store.raw["environment.depth.belowTransducer"]; ui.depth.innerText = d.toFixed(1); checkDepthAlarm(d); manageHistory('depth', d); }
-        if (store.raw["environment.wind.speedTrue"] !== undefined) { ui.tws.innerText = msToKts(store.raw["environment.wind.speedTrue"]).toFixed(1); ui.tws.style.color = (msToKts(store.raw["environment.wind.speedTrue"]) >= CONFIG.graphs.reef2) ? "#e74c3c" : (msToKts(store.raw["environment.wind.speedTrue"]) >= CONFIG.graphs.reef1 ? "#e67e22" : "#fff"); manageHistory('tws', msToKts(store.raw["environment.wind.speedTrue"])); }
+        if (store.raw["environment.wind.speedTrue"] !== undefined) { ui.tws.innerText = msToKts(store.raw["environment.wind.speedTrue"]).toFixed(1); ui.tws.style.color = (msToKts(store.raw["environment.wind.speedTrue"]) >= CONFIG.graphs.reef2) ? "#e74c3c" : (msToKts(store.raw["environment.wind.speedTrue"]) >= CONFIG.graphs.reef1 ? "#e67e22" : "#000"); manageHistory('tws', msToKts(store.raw["environment.wind.speedTrue"])); }
         if (store.raw["environment.wind.speedApparent"] !== undefined) ui.awsSvg.textContent = msToKts(store.raw["environment.wind.speedApparent"]).toFixed(1);
 
         const smAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, 2000, true);
@@ -265,20 +300,18 @@ function startDisplayLoop() {
             let driftDeg = radToDeg((store.raw["navigation.courseOverGroundTrue"] - store.raw["navigation.headingTrue"] + Math.PI * 3) % (Math.PI * 2) - Math.PI);
             if (sogKts < CONFIG.averages.minSpeed) smoothedLeeway = 0; else smoothedLeeway = (smoothedLeeway * 0.9) + (driftDeg * 0.1);
             curTrackRot = getShortestRotation(curTrackRot, smoothedLeeway); ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
-            ui.leewayVal.style.color = (Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7) ? "#f39c12" : "#fff";
+            ui.leewayVal.style.color = (Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7) ? "#e67e22" : "#000";
             updateLeewayDisplay(Math.max(-20, Math.min(20, smoothedLeeway)));
         }
 
         updateWindTrend();
-
-        // HEAVY TIER (2s)
         if (tick % 2 === 0) { refreshGraph('stw'); refreshGraph(displayModeSog === 'VMG' ? 'vmg' : 'sog'); refreshGraph('depth'); refreshGraph('tws'); }
 
         // SLOW TIER (3s)
         if (tick % 3 === 0) {
-            let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, 60000, false), cObj = getCircularAverageFromBuffer(store.longBuf.cog, 60000, false),
-                awObj = getCircularAverageFromBuffer(store.longBuf.awa, 60000, true), twObj = getCircularAverageFromBuffer(store.longBuf.twa, 60000, true),
-                twdObj = getCircularAverageFromBuffer(store.longBuf.twd, 60000, false);
+            let hObj = getCircularAverageFromBuffer(store.longBuf.hdg, 30000, false), cObj = getCircularAverageFromBuffer(store.longBuf.cog, 30000, false),
+                awObj = getCircularAverageFromBuffer(store.longBuf.awa, 30000, true), twObj = getCircularAverageFromBuffer(store.longBuf.twa, 30000, true),
+                twdObj = getCircularAverageFromBuffer(store.longBuf.twd, 30000, false);
 
             const upUI = (el, obj, isCompass = false) => {
                 if (!obj || obj.val === null) { el.innerHTML = "---&deg;"; el.classList.remove('unstable-data'); }
@@ -290,10 +323,10 @@ function startDisplayLoop() {
             upUI(ui.hdg, hObj, true); upUI(ui.cog, cObj, true); upUI(ui.awaAvg, awObj, false); upUI(ui.twaAvg, twObj, false); upUI(ui.twdAvg, twdObj, true);
             
             if (hObj && twObj) {
-                const tackHdgDeg = radToDeg((hObj.val - twObj.val * 2 + Math.PI * 2) % (Math.PI * 2));
+                const tackHdgDeg = radToDeg((hObj.val + twObj.val * 2 + Math.PI * 2) % (Math.PI * 2));
                 ui.tackHdg.innerHTML = `${Math.round((tackHdgDeg + 360) % 360).toString().padStart(3, '0')}&deg;`;
                 if (cObj) {
-                    const tackCogDeg = radToDeg((cObj.val - twObj.val * 2 + Math.PI * 2) % (Math.PI * 2));
+                    const tackCogDeg = radToDeg((cObj.val + twObj.val * 2 + Math.PI * 2) % (Math.PI * 2));
                     ui.tackCog.innerHTML = `${Math.round((tackCogDeg + 360) % 360).toString().padStart(3, '0')}&deg;`;
                 }
             }
@@ -335,8 +368,19 @@ async function fetchServerConfig() {
 }
 
 function manageHistory(t, v) {
-    const n = Date.now(); 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 n = Date.now();
+    const interval = simulationMode ? SIM_SAMPLE_INTERVAL : (CONFIG.graphs.historyMinutes * 60000) / CONFIG.graphs.samples;
+    if (!store.graphTempBuf[t]) store.graphTempBuf[t] = [];
+    store.graphTempBuf[t].push(v);
+
+    if (n - store.lastUpdates[t] > interval || store.histories[t].length === 0) {
+        const sum = store.graphTempBuf[t].reduce((a, b) => a + b, 0);
+        const avg = sum / store.graphTempBuf[t].length;
+        store.histories[t].push(avg);
+        if (store.histories[t].length > CONFIG.graphs.samples) store.histories[t].shift();
+        store.graphTempBuf[t] = [];
+        store.lastUpdates[t] = n;
+    }
 }
 
 function calculateScale(type, data, mode) {
@@ -350,20 +394,24 @@ function updateScaleLabels(t, min, max) { const el = document.getElementById(t +
 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" />`; });
-    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 grids = "";
+    [0.25, 0.5, 0.75].forEach(p => { grids += `<line x1="0" y1="${h-(p*h)}" x2="${w}" y2="${h-(p*h)}" stroke="rgba(0,0,0,0.12)" stroke-width="0.5" />`; });
+    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(0,0,0,0.08)" stroke-width="0.5" />`;
+    }
     let pD = ""; let 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} `;
         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 = (v >= CONFIG.graphs.reef2) ? "#e74c3c" : (v >= CONFIG.graphs.reef1 ? "#e67e22" : "#fff");
+            let c = (v >= CONFIG.graphs.reef2) ? "#e74c3c" : (v >= CONFIG.graphs.reef1 ? "#e67e22" : "#000");
             cS += `<line x1="${px}" y1="${py}" x2="${x}" y2="${y}" stroke="${c}" class="${isHercules?'line-hercules':''}" />`;
         }
     });
-    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#ffffff' };
-    const colorKey = id === 'sog-graph' && displayModeSog === 'VMG' ? '#64ffda' : clrs[id];
-    svg.innerHTML = isTws ? `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="rgba(255,255,255,0.08)" stroke="none" />${cS}` : `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="${colorKey}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${colorKey}" />`;
+    const clrs = { 'stw-graph': '#2ecc71', 'sog-graph': '#f39c12', 'depth-graph': '#3498db', 'tws-graph': '#000' };
+    const colorKey = id === 'sog-graph' && displayModeSog === 'VMG' ? '#16a085' : clrs[id];
+    svg.innerHTML = isTws ? `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="rgba(0,0,0,0.05)" stroke="none" />${cS}` : `${grids}<path d="${pD} L ${((d.length-1)/(CONFIG.graphs.samples-1))*w} ${h} L 0 ${h} Z" fill="${colorKey}22" stroke="none" /><path d="${pD}" class="${isHercules?'line-hercules':''}" fill="none" stroke="${colorKey}" />`;
 }
 
 // ==========================================================================
@@ -384,7 +432,7 @@ function toggleFocusMode(type, element) {
         clearTimeout(pressTimer); if (isLongPressActive) return;
         const currentTime = new Date().getTime(), tapDelay = currentTime - lastTapTime;
         if (tapDelay < 300 && tapDelay > 0) { clearTimeout(tapTimeout); if (!isFocusActive) { graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard'; localStorage.setItem('mode_' + type, graphModes[type]); } lastTapTime = 0; }
-        else { lastTapTime = currentTime; tapTimeout = setTimeout(() => { if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); else if (!isFocusActive && type === 'sog') { displayModeSog = (displayModeSog === 'SOG') ? 'VMG' : 'SOG'; el.style.backgroundColor = "rgba(100, 255, 218, 0.1)"; setTimeout(() => el.style.backgroundColor = "", 150); } }, 250); }
+        else { lastTapTime = currentTime; tapTimeout = setTimeout(() => { if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); else if (!isFocusActive && type === 'sog') { displayModeSog = (displayModeSog === 'SOG') ? 'VMG' : 'SOG'; el.style.backgroundColor = "rgba(0, 0, 0, 0.05)"; setTimeout(() => el.style.backgroundColor = "", 150); } }, 250); }
     });
     el.addEventListener('pointerleave', () => clearTimeout(pressTimer));
 });
@@ -414,24 +462,19 @@ function startDynamicSimulation() {
     let sim = { hdg: 45, tws: 12, twd: 90, depth: 12, stw: 5, leeway: 0, currentSpeed: 1.5, currentDir: 90, startTime: Date.now() };
     simInterval = setInterval(() => {
         const elapsed = (Date.now() - sim.startTime) / 1000;
-        if (elapsed > 120 && elapsed < 121) sim.twd = Math.random() * 360;
         sim.twd = (sim.twd + (Math.sin(elapsed / 20) * 0.5) + 360) % 360;
-        const inGust = (elapsed % 40) < 5; const targetTws = (inGust ? 18 : 10) + Math.sin(elapsed / 10) * 2;
+        const targetTws = 10 + Math.sin(elapsed / 10) * 2;
         sim.tws += (targetTws - sim.tws) * 0.05; sim.hdg = (sim.hdg + (Math.random() - 0.5) * 1 + 360) % 360;
         let twaRel = (sim.twd - sim.hdg + 360) % 360; if (twaRel > 180) twaRel -= 360;
-        let targetStw = 3 + (4 * Math.sin((Math.abs(twaRel) - 45) * Math.PI / 125)); sim.stw += (Math.max(3, Math.min(8, targetStw)) - sim.stw) * 0.05;
-        const rawLeeway = Math.sin(degToRad(twaRel)) * 4; sim.leeway += (rawLeeway - sim.leeway) * 0.05;
-
-        const bX = sim.stw * Math.sin(degToRad(sim.hdg + sim.leeway)), bY = sim.stw * Math.cos(degToRad(sim.hdg + sim.leeway));
-        const cX = sim.currentSpeed * Math.sin(degToRad(sim.currentDir)), cY = sim.currentSpeed * Math.cos(degToRad(sim.currentDir));
-        const sog = Math.sqrt(Math.pow(bX + cX, 2) + Math.pow(bY + cY, 2)), cog = (radToDeg(Math.atan2(bX + cX, bY + cY)) + 360) % 360;
-
+        let targetStw = 5; sim.stw += (targetStw - sim.stw) * 0.05;
+        const bX = sim.stw * Math.sin(degToRad(sim.hdg)), bY = sim.stw * Math.cos(degToRad(sim.hdg));
+        const sog = sim.stw, cog = sim.hdg;
         const twaRad = degToRad(twaRel), aws = Math.sqrt(Math.pow(sim.stw, 2) + Math.pow(sim.tws, 2) + 2 * sim.stw * sim.tws * Math.cos(twaRad));
         const awa = Math.atan2(sim.tws * Math.sin(twaRad), sim.stw + sim.tws * Math.cos(twaRad));
         processIncomingData("environment.wind.speedApparent", ktsToMs(aws)); processIncomingData("environment.wind.angleApparent", awa);
         processIncomingData("environment.depth.belowTransducer", sim.depth); processIncomingData("navigation.headingTrue", degToRad(sim.hdg));
         processIncomingData("navigation.speedThroughWater", ktsToMs(sim.stw)); processIncomingData("navigation.speedOverGround", ktsToMs(sog));
-        processIncomingData("navigation.courseOverGroundTrue", degToRad(cog)); processIncomingData("navigation.position", { latitude: 45.0, longitude: 12.0 });
+        processIncomingData("navigation.courseOverGroundTrue", degToRad(cog));
     }, 1000);
 }
 
@@ -439,6 +482,6 @@ function startDynamicSimulation() {
 // 10. INIT
 // ==========================================================================
 window.addEventListener('contextmenu', e => e.preventDefault(), true);
-(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 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 ? "#000" : "#bbb"); 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);

package/index.html

@@ -122,23 +122,24 @@
                 
                 <g id="ticks"></g>
                 
-                <g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="hanging" font-family="Arial" font-weight="bold">
-                    <!-- Etichette Principali -->
-                    <text font-size="16" transform="translate(200, 65)">0</text>
-                    <text font-size="16" transform="translate(335, 200) rotate(90)">90</text>
-                    <text font-size="16" transform="translate(65, 200) rotate(-90)">90</text>
-                    <text font-size="16" transform="translate(200, 335) rotate(180)">180</text>
+                <!-- Etichette riposizionate con raggio ridotto per un contatto perfetto con la ghiera -->
+                <g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-weight="bold">
+                    <!-- Etichette Principali (Distanza 126px) -->
+                    <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>
                     
-                    <!-- Etichette Intermedie (30-150 Gradi) -->
-                    <text font-size="11" transform="translate(267.5, 83) rotate(30)">30</text>
-                    <text font-size="11" transform="translate(317, 132.5) rotate(60)">60</text>
-                    <text font-size="11" transform="translate(317, 267.5) rotate(120)">120</text>
-                    <text font-size="11" transform="translate(267.5, 317) rotate(150)">150</text>
+                    <!-- Etichette Intermedie (Distanza 125px) -->
+                    <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(132.5, 83) rotate(-30)">30</text>
-                    <text font-size="11" transform="translate(83, 132.5) rotate(-60)">60</text>
-                    <text font-size="11" transform="translate(83, 267.5) rotate(-120)">120</text>
-                    <text font-size="11" transform="translate(132.5, 317) rotate(-150)">150</text>
+                    <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)">

package/index.js

@@ -63,8 +63,8 @@ module.exports = function (app) {
           longWindow: {
             type: 'number',
             title: 'Long Average Window (ms)',
-            description: "Time buffer used for 'MEAN' values (e.g., 60000ms = 1 min). Higher values provide more stability but slower reaction.",
-            default: 60000
+            description: "Time buffer for 'MEAN' values. Larger windows produce smoother numbers but increase the 'Unstable' (orange) alerts during maneuvers or in gusty conditions, as data coherence decreases over time.",
+            default: 30000
           },
           smoothWindow: {
             type: 'number',

package/package.json

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

package/settings.json

@@ -8,11 +8,11 @@
     "red": 20.0
   },
   "averages": {
-    "long_window": 60000,
+    "long_window": 3000,
     "smooth_window": 2000
   },
   "hercules_ranges": {
     "speed": 4.0,
     "wind": 10.0
   }
-}
+}

package/style.css

@@ -1,16 +1,15 @@
 /* ==========================================================================
-   1. BASE E RESET DI SISTEMA
+   1. BASE E RESET DI SISTEMA (GIORNO: SFONDO CHIARO)
    ========================================================================== */
 body {
-    background-color: #000;
-    color: #fff;
+    background-color: #fff;
+    color: #000;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
     margin: 0;
     padding: 0;
     height: 100vh;
     width: 100vw;
     overflow: hidden;
-    /* Inibisce i gesti di sistema per favorire Long Press e Swipe della dashboard */
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     user-select: none;
@@ -27,7 +26,6 @@ body {
     padding: 5px;
     box-sizing: border-box;
     gap: 8px;
-    /* Rapporto Standard: Lati flessibili, Centro bilanciato a 1.5fr */
     grid-template-columns: minmax(180px, 1fr) minmax(auto, 1.5fr) minmax(180px, 1fr);
     grid-template-rows: 100%;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
@@ -37,18 +35,18 @@ body {
 .side-panel {
     display: flex;
     flex-direction: column;
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(0, 0, 0, 0.03);
     border-radius: 12px;
     height: 100%;
     overflow: hidden;
-    gap: 2px; /* Massimizza lo spazio per i 5 box verticali */
+    gap: 2px;
 }
 
 .left-panel { grid-column: 1; }
 
 .center-panel {
     grid-column: 2;
-    position: relative; /* Indispensabile per posizionare l'etichetta STATUS in alto a dx */
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -64,34 +62,32 @@ body {
 }
 
 /* ==========================================================================
-   3. DATA-BOX E TIPOGRAFIA (UNITA' ELASTICHE CQH/CLAMP)
+   3. DATA-BOX E TIPOGRAFIA
    ========================================================================== */
 .data-box {
     position: relative;
-    border-bottom: 1px solid #222;
+    border-bottom: 1px solid #eee;
     padding: 2px 4px;
     display: flex;
     flex-direction: column;
     width: 100%;
     box-sizing: border-box;
-    container-type: size; /* Permette l'uso di cqh per i font */
-    flex: 1 1 0px; /* Distribuzione equa dello spazio verticale disponibile */
+    container-type: size;
+    flex: 1 1 0px;
     min-height: 0;
     overflow: hidden;
     transition: background-color 0.2s ease;
 }
 
-/* Allineamento speculare dei testi tra colonna SX e DX */
 .left-panel .data-box { align-items: flex-start; text-align: left; }
 .right-panel .data-box { align-items: flex-end; text-align: right; }
 
 .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; }
+.label { color: #888; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
+.unit { color: #aaa; font-size: 0.6rem; font-weight: bold; }
 
-/* Font dinamico per i valori: massimo 22% dell'altezza del box */
 .value {
-    color: #fff;
+    color: #000;
     font-size: clamp(1.2rem, 22cqh, 3rem);
     font-weight: 600;
     line-height: 0.9;
@@ -99,7 +95,6 @@ body {
     padding-bottom: 5px;
 }
 
-/* Centratura verticale automatica per i box senza grafico */
 .value-large, .dual-value-container, .value-with-compass {
     margin-top: auto;
     margin-bottom: auto;
@@ -107,42 +102,36 @@ body {
 
 .value-large { font-size: clamp(1.5rem, 35cqh, 4.5rem); line-height: 0.85; }
 
-/* --- 5. BUSSOLA TWD (FIX ALLINEAMENTO) --- */
 .value-with-compass {
     display: flex;
-    justify-content: space-between; /* Bussola a SX, Valore a DX */
+    justify-content: space-between;
     align-items: center;
     width: 100%;
-    align-self: stretch; /* Impedisce al pannello DX di schiacciare il widget a destra */
+    align-self: stretch;
     gap: 5px;
 }
 
-/* TACK (Mure opposte) Layout */
 .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; }
+.dual-label { color: #888; 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; }
 
 /* ==========================================================================
-   4. TACTICAL FOCUS MODE (DUAL SCREEN 60/40)
+   4. TACTICAL FOCUS MODE
    ========================================================================== */
 .focus-active .side-panel:not(.has-focus) { display: none !important; }
-
-/* Split: 60% per il grafico scelto, 40% per il vento centrale */
 .focus-active.focus-side-left { grid-template-columns: 3fr 2fr !important; }
 .focus-active.focus-side-left .side-panel.has-focus { grid-column: 1 !important; }
 .focus-active.focus-side-left .center-panel { grid-column: 2 !important; justify-content: center !important; align-items: center !important; }
-
 .focus-active.focus-side-right { grid-template-columns: 2fr 3fr !important; }
 .focus-active.focus-side-right .center-panel { grid-column: 1 !important; justify-content: center !important; align-items: center !important; }
 .focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
 
-/* Espansione box e tipografia massiccia in Focus Mode */
 .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);
+    background: rgba(0, 0, 0, 0.02);
     padding: 2vw 3vw !important;
     display: flex;
     flex-direction: column;
@@ -153,15 +142,14 @@ body {
 .focus-active .is-focused .label-row .label { font-size: 2rem !important; }
 .focus-active .is-focused .label-row .unit { font-size: 2rem !important; }
 .focus-active .is-focused .sparkline path { stroke-width: 2.5px !important; }
-
 .focus-active .center-panel svg#wind-gauge { max-width: 95% !important; max-height: 85vh !important; }
 
 /* ==========================================================================
    5. GRAFICI, SCALE E HERCULES MODE
-   ========================================================================== */
+   ========================================================================= */
 .graph-wrapper {
     position: relative; width: 100%; flex-grow: 1; min-height: 0; margin-top: 4px;
-    display: flex; align-items: stretch; background: rgba(255, 255, 255, 0.03);
+    display: flex; align-items: stretch; background: rgba(0, 0, 0, 0.04);
     border-radius: 4px; gap: 0px !important;
 }
 
@@ -173,7 +161,7 @@ body {
 
 .scale-labels {
     display: flex; flex-direction: column; justify-content: space-between;
-    font-size: 8px; color: #777; font-weight: bold; min-width: 12px;
+    font-size: 8px; color: #444; font-weight: bold; min-width: 12px;
     height: 100%; line-height: 1; padding: 0; border: none !important;
 }
 
@@ -182,10 +170,9 @@ body {
 .right-panel .scale-labels { order: 1; text-align: right; padding-right: 4px; }
 .right-panel .sparkline { order: 2; }
 
-/* Hercules Mode Visuals */
 .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 .scale-labels { color: #ff8888; }
+.box-hercules { background: rgba(255, 0, 0, 0.05) !important; }
+.box-hercules .scale-labels { color: #ff5555; }
 .box-hercules .unit::before, .box-hercules .unit::after, .box-hercules .label::before {
     font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
 }
@@ -193,47 +180,67 @@ body {
 .right-panel .box-hercules .unit::after { content: " HERCULES"; }
 .right-panel .box-hercules .label:only-child::after { content: " HERCULES"; }
 
-/* Colori standard grafici */
 #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: #ffffff; fill: rgba(255, 255, 255, 0.08); }
+#tws-graph { stroke: #000000; fill: rgba(0, 0, 0, 0.08); }
 
 /* ==========================================================================
-   6. WIDGETS E STATUS
+   6. WIDGETS E STATUS (GIORNO)
    ========================================================================== */
 #status {
     position: absolute; top: 10px; right: 10px;
     font-size: 0.6rem; font-weight: 900;
     text-transform: uppercase; z-index: 1000;
-    letter-spacing: 1px; background: rgba(0,0,0,0.4);
+    letter-spacing: 1px; background: rgba(0,0,0,0.05);
     padding: 2px 6px; border-radius: 4px;
 }
-.online { color: #2ecc71; opacity: 0.5; }
-.offline { color: #e74c3c; font-weight: bold; }
+.online { color: #27ae60; opacity: 0.8; }
+.offline { color: #c0392b; font-weight: bold; }
 
 .mini-compass {
     width: min(80cqh, 42cqw); height: min(80cqh, 42cqw); aspect-ratio: 1 / 1;
-    flex-shrink: 0; background: #000; border-radius: 50%; border: 1.5px solid #333;
-    box-shadow: inset 0 0 10px rgba(0,0,0,0.8); transition: all 0.4s ease;
+    flex-shrink: 0; background: #f0f0f0;
+    border-radius: 50%; border: 1.5px solid #ddd;
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); transition: all 0.4s ease;
 }
 
+/* Inversione elementi Mini Bussola TWD - Giorno */
+.mini-compass text:last-of-type { fill: #000 !important; opacity: 0.4; } /* La "S" nera */
+#twd-boat-wrap path { fill: #000 !important; opacity: 0.3; } /* Barca interna nera */
+#twd-wind-chevron { stroke: #000 !important; } /* Forza il triangolino vento a nero in giorno */
+
 #awa-pointer, #twa-pointer, #track-pointer, #twd-arrow, #twd-boat-wrap {
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
+/* Quadrante Vento Centrale - Giorno */
+#wind-gauge circle[fill="#050505"] { fill: #fcfcfc; }
+#wind-gauge circle[fill="#121212"] { fill: #f0f0f0; }
+#boat-icon { fill: #000 !important; opacity: 1; }
+#tick-labels { fill: #444 !important; }
+#aws-val-svg { fill: #000 !important; }
+#aws-display-group text { fill: #333 !important; }
+#fullscreen-hotspot { fill: #eee !important; stroke: #ccc !important; }
+#ticks line[stroke="#fff"] { stroke: #000 !important; }
+#ticks line[stroke="#666"] { stroke: #bbb !important; }
+
+/* Leeway Container - Giorno */
+rect[fill="#222"] { fill: #eee !important; }
+#leeway-val { color: #000 !important; }
+
 /* ==========================================================================
-   7. STATI DI ALLARME E INSTABILITÀ
+   7. STATI DI ALLARME
    ========================================================================== */
-.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #f39c12 !important; }
-.alarm-warning { color: #f1c40f !important; }
+.unstable-data { animation: blink-unstable 1.5s infinite ease-in-out; color: #e67e22 !important; }
+.alarm-warning { color: #f39c12 !important; }
 .alarm-danger { color: #e74c3c !important; font-weight: 900; animation: blink-unstable 1s infinite; }
 @keyframes blink-unstable { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
 
 /* ==========================================================================
-   8. RESPONSIVE (PORTRAIT MODE)
+   8. RESPONSIVE
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
     .main-container { grid-template-columns: 1fr 1fr !important; grid-template-rows: 45vh calc(55vh - 8px) !important; }
@@ -250,38 +257,46 @@ body {
    9. NIGHT MODE (TACTICAL RED)
    ========================================================================== */
 body.night-mode { background-color: #000 !important; color: #ff0000 !important; }
-.night-mode .side-panel { background: rgba(20, 0, 0, 0.4); border: 1px solid #330000; }
+.night-mode .side-panel { background: rgba(20, 0, 0, 0.4) !important; border: 1px solid #330000; }
 .night-mode .data-box { border-bottom-color: #260000; }
 .night-mode .label, .night-mode .unit, .night-mode .dual-label { color: #800000 !important; }
 .night-mode .value, .night-mode .value-large { color: #ff3333 !important; text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); }
 
-/* Grafici Night Mode: Solo linea, no riempimento */
 .night-mode .graph-wrapper { background: rgba(30, 0, 0, 0.3) !important; }
 .night-mode .sparkline path:first-of-type { display: none !important; }
 .night-mode .sparkline path { fill: none !important; stroke: #ff3333 !important; stroke-width: 1.8px !important; opacity: 1 !important; filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.4)); }
-.night-mode .sparkline line { stroke: #4d0000 !important; stroke-width: 0.7px !important; }
+
+.night-mode .sparkline line { stroke: rgba(255, 0, 0, 0.15) !important; stroke-width: 0.7px !important; }
 .night-mode #tws-graph line:not([stroke*="rgba"]) { stroke: #ff3333 !important; stroke-width: 1.8px !important; }
 .night-mode .scale-labels { color: #660000 !important; }
 
-/* Hercules & special in Night */
 .night-mode .box-hercules { background: rgba(60, 0, 0, 0.2) !important; }
 .night-mode .line-hercules { filter: drop-shadow(0 0 6px #ff0000) !important; }
 
-/* Wind Gauge Night */
+/* Fix Bussola Centrale Night */
 .night-mode #wind-gauge circle { stroke: #330000; }
+.night-mode #wind-gauge circle[fill="#050505"] { fill: #050505 !important; }
+.night-mode #wind-gauge circle[fill="#121212"] { fill: #121212 !important; }
+.night-mode #fullscreen-hotspot { fill: #000 !important; stroke: #330000 !important; }
+
 .night-mode #ticks line { stroke: #4d0000 !important; }
 .night-mode #tick-labels { fill: #800000 !important; }
-.night-mode #boat-icon { fill: #330000 !important; opacity: 0.6; }
+.night-mode #boat-icon { fill: #330000 !important; opacity: 0.6 !important; }
 .night-mode #aws-val-svg { fill: #ff3333 !important; }
 .night-mode #aws-display-group text { fill: #ff3333 !important; }
 .night-mode #center-glow feDropShadow { flood-color: #ff0000 !important; flood-opacity: 0.6 !important; }
 
-/* Settori Vento Night (Destra tratteggiata) */
+/* Bussola TWD Night */
+.night-mode .mini-compass { border-color: #330000; background: #000; }
+.night-mode .mini-compass text { fill: #800000 !important; }
+.night-mode .mini-compass text:last-of-type { fill: #800000 !important; opacity: 1; } /* La "S" torna rossa */
+.night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; } /* Barca torna rossa */
+.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; stroke-width: 3px !important; opacity: 1 !important; filter: drop-shadow(0 0 4px #ff0000); transform-origin: center; }
+
+/* Vento e Leeway Night */
 .night-mode #wind-gauge path[stroke="#ff0000"] { stroke: #660000 !important; opacity: 0.8; }
 .night-mode #wind-gauge path[stroke="#00ff00"] { stroke: #660000 !important; stroke-dasharray: 4, 3; opacity: 0.8; }
 .night-mode #wind-gauge path[stroke="#ff8800"] { stroke: #330000 !important; stroke-width: 8; }
-
-/* Leeway & Pointer Night */
 .night-mode rect[fill="url(#leeway-grad)"] { fill: url(#leeway-night-grad) !important; }
 .night-mode #leeway-val { fill: #ff3333 !important; }
 .night-mode g[stroke="#555"] line { stroke: #4d0000 !important; }
@@ -292,30 +307,21 @@ body.night-mode { background-color: #000 !important; color: #ff0000 !important;
 .night-mode #twa-pointer path { fill: #800000; stroke: #000; }
 .night-mode #track-pointer path { fill: #ff0000; stroke: #fff; stroke-width: 0.5; }
 
-/* Bussola TWD Night */
-.night-mode .mini-compass { border-color: #330000; background: #000; }
-.night-mode .mini-compass text { fill: #800000 !important; }
-.night-mode #twd-arrow #twd-wind-chevron { stroke: #ff3333 !important; stroke-width: 3px !important; opacity: 1 !important; filter: drop-shadow(0 0 4px #ff0000); transform-origin: center; }
-.night-mode #twd-boat-wrap path { fill: #ff3333 !important; opacity: 0.4 !important; }
-
 /* ==========================================================================
-   11. TREND VENTO E ALLARME STRAMBATA (GYBE)
+   10. TREND VENTO E ALLARME STRAMBATA
    ========================================================================== */
 @keyframes blink-trend { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
 
-/* Stato base dei pallini di trend: discreti al 30% */
 #trend-dot-cw, #trend-dot-ccw, #trend-gauge-cw, #trend-gauge-ccw {
     opacity: 0.3;
     transition: opacity 0.3s ease;
 }
 
-/* Quando attivi: brillano al 100% e lampeggiano */
 .is-trending {
     opacity: 1 !important;
     animation: blink-trend 1s infinite !important;
 }
 
-/* Allarme Strambata: Rosso fisso con bagliore neon massimo */
 .is-gybing {
     opacity: 1 !important;
     animation: none !important;

package/test.html

@@ -68,4 +68,3 @@
     </script>
 </body>
 </html>
----Fine Codice ---