Ham/meshtastic-map
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add ShortSlow mode and update design

Browse source
This commit is contained in:
Alexander Heinke 2026-02-21 02:11:39 +01:00
parent a0181b8e0f
commit 33c24d9fe6
1 changed files with 57 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/public/index.html
View file

@ -56,50 +56,57 @@
} }
.icon-longfast { .icon-longfast {
background-color: #8c929e; background-color: #009016;
border-radius: 25px; border-radius: 25px;
border: 1px solid white; border: 1px solid #2C2D3C;
} }
.icon-mediumfast { .icon-mediumfast {
background-color: #326be7; background-color: #326be7;
border-radius: 25px; border-radius: 25px;
border: 1px solid white; border: 1px solid #2C2D3C;
} }
.icon-shortslow {
background-color: #0077e6;
border-radius: 25px;
border: 1px solid #2C2D3C;
}
.icon-mqtt-connected { .icon-mqtt-connected {
background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */ background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */
border-radius: 25px; border-radius: 25px;
border: 1px solid white; border: 1px solid #2C2D3C;
} }
.icon-mqtt-disconnected { .icon-mqtt-disconnected {
background-color: #2563eb; background-color: #2563eb;
border-radius: 25px; border-radius: 25px;
border: 1px solid white; border: 1px solid #2C2D3C;
} }
.icon-offline { .icon-offline {
background-color: #dc2626; background-color: #e2286c;
border-radius: 25px; border-radius: 25px;
border: 1px solid white; border: 1px solid #2C2D3C;
} }
.icon-position-history { .icon-position-history {
background-color: #a855f7; background-color: #a855f7;
border-radius: 25px; border-radius: 25px;
border: 1px solid white; border: 1px solid #2C2D3C;
} }
.icon-traceroute-start { .icon-traceroute-start {
background-color: #16a34a; /* green */ background-color: #16a34a; /* green */
border-radius: 25px; border-radius: 25px;
border: 1px solid white; border: 1px solid #2C2D3C;
} }
.icon-traceroute-end { .icon-traceroute-end {
background-color: #dc2626; /* red */ background-color: #dc2626; /* red */
border-radius: 25px; border-radius: 25px;
border: 1px solid white; border: 1px solid #2C2D3C;
} }
.waypoint-label { .waypoint-label {
@ -169,7 +176,7 @@
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<!-- header --> <!-- header -->
<div class="flex p-3 h-16" style="background-color: 30a552;"> <div class="flex p-3 h-16" style="background-color: #67EA94;">
<!-- close mobile search button --> <!-- close mobile search button -->
<div v-if="isShowingMobileSearch" class="my-auto"> <div v-if="isShowingMobileSearch" class="my-auto">
@ -183,8 +190,8 @@
</div> </div>
<!-- icon --> <!-- icon -->
<div v-if="!isShowingMobileSearch" class="hidden sm:block my-auto mr-2 ml-2"> <div v-if="!isShowingMobileSearch" class="sm:block my-auto mr-2 ml-2">
<img class="w-8 h-8 rounded" src="icon.png"/> <img class="w-10 h-10 rounded border-2 border-[#2C2D3C]" src="icon.png"/>
</div> </div>
<!-- search bar --> <!-- search bar -->
@ -222,16 +229,6 @@
<!-- header action buttons --> <!-- header action buttons -->
<div v-if="!isShowingMobileSearch" class="flex my-auto ml-auto mr-0 sm:mr-2 space-x-1 sm:space-x-2"> <div v-if="!isShowingMobileSearch" class="flex my-auto ml-auto mr-0 sm:mr-2 space-x-1 sm:space-x-2">
<a @click="isShowingInfoModal = true" href="javascript:void(0)" class="tooltip rounded-full">
<div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
</div>
<div class="hidden sm:block">
<span class="tooltip-text">About</span>
</div>
</a>
<a @click="isShowingMobileSearch = true" href="javascript:void(0)" class="tooltip rounded-full block lg:hidden"> <a @click="isShowingMobileSearch = true" href="javascript:void(0)" class="tooltip rounded-full block lg:hidden">
<div id="search-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full"> <div id="search-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@ -244,6 +241,16 @@
<span class="tooltip-text">Search</span> <span class="tooltip-text">Search</span>
</div> </div>
</a> </a>
<a @click="isShowingHardwareModels = !isShowingHardwareModels" href="javascript:void(0)" class="tooltip rounded-full hidden sm:block">
<div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
</svg>
</div>
<div class="hidden sm:block">
<span class="tooltip-text">Devices</span>
</div>
</a>
<a @click="isShowingSettings = true" href="javascript:void(0)" class="tooltip rounded-full"> <a @click="isShowingSettings = true" href="javascript:void(0)" class="tooltip rounded-full">
<div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full"> <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@ -2678,7 +2685,8 @@
disableClusteringAtZoom: 10, // zoom level where node clustering is disabled disableClusteringAtZoom: 10, // zoom level where node clustering is disabled
}); });
var nodesBackboneLayerGroup = new L.LayerGroup(); var nodesBackboneLayerGroup = new L.LayerGroup();
var nodesMediumFastLayerGroup = new L.LayerGroup(); //var nodesMediumFastLayerGroup = new L.LayerGroup();
var nodesShortSlowLayerGroup = new L.LayerGroup();
var nodesLongFastLayerGroup = new L.LayerGroup(); var nodesLongFastLayerGroup = new L.LayerGroup();
var waypointsLayerGroup = new L.LayerGroup(); var waypointsLayerGroup = new L.LayerGroup();
var nodePositionHistoryLayerGroup = new L.LayerGroup(); var nodePositionHistoryLayerGroup = new L.LayerGroup();
@ -2696,9 +2704,14 @@
iconSize: [16, 16], // increase from 12px to 16px to make hover easier iconSize: [16, 16], // increase from 12px to 16px to make hover easier
}); });
var iconMediumFast = L.divIcon({ /*var iconMediumFast = L.divIcon({
className: 'icon-mediumfast', className: 'icon-mediumfast',
iconSize: [16, 16], // increase from 12px to 16px to make hover easier iconSize: [16, 16], // increase from 12px to 16px to make hover easier
});*/
var iconShortSlow = L.divIcon({
className: 'icon-shortslow',
iconSize: [16, 16],
}); });
var iconMqttDisconnected = L.divIcon({ var iconMqttDisconnected = L.divIcon({
@ -2734,7 +2747,8 @@
div.style.backgroundColor = 'white'; div.style.backgroundColor = 'white';
div.style.padding = '12px'; div.style.padding = '12px';
div.innerHTML = `<div style="margin-bottom:6px;"><strong>Legend</strong></div>` div.innerHTML = `<div style="margin-bottom:6px;"><strong>Legend</strong></div>`
+ `<div style="display:flex"><div class="icon-mediumfast" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> MediumFast</div>` + `<div style="display:flex"><div class="icon-shortslow" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> ShortSlow</div>`
//+ `<div style="display:flex"><div class="icon-mediumfast" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> MediumFast</div>`
+ `<div style="display:flex"><div class="icon-longfast" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> LongFast</div>` + `<div style="display:flex"><div class="icon-longfast" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> LongFast</div>`
+ `<div style="display:flex"><div class="icon-offline" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> Offline Too Long</div>` + `<div style="display:flex"><div class="icon-offline" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> Offline Too Long</div>`
+ `<div style="display:flex"><svg width="16" height="3" style="margin-right:4px;margin-top:auto;margin-bottom:auto;"><line x1="0" y1="1.5" x2="16" y2="1.5" stroke="#f97316" stroke-width="4"/></svg> Traceroute</div>`; + `<div style="display:flex"><svg width="16" height="3" style="margin-right:4px;margin-top:auto;margin-bottom:auto;"><line x1="0" y1="1.5" x2="16" y2="1.5" stroke="#f97316" stroke-width="4"/></svg> Traceroute</div>`;
@ -2763,7 +2777,8 @@
"All": nodesLayerGroup, "All": nodesLayerGroup,
"Routers": nodesRouterLayerGroup, "Routers": nodesRouterLayerGroup,
"Backbone": nodesBackboneLayerGroup, "Backbone": nodesBackboneLayerGroup,
"MediumFast": nodesMediumFastLayerGroup, "ShortSlow": nodesShortSlowLayerGroup,
//"MediumFast": nodesMediumFastLayerGroup,
"LongFast": nodesLongFastLayerGroup, "LongFast": nodesLongFastLayerGroup,
"Clustered": nodesClusteredLayerGroup, "Clustered": nodesClusteredLayerGroup,
"None": new L.LayerGroup(), "None": new L.LayerGroup(),
@ -2949,7 +2964,8 @@
nodesClusteredLayerGroup.clearLayers(); nodesClusteredLayerGroup.clearLayers();
nodesRouterLayerGroup.clearLayers(); nodesRouterLayerGroup.clearLayers();
nodesBackboneLayerGroup.clearLayers(); nodesBackboneLayerGroup.clearLayers();
nodesMediumFastLayerGroup.clearLayers(); nodesShortSlowLayerGroup.clearLayers();
//nodesMediumFastLayerGroup.clearLayers();
nodesLongFastLayerGroup.clearLayers(); nodesLongFastLayerGroup.clearLayers();
} }
@ -3334,10 +3350,14 @@
// icon based on channel preset // icon based on channel preset
var icon = iconLongFast; var icon = iconLongFast;
if (node.channel_id == "MediumFast") { if (node.channel_id == "ShortSlow") {
icon = iconMediumFast; icon = iconShortSlow;
} }
/*if (node.channel_id == "MediumFast") {
icon = iconMediumFast;
}*/
// use offline icon for nodes older than configured node offline age // use offline icon for nodes older than configured node offline age
if(configNodesOfflineAgeInSeconds){ if(configNodesOfflineAgeInSeconds){
const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at)); const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
@ -3398,11 +3418,15 @@
nodesBackboneLayerGroup.addLayer(marker); nodesBackboneLayerGroup.addLayer(marker);
} }
// add markers for MediumFast channel to layer group if(node.channel_id == "ShortSlow") {
if(node.channel_id == "MediumFast") { nodesShortSlowLayerGroup.addLayer(marker);
nodesMediumFastLayerGroup.addLayer(marker);
} }
// add markers for MediumFast channel to layer group
/*if(node.channel_id == "MediumFast") {
nodesMediumFastLayerGroup.addLayer(marker);
}*/
// add markers for LongFast channel to layer group // add markers for LongFast channel to layer group
if(node.channel_id == "LongFast") { if(node.channel_id == "LongFast") {
nodesLongFastLayerGroup.addLayer(marker); nodesLongFastLayerGroup.addLayer(marker);