small map change

meshview/__version__.py

@@ -3,8 +3,8 @@
 import subprocess
 from pathlib import Path
 
-__version__ = "3.0.5"
-__release_date__ = "2026-2-6"
+__version__ = "3.0.6"
+__release_date__ = "2026-3-6"
 
 
 def get_git_revision():

meshview/templates/base.html

@@ -176,6 +176,7 @@ async function initializePage() {
                     items.push(`<a href="${urls[i]}">${dict[key] || key}</a>`);
                 }
             }
+            items.push('<a href="https://meshview.world" target="_blank" rel="noopener noreferrer">MeshviewWorld</a>');
 
             menu.innerHTML = items.join("&nbsp;-&nbsp;");
         }

meshview/templates/map.html

@@ -23,7 +23,25 @@
     #reset-filters-button:hover { background-color:#da190b; }
     #reset-filters-button:active { background-color:#c41e0d; }
 
-    .blinking-tooltip { background:white;color:black;border:1px solid black;border-radius:4px;padding:2px 5px; }
+    .blinking-tooltip {
+        background: white;
+        color: black;
+        border: 1px solid #111;
+        border-radius: 6px;
+        padding: 6px 10px;
+        font-size: 14px;
+        font-weight: 400;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    }
+    .blinking-tooltip.text-packet {
+        animation: textPulse 1.1s ease-in-out 6;
+        border-color: #ff8c00;
+    }
+    @keyframes textPulse {
+        0% { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
+        50% { box-shadow: 0 4px 14px rgba(255,140,0,0.45); }
+        100% { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
+    }
 
     #map-wrapper {
         position: relative;
@@ -274,7 +292,7 @@ function fetchNewPackets(){
               const marker = markerById[pkt.from_node_id];
               const nodeData = nodeMap.get(pkt.from_node_id);
               if(marker && nodeData) {
-                  blinkNode(marker,nodeData.long_name,pkt.portnum);
+                  blinkNode(marker, nodeData.long_name, pkt.portnum, pkt.payload);
               } else {
                   addUnmappedPacket(pkt, nodeData);
               }
@@ -414,24 +432,24 @@ function renderNodesOnMap(){
         markerById[node.key] = marker;
 
         const popup = `
-            <b><a href="/node/${node.node_id}">${node.long_name}</a> (${node.short_name})</b><br>
+            <a href="/node/${node.node_id}">${node.long_name}</a> (${node.short_name})<br>
 
-            <b data-translate-lang="channel_label"></b> ${node.channel}<br>
-            <b data-translate-lang="model_label"></b> ${node.hw_model}<br>
-            <b data-translate-lang="role_label"></b> ${node.role}<br>
-            <b data-translate-lang="mqtt_gateway"></b> ${
+            <span data-translate-lang="channel_label"></span> ${node.channel}<br>
+            <span data-translate-lang="model_label"></span> ${node.hw_model}<br>
+            <span data-translate-lang="role_label"></span> ${node.role}<br>
+            <span data-translate-lang="mqtt_gateway"></span> ${
                 node.is_mqtt_gateway ? (mapTranslations.yes || "Yes") : (mapTranslations.no || "No")
             }<br>
 
             ${
                 node.last_seen_us
-                    ? `<b data-translate-lang="last_seen"></b> ${timeAgoFromUs(node.last_seen_us)}<br>`
+                    ? `<span data-translate-lang="last_seen"></span> ${timeAgoFromUs(node.last_seen_us)}<br>`
                     : ""
             }
 
             ${
                 node.firmware
-                    ? `<b data-translate-lang="firmware"></b> ${node.firmware}<br>`
+                    ? `<span data-translate-lang="firmware"></span> ${node.firmware}<br>`
                     : ""
             }
         `;
@@ -568,7 +586,20 @@ map.on('click', e=>{
    BLINKING
    ====================================================== */
 
-function blinkNode(marker,longName,portnum){
+function escapeHtml(value){
+    return String(value)
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+
+function isTextPort(portnum){
+    return portnum === 1 || portnum === 7;
+}
+
+function blinkNode(marker,longName,portnum,payload){
     if(!map.hasLayer(marker)) return;
 
     if(activeBlinks.has(marker)){
@@ -578,13 +609,24 @@ function blinkNode(marker,longName,portnum){
     }
 
     let blinkCount = 0;
+    const blinkStart = Date.now();
+    const blinkDurationMs = 7000;
+    const safeName = escapeHtml(longName);
+    const portLabel = portMap[portnum] || `Port ${portnum ?? "?"}`;
+    const payloadText = (payload || "").trim();
+    const showPayload = isTextPort(portnum) && payloadText && payloadText !== "Did not decode";
+    const shortPayload = showPayload && payloadText.length > 80
+        ? `${payloadText.slice(0, 77)}...`
+        : payloadText;
+    const payloadLine = showPayload ? `<br><span>${escapeHtml(shortPayload)}</span>` : "";
+
     const tooltip = L.tooltip({
         permanent:true,
         direction:'top',
         offset:[0,-marker.options.radius-5],
-        className:'blinking-tooltip'
+        className: isTextPort(portnum) ? 'blinking-tooltip text-packet' : 'blinking-tooltip'
     })
-    .setContent(`${longName} (${portMap[portnum] || "Port "+portnum})`)
+    .setContent(`${safeName} (${escapeHtml(portLabel)})${payloadLine}`)
     .setLatLng(marker.getLatLng())
     .addTo(map);
 
@@ -599,7 +641,7 @@ function blinkNode(marker,longName,portnum){
         }
         blinkCount++;
 
-        if(blinkCount>7){
+        if(Date.now() - blinkStart > blinkDurationMs){
             clearInterval(interval);
             marker.setStyle({ fillColor: marker.originalColor });
             map.removeLayer(tooltip);

meshview/templates/node.html

@@ -18,21 +18,23 @@
 
 /* --- Node Info --- */
 .node-info {
-    background-color: #1f2226;
-    border: 1px solid #3a3f44;
     color: #ddd;
     font-size: 0.88rem;
-    padding: 12px 14px;
     margin-bottom: 14px;
-    border-radius: 8px;
-
     display: grid;
     grid-template-columns: repeat(3, minmax(120px, 1fr));
-    grid-column-gap: 14px;
-    grid-row-gap: 6px;
+    grid-column-gap: 12px;
+    grid-row-gap: 12px;
 }
 
-.node-info div { padding: 2px 0; }
+.node-info-col {
+    background-color: #1f2226;
+    border: 1px solid #3a3f44;
+    border-radius: 8px;
+    padding: 12px 14px;
+}
+
+.node-info-col div { padding: 2px 0; }
 .node-info strong {
     color: #9fd4ff;
     font-weight: 600;
@@ -357,31 +359,32 @@
 
     <!-- Node Info -->
     <div id="node-info" class="node-info">
-        <div><strong data-translate-lang="node_id">Node ID</strong><strong>: </strong><span id="info-node-id">—</span></div>
-        <div><strong data-translate-lang="id">Hex ID</strong><strong>: </strong><span id="info-id">—</span></div>
-        <div><strong data-translate-lang="long_name">Long Name</strong><strong>: </strong> <span id="info-long-name">—</span></div>
-        <div><strong data-translate-lang="short_name">Short Name</strong><strong>: </strong> <span id="info-short-name">—</span></div>
-
-        <div><strong data-translate-lang="hw_model">Hardware Model</strong><strong>: </strong> <span id="info-hw-model">—</span></div>
-        <div><strong data-translate-lang="firmware">Firmware</strong><strong>: </strong> <span id="info-firmware">—</span></div>
-        <div><strong data-translate-lang="role">Role</strong><strong>: </strong> <span id="info-role">—</span></div>
-
-        <div><strong data-translate-lang="mqtt_gateway">MQTT Gateway</strong><strong>: </strong> <span id="info-mqtt-gateway">—</span></div>
-        <div><strong data-translate-lang="channel">Channel</strong><strong>: </strong> <span id="info-channel">—</span></div>
-        <div><strong data-translate-lang="latitude">Latitude</strong><strong>: </strong> <span id="info-lat">—</span></div>
-        <div><strong data-translate-lang="longitude">Longitude</strong><strong>: </strong> <span id="info-lon">—</span></div>
-
-        <div><strong data-translate-lang="first_update">First Update</strong><strong>: </strong> <span id="info-first-update">—</span></div>
-        <div><strong data-translate-lang="last_update">Last Update</strong><strong>: </strong> <span id="info-last-update">—</span></div>
-        <div>
-            <strong data-translate-lang="statistics">Statistics</strong><strong>: </strong>
-            <span id="info-stats"
-                  data-label-24h="24h"
-                  data-label-sent="Packets sent"
-                  data-label-seen="Times seen">—</span>
+        <div class="node-info-col">
+            <div><strong data-translate-lang="node_id">Node ID</strong><strong>: </strong><span id="info-node-id">—</span></div>
+            <div><strong data-translate-lang="id">Hex ID</strong><strong>: </strong><span id="info-id">—</span></div>
+            <div><strong data-translate-lang="short_name">Short Name</strong><strong>: </strong> <span id="info-short-name">—</span></div>
+            <div><strong data-translate-lang="long_name">Long Name</strong><strong>: </strong> <span id="info-long-name">—</span></div>
+            <div><strong data-translate-lang="channel">Channel</strong><strong>: </strong> <span id="info-channel">—</span></div>
+        </div>
+        <div class="node-info-col">
+            <div><strong data-translate-lang="latitude">Latitude</strong><strong>: </strong> <span id="info-lat">—</span></div>
+            <div><strong data-translate-lang="longitude">Longitude</strong><strong>: </strong> <span id="info-lon">—</span></div>
+            <div><strong data-translate-lang="role">Role</strong><strong>: </strong> <span id="info-role">—</span></div>
+            <div><strong data-translate-lang="hw_model">Hardware Model</strong><strong>: </strong> <span id="info-hw-model">—</span></div>
+            <div><strong data-translate-lang="mqtt_gateway">MQTT Gateway</strong><strong>: </strong> <span id="info-mqtt-gateway">—</span></div>
+        </div>
+        <div class="node-info-col">
+            <div><strong data-translate-lang="first_update">First Update</strong><strong>: </strong> <span id="info-first-update">—</span></div>
+            <div><strong data-translate-lang="last_update">Last Update</strong><strong>: </strong> <span id="info-last-update">—</span></div>
+            <div><strong data-translate-lang="firmware">Firmware</strong><strong>: </strong> <span id="info-firmware">—</span></div>
+            <div>
+                <strong data-translate-lang="statistics">Statistics</strong><strong>: </strong>
+                <span id="info-stats"
+                      data-label-24h="24h"
+                      data-label-sent="Packets sent"
+                      data-label-seen="Times seen">—</span>
+            </div>
         </div>
-
-
     </div>
 
     <!-- Map. -->
@@ -1439,13 +1442,20 @@ async function loadPacketHistogram() {
     const DAYS = 7;
     const now = new Date();
 
+    const dayKeyFromDate = (d) => {
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, "0");
+        const day = String(d.getDate()).padStart(2, "0");
+        return `${y}-${m}-${day}`;
+    };
+
     const dayKeys = [];
     const dayLabels = [];
 
     for (let i = DAYS - 1; i >= 0; i--) {
         const d = new Date(now);
         d.setDate(d.getDate() - i);
-        dayKeys.push(d.toISOString().slice(0, 10));
+        dayKeys.push(dayKeyFromDate(d));
         dayLabels.push(
             d.toLocaleDateString([], { month: "short", day: "numeric" })
         );
@@ -1473,9 +1483,7 @@ async function loadPacketHistogram() {
     for (const pkt of packets) {
         if (!pkt.import_time_us) continue;
 
-        const day = new Date(pkt.import_time_us / 1000)
-            .toISOString()
-            .slice(0, 10);
+        const day = dayKeyFromDate(new Date(pkt.import_time_us / 1000));
 
         if (!dayKeys.includes(day)) continue;