48px

data_embed/script.js

@@ -490,7 +490,6 @@ function toggleWiFiAutoAPFields() {
     if (autoAPConfig) autoAPConfig.style.display = isEnabled ? 'block' : 'none';
 }
 
-
 document.querySelector(".new button").addEventListener("click", function () {
     const networksContainer = document.querySelector(".list-networks");
 
@@ -659,10 +658,267 @@ function setMapMessage(text) {
     }
 }
 
+
+/*
+ * APRS symbol renderer for Stations Map
+ *
+ * s.symbol contains APRS table + symbol code, for example:
+ *   "/>"  Primary table
+ *   "\\>" Alternate table
+ *   "L&"  Alternate table with overlay
+ *
+ * Sprite layout:
+ *   aprs-symbols-48-0.png = Primary table
+ *   aprs-symbols-48-1.png = Alternate table
+ *   aprs-symbols-48-2.png = Overlay characters
+ */
+
+function getAprsSymbolIcon(symbol, callsign = "") {
+
+    if (!symbol || String(symbol).length < 2) {
+        return null;
+    }
+
+    const value = String(symbol);
+
+    let table = value.charAt(0);
+    let code  = value.charAt(1);
+    let overlay = null;
+
+    /*
+     * Standard APRS:
+     * "/"  = Primary
+     * "\\" = Alternate
+     *
+     * A-Z / 0-9 / a-j in table position are overlays
+     * for the Alternate table.
+     */
+    if (
+        table !== "/" &&
+        table !== "\\"
+    ) {
+        overlay = table;
+        table = "\\";
+    }
+
+    const ascii = code.charCodeAt(0);
+
+    /*
+     * APRS printable symbol codes are ASCII 33..126.
+     */
+    if (
+        ascii < 33 ||
+        ascii > 126
+    ) {
+        return null;
+    }
+
+    const index = ascii - 33;
+
+    /*
+     * Sprite sheet contains 16 columns x 6 rows.
+     * Each cell occupies 24x24 CSS px, but the underlying PNG assets are
+     * actually 48x48 px/cell (2x) for sharpness on high-DPI screens; the
+     * "background-size" below tells the browser to scale the sheet back
+     * down to its original 24px-per-cell layout, so all position math
+     * stays in 24px units regardless of source resolution.
+     */
+    const columns = 16;
+    const sheetSize = "384px 144px"; // 16*24 x 6*24, same for all 3 sheets
+
+    const col = index % columns;
+    const row = Math.floor(index / columns);
+
+    const sprite =
+        table === "/"
+            ? "/aprs-symbols-48-0.png"
+            : "/aprs-symbols-48-1.png";
+
+    const x = -(col * 24);
+    const y = -(row * 24);
+
+    let overlayHtml = "";
+
+    if (overlay) {
+
+        let displayOverlay = overlay;
+
+        /*
+         * APRS compressed numeric overlay:
+         * a-j -> 0-9
+         */
+        if (
+            overlay >= "a" &&
+            overlay <= "j"
+        ) {
+            displayOverlay =
+                String(
+                    overlay.charCodeAt(0) -
+                    "a".charCodeAt(0)
+                );
+        }
+
+        /*
+         * The overlay sprite sheet does NOT follow the ascii-33 layout used
+         * by the primary/alternate tables above; it has its own grid:
+         * "0" at row 0 col 15, "1".."9" at row 1 col 0-8, "A".."P" at row 2,
+         * "Q".."Z" at row 3 col 0-9. Verified by hand against the PNG.
+         */
+        let overlayCol = null;
+        let overlayRow = null;
+
+        if (displayOverlay === "0") {
+            overlayCol = 15;
+            overlayRow = 0;
+        } else if (displayOverlay >= "1" && displayOverlay <= "9") {
+            overlayCol = displayOverlay.charCodeAt(0) - "1".charCodeAt(0);
+            overlayRow = 1;
+        } else if (displayOverlay >= "A" && displayOverlay <= "P") {
+            overlayCol = displayOverlay.charCodeAt(0) - "A".charCodeAt(0);
+            overlayRow = 2;
+        } else if (displayOverlay >= "Q" && displayOverlay <= "Z") {
+            overlayCol = displayOverlay.charCodeAt(0) - "Q".charCodeAt(0);
+            overlayRow = 3;
+        }
+
+        if (overlayCol !== null) {
+            const ox = -(overlayCol * 24);
+            const oy = -(overlayRow * 24);
+
+            overlayHtml = `
+                <span style="
+                    position:absolute;
+                    left:0;
+                    top:0;
+                    width:24px;
+                    height:24px;
+                    background-image:url('/aprs-symbols-48-2.png');
+                    background-repeat:no-repeat;
+                    background-position:${ox}px ${oy}px;
+                    background-size:${sheetSize};
+                    pointer-events:none;
+                "></span>
+            `;
+        }
+    }
+
+    return L.divIcon({
+        className: "",
+        html: `
+            <div style="
+                position:relative;
+                width:24px;
+                height:24px;
+                background-image:url('${sprite}');
+                background-repeat:no-repeat;
+                background-position:${x}px ${y}px;
+                background-size:${sheetSize};
+            ">
+                ${overlayHtml}
+
+                <span style="
+                    position:absolute;
+                    left:27px;
+                    top:6px;
+                    font:600 10px Arial,sans-serif;
+                    line-height:12px;
+                    white-space:nowrap;
+                    color:#111;
+                    text-shadow:
+                        -1px -1px 0 #fff,
+                         1px -1px 0 #fff,
+                        -1px  1px 0 #fff,
+                         1px  1px 0 #fff;
+                    pointer-events:none;
+                ">${callsign}</span>
+            </div>
+        `,
+        iconSize: [24, 24],
+        iconAnchor: [12, 12],
+        popupAnchor: [0, -12]
+    });
+}
+
+
+let mapStationsCache = [];
+let mapRouteLayer = null;
+
+function getUsedDigipeaters(path) {
+    if (!path) return [];
+
+    return path
+        .split(",")
+        .map((x) => x.trim())
+        .filter((x) => x.endsWith("*"))
+        .map((x) => x.replace(/\*+$/, ""))
+        .filter((x) =>
+            x &&
+            !x.startsWith("WIDE") &&
+            !x.startsWith("TRACE") &&
+            !x.startsWith("TCPIP") &&
+            !x.startsWith("TCPXX") &&
+            !x.startsWith("qA")
+        );
+}
+
+
+function describeMapPath(station) {
+    const digis = getUsedDigipeaters(station.path);
+
+    if (!digis.length) {
+        return "Direct";
+    }
+
+    return "Via: " + digis.join(" → ");
+}
+
+
+function clearMapRoute() {
+    if (mapRouteLayer && mapInstance) {
+        mapInstance.removeLayer(mapRouteLayer);
+    }
+    mapRouteLayer = null;
+}
+
+
+function drawStationRoute(station) {
+    if (!mapInstance || !iGateLatLng) return;
+
+    clearMapRoute();
+
+    const points = [
+        L.latLng(station.lat, station.lon)
+    ];
+
+    const digis = getUsedDigipeaters(station.path);
+
+    digis.forEach((digiCall) => {
+        const digi = mapStationsCache.find((s) =>
+            String(s.callsign || "").toUpperCase() === digiCall.toUpperCase()
+        );
+
+        if (digi && !(digi.lat === 0 && digi.lon === 0)) {
+            points.push(L.latLng(digi.lat, digi.lon));
+        }
+    });
+
+    points.push(iGateLatLng);
+
+    mapRouteLayer = L.polyline(points, {
+        color: "#e53935",
+        weight: 3,
+        opacity: 0.9
+    }).addTo(mapInstance);
+}
+
+
 function loadMapStations(stations) {
     if (!mapMarkers) return;
 
+    mapStationsCache = stations || [];
+
     mapMarkers.clearLayers();
+    clearMapRoute();
 
     let drawn = 0;
     (stations || []).forEach((s) => {
@@ -671,15 +927,52 @@ function loadMapStations(stations) {
         const popup = `<b>${s.callsign}</b>`
             + (s.lastHeard ? `<br>Last: ${s.lastHeard}` : "")
             + `<br>RSSI ${s.RSSI} / SNR ${s.SNR}`
-            + `<br>Packets: ${s.count}`;
+            + `<br>Packets: ${s.count}`
+            + `<br><b>${describeMapPath(s)}</b>`
+            + (s.path ? `<br><small>Path: ${s.path}</small>` : "");
+
+        const aprsIcon =
+            getAprsSymbolIcon(s.symbol, s.callsign);
+
+        if (aprsIcon) {
+
+            const marker = L.marker(
+                [s.lat, s.lon],
+                {
+                    icon: aprsIcon
+                }
+            )
+            .bindPopup(popup)
+            .addTo(mapMarkers);
+
+            marker.on("mouseover", function () {
+                drawStationRoute(s);
+            });
+
+            marker.on("mouseout", function () {
+                clearMapRoute();
+            });
+
+        } else {    // Fallback: station with missing or invalid APRS symbol
+            const marker = L.circleMarker([s.lat, s.lon], {
+                radius: 6,
+                color: "#1d6fe0",
+                weight: 2,
+                fillColor: "#3b8cff",
+                fillOpacity: 0.9
+            })
+            .bindPopup(popup)
+            .addTo(mapMarkers);
+
+            marker.on("mouseover", function () {
+                drawStationRoute(s);
+            });
+
+            marker.on("mouseout", function () {
+                clearMapRoute();
+            });
+        }
 
-        L.circleMarker([s.lat, s.lon], {
-            radius: 6,
-            color: "#1d6fe0",        // borde
-            weight: 2,
-            fillColor: "#3b8cff",    // relleno
-            fillOpacity: 0.9
-        }).bindPopup(popup).addTo(mapMarkers);
         drawn++;
     });
 

include/map_utils.h

@@ -32,12 +32,13 @@ struct MapStation {
     float    snr;               // ultimo SNR
     uint16_t count;             // nro de paquetes oidos de esa estacion
     char     lastHeard[10];     // "HH:MM:SS" si hay NTP valido, "" si no
+    char     path[96];          // last path received
     uint32_t lastHeardMillis;   // millis() -> ordenar / expirar (no se muestra)
 };
 
 namespace MAP_Utils {
 
-    void    upsert(const String& callsign, float latitude, float longitude, const String& symbol, int rssi, float snr);
+    void    upsert(const String& callsign, float latitude, float longitude, const String& path, const String& symbol, int rssi, float snr);
     String  getStationsJson();
 
 }

platformio.ini

@@ -29,6 +29,9 @@ board_build.embed_files =
 	data_embed/leaflet.css.gz
 	data_embed/leaflet.js.gz
 	data_embed/favicon.png.gz
+    data_embed/aprs-symbols-48-0.png.gz
+    data_embed/aprs-symbols-48-1.png.gz
+    data_embed/aprs-symbols-48-2.png.gz
 extra_scripts =
 	pre:tools/compress.py
 debug_tool = esp-prog

src/LoRa_APRS_iGate.cpp

@@ -68,8 +68,8 @@ ___________________________________________________________________*/
 #endif
 
 
-String              versionDate             = "2026-08-16";
-String              versionNumber           = "4.0.0";
+String              versionDate             = "2026-08-25";
+String              versionNumber           = "4.0.1";
 Configuration       Config;
 WiFiClient          aprsIsClient;
 WiFiClient          mqttClient;

src/lora_utils.cpp

@@ -291,8 +291,8 @@ namespace LoRa_Utils {
                                 receivedPackets.push_back(receivedPacket);
 
                                 APRSPacket aprsPacket = APRSPacketLib::processReceivedPacket(packet.substring(3), rssi, snr, freqError);
-                                if (aprsPacket.type == 0 || aprsPacket.type == 4) {   // 0 = GPS, 4 = Mic-E (los que traen posición)
-                                    MAP_Utils::upsert(aprsPacket.sender, aprsPacket.latitude, aprsPacket.longitude, aprsPacket.overlay + aprsPacket.symbol, aprsPacket.rssi, aprsPacket.snr);
+                                if (aprsPacket.type == 0 || aprsPacket.type == 4) {   // 0 = GPS, 4 = Mic-E (only ones with position)
+                                    MAP_Utils::upsert(aprsPacket.sender, aprsPacket.latitude, aprsPacket.longitude, aprsPacket.path, aprsPacket.overlay + aprsPacket.symbol, aprsPacket.rssi, aprsPacket.snr);
                                 }
                             }
 

src/map_utils.cpp

@@ -29,9 +29,7 @@ std::vector<MapStation> mapStations;
 
 namespace MAP_Utils {
 
-    // Copia la hora NTP "HH:MM:SS" si es valida; si no hay red (NTP devuelve
-    // un texto de fallback) deja el campo vacio para no guardar hora falsa.
-    void writeFormatedTime(char* dst, size_t size) {
+    void writeFormatedTime(char* dst, size_t size) { // gets NTP time ("HH:MM:SS") and writes it to dst if valid
         String t = NTP_Utils::getFormatedTime();
         if (t.length() == 8 && t.charAt(2) == ':') {
             t.toCharArray(dst, size);
@@ -40,10 +38,8 @@ namespace MAP_Utils {
         }
     }
 
-    // Inserta una estacion nueva o actualiza la existente (dedup por callsign).
-    // Llamar solo cuando el parser ya decodifico una posicion valida.
-    void upsert(const String& callsign, float latitude, float longitude, const String& symbol, int rssi, float snr) {
-        for (auto &s : mapStations) {                       // 1) ya existe -> actualizar
+    void upsert(const String& callsign, float latitude, float longitude, const String& path, const String& symbol, int rssi, float snr) {   // Upsert station only with valid position with callsign dedup.
+        for (auto &s : mapStations) {                       // 1) update
             if (callsign.equals(s.callsign)) {
                 s.latitude  = latitude;
                 s.longitude = longitude;
@@ -51,13 +47,14 @@ namespace MAP_Utils {
                 s.snr       = snr;
                 s.count++;
                 symbol.toCharArray(s.symbol, sizeof(s.symbol));
+                path.toCharArray(s.path, sizeof(s.path));
                 writeFormatedTime(s.lastHeard, sizeof(s.lastHeard));
                 s.lastHeardMillis = millis();
                 return;
             }
         }
 
-        if (mapStations.size() >= MAX_MAP_STATIONS) {       // 2) llena -> descartar la mas vieja
+        if (mapStations.size() >= MAX_MAP_STATIONS) {       // 2) full? delete oldest one
             size_t oldest = 0;
             for (size_t i = 1; i < mapStations.size(); i++) {
                 if (mapStations[i].lastHeardMillis < mapStations[oldest].lastHeardMillis) {
@@ -67,9 +64,10 @@ namespace MAP_Utils {
             mapStations.erase(mapStations.begin() + oldest);
         }
 
-        MapStation st = {};                                 // 3) insertar nueva
+        MapStation st = {};                                 // 3) insert new
         callsign.toCharArray(st.callsign, sizeof(st.callsign));
         symbol.toCharArray(st.symbol, sizeof(st.symbol));
+        path.toCharArray(st.path, sizeof(st.path));
         st.latitude  = latitude;
         st.longitude = longitude;
         st.rssi      = rssi;
@@ -102,6 +100,7 @@ namespace MAP_Utils {
             data[i]["SNR"]       = mapStations[i].snr;
             data[i]["count"]     = mapStations[i].count;
             data[i]["lastHeard"] = mapStations[i].lastHeard;
+            data[i]["path"]      = mapStations[i].path;
         }
 
         String buffer;

src/web_utils.cpp

@@ -62,6 +62,18 @@ extern const unsigned char favicon_data[] asm("_binary_data_embed_favicon_png_gz
 extern const unsigned char favicon_data_end[] asm("_binary_data_embed_favicon_png_gz_end");
 extern const size_t favicon_data_len = favicon_data_end - favicon_data;
 
+extern const unsigned char aprs_symbols_48_0_data[] asm("_binary_data_embed_aprs_symbols_48_0_png_gz_start");
+extern const unsigned char aprs_symbols_48_0_data_end[] asm("_binary_data_embed_aprs_symbols_48_0_png_gz_end");
+extern const size_t aprs_symbols_48_0_data_len = aprs_symbols_48_0_data_end - aprs_symbols_48_0_data;
+
+extern const unsigned char aprs_symbols_48_1_data[] asm("_binary_data_embed_aprs_symbols_48_1_png_gz_start");
+extern const unsigned char aprs_symbols_48_1_data_end[] asm("_binary_data_embed_aprs_symbols_48_1_png_gz_end");
+extern const size_t aprs_symbols_48_1_data_len = aprs_symbols_48_1_data_end - aprs_symbols_48_1_data;
+
+extern const unsigned char aprs_symbols_48_2_data[] asm("_binary_data_embed_aprs_symbols_48_2_png_gz_start");
+extern const unsigned char aprs_symbols_48_2_data_end[] asm("_binary_data_embed_aprs_symbols_48_2_png_gz_end");
+extern const size_t aprs_symbols_48_2_data_len = aprs_symbols_48_2_data_end - aprs_symbols_48_2_data;
+
 
 namespace WEB_Utils {
 
@@ -92,6 +104,42 @@ namespace WEB_Utils {
         request->send(response);
     }
 
+    void handleAprsSymbols48Primary(AsyncWebServerRequest *request) {
+        AsyncWebServerResponse *response = request->beginResponse(
+            200,
+            "image/png",
+            (const uint8_t*)aprs_symbols_48_0_data,
+            aprs_symbols_48_0_data_len
+        );
+        response->addHeader("Content-Encoding", "gzip");
+        response->addHeader("Cache-Control", "max-age=3600");
+        request->send(response);
+    }
+
+    void handleAprsSymbols48Alternate(AsyncWebServerRequest *request) {
+        AsyncWebServerResponse *response = request->beginResponse(
+            200,
+            "image/png",
+            (const uint8_t*)aprs_symbols_48_1_data,
+            aprs_symbols_48_1_data_len
+        );
+        response->addHeader("Content-Encoding", "gzip");
+        response->addHeader("Cache-Control", "max-age=3600");
+        request->send(response);
+    }
+
+    void handleAprsSymbols48Overlay(AsyncWebServerRequest *request) {
+        AsyncWebServerResponse *response = request->beginResponse(
+            200,
+            "image/png",
+            (const uint8_t*)aprs_symbols_48_2_data,
+            aprs_symbols_48_2_data_len
+        );
+        response->addHeader("Content-Encoding", "gzip");
+        response->addHeader("Cache-Control", "max-age=3600");
+        request->send(response);
+    }
+
     void handleReadConfiguration(AsyncWebServerRequest *request) {
         if(Config.webadmin.active && !request->authenticate(Config.webadmin.username.c_str(), Config.webadmin.password.c_str()))
             return request->requestAuthentication();
@@ -401,6 +449,9 @@ namespace WEB_Utils {
             server.on("/leaflet.css", HTTP_GET, handleLeafletStyle);
             server.on("/leaflet.js", HTTP_GET, handleLeafletScript);
             server.on("/favicon.png", HTTP_GET, handleFavicon);
+            server.on("/aprs-symbols-48-0.png", HTTP_GET, handleAprsSymbols48Primary);
+            server.on("/aprs-symbols-48-1.png", HTTP_GET, handleAprsSymbols48Alternate);
+            server.on("/aprs-symbols-48-2.png", HTTP_GET, handleAprsSymbols48Overlay);
 
             OTA_Utils::setup(&server); // Include OTA Updater for WebServer
 

tools/compress.py

@@ -29,6 +29,9 @@ files = [
   'data_embed/leaflet.js',
   'data_embed/leaflet.css',
   'data_embed/favicon.png',
+  'data_embed/aprs-symbols-48-0.png',
+  'data_embed/aprs-symbols-48-1.png',
+  'data_embed/aprs-symbols-48-2.png',
 ]
 
 string_to_find_str = "String"