threading frontend implementation

htdocs/css/openwebrx.css

@@ -924,37 +924,23 @@ img.openwebrx-mirror-img
     display: inline-block;
 }
 
-#openwebrx-panel-wsjt-message,
+.openwebrx-message-panel {
-#openwebrx-panel-packet-message,
-#openwebrx-panel-pocsag-message
-{
     height: 180px;
 }
 
-#openwebrx-panel-wsjt-message tbody,
+.openwebrx-message-panel tbody {
-#openwebrx-panel-packet-message tbody,
-#openwebrx-panel-pocsag-message tbody
-{
     display: block;
     overflow: auto;
     height: 150px;
     width: 100%;
 }
 
-#openwebrx-panel-wsjt-message thead tr,
+.openwebrx-message-panel thead tr {
-#openwebrx-panel-packet-message thead tr,
-#openwebrx-panel-pocsag-message thead tr
-{
     display: block;
 }
 
-#openwebrx-panel-wsjt-message th,
+.openwebrx-message-panel th,
-#openwebrx-panel-wsjt-message td,
+.openwebrx-message-panel td {
-#openwebrx-panel-packet-message th,
-#openwebrx-panel-packet-message td,
-#openwebrx-panel-pocsag-message th,
-#openwebrx-panel-pocsag-message td
-{
     width: 50px;
     text-align: left;
     padding: 1px 3px;
@@ -973,6 +959,25 @@ img.openwebrx-mirror-img
     width: 70px;
 }
 
+#openwebrx-panel-js8-message .message {
+    width: 470px;
+    max-width: 470px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    direction: rtl;
+    text-aligh: left;
+}
+
+#openwebrx-panel-js8-message .decimal {
+    text-align: right;
+    width: 35px;
+}
+
+#openwebrx-panel-js8-message .decimal.freq {
+    width: 70px;
+}
+
 #openwebrx-panel-packet-message .message {
     width: 410px;
     max-width: 410px;

htdocs/index.html

@@ -32,6 +32,7 @@
         <script src="static/lib/ProgressBar.js"></script>
         <script src="static/lib/Measurement.js"></script>
         <script src="static/lib/FrequencyDisplay.js"></script>
+        <script src="static/lib/Js8Threads.js"></script>
         <link rel="stylesheet" type="text/css" href="static/lib/nanoscroller.css" />
         <link rel="stylesheet" type="text/css" href="static/css/openwebrx.css" />
         <meta charset="utf-8">
@@ -67,7 +68,7 @@
                     </div>
                 </div>
             </div>
-            <table class="openwebrx-panel" id="openwebrx-panel-wsjt-message" style="display: none; width: 619px;" data-panel-name="wsjt-message">
+            <table class="openwebrx-panel openwebrx-message-panel" id="openwebrx-panel-wsjt-message" style="display: none; width: 619px;" data-panel-name="wsjt-message">
                 <thead><tr>
                     <th>UTC</th>
                     <th class="decimal">dB</th>
@@ -77,7 +78,15 @@
                 </tr></thead>
                 <tbody></tbody>
             </table>
-            <table class="openwebrx-panel" id="openwebrx-panel-packet-message" style="display: none; width: 619px;" data-panel-name="aprs-message">
+            <table class="openwebrx-panel openwebrx-message-panel" id="openwebrx-panel-js8-message" style="display:none; width: 619px;" data-panel-name="js8-message">
+                <thead><tr>
+                    <th>UTC</th>
+                    <th class="decimal freq">Freq</th>
+                    <th class="message">Message</th>
+                </tr></thead>
+                <tbody></tbody>
+            </table>
+            <table class="openwebrx-panel openwebrx-message-panel" id="openwebrx-panel-packet-message" style="display: none; width: 619px;" data-panel-name="aprs-message">
                 <thead><tr>
                     <th>UTC</th>
                     <th class="callsign">Callsign</th>
@@ -86,7 +95,7 @@
                 </tr></thead>
                 <tbody></tbody>
             </table>
-            <table class="openwebrx-panel" id="openwebrx-panel-pocsag-message" style="display: none; width: 619px;" data-panel-name="pocsag-message">
+            <table class="openwebrx-panel openwebrx-message-panel" id="openwebrx-panel-pocsag-message" style="display: none; width: 619px;" data-panel-name="pocsag-message">
                 <thead><tr>
                     <th class="address">Address</th>
                     <th class="message">Message</th>

htdocs/lib/Js8Threads.js

@@ -0,0 +1,86 @@
+Js8Thread = function(el){
+    this.messages = [];
+    this.el = el;
+}
+
+Js8Thread.prototype.getAverageFrequency = function(){
+    var total = this.messages.map(function(message){
+        return message.freq;
+    }).reduce(function(t, f){
+        return t + f;
+    }, 0);
+    return total / this.messages.length;
+}
+
+Js8Thread.prototype.pushMessage = function(message) {
+    this.messages.push(message);
+    this.render();
+}
+
+Js8Thread.prototype.render = function() {
+    this.el.html(
+        '<td>' + this.renderTimestamp(this.getLatestTimestamp()) + '</td>' +
+        '<td class="decimal freq">' + Math.round(this.getAverageFrequency()) + '</td>' +
+        '<td class="message">' + this.renderMessages() + '</td>'
+    );
+}
+
+Js8Thread.prototype.getLatestTimestamp() {
+    return this.messages(this.messages.length - 1).timestamp;
+}
+
+Js8Thread.prototype.renderMessages = function() {
+    res = []
+    for (var i = 0; i < this.messages.length; i++) {
+        var msg = this.messages[i];
+        if (msg.thread_type & 1) {
+            res.push('[ ');
+        } else if (i > 0 && msg.timestamp - this.messages[i - 1].timestamp > 15000) {
+            res.push(' ... ');
+        }
+        res.push(msg.msg);
+        if (msg.thread_type & 2) {
+            res.push(' ]');
+        }
+    }
+    return res.join('');
+}
+
+Js8Thread.prototype.renderTimestamp = function(timestamp) {
+    var t = new Date(timestamp);
+    var pad = function (i) {
+        return ('' + i).padStart(2, "0");
+    };
+    return pad(t.getUTCHours()) + pad(t.getUTCMinutes()) + pad(t.getUTCSeconds());
+}
+
+Js8Threader = function(el){
+    this.threads = [];
+    this.tbody = $(el).find('tbody');
+    console.info(this.tbody);
+};
+
+Js8Threader.prototype.findThread = function(freq) {
+    var matching = this.threads.filter(function(thread) {
+        return Math.abs(thread.getAverageFrequency() - freq) <= 5;
+    });
+    return matching[0] || false;
+}
+
+Js8Threader.prototype.pushMessage = function(message) {
+    var thread = this.findThread(message.freq);
+    if (!thread) {
+        var line = $("<tr></tr>")
+        this.tbody.append(line);
+        var thread = new Js8Thread(line);
+        this.threads.push(thread);
+    }
+    thread.pushMessage(message);
+}
+
+$.fn.js8 = function() {
+    if (!this.data('threader')) {
+        this.data('threader', new Js8Threader(this));
+    }
+    return this.data('threader');
+}

htdocs/openwebrx.js

@@ -1132,8 +1132,10 @@ function on_ws_recv(evt) {
                     case "metadata":
                         update_metadata(json['value']);
                         break;
-                    case "wsjt_message":
                     case "js8_message":
+                        $("#openwebrx-panel-js8-message").js8().pushMessage(json['value']);
+                        break;
+                    case "wsjt_message":
                         update_wsjt_panel(json['value']);
                         break;
                     case "dial_frequencies":
@@ -2047,7 +2049,8 @@ function demodulator_digital_replace(subtype) {
     demodulator_buttons_update();
     $('#openwebrx-panel-digimodes').attr('data-mode', subtype);
     toggle_panel("openwebrx-panel-digimodes", true);
-    toggle_panel("openwebrx-panel-wsjt-message", ['ft8', 'wspr', 'jt65', 'jt9', 'ft4', 'js8'].indexOf(subtype) >= 0);
+    toggle_panel("openwebrx-panel-wsjt-message", ['ft8', 'wspr', 'jt65', 'jt9', 'ft4'].indexOf(subtype) >= 0);
+    toggle_panel("openwebrx-panel-js8-message", subtype == "js8");
     toggle_panel("openwebrx-panel-packet-message", subtype === "packet");
     toggle_panel("openwebrx-panel-pocsag-message", subtype === "pocsag");
     updateHash();
@@ -2141,6 +2144,7 @@ function secondary_demod_close_window() {
     toggle_panel("openwebrx-panel-wsjt-message", false);
     toggle_panel("openwebrx-panel-packet-message", false);
     toggle_panel("openwebrx-panel-pocsag-message", false);
+    toggle_panel("openwebrx-panel-js8-message", false);
 }
 
 function secondary_demod_waterfall_add(data) {

owrx/connection.py

@@ -341,6 +341,7 @@ class OpenWebRxReceiverClient(Client):
             "db": frame.db,
             "dt": frame.dt,
             "freq": freq + frame.freq,
+            "thread_type": frame.thread_type
         }})