add new nicer dmr status display

htdocs/index.html

@@ -170,6 +170,24 @@
                 </div>
                 <div class="openwebrx-panel" id="openwebrx-panel-metadata" data-panel-name="metadata" data-panel-pos="left" data-panel-order="1" data-panel-size="615,36">
                 </div>
+                <div class="openwebrx-panel" id="openwebrx-panel-metadata-dmr" data-panel-name="metadata-dmr" data-panel-pos="left" data-panel-order="2" data-panel-size="300,220">
+                    <div class="openwebrx-dmr-panel">
+                        <div class="openwebrx-dmr-timeslot-panel">
+                            <div>Timeslot 1</div>
+                            <div class="openwebrx-dmr-user-image"></div>
+                            <div class="openwebrx-dmr-id"></div>
+                            <div class="openwebrx-dmr-name"></div>
+                            <div class="openwebrx-dmr-talkgroup"></div>
+                        </div>
+                        <div class="openwebrx-dmr-timeslot-panel">
+                            <div>Timeslot 2</div>
+                            <div class="openwebrx-dmr-user-image"></div>
+                            <div class="openwebrx-dmr-id"></div>
+                            <div class="openwebrx-dmr-name"></div>
+                            <div class="openwebrx-dmr-talkgroup"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
     </div>
 </div>

htdocs/openwebrx.css

@@ -928,3 +928,51 @@ img.openwebrx-mirror-img
     border-color: Red;
 }
 
+#openwebrx-panel-metadata-dmr {
+    background: none;
+    padding: 0;
+}
+
+.openwebrx-dmr-panel {
+    height: 200px;
+
+    outline: 1px solid #111;
+    border-top: 1px solid #555;
+    padding: 10px;
+    background: #333;
+}
+
+.openwebrx-dmr-timeslot-panel {
+    width: 133px;
+    height: 194px;
+    float: left;
+    margin-right: 10px;
+
+    padding:2px 0;
+    color: #333;
+    background: #575757;
+    border: 1px solid #000;
+    border-right: 1px solid #353535;
+    border-bottom: 1px solid #353535;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 2px;
+}
+
+.openwebrx-dmr-timeslot-panel.active {
+    background-color: #95bbdf;
+}
+
+.openwebrx-dmr-timeslot-panel:last-child {
+    margin-right: 0;
+}
+
+.openwebrx-dmr-timeslot-panel.active .openwebrx-dmr-user-image {
+    background-image: url("gfx/openwebrx-user.png");
+    width:133px;
+    height:133px;
+}
+
+.openwebrx-dmr-timeslot-panel {
+    text-align: center;
+}

htdocs/openwebrx.js

@@ -620,6 +620,9 @@ function demodulator_analog_replace(subtype, for_digital)
 	demodulator_add(new demodulator_default_analog(temp_offset,subtype));
 	demodulator_buttons_update();
 	clear_metadata();
+	if (subtype == "dmr") {
+	    toggle_panel("openwebrx-panel-metadata-dmr", true);
+	}
 }
 
 function demodulator_set_offset_frequency(which,to_what)
@@ -1316,28 +1319,22 @@ function update_metadata(meta) {
     if (meta.protocol) switch (meta.protocol) {
         case 'DMR':
             if (meta.slot) {
-                var html = 'Timeslot: ' + meta.slot;
+                el = $(".openwebrx-dmr-panel .openwebrx-dmr-timeslot-panel").get(meta.slot);
-                if (meta.type) html += ' Typ: ' + meta.type;
+                var id = "";
-                if (meta.additional && meta.additional.callsign) {
+                var name = "";
-                    html += ' Source: ' + meta.additional.callsign;
+                var talkgroup = "";
-                    if (meta.additional.fname) {
+                if (meta.type && meta.type != "data") {
-                        html += ' (' + meta.additional.fname + ')';
+                    id = (meta.additional && meta.additional.callsign) || meta.source || "";
-                    }
+                    name = (meta.additional && meta.additional.fname) || "";
-                } else if (meta.source) {
+                    talkgroup = meta.target || "";
-                    html += ' Source: ' + meta.source;
+                    $(el).addClass("active");
-                }
-                if (meta.target) html += ' Target: ' + meta.target;
-                update = function(_, el) {
-                    var slotEl = el.getElementsByClassName('slot-' + meta.slot);
-                    if (!slotEl.length) {
-                        slotEl = document.createElement('div');
-                        slotEl.className = 'slot-' + meta.slot;
-                        el.appendChild(slotEl);
                 } else {
-                        slotEl = slotEl[0];
+                    $(el).removeClass("active");
                 }
-                    slotEl.innerHTML = html;
+                $(el).find(".openwebrx-dmr-id").text(id);
-                };
+                $(el).find(".openwebrx-dmr-name").text(name);
+                $(el).find(".openwebrx-dmr-talkgroup").text(talkgroup);
+
             }
             break;
         case 'YSF':
@@ -1351,15 +1348,16 @@ function update_metadata(meta) {
             update = function(_, el) {
                 el.innerHTML = html;
             }
+            $('.openwebrx-panel[data-panel-name="metadata"]').each(update);
+            toggle_panel("openwebrx-panel-metadata", true);
             break;
     }
 
-    $('.openwebrx-panel[data-panel-name="metadata"]').each(update);
-    toggle_panel("openwebrx-panel-metadata", true);
 }
 
 function clear_metadata() {
     toggle_panel("openwebrx-panel-metadata", false);
+    toggle_panel("openwebrx-panel-metadata-dmr", false);
 }
 
 function add_problem(what)