show aprs symbols in decoding list, too

htdocs/css/openwebrx.css

@@ -870,6 +870,25 @@ img.openwebrx-mirror-img
     text-align: center;
 }
 
+.aprs-symbol {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    background-size: 240px 90px;
+}
+
+.aprs-symboltable-normal {
+    background-image: url(../../aprs-symbols/aprs-symbols-24-0.png)
+}
+
+.aprs-symboltable-alternate {
+    background-image: url(../../aprs-symbols/aprs-symbols-24-1.png)
+}
+
+.aprs-symboltable-overlay {
+    background-image: url(../../aprs-symbols/aprs-symbols-24-2.png)
+}
+
 #openwebrx-panel-digimodes[data-mode="ft8"]    #openwebrx-digimode-content-container,
 #openwebrx-panel-digimodes[data-mode="wspr"]   #openwebrx-digimode-content-container,
 #openwebrx-panel-digimodes[data-mode="jt65"]   #openwebrx-digimode-content-container,

htdocs/openwebrx.js

@@ -1482,8 +1482,34 @@ function update_packet_panel(msg) {
     }
 
     var link = '';
+    var classes = [];
+    var styles = {};
+    var overlay = '';
+    var stylesToString = function(s) {
+        return $.map(s, function(value, key){ return key + ':' + value + ';'}).join('')
+    }
+    if (msg.symbol) {
+        classes.push('aprs-symbol');
+        classes.push('aprs-symboltable-' + (msg.symbol.table == '/' ? 'normal' : 'alternate'));
+        styles['background-position-x'] = -(msg.symbol.index % 16) * 15 + 'px';
+        styles['background-position-y'] = -Math.floor(msg.symbol.index / 16) * 15 + 'px';
+        if (msg.symbol.table != '/' && msg.symbol.table != '\\') {
+            s = {}
+            s['background-position-x'] = -(msg.symbol.tableindex % 16) * 15 + 'px';
+            s['background-position-y'] = -Math.floor(msg.symbol.tableindex / 16) * 15 + 'px';
+            overlay='<div class="aprs-symbol aprs-symboltable-overlay" style="' + stylesToString(s) + '"></div>';
+        }
+    } else if (msg.lat && msg.lon) {
+        classes.push('openwebrx-maps-pin');
+    }
+    var attrs = [
+        'class="' + classes.join(' ') + '"',
+        'style="' + stylesToString(styles) + '"',
+    ].join(' ');
     if (msg.lat && msg.lon) {
-        link = '<a class="openwebrx-maps-pin" href="/map?callsign=' + source + '" target="_blank"></a>';
+        link = '<a ' + attrs + ' href="/map?callsign=' + source + '" target="_blank">' + overlay + '</a>';
+    } else {
+        link = '<div ' + attrs + '>' + overlay + '</div>'
     }
 
     $b.append($(

owrx/aprs.py

@@ -37,6 +37,15 @@ def decodeBase91(input):
     base = decodeBase91(input[:-1]) * 91 if len(input) > 1 else 0
     return base + (ord(input[-1]) - 33)
 
+def getSymbolData(symbol, table):
+    return {
+        "symbol": symbol,
+        "table": table,
+        "index": ord(symbol) - 33,
+        "tableindex": ord(table) - 33,
+    }
+
+
 
 class Ax25Parser(object):
     def parse(self, ax25frame):
@@ -210,17 +219,13 @@ class AprsParser(object):
         lon = int(raw[9:12]) + float(raw[12:17]) / 60
         if raw[17] == "W":
             lon *= -1
-        return {"lat": lat, "lon": lon, "symbol": {"table": raw[8], "symbol": raw[18], "index": ord(raw[18]) - 33}}
+        return {"lat": lat, "lon": lon, "symbol": getSymbolData(raw[18], raw[8])}
 
     def parseCompressedCoordinates(self, raw):
         return {
             "lat": 90 - decodeBase91(raw[1:5]) / 380926,
             "lon": -180 + decodeBase91(raw[5:9]) / 190463,
-            "symbol": {
-                "table": raw[0],
-                "symbol": raw[9],
-                "index": ord(raw[9]) - 33
-            },
+            "symbol": getSymbolData(raw[9], raw[0]),
         }
 
     def parseTimestamp(self, raw):
@@ -575,9 +580,5 @@ class MicEParser(object):
             "course": course,
             "device": device,
             "type": "Mic-E",
-            "symbol": {
-                "table": chr(information[8]),
-                "symbol": chr(information[7]),
-                "index": information[7] - 33
-            }
+            "symbol": getSymbolData(chr(information[7]), chr(information[8]))
         }