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>
264 lines
7.8 KiB
HTML
264 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Mappa SignalK</title>
|
|
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
.icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
transform-origin: center center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.info {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgba(233, 233, 233, 0.412);
|
|
border: 1px solid rgba(233, 233, 233, 0.412);
|
|
padding: 12px 18px;
|
|
border-radius: 20px;
|
|
font-size: 20px;
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.25;
|
|
min-width: 270px;
|
|
z-index: 999;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
<div id="infoBox" class="info">
|
|
Caricamento dati...
|
|
</div>
|
|
|
|
<script>
|
|
// MAPBOX TOKEN
|
|
mapboxgl.accessToken =
|
|
"pk.eyJ1Ijoic2VzZWUzIiwiYSI6ImNtZ2dydndkMDBsNjUya3NjeW91dW41MzcifQ.M2qxj0wL1W7plRzIataojQ";
|
|
|
|
// Centro predefinito
|
|
const defaultCenter = [9.19, 44.41];
|
|
|
|
// MAPPA
|
|
const map = new mapboxgl.Map({
|
|
container: "map",
|
|
style: "mapbox://styles/mapbox/streets-v12",
|
|
center: defaultCenter,
|
|
zoom: 15
|
|
});
|
|
|
|
// FUNZIONE CALCOLO DESTINAZIONE VETTORE
|
|
function destinationPoint([lon, lat], bearingDeg, distanceMeters) {
|
|
const R = 6371000;
|
|
const brng = bearingDeg * Math.PI / 180;
|
|
const d = distanceMeters;
|
|
|
|
const lat1 = lat * Math.PI / 180;
|
|
const lon1 = lon * Math.PI / 180;
|
|
|
|
const lat2 = Math.asin(
|
|
Math.sin(lat1) * Math.cos(d / R) +
|
|
Math.cos(lat1) * Math.sin(d / R) * Math.cos(brng)
|
|
);
|
|
|
|
const lon2 = lon1 + Math.atan2(
|
|
Math.sin(brng) * Math.sin(d / R) * Math.cos(lat1),
|
|
Math.cos(d / R) - Math.sin(lat1) * Math.sin(lat2)
|
|
);
|
|
|
|
return [ lon2 * 180/Math.PI, lat2 * 180/Math.PI ];
|
|
}
|
|
|
|
// QUANDO LA MAPPA È PRONTA
|
|
map.on("load", () => {
|
|
map.addSource("waveVector", {
|
|
type: "geojson",
|
|
data: { type: "Feature", geometry: { type: "LineString", coordinates: [defaultCenter, defaultCenter] }}
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "waveVectorLine",
|
|
type: "line",
|
|
source: "waveVector",
|
|
paint: { "line-color": "#0000ff", "line-width": 6 }
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "waveLabelText",
|
|
type: "symbol",
|
|
source: "waveVector",
|
|
layout: {
|
|
"symbol-placement": "line",
|
|
"text-field": "Direzione Onde",
|
|
"text-size": 30,
|
|
"text-allow-overlap": true
|
|
},
|
|
paint: {
|
|
"text-color": "#0000ff",
|
|
"text-halo-color": "white",
|
|
"text-halo-width": 4
|
|
}
|
|
});
|
|
|
|
map.addSource("windVector", {
|
|
type: "geojson",
|
|
data: { type: "Feature", geometry: { type: "LineString", coordinates: [defaultCenter, defaultCenter] }}
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "windVectorLine",
|
|
type: "line",
|
|
source: "windVector",
|
|
paint: { "line-color": "lime", "line-width": 6 }
|
|
});
|
|
|
|
map.addLayer({
|
|
id: "windLabelText",
|
|
type: "symbol",
|
|
source: "windVector",
|
|
layout: {
|
|
"symbol-placement": "line",
|
|
"text-field": "Direzione Vento",
|
|
"text-size": 30,
|
|
"text-allow-overlap": true
|
|
},
|
|
paint: {
|
|
"text-color": "lime",
|
|
"text-halo-color": "black",
|
|
"text-halo-width": 3
|
|
}
|
|
});
|
|
});
|
|
|
|
// MARKER BARCA
|
|
const boatEl = document.createElement("div");
|
|
boatEl.className = "icon";
|
|
boatEl.innerHTML = "⛵";
|
|
boatEl.style.fontSize = "60px";
|
|
const boatMarker = new mapboxgl.Marker({ element: boatEl }).setLngLat(defaultCenter).addTo(map);
|
|
|
|
// FRECCE
|
|
const arrowEl = document.createElement("div");
|
|
arrowEl.className = "icon";
|
|
arrowEl.innerHTML = `<svg width="80" height="80" viewBox="0 0 100 100"><g id="arrowGroup" transform="rotate(0 50 50)"><polygon points="50,0 90,100 50,75 10,100" fill="blue" /></g></svg>`;
|
|
const arrowMarker = new mapboxgl.Marker({ element: arrowEl }).setLngLat(defaultCenter).addTo(map);
|
|
|
|
const windEl = document.createElement("div");
|
|
windEl.className = "icon";
|
|
windEl.innerHTML = `<svg width="80" height="80" viewBox="0 0 100 100"><g id="windArrowGroup" transform="rotate(0 50 50)"><polygon points="50,0 90,100 50,75 10,100" fill="lime" /></g></svg>`;
|
|
const windMarker = new mapboxgl.Marker({ element: windEl }).setLngLat(defaultCenter).addTo(map);
|
|
|
|
// SIGNALK VARIABILI
|
|
let position=null, waveDir=null, waveHeight=null, wavePeriod=null, windDir=null, windSpeed=null, temperature=null;
|
|
|
|
// WebSocket SK
|
|
const ws = new WebSocket(`ws://${location.host}/signalk/v1/stream?subscribe=all`);
|
|
|
|
ws.onmessage = msg => {
|
|
const data = JSON.parse(msg.data);
|
|
if (!data.updates) return;
|
|
|
|
data.updates.forEach(u => {
|
|
u.values?.forEach(v => {
|
|
|
|
if (v.path === "navigation.position") position = [v.value.longitude, v.value.latitude];
|
|
|
|
if (v.path === "meb.waves.direction") waveDir = v.value;
|
|
if (v.path === "meb.waves.height") waveHeight = v.value;
|
|
if (v.path === "meb.waves.period") wavePeriod = v.value;
|
|
|
|
if (v.path === "meb.wind.direction") windDir = v.value;
|
|
if (v.path === "environment.wind.speedTrue") windSpeed = v.value;
|
|
|
|
if (v.path === "environment.outside.temperature") temperature = v.value;
|
|
});
|
|
});
|
|
|
|
updateMap();
|
|
};
|
|
|
|
// UPDATE MAP
|
|
function updateMap() {
|
|
if (!position) return;
|
|
|
|
boatMarker.setLngLat(position);
|
|
|
|
if (waveDir !== null) {
|
|
const endPoint = destinationPoint(position, waveDir, 1000);
|
|
map.getSource("waveVector").setData({
|
|
type: "Feature",
|
|
geometry: { type: "LineString", coordinates: [position, endPoint] }
|
|
});
|
|
arrowMarker.setLngLat(endPoint);
|
|
document.getElementById("arrowGroup").setAttribute("transform", `rotate(${waveDir} 50 50)`);
|
|
}
|
|
|
|
if (windDir !== null) {
|
|
const windHeading = (windDir + 180) % 360;
|
|
const windEndPoint = destinationPoint(position, windHeading, 1000);
|
|
map.getSource("windVector").setData({
|
|
type: "Feature",
|
|
geometry: { type: "LineString", coordinates: [position, windEndPoint] }
|
|
});
|
|
windMarker.setLngLat(windEndPoint);
|
|
document.getElementById("windArrowGroup").setAttribute("transform", `rotate(${windHeading} 50 50)`);
|
|
}
|
|
|
|
updateInfoBox();
|
|
map.easeTo({ center: position });
|
|
}
|
|
|
|
// UPDATE INFO BOX
|
|
function updateInfoBox() {
|
|
const box = document.getElementById("infoBox");
|
|
if (!position) return;
|
|
|
|
const lat = position[1].toFixed(5);
|
|
const lon = position[0].toFixed(5);
|
|
|
|
const waveDeg = waveDir !== null ? `${waveDir.toFixed(0)}°` : "Need Request";
|
|
const heightM = waveHeight !== null ? `${waveHeight.toFixed(2)} m` : "Need Request";
|
|
const periodS = wavePeriod !== null ? `${wavePeriod.toFixed(1)} s` : "Need Request";
|
|
|
|
const windDeg = windDir !== null ? `${windDir.toFixed(0)}°` : "Need Request";
|
|
const windKMH = windSpeed !== null ? `${(windSpeed*3.6).toFixed(1)} km/h` : "Need Request";
|
|
const tempC = temperature !== null ? `${(temperature - 273.15).toFixed(1)} °C` : "Need Request";
|
|
box.innerHTML = `
|
|
<b>Direzione Onde:</b> ${waveDeg}<br>
|
|
<b>Altezza Onda:</b> ${heightM}<br>
|
|
<b>Periodo Onda:</b> ${periodS}<br>
|
|
<b>Direzione Vento:</b> ${windDeg}<br>
|
|
<b>Intensità Vento:</b> ${windKMH}<br>
|
|
<b>Temperatura:</b> ${tempC}<br>
|
|
<b>Lat:</b> ${lat} | <b>Lon:</b> ${lon}
|
|
`;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |