bd1a8e5497
All checks were successful
Meshtastic Map - See local Meshtastic Nodes / deploy (push) Successful in 1s
113 lines
3.7 KiB
HTML
113 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Meshtastic Map</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map" style="height: 100vh;"></div>
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script>
|
|
var map = L.map('map').setView([0, 0], 2);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
|
|
let myCoords = null;
|
|
const now = Date.now() / 1000; // Current time in seconds
|
|
|
|
const daysSince = (test) => {
|
|
if (test) {
|
|
let res = ''
|
|
let diff = Math.floor(now - test);
|
|
const isFuture = diff < 0;
|
|
diff = Math.abs(diff); // Get absolute value for breakdown
|
|
|
|
const days = Math.floor(diff / (3600 * 24));
|
|
const hours = Math.floor((diff % (3600 * 24)) / 3600);
|
|
const minutes = Math.floor((diff % 3600) / 60);
|
|
const seconds = diff % 60;
|
|
if (days) {
|
|
res += `${days} days `
|
|
}
|
|
if (hours) {
|
|
res += `${hours} hours `
|
|
}
|
|
if (minutes) {
|
|
res += `${minutes} minutes `
|
|
}
|
|
return res
|
|
}
|
|
return "N/A"
|
|
|
|
}
|
|
|
|
const getNodeDesc = (node) => {
|
|
const deviceMetrics = node?.deviceMetrics
|
|
const hopsAway = node?.hopsAway ?? 'N/A';
|
|
const lastHeard = node?.lastHeard
|
|
const num = node?.num;
|
|
const position = node?.position;
|
|
const snr = node?.snr ?? 'N/A';
|
|
const user = node?.user;
|
|
const lat = position?.latitude
|
|
return `
|
|
${user.id}<br/>
|
|
${user.shortName} - ${user.longName}<br/>
|
|
${user.hwModel}<br/>
|
|
${hopsAway} hop<br/>
|
|
Heard: ${daysSince(lastHeard)} ago<br/>
|
|
S/N: ${snr} dbM<br/>
|
|
Channel Util ${Math.round(node?.deviceMetrics?.channelUtilization * 100) / 100}%<br/>
|
|
Airtime Util ${Math.round(node?.deviceMetrics?.airUtilTx * 100) / 100}%<br/>
|
|
`
|
|
}
|
|
|
|
|
|
const updateNodes = async () => {
|
|
const res = await fetch('/nodes');
|
|
const json = await res.json();
|
|
const myNodeId = json['myNodeId']
|
|
// const myNodeNum = json['myNodeNum']
|
|
const nodes = json['nodes']
|
|
|
|
let myNode = null;
|
|
// const my
|
|
// Object.entries(nodes).forEach()
|
|
|
|
Object.entries(nodes).forEach(([id, node]) => {
|
|
|
|
if (id == myNodeId) {
|
|
console.log("found")
|
|
myNode = node;
|
|
}
|
|
const deviceMetrics = node?.deviceMetrics
|
|
const hopsAway = node?.hopsAway;
|
|
const lastHeard = node?.lastHeard;
|
|
const num = node?.num;
|
|
const position = node?.position;
|
|
const snr = node?.snr;
|
|
const user = node?.user;
|
|
const lat = position?.latitude
|
|
const lon = position?.longitude
|
|
if (lat && lon) {
|
|
L.marker([lat, lon]).addTo(map)
|
|
.bindPopup(getNodeDesc(node));
|
|
if (id == myNodeId && myCoords != [lat, lon]) {
|
|
myCoords = [lat, lon];
|
|
map.setView([lat, lon], 15);
|
|
}
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
updateNodes();
|
|
center();
|
|
setInterval(updateNodes, 10000);
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |