@sailingrotevista/rotevista-dash 7.0.45 → 8.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of @sailingrotevista/rotevista-dash might be problematic. Click here for more details.

Files changed (19) hide show
  1. package/README.md +28 -70
  2. package/index.js +14 -0
  3. package/package.json +26 -1
  4. package/public/assets/dash-DmyxO1aO.png +0 -0
  5. package/public/assets/index-BFSy7dOW.css +1 -0
  6. package/public/assets/index-BHhAwNqq.js +9 -0
  7. package/public/assets/manifest-Ea_0WKQ8.json +17 -0
  8. package/public/icons/dash.png +0 -0
  9. package/public/index.html +23 -0
  10. package/public/manifest.json +17 -0
  11. package/app.js +0 -1505
  12. package/charts.js +0 -305
  13. package/debug.html +0 -1037
  14. package/gauge.js +0 -90
  15. package/index.html +0 -264
  16. package/style.css +0 -640
  17. package/utils.js +0 -148
  18. package/weather-radar.js +0 -305
  19. package/weather_debug.html +0 -181
package/gauge.js DELETED
@@ -1,90 +0,0 @@
1
- /**
2
- * ==========================================================================
3
- * Sailing Dashboard Pro - Central Compass & Wind Gauge Engine
4
- * ==========================================================================
5
- * Gestisce l'aggiornamento grafico dei puntatori analogici (AWA, TWA),
6
- * dello scarroccio (Leeway), della rotta (Track) e dei trend della bussola.
7
- * file gauge.js
8
- */
9
-
10
- // 1. VARIABILI DI STATO DELLE ROTAZIONI (Estratte da app.js)
11
- let curAwaRot = 0, curTwaRot = 0, curTrackRot = 0, curTwdRoseRot = 0;
12
- let curBoatCompassRot = 0, curWindCompassRot = 0;
13
- let smoothedLeeway = 0;
14
-
15
- /**
16
- * Aggiorna la visualizzazione grafica dello scarroccio (Leeway Slider)
17
- */
18
- function updateLeewayDisplay(deg) {
19
- const c = 125, px = 125/20; let w = Math.min(Math.abs(deg)*px, 125);
20
- ui.leewayMask.setAttribute('x', deg >= 0 ? c : c - w); ui.leewayMask.setAttribute('width', w);
21
- ui.leewayVal.textContent = `LEEWAY: ${deg.toFixed(1)}°`;
22
- }
23
-
24
- /**
25
- * Genera dinamicamente i ticks sul quadrante della bussola centrale (ex genTicks)
26
- */
27
- function initCompassTicks() {
28
- const c = document.getElementById('ticks');
29
- if (c) {
30
- c.innerHTML = ""; // Pulisce i tick esistenti prima del disegno
31
- for (let i = 0; i < 360; i += 10) {
32
- const l = document.createElementNS("http://www.w3.org/2000/svg", "line");
33
- const m = i % 30 === 0;
34
- l.setAttribute("x1", "200"); l.setAttribute("y1", "40"); l.setAttribute("x2", "200"); l.setAttribute("y2", (m ? 60 : 50));
35
- l.setAttribute("stroke", m ? "#000" : "#bbb"); l.setAttribute("stroke-width", m ? "2" : "1");
36
- l.setAttribute("transform", `rotate(${i}, 200, 200)`); c.appendChild(l);
37
- }
38
- }
39
- }
40
-
41
- /**
42
- * Aggiorna tutti gli elementi analogici della Bussola Centrale e del Mini Compass
43
- */
44
- function updateCentralGauge(store, ui, now, isNavigating, sogKts, stwKts, rawAws, awsVal) {
45
-
46
- // A. Visualizzazione Testuale dell'Apparent Wind (AWS) al centro della bussola
47
- if (rawAws !== undefined && rawAws !== null && !isNaN(awsVal)) {
48
- const strVal = awsVal.toFixed(1);
49
- let awsSvgEl = document.getElementById('aws-val-svg');
50
- if (awsSvgEl) {
51
- if (awsSvgEl.textContent !== strVal) {
52
- awsSvgEl.textContent = strVal;
53
- }
54
- }
55
- }
56
-
57
- // B. Rotazione dei puntatori analogici di AWA (Apparent) e TWA (True) con passaggio di timestamp "now"
58
- const smAwa = getCircularAverageFromBuffer(store.smoothBuf.awa, 2000, true, now);
59
- const smTwa = getCircularAverageFromBuffer(store.smoothBuf.twa, 2000, true, now);
60
- if (smAwa) ui.awa.setAttribute('transform', `rotate(${curAwaRot = getShortestRotation(curAwaRot, radToDeg(smAwa.val))}, 200, 200)`);
61
- if (smTwa) ui.twa.setAttribute('transform', `rotate(${curTwaRot = getShortestRotation(curTwaRot, radToDeg(smTwa.val))}, 200, 200)`);
62
-
63
- // C. Calcolo dello Scarroccio (Leeway) e orientamento del vettore Track
64
- if (store.raw["navigation.courseOverGroundTrue"] !== undefined && store.raw["navigation.headingTrue"] !== undefined) {
65
- let driftDeg = radToDeg((store.raw["navigation.courseOverGroundTrue"] - store.raw["navigation.headingTrue"] + Math.PI * 3) % (2 * Math.PI) - Math.PI);
66
- smoothedLeeway = (sogKts < CONFIG.averaging.minSpeed) ? 0 : (smoothedLeeway * 0.9) + (driftDeg * 0.1);
67
- curTrackRot = getShortestRotation(curTrackRot, smoothedLeeway);
68
- ui.track.setAttribute('transform', `rotate(${curTrackRot}, 200, 200)`);
69
- ui.leewayVal.style.color = (Math.abs(sogKts - stwKts) > 0.5 && Math.abs(smoothedLeeway) > 7) ? "#ff9800" : "";
70
- updateLeewayDisplay(Math.max(-20, Math.min(20, smoothedLeeway)));
71
- }
72
-
73
- // D. Orientamento delle icone della barca e del vento nel Mini-Compass (TWD)
74
- // Sincronizzato con la media a 30s (longBuf) e fallback istantaneo su store.raw per allineamento al testo
75
- const longWindow = CONFIG.averaging.longWindow || 30000;
76
- const smHdgIcons = getCircularAverageFromBuffer(store.longBuf.hdg, longWindow * 2, false, now);
77
- const smTwdIcons = getCircularAverageFromBuffer(store.longBuf.twd, longWindow, false, now);
78
-
79
- const twdAngleRad = smTwdIcons ? smTwdIcons.val : store.raw["environment.wind.directionTrue"];
80
- if (twdAngleRad !== undefined && twdAngleRad !== null) {
81
- curWindCompassRot = getShortestRotation(curWindCompassRot, radToDeg(twdAngleRad));
82
- ui.twdArrow.setAttribute('transform', `rotate(${curWindCompassRot}, 20, 20)`);
83
- }
84
-
85
- const hdgAngleRad = smHdgIcons ? smHdgIcons.val : store.raw["navigation.headingTrue"];
86
- if (hdgAngleRad !== undefined && hdgAngleRad !== null) {
87
- curBoatCompassRot = getShortestRotation(curBoatCompassRot, radToDeg(hdgAngleRad));
88
- ui.twdBoat.setAttribute('transform', `rotate(${curBoatCompassRot}, 20, 20)`);
89
- }
90
- }
package/index.html DELETED
@@ -1,264 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="it">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
- <meta name="apple-mobile-web-app-capable" content="yes">
7
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
- <link rel="manifest" href="manifest.json">
9
-
10
- <!-- Icona standard per la scheda del browser (Favicon) -->
11
- <link rel="icon" type="image/png" href="icons/dash.png">
12
-
13
- <!-- Icona per Bookmark e schermata Home su Apple iPad, iPhone e Mac -->
14
- <link rel="apple-touch-icon" href="icons/dash.png">
15
- <title>Sailing Dashboard Pro</title>
16
- <link rel="stylesheet" href="style.css">
17
- </head>
18
- <body>
19
-
20
- <div class="main-container">
21
-
22
- <!-- COLONNA SINISTRA -->
23
- <div class="data-box box-stw">
24
- <div class="label-row"><span class="label">STW</span><span class="unit">kts</span></div>
25
- <span class="value" id="stw">0.0</span>
26
- <div class="graph-wrapper">
27
- <svg class="sparkline" id="stw-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
28
- <div class="scale-labels" id="stw-scale"></div>
29
- </div>
30
- </div>
31
-
32
- <div class="data-box box-sog">
33
- <div class="label-row"><span class="label" id="sog-vmg-label">SOG</span><span class="unit">kts</span></div>
34
- <span class="value" id="sog">0.0</span>
35
- <div class="graph-wrapper">
36
- <svg class="sparkline" id="sog-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
37
- <div class="scale-labels" id="sog-scale"></div>
38
- </div>
39
- </div>
40
-
41
- <div class="data-box box-hdg">
42
- <div class="label-row"><span class="label">HEADING (MEAN)</span></div>
43
- <span class="value-large" id="hdg">000&deg;</span>
44
- </div>
45
-
46
- <div class="data-box box-cog">
47
- <div class="label-row"><span class="label">COG (MEAN)</span></div>
48
- <span class="value-large" id="cog">000&deg;</span>
49
- </div>
50
-
51
- <div class="data-box box-tack">
52
- <div class="label-row"><span class="label" id="tack-label">TACK</span></div>
53
- <div class="dual-value-container">
54
- <div class="dual-value-col tack-hdg-col">
55
- <span class="dual-label">HDG</span>
56
- <span class="value dual-val" id="tack-hdg">---&deg;</span>
57
- </div>
58
- <div class="dual-value-col tack-cog-col">
59
- <span class="dual-label">COG</span>
60
- <span class="value dual-val" id="tack-cog">---&deg;</span>
61
- </div>
62
- </div>
63
- </div>
64
-
65
- <!-- BUSSOLA CENTRALE -->
66
- <div class="box-gauge">
67
- <!-- STATO CONNESSIONE -->
68
- <div id="status" class="offline">OFFLINE</div>
69
-
70
- <!-- BUSSOLA 1: ANALOGICA STANDARD (Visibile all'avvio) -->
71
- <svg id="wind-gauge" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet">
72
- <defs>
73
- <clipPath id="boat-clip"><circle cx="200" cy="200" r="50" /></clipPath>
74
- <linearGradient id="axiom-grad" x1="0%" y1="0%" x2="0%" y2="100%">
75
- <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
76
- <stop offset="100%" style="stop-color:#888888;stop-opacity:1" />
77
- </linearGradient>
78
- <linearGradient id="leeway-grad" x1="0%" y1="0%" x2="100%" y2="0%">
79
- <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" />
80
- <stop offset="25%" style="stop-color:#ff8800;stop-opacity:1" />
81
- <stop offset="50%" style="stop-color:#00ff00;stop-opacity:1" />
82
- <stop offset="75%" style="stop-color:#ff8800;stop-opacity:1" />
83
- <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" />
84
- </linearGradient>
85
- <linearGradient id="leeway-night-grad" x1="0%" y1="0%" x2="100%" y2="0%">
86
- <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" />
87
- <stop offset="50%" style="stop-color:#330000;stop-opacity:1" />
88
- <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" />
89
- </linearGradient>
90
- <clipPath id="leeway-clip">
91
- <rect id="leeway-mask-rect" x="125" y="0" width="0" height="12" rx="2" />
92
- </clipPath>
93
- <filter id="center-glow" x="-20%" y="-20%" width="140%" height="140%">
94
- <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#aaaaaa" flood-opacity="0.5" />
95
- </filter>
96
- </defs>
97
-
98
- <circle cx="200" cy="200" r="160" fill="#050505" />
99
- <circle cx="200" cy="200" r="125" fill="#121212" />
100
-
101
- <path d="M 82.0 101.0 A 154 154 0 0 1 142.3 57.2" fill="none" stroke="#ff0000" stroke-width="12" />
102
- <path d="M 257.7 57.2 A 154 154 0 0 1 318.0 101.0" fill="none" stroke="#00ff00" stroke-width="12" />
103
- <path d="M 265.1 339.6 A 154 154 0 0 1 134.9 339.6" fill="none" stroke="#ff8800" stroke-width="12" />
104
-
105
- <g id="ticks"></g>
106
-
107
- <g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-weight="bold">
108
- <text font-size="16" transform="translate(200, 74)">0</text>
109
- <text font-size="16" transform="translate(326, 200) rotate(90)">90</text>
110
- <text font-size="16" transform="translate(74, 200) rotate(-90)">90</text>
111
- <text font-size="16" transform="translate(200, 326) rotate(180)">180</text>
112
- <text font-size="11" transform="translate(262.5, 91.7) rotate(30)">30</text>
113
- <text font-size="11" transform="translate(308.3, 137.5) rotate(60)">60</text>
114
- <text font-size="11" transform="translate(308.3, 262.5) rotate(120)">120</text>
115
- <text font-size="11" transform="translate(262.5, 308.3) rotate(150)">150</text>
116
- <text font-size="11" transform="translate(137.5, 91.7) rotate(-30)">30</text>
117
- <text font-size="11" transform="translate(91.7, 137.5) rotate(-60)">60</text>
118
- <text font-size="11" transform="translate(91.7, 262.5) rotate(-120)">120</text>
119
- <text font-size="11" transform="translate(137.5, 308.3) rotate(-150)">150</text>
120
- </g>
121
-
122
- <g id="track-pointer" transform="rotate(0, 200, 200)">
123
- <path d="M200,42 L194,58 L206,58 Z" fill="#007aff" stroke="#fff" stroke-width="0.5" />
124
- </g>
125
-
126
- <circle id="fullscreen-hotspot" cx="200" cy="200" r="55" fill="#181818" stroke="#333" stroke-width="1" filter="url(#center-glow)" cursor="pointer" />
127
-
128
- <path id="boat-icon" d="M200,150 Q165,185 170,250 Q165,190 200,173 Q235,190 230,250 Q235,185 200,150 Z"
129
- fill="url(#axiom-grad)" transform="translate(0, 5)" clip-path="url(#boat-clip)" style="pointer-events: none;" />
130
-
131
- <g id="aws-display-group" transform="translate(200, 265)">
132
- <text x="0" y="0" fill="#777" font-size="10" font-weight="bold" text-anchor="middle" text-transform="uppercase">Apparent Wind kts</text>
133
- <text id="aws-val-svg" x="0" y="42" fill="#fff" font-size="52" font-weight="bold" text-anchor="middle">0.0</text>
134
- </g>
135
-
136
- <g id="awa-pointer" transform="rotate(0, 200, 200)" opacity="0.9">
137
- <path d="M 200,70 L 213,95 L 200,145 L 187,95 Z" fill="#ff8c00" stroke="#000" stroke-width="1" />
138
- <text x="200" y="90" fill="#000" font-size="10" font-weight="900" text-anchor="middle" font-family="Arial Black">A</text>
139
- </g>
140
-
141
- <g id="twa-pointer" transform="rotate(0, 200, 200)" opacity="0.9">
142
- <path d="M 200,92 A 8,8 0 0 1 208,100 C 208,108 200,128 200,128 C 200,128 192,108 192,100 A 8,8 0 0 1 200,92 Z"
143
- fill="#ffff00" stroke="#000" stroke-width="0.8" />
144
- <text x="200" y="106" fill="#000" font-size="9" font-weight="900" text-anchor="middle" font-family="Arial Black">T</text>
145
- <circle id="trend-gauge-cw" cx="215" cy="110" r="4" fill="#bbb" />
146
- <circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#bbb" />
147
- </g>
148
-
149
- <g transform="translate(75, 395)">
150
- <text x="125" y="-12" id="leeway-val" fill="#aaa" font-size="11" text-anchor="middle" font-weight="bold">LEEWAY: 0.0&deg;</text>
151
- <rect x="0" y="0" width="250" height="12" fill="#222" rx="3" />
152
- <rect x="0" y="0" width="250" height="12" fill="url(#leeway-grad)" clip-path="url(#leeway-clip)" rx="3" />
153
- <g stroke="#555" stroke-width="1">
154
- <line x1="0" y1="-2" x2="0" y2="14" /><line x1="62.5" y1="2" x2="62.5" y2="10" />
155
- <line x1="125" y1="-2" x2="125" y2="14" /><line x1="187.5" y1="2" x2="187.5" y2="10" />
156
- <line x1="250" y1="-2" x2="250" y2="14" />
157
- </g>
158
- <g fill="#555" font-size="8" text-anchor="middle" font-weight="bold">
159
- <text x="0" y="24">-20&deg;</text><text x="62.5" y="24">-10</text>
160
- <text x="125" y="24">0&deg;</text><text x="187.5" y="24">10</text>
161
- <text x="250" y="24">20&deg;</text>
162
- </g>
163
- </g>
164
- </svg>
165
-
166
- <!-- BUSSOLA 2: RADAR HISTORICAL (Nascosto all'avvio) -->
167
- <svg id="wind-radar" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet" style="display: none;">
168
- <defs id="radar-gradients">
169
- <clipPath id="radar-boat-clip"><circle cx="200" cy="200" r="50" /></clipPath>
170
- <filter id="radar-center-glow" x="-20%" y="-20%" width="140%" height="140%">
171
- <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#aaaaaa" flood-opacity="0.5" />
172
- </filter>
173
- </defs>
174
-
175
- <circle cx="200" cy="200" r="160" fill="rgb(252, 252, 252)" />
176
- <circle cx="200" cy="200" r="125" fill="rgb(240, 240, 240)" />
177
-
178
- <g id="radar-ticks"></g>
179
-
180
- <g id="radar-tick-labels" fill="#000000" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-weight="bold">
181
- <text font-size="16" transform="translate(200, 74)">N</text>
182
- <text font-size="16" transform="translate(326, 200) rotate(90)">E</text>
183
- <text font-size="16" transform="translate(74, 200) rotate(-90)">W</text>
184
- <text font-size="16" transform="translate(200, 326) rotate(180)">S</text>
185
-
186
- <text font-size="11" transform="translate(262.5, 91.7) rotate(30)">30</text>
187
- <text font-size="11" transform="translate(308.3, 137.5) rotate(60)">60</text>
188
- <text font-size="11" transform="translate(308.3, 262.5) rotate(120)">120</text>
189
- <text font-size="11" transform="translate(262.5, 308.3) rotate(150)">150</text>
190
- <text font-size="11" transform="translate(137.5, 91.7) rotate(-30)">330</text>
191
- <text font-size="11" transform="translate(91.7, 137.5) rotate(-60)">300</text>
192
- <text font-size="11" transform="translate(91.7, 262.5) rotate(-120)">240</text>
193
- <text font-size="11" transform="translate(137.5, 308.3) rotate(-150)">210</text>
194
- </g>
195
-
196
- <circle id="ora-orbit" cx="200" cy="200" r="67.2" fill="none" stroke="#cfd8dc" stroke-width="1.2" stroke-dasharray="4, 4" />
197
- <g id="radar-rings"></g>
198
-
199
- <circle id="radar-hotspot" cx="200" cy="200" r="55" fill="rgb(238, 238, 238)" stroke="#e0e0e0" stroke-width="1" filter="url(#radar-center-glow)" cursor="pointer" />
200
- <path id="radar-boat-icon" d="M200,150 Q165,185 170,250 Q165,190 200,173 Q235,190 230,250 Q235,185 200,150 Z"
201
- fill="#000000" transform="translate(0, 5)" clip-path="url(#radar-boat-clip)" style="pointer-events: none;" />
202
- </svg>
203
- </div>
204
-
205
- <!-- COLONNA DESTRA -->
206
- <!-- NOTA: Etichetta a SX e Unità a DX nel codice, il CSS usa row-reverse per specchiarli sul bordo -->
207
- <div class="data-box box-depth">
208
- <div class="label-row"><span class="label">DEPTH</span><span class="unit">m</span></div>
209
- <span class="value" id="depth">--.-</span>
210
- <div class="graph-wrapper">
211
- <div class="scale-labels" id="depth-scale"></div>
212
- <svg class="sparkline" id="depth-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
213
- </div>
214
- </div>
215
-
216
- <div class="data-box box-tws">
217
- <div class="label-row">
218
- <span class="label" id="tws-aws-label">TWS</span>
219
- <span class="unit">kts</span>
220
- </div>
221
- <span class="value" id="tws">0.0</span>
222
- <div class="graph-wrapper">
223
- <div class="scale-labels" id="tws-scale"></div>
224
- <svg class="sparkline" id="tws-graph" viewBox="0 0 200 40" preserveAspectRatio="none"></svg>
225
- </div>
226
- </div>
227
-
228
- <div class="data-box box-twa">
229
- <div class="label-row"><span class="label">TWA (MEAN)</span></div>
230
- <span class="value-large" id="twa-avg">---&deg;</span>
231
- </div>
232
-
233
- <div class="data-box box-awa">
234
- <div class="label-row"><span class="label">AWA (MEAN)</span></div>
235
- <span class="value-large" id="awa-avg">---&deg;</span>
236
- </div>
237
-
238
- <div class="data-box box-twd">
239
- <div class="label-row"><span class="label">TWD (MEAN)</span></div>
240
- <div class="value-with-compass">
241
- <svg class="mini-compass" viewBox="0 0 40 40">
242
- <circle cx="20" cy="20" r="18.5" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="1.2"/>
243
- <text x="20" y="8" fill="#e74c3c" font-size="5.5" text-anchor="middle" font-weight="900">N</text>
244
- <text x="20" y="36" fill="#000" font-size="5.5" text-anchor="middle" font-weight="900">S</text>
245
- <g id="twd-boat-wrap" transform="rotate(0, 20, 20)">
246
- <path d="M 20,17 L 17,26 L 20,24.5 L 23,26 Z" fill="#000" opacity="0.3" />
247
- </g>
248
- <g id="twd-arrow" transform="rotate(0, 20, 20)">
249
- <path id="twd-wind-chevron" d="M 17,5 L 20,7.5 L 23,5" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
250
- <circle id="trend-dot-cw" cx="24" cy="7.5" r="1.5" fill="#bbb" />
251
- <circle id="trend-dot-ccw" cx="16" cy="7.5" r="1.5" fill="#bbb" />
252
- </g>
253
- </svg>
254
- <span class="value-large" id="twd-avg">---&deg;</span>
255
- </div>
256
- </div>
257
- </div>
258
- <script src="utils.js"></script>
259
- <script src="charts.js"></script>
260
- <script src="gauge.js"></script>
261
- <script src="weather-radar.js"></script>
262
- <script src="app.js?v=6.0"></script>
263
- </body>
264
- </html>