@sailingrotevista/rotevista-dash 6.2.8 → 7.0.1

package/charts.js

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

package/gauge.js

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

package/index.html

@@ -215,7 +215,9 @@
             </div>
         </div>
     </div>
-    
+    <script src="utils.js"></script>
+    <script src="charts.js"></script>
+    <script src="gauge.js"></script>
     <script src="app.js?v=6.0"></script>
 </body>
 </html>

package/package.json

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