bb8d267cd4
• Creato un nuovo file CSS per gli stili del chiosco (kiosk) con variabili, stili per le schede (card) e animazioni. • Aggiunto un file HTML per l'interfaccia della mappa utilizzando Mapbox, inclusi gli stili e il JavaScript per le funzionalità della mappa. • Introdotto un file JSON per i riferimenti ai sensori, definendo percorsi ed elementi per i dati di temperatura, vento, onde, posizione, batteria, motore e sistema. Co-authored-by: Copilot <copilot@github.com>
100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
const paths = [
|
|
"navigation.speedOverGround",
|
|
"environment.depth.belowTransducer",
|
|
]
|
|
window.skPaths = paths;
|
|
|
|
mapboxgl.accessToken = 'pk.eyJ1Ijoic2VzZWUzIiwiYSI6ImNtZ2dydndkMDBsNjUya3NjeW91dW41MzcifQ.M2qxj0wL1W7plRzIataojQ';
|
|
|
|
let map = null;
|
|
let boatMark = null;
|
|
let followBoat = true;
|
|
|
|
window.initMapInstance = (containerId) => {
|
|
map = new mapboxgl.Map({
|
|
container: containerId,
|
|
style: {
|
|
"version": 8,
|
|
"sources": {
|
|
"osm": { "type": "raster", "tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"], "tileSize": 256 },
|
|
"openseamap": { "type": "raster", "tiles": ["https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png"], "tileSize": 256 }
|
|
},
|
|
"layers": [
|
|
{ "id": "osm-layer", "type": "raster", "source": "osm", "minzoom": 0, "maxzoom": 22 },
|
|
{ "id": "openseamap-layer", "type": "raster", "source": "openseamap", "minzoom": 0, "maxzoom": 18 }
|
|
]
|
|
}
|
|
});
|
|
|
|
map.on('dragstart', () => {
|
|
followBoat = false;
|
|
});
|
|
|
|
boatMark = new mapboxgl.Marker({ color: 'red' })
|
|
.setLngLat([9, 9])
|
|
.addTo(map);
|
|
|
|
map.on('load', () => {
|
|
// Area Protetta mock
|
|
map.addSource('area-protetta', {
|
|
'type': 'geojson',
|
|
'data': {
|
|
'type': 'Feature',
|
|
'geometry': {
|
|
'type': 'Polygon',
|
|
'coordinates': [[[9.05, 45.05], [9.15, 45.05], [9.15, 45.15], [9.05, 45.15], [9.05, 45.05]]]
|
|
}
|
|
}
|
|
});
|
|
map.addLayer({
|
|
'id': 'area-layer',
|
|
'type': 'fill',
|
|
'source': 'area-protetta',
|
|
'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.3 }
|
|
});
|
|
});
|
|
};
|
|
|
|
window.resizeMapInstance = () => {
|
|
if (map) map.resize();
|
|
};
|
|
|
|
function movePosition(lng, lat) {
|
|
if (!followBoat || !map) return;
|
|
map.flyTo({ center: [lng, lat], zoom: 14, speed: 1.2 });
|
|
}
|
|
|
|
const host = window.location.host;
|
|
const connection = `ws://${host}/signalk/v1/stream?subscribe=all`;
|
|
const ws = new WebSocket(connection);
|
|
|
|
ws.onmessage = (event) => {
|
|
const msg = JSON.parse(event.data);
|
|
if (msg.updates) {
|
|
msg.updates.forEach(update => {
|
|
if (update.values) {
|
|
update.values.forEach(v => {
|
|
// Aggiorna le card nel dashboard tramite canvas.js
|
|
if (window.updateKioskData) {
|
|
window.updateKioskData(v.path, v.value);
|
|
}
|
|
|
|
if (v.path === "navigation.position" && boatMark) {
|
|
const lng = v.value.longitude;
|
|
const lat = v.value.latitude;
|
|
boatMark.setLngLat([lng, lat]);
|
|
movePosition(lng, lat);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
ws.onerror = (err) => console.error("Errore WebSocket:", err);
|
|
ws.onclose = () => {
|
|
console.log("WebSocket chiuso. Riconnessione tra 5s...");
|
|
setTimeout(() => location.reload(), 5000);
|
|
};
|
|
|
|
// style: 'mapbox://styles/sesee3/cmn9767jg003l01qsbpmace1t/draft'
|