@sailingrotevista/rotevista-dash 7.0.19 → 7.0.22
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.
- package/app.js +7 -12
- package/index.html +90 -97
- package/package.json +1 -1
- package/style.css +0 -30
package/app.js
CHANGED
|
@@ -1264,14 +1264,11 @@ async function init() {
|
|
|
1264
1264
|
if (activeInstrument === 'gauge') {
|
|
1265
1265
|
twdPressTimer = setTimeout(() => {
|
|
1266
1266
|
activeInstrument = 'radar';
|
|
1267
|
-
|
|
1268
|
-
// Spegne l'INTERO contenitore multilivello della bussola analogica
|
|
1269
|
-
document.querySelector('.wind-gauge-container').style.display = 'none';
|
|
1267
|
+
document.getElementById('wind-gauge').style.display = 'none';
|
|
1270
1268
|
document.getElementById('wind-radar').style.display = 'block';
|
|
1271
|
-
|
|
1272
1269
|
renderRadar(); // Disegna immediatamente il radar all'attivazione
|
|
1273
1270
|
twdPressTimer = null;
|
|
1274
|
-
longPressTriggered = true;
|
|
1271
|
+
longPressTriggered = true; // Segnala che la transizione al radar è avvenuta con successo
|
|
1275
1272
|
}, 1000);
|
|
1276
1273
|
}
|
|
1277
1274
|
});
|
|
@@ -1283,13 +1280,13 @@ async function init() {
|
|
|
1283
1280
|
}
|
|
1284
1281
|
} else if (activeInstrument === 'radar') {
|
|
1285
1282
|
if (longPressTriggered) {
|
|
1283
|
+
// Se l'evento di rilascio appartiene al tocco prolungato che ha appena attivato il radar, lo ignoriamo
|
|
1286
1284
|
longPressTriggered = false;
|
|
1287
1285
|
} else {
|
|
1286
|
+
// Altrimenti è un tocco rapido indipendente: torna alla bussola analogica
|
|
1288
1287
|
activeInstrument = 'gauge';
|
|
1289
1288
|
document.getElementById('wind-radar').style.display = 'none';
|
|
1290
|
-
|
|
1291
|
-
// Riaccende l'intero contenitore multilivello della bussola analogica
|
|
1292
|
-
document.querySelector('.wind-gauge-container').style.display = 'flex';
|
|
1289
|
+
document.getElementById('wind-gauge').style.display = 'block';
|
|
1293
1290
|
}
|
|
1294
1291
|
}
|
|
1295
1292
|
});
|
|
@@ -1301,7 +1298,7 @@ async function init() {
|
|
|
1301
1298
|
longPressTriggered = false;
|
|
1302
1299
|
});
|
|
1303
1300
|
}
|
|
1304
|
-
|
|
1301
|
+
|
|
1305
1302
|
// 2. COMANDO TATTICO: Click in qualsiasi punto del radar per tornare all'analogico
|
|
1306
1303
|
const windRadarSvg = document.getElementById('wind-radar');
|
|
1307
1304
|
if (windRadarSvg) {
|
|
@@ -1309,9 +1306,7 @@ async function init() {
|
|
|
1309
1306
|
if (activeInstrument === 'radar') {
|
|
1310
1307
|
activeInstrument = 'gauge';
|
|
1311
1308
|
windRadarSvg.style.display = 'none';
|
|
1312
|
-
|
|
1313
|
-
// Riaccende l'intero contenitore multilivello della bussola analogica
|
|
1314
|
-
document.querySelector('.wind-gauge-container').style.display = 'flex';
|
|
1309
|
+
document.getElementById('wind-gauge').style.display = 'block';
|
|
1315
1310
|
}
|
|
1316
1311
|
});
|
|
1317
1312
|
}
|
package/index.html
CHANGED
|
@@ -67,108 +67,101 @@
|
|
|
67
67
|
<!-- STATO CONNESSIONE -->
|
|
68
68
|
<div id="status" class="offline">OFFLINE</div>
|
|
69
69
|
|
|
70
|
-
<!-- BUSSOLA 1: ANALOGICA STANDARD (
|
|
71
|
-
<
|
|
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>
|
|
72
97
|
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
|
|
110
|
-
<g id="tick-labels" fill="#bbb" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-weight="bold">
|
|
111
|
-
<text font-size="16" transform="translate(200, 74)">0</text>
|
|
112
|
-
<text font-size="16" transform="translate(326, 200) rotate(90)">90</text>
|
|
113
|
-
<text font-size="16" transform="translate(74, 200) rotate(-90)">90</text>
|
|
114
|
-
<text font-size="16" transform="translate(200, 326) rotate(180)">180</text>
|
|
115
|
-
<text font-size="11" transform="translate(262.5, 91.7) rotate(30)">30</text>
|
|
116
|
-
<text font-size="11" transform="translate(308.3, 137.5) rotate(60)">60</text>
|
|
117
|
-
<text font-size="11" transform="translate(308.3, 262.5) rotate(120)">120</text>
|
|
118
|
-
<text font-size="11" transform="translate(262.5, 308.3) rotate(150)">150</text>
|
|
119
|
-
<text font-size="11" transform="translate(137.5, 91.7) rotate(-30)">30</text>
|
|
120
|
-
<text font-size="11" transform="translate(91.7, 137.5) rotate(-60)">60</text>
|
|
121
|
-
<text font-size="11" transform="translate(91.7, 262.5) rotate(-120)">120</text>
|
|
122
|
-
<text font-size="11" transform="translate(137.5, 308.3) rotate(-150)">150</text>
|
|
123
|
-
</g>
|
|
124
|
-
|
|
125
|
-
<circle id="fullscreen-hotspot" cx="200" cy="200" r="55" fill="#181818" stroke="#333" stroke-width="1" filter="url(#center-glow)" cursor="pointer" />
|
|
126
|
-
|
|
127
|
-
<path id="boat-icon" d="M200,150 Q165,185 170,250 Q165,190 200,173 Q235,190 230,250 Q235,185 200,150 Z"
|
|
128
|
-
fill="url(#axiom-grad)" transform="translate(0, 5)" clip-path="url(#boat-clip)" style="pointer-events: none;" />
|
|
129
|
-
|
|
130
|
-
<g id="aws-display-group" transform="translate(200, 265)">
|
|
131
|
-
<text x="0" y="0" fill="#777" font-size="10" font-weight="bold" text-anchor="middle" text-transform="uppercase">Apparent Wind kts</text>
|
|
132
|
-
<text id="aws-val-svg" x="0" y="42" fill="#fff" font-size="52" font-weight="bold" text-anchor="middle">0.0</text>
|
|
133
|
-
</g>
|
|
134
|
-
|
|
135
|
-
<g transform="translate(75, 395)">
|
|
136
|
-
<text x="125" y="-12" id="leeway-val" fill="#aaa" font-size="11" text-anchor="middle" font-weight="bold">LEEWAY: 0.0°</text>
|
|
137
|
-
<rect x="0" y="0" width="250" height="12" fill="#222" rx="3" />
|
|
138
|
-
<rect x="0" y="0" width="250" height="12" fill="url(#leeway-grad)" clip-path="url(#leeway-clip)" rx="3" />
|
|
139
|
-
<g stroke="#555" stroke-width="1">
|
|
140
|
-
<line x1="0" y1="-2" x2="0" y2="14" /><line x1="62.5" y1="2" x2="62.5" y2="10" />
|
|
141
|
-
<line x1="125" y1="-2" x2="125" y2="14" /><line x1="187.5" y1="2" x2="187.5" y2="10" />
|
|
142
|
-
<line x1="250" y1="-2" x2="250" y2="14" />
|
|
143
|
-
</g>
|
|
144
|
-
<g fill="#555" font-size="8" text-anchor="middle" font-weight="bold">
|
|
145
|
-
<text x="0" y="24">-20°</text><text x="62.5" y="24">-10</text>
|
|
146
|
-
<text x="125" y="24">0°</text><text x="187.5" y="24">10</text>
|
|
147
|
-
<text x="250" y="24">20°</text>
|
|
148
|
-
</g>
|
|
149
|
-
</g>
|
|
150
|
-
</svg>
|
|
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>
|
|
151
135
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
<
|
|
155
|
-
|
|
156
|
-
</g>
|
|
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>
|
|
157
140
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
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°</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" />
|
|
161
157
|
</g>
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<
|
|
165
|
-
|
|
166
|
-
<text x="200" y="106" fill="#000" font-size="9" font-weight="900" text-anchor="middle" font-family="Arial Black">T</text>
|
|
167
|
-
<circle id="trend-gauge-cw" cx="215" cy="110" r="4" fill="#bbb" />
|
|
168
|
-
<circle id="trend-gauge-ccw" cx="185" cy="110" r="4" fill="#bbb" />
|
|
158
|
+
<g fill="#555" font-size="8" text-anchor="middle" font-weight="bold">
|
|
159
|
+
<text x="0" y="24">-20°</text><text x="62.5" y="24">-10</text>
|
|
160
|
+
<text x="125" y="24">0°</text><text x="187.5" y="24">10</text>
|
|
161
|
+
<text x="250" y="24">20°</text>
|
|
169
162
|
</g>
|
|
170
|
-
</
|
|
171
|
-
</
|
|
163
|
+
</g>
|
|
164
|
+
</svg>
|
|
172
165
|
|
|
173
166
|
<!-- BUSSOLA 2: RADAR HISTORICAL (Nascosto all'avvio) -->
|
|
174
167
|
<svg id="wind-radar" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet" style="display: none;">
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -602,36 +602,6 @@ body.night-mode {
|
|
|
602
602
|
stroke: #440000 !important;
|
|
603
603
|
}
|
|
604
604
|
|
|
605
|
-
/* ==========================================================================
|
|
606
|
-
13. ARCHITETTURA MULTILIVELLO GPU (60FPS EXTRA LOW-POWER NEEDLES)
|
|
607
|
-
========================================================================== */
|
|
608
|
-
|
|
609
|
-
/* Contenitore di posizionamento assoluto speculare per i due livelli */
|
|
610
|
-
.wind-gauge-container {
|
|
611
|
-
position: relative;
|
|
612
|
-
width: 100%;
|
|
613
|
-
height: 100%;
|
|
614
|
-
max-height: 100%;
|
|
615
|
-
display: flex;
|
|
616
|
-
align-items: center;
|
|
617
|
-
justify-content: center;
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
/* Forziamo l'overlay delle sole lancette ad allinearsi perfettamente sopra lo sfondo */
|
|
621
|
-
#wind-gauge-pointers {
|
|
622
|
-
position: absolute;
|
|
623
|
-
top: 0; left: 0;
|
|
624
|
-
width: 100%; height: 100%;
|
|
625
|
-
object-fit: contain;
|
|
626
|
-
pointer-events: none; /* Cruciale: permette ai clic del mouse/tocco di passare sotto su #fullscreen-hotspot */
|
|
627
|
-
will-change: transform; /* Promuove l'intero overlay a livello GPU composited */
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
/* Applichiamo lo smorzamento fluido a 60fps solo alle frecce ultra-leggere */
|
|
631
|
-
#awa-pointer, #twa-pointer, #track-pointer {
|
|
632
|
-
transition: transform 0.9s cubic-bezier(0.15, 0.85, 0.3, 1);
|
|
633
|
-
}
|
|
634
|
-
|
|
635
605
|
/* ==========================================================================
|
|
636
606
|
13. SMORZAMENTO FLUIDO AGHI A 60FPS (DAMPING HARDWARE) non utilizzato consuma troppa cpu
|
|
637
607
|
==========================================================================
|