@sailingrotevista/rotevista-dash 2.0.16 → 2.0.17

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.
Files changed (4) hide show
  1. package/app.js +260 -131
  2. package/index.html +35 -81
  3. package/package.json +1 -1
  4. package/style.css +76 -249
package/index.html CHANGED
@@ -11,9 +11,6 @@
11
11
  </head>
12
12
  <body>
13
13
 
14
- <!-- Etichetta stato connessione SignalK -->
15
- <div id="status" class="offline">OFFLINE</div>
16
-
17
14
  <div class="main-container">
18
15
 
19
16
  <!-- ======================================================= -->
@@ -34,10 +31,10 @@
34
31
  </div>
35
32
  </div>
36
33
 
37
- <!-- SOG: Velocità sul fondo (GPS) -->
34
+ <!-- SOG / VMG: Velocità sul fondo o verso il vento -->
38
35
  <div class="data-box">
39
36
  <div class="label-row">
40
- <span class="label">SOG</span>
37
+ <span class="label" id="sog-vmg-label">SOG</span>
41
38
  <span class="unit">kts</span>
42
39
  </div>
43
40
  <span class="value" id="sog">0.0</span>
@@ -83,15 +80,15 @@
83
80
  </div>
84
81
 
85
82
  <!-- ======================================================= -->
86
- <!-- CENTRO: Strumento Vento SVG (Ingrandito e Ottimizzato) -->
83
+ <!-- CENTRO: Strumento Vento SVG (Pannello di Controllo) -->
87
84
  <!-- ======================================================= -->
88
85
  <div class="center-panel">
89
- <!-- ViewBox ottimizzato per ingrandire il diametro (Zoom in) -->
86
+ <!-- Stato Connessione integrato nell'angolo del pannello centrale -->
87
+ <div id="status" class="offline">OFFLINE</div>
88
+
90
89
  <svg id="wind-gauge" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet">
91
90
  <defs>
92
- <!-- Maschera per tagliare la barca esattamente sul bordo del cerchio r=50 -->
93
91
  <clipPath id="boat-clip"><circle cx="200" cy="200" r="50" /></clipPath>
94
- <!-- Gradienti e Maschere per i settori del vento -->
95
92
  <linearGradient id="axiom-grad" x1="0%" y1="0%" x2="0%" y2="100%">
96
93
  <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
97
94
  <stop offset="100%" style="stop-color:#888888;stop-opacity:1" />
@@ -103,74 +100,52 @@
103
100
  <stop offset="75%" style="stop-color:#ff8800;stop-opacity:1" />
104
101
  <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" />
105
102
  </linearGradient>
106
- <!-- Gradiente Leeway per la Night Mode (Rosso cupo al centro, Rosso vivo ai lati) -->
107
103
  <linearGradient id="leeway-night-grad" x1="0%" y1="0%" x2="100%" y2="0%">
108
- <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" /> <!-- Estremo SX: Rosso vivo -->
109
- <stop offset="50%" style="stop-color:#330000;stop-opacity:1" /> <!-- Centro: Rosso cupo -->
110
- <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" /> <!-- Estremo DX: Rosso vivo -->
104
+ <stop offset="0%" style="stop-color:#ff0000;stop-opacity:1" />
105
+ <stop offset="50%" style="stop-color:#330000;stop-opacity:1" />
106
+ <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1" />
111
107
  </linearGradient>
112
108
  <clipPath id="leeway-clip">
113
109
  <rect id="leeway-mask-rect" x="125" y="0" width="0" height="12" rx="2" />
114
110
  </clipPath>
115
-
116
- <!-- Filtro Glow per l'area di interazione (Hotspot) centrale -->
117
111
  <filter id="center-glow" x="-20%" y="-20%" width="140%" height="140%">
118
112
  <feDropShadow dx="0" dy="0" stdDeviation="8" flood-color="#aaaaaa" flood-opacity="0.5" />
119
113
  </filter>
120
114
  </defs>
121
115
 
122
- <!-- Sfondo circolare del quadrante -->
123
116
  <circle cx="200" cy="200" r="160" fill="#050505" />
124
117
  <circle cx="200" cy="200" r="125" fill="#121212" />
125
118
 
126
- <!-- Settori Vento (Rosso/Sinitra, Verde/Dritta, Arancio/Poppa) -->
127
119
  <path d="M 82.0 101.0 A 154 154 0 0 1 142.3 57.2" fill="none" stroke="#ff0000" stroke-width="12" opacity="1"/>
128
120
  <path d="M 257.7 57.2 A 154 154 0 0 1 318.0 101.0" fill="none" stroke="#00ff00" stroke-width="12" opacity="1"/>
129
121
  <path d="M 265.1 339.6 A 154 154 0 0 1 134.9 339.6" fill="none" stroke="#ff8800" stroke-width="12" opacity="1"/>
130
122
 
131
- <!-- Tacche Gradate (Generate dinamicamente da Javascript) -->
132
123
  <g id="ticks"></g>
133
124
 
134
- <!-- Etichette fisse dei Gradi -->
135
125
  <g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="hanging" font-family="Arial" font-weight="bold">
136
126
  <text font-size="16" transform="translate(200, 65)">0</text>
137
127
  <text font-size="16" transform="translate(335, 200) rotate(90)">90</text>
138
128
  <text font-size="16" transform="translate(65, 200) rotate(-90)">90</text>
139
129
  <text font-size="16" transform="translate(200, 335) rotate(180)">180</text>
140
-
141
- <!-- Dettagli 30-150 Gradi -->
142
- <text font-size="11" transform="translate(267.5, 83) rotate(30)">30</text>
143
- <text font-size="11" transform="translate(317, 132.5) rotate(60)">60</text>
144
- <text font-size="11" transform="translate(317, 267.5) rotate(120)">120</text>
145
- <text font-size="11" transform="translate(267.5, 317) rotate(150)">150</text>
146
- <text font-size="11" transform="translate(132.5, 83) rotate(-30)">30</text>
147
- <text font-size="11" transform="translate(83, 132.5) rotate(-60)">60</text>
148
- <text font-size="11" transform="translate(83, 267.5) rotate(-120)">120</text>
149
- <text font-size="11" transform="translate(132.5, 317) rotate(-150)">150</text>
150
130
  </g>
151
131
 
152
- <!-- Puntatore Track / COG (Blu) -->
153
132
  <g id="track-pointer" transform="rotate(0, 200, 200)">
154
133
  <path d="M200,42 L194,58 L206,58 Z" fill="#007aff" stroke="#fff" stroke-width="0.5" />
155
134
  </g>
156
135
 
157
- <!-- Grande area sensibile al tocco (Hotspot) con Glow per Fullscreen -->
158
136
  <circle id="fullscreen-hotspot" cx="200" cy="200" r="55" fill="#181818" stroke="#333" stroke-width="1" filter="url(#center-glow)" cursor="pointer" />
159
137
 
160
- <!-- Icona Barca Centrale (Spinta Y+5 per centratura visiva perfetta) -->
161
138
  <path id="boat-icon" d="M200,150 Q165,185 170,250 Q165,190 200,173 Q235,190 230,250 Q235,185 200,150 Z"
162
139
  fill="url(#axiom-grad)"
163
140
  transform="translate(0, 5)"
164
141
  clip-path="url(#boat-clip)"
165
142
  style="pointer-events: none;" />
166
143
 
167
- <!-- Display Centrale Numerico: Vento Apparente -->
168
144
  <g id="aws-display-group" transform="translate(200, 265)">
169
145
  <text x="0" y="0" fill="#777" font-size="10" font-weight="bold" text-anchor="middle" text-transform="uppercase">Apparent Wind kts</text>
170
146
  <text id="aws-val-svg" x="0" y="42" fill="#fff" font-size="52" font-weight="bold" text-anchor="middle">0.0</text>
171
147
  </g>
172
148
 
173
- <!-- Lancette Dinamiche: AWA (Apparente) e TWA (Reale) -->
174
149
  <g id="awa-pointer" transform="rotate(0, 200, 200)" opacity="0.85">
175
150
  <path d="M200,80 L211,95 L200,145 L189,95 Z" fill="#ff8c00" stroke="#000" stroke-width="1" />
176
151
  <text x="200" y="102" fill="#000" font-size="11" font-weight="900" text-anchor="middle" font-family="Arial Black">A</text>
@@ -183,24 +158,25 @@
183
158
  <circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#ffffff" opacity="0.3" />
184
159
  </g>
185
160
 
186
- <!-- Barra LEEWAY / SCARROCCIO Inferiore -->
187
161
  <g transform="translate(75, 395)">
188
162
  <text x="125" y="-12" id="leeway-val" fill="#aaa" font-size="11" text-anchor="middle" font-weight="bold">LEEWAY: 0.0&deg;</text>
189
163
  <rect x="0" y="0" width="250" height="12" fill="#222" rx="3" />
190
164
  <rect x="0" y="0" width="250" height="12" fill="url(#leeway-grad)" clip-path="url(#leeway-clip)" rx="3" />
191
165
 
192
- <!-- Scala gradi Leeway -->
166
+ <!-- RIPRISTINO SCALA: Tacche ogni 5 gradi (31.25px per intervallo) -->
193
167
  <g stroke="#555" stroke-width="1">
194
- <line x1="0" y1="-2" x2="0" y2="14" />
195
- <line x1="31.25" y1="2" x2="31.25" y2="10" />
196
- <line x1="62.5" y1="2" x2="62.5" y2="10" />
197
- <line x1="93.75" y1="3" x2="93.75" y2="9" />
198
- <line x1="125" y1="-2" x2="125" y2="14" />
199
- <line x1="156.25" y1="3" x2="156.25" y2="9" />
200
- <line x1="187.5" y1="2" x2="187.5" y2="10" />
201
- <line x1="218.75" y1="2" x2="218.75" y2="10" />
202
- <line x1="250" y1="-2" x2="250" y2="14" />
168
+ <line x1="0" y1="-2" x2="0" y2="14" /> <!-- -20° -->
169
+ <line x1="31.25" y1="2" x2="31.25" y2="10" /> <!-- -15° -->
170
+ <line x1="62.5" y1="2" x2="62.5" y2="10" /> <!-- -10° -->
171
+ <line x1="93.75" y1="3" x2="93.75" y2="9" /> <!-- -5° -->
172
+ <line x1="125" y1="-2" x2="125" y2="14" /> <!-- 0° centrale -->
173
+ <line x1="156.25" y1="3" x2="156.25" y2="9" /> <!-- +5° -->
174
+ <line x1="187.5" y1="2" x2="187.5" y2="10" /> <!-- +10° -->
175
+ <line x1="218.75" y1="2" x2="218.75" y2="10" /> <!-- +15° -->
176
+ <line x1="250" y1="-2" x2="250" y2="14" /> <!-- +20° -->
203
177
  </g>
178
+
179
+ <!-- Etichette numeriche riallineate -->
204
180
  <g fill="#555" font-size="8" text-anchor="middle" font-weight="bold">
205
181
  <text x="0" y="24">-20&deg;</text>
206
182
  <text x="62.5" y="24">-10</text>
@@ -217,7 +193,6 @@
217
193
  <!-- ======================================================= -->
218
194
  <div class="side-panel right-panel">
219
195
 
220
- <!-- DEPTH: Profondità sotto il trasduttore -->
221
196
  <div class="data-box">
222
197
  <div class="label-row">
223
198
  <span class="unit">m</span>
@@ -230,7 +205,6 @@
230
205
  </div>
231
206
  </div>
232
207
 
233
- <!-- TWS: Velocità del vento reale -->
234
208
  <div class="data-box">
235
209
  <div class="label-row">
236
210
  <span class="unit">kts</span>
@@ -243,7 +217,6 @@
243
217
  </div>
244
218
  </div>
245
219
 
246
- <!-- TWA: Angolo del vento reale -->
247
220
  <div class="data-box">
248
221
  <div class="label-row">
249
222
  <span class="label">TWA (MEAN)</span>
@@ -251,7 +224,6 @@
251
224
  <span class="value value-large" id="twa-avg">---&deg;</span>
252
225
  </div>
253
226
 
254
- <!-- AWA: Angolo del vento apparente -->
255
227
  <div class="data-box">
256
228
  <div class="label-row">
257
229
  <span class="label">AWA (MEAN)</span>
@@ -259,48 +231,30 @@
259
231
  <span class="value value-large" id="awa-avg">---&deg;</span>
260
232
  </div>
261
233
 
262
- <!-- TWD: Direzione geografica reale del vento (con Bussola) -->
263
234
  <div class="data-box">
264
235
  <div class="label-row">
265
236
  <span class="label">TWD (MEAN)</span>
266
237
  </div>
267
238
  <div class="value-with-compass">
268
239
  <svg class="mini-compass" viewBox="0 0 40 40">
269
- <!-- Cerchio esterno fisso -->
270
- <circle cx="20" cy="20" r="18.5" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1.2"/>
271
-
272
- <!-- Punti Cardinali Nord/Sud -->
273
- <text x="20" y="8" fill="#e74c3c" font-size="5.5" text-anchor="middle" font-weight="900">N</text>
274
- <text x="20" y="36" fill="rgba(255,255,255,0.3)" font-size="5.5" text-anchor="middle" font-weight="900">S</text>
275
-
276
- <!-- Tacche Orizzontali (Est / Ovest) -->
277
- <g stroke="rgba(255,255,255,0.2)" stroke-width="1">
278
- <line x1="2" y1="20" x2="5" y2="20" /> <!-- Ovest -->
279
- <line x1="35" y1="20" x2="38" y2="20" /> <!-- Est -->
280
- </g>
281
-
282
- <!-- 1. SAGOMA BARCA: Ruota con l'Heading (id: twd-boat-wrap) -->
283
- <g id="twd-boat-wrap" transform="rotate(0, 20, 20)">
284
- <path d="M 20,17 L 17,26 L 20,24.5 L 23,26 Z" fill="white" opacity="0.2" />
285
- </g>
286
-
287
- <g id="twd-arrow" transform="rotate(0, 20, 20)">
288
- <path id="twd-wind-chevron" d="M 17,5 L 20,7.5 L 23,5"
289
- fill="none"
290
- stroke="#ffff00"
291
- stroke-width="2.2"
292
- stroke-linecap="round"
293
- stroke-linejoin="round" />
294
- <circle id="trend-dot-cw" cx="24" cy="7.5" r="1.5" fill="#ffffff" opacity="0.3" />
295
- <circle id="trend-dot-ccw" cx="16" cy="7.5" r="1.5" fill="#ffffff" opacity="0.3" />
296
- </g>
297
- </svg>
240
+ <circle cx="20" cy="20" r="18.5" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1.2"/>
241
+ <text x="20" y="8" fill="#e74c3c" font-size="5.5" text-anchor="middle" font-weight="900">N</text>
242
+ <text x="20" y="36" fill="rgba(255,255,255,0.3)" font-size="5.5" text-anchor="middle" font-weight="900">S</text>
243
+ <g id="twd-boat-wrap" transform="rotate(0, 20, 20)">
244
+ <path d="M 20,17 L 17,26 L 20,24.5 L 23,26 Z" fill="white" opacity="0.2" />
245
+ </g>
246
+ <g id="twd-arrow" transform="rotate(0, 20, 20)">
247
+ <path id="twd-wind-chevron" d="M 17,5 L 20,7.5 L 23,5" fill="none" stroke="#ffff00" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
248
+ <circle id="trend-dot-cw" cx="24" cy="7.5" r="1.5" fill="#ffffff" opacity="0.3" />
249
+ <circle id="trend-dot-ccw" cx="16" cy="7.5" r="1.5" fill="#ffffff" opacity="0.3" />
250
+ </g>
251
+ </svg>
298
252
  <span class="value value-large" id="twd-avg">---&deg;</span>
299
253
  </div>
300
254
  </div>
301
255
 
302
- </div> <!-- /Destra -->
303
- </div> <!-- /Main Container -->
256
+ </div>
257
+ </div>
304
258
 
305
259
  <script src="app.js"></script>
306
260
  </body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sailingrotevista/rotevista-dash",
3
- "version": "2.0.16",
3
+ "version": "2.0.17",
4
4
  "description": "Public Wind Dashboard with navigation and course aids",
5
5
  "main": "index.js",
6
6
  "publishConfig": {