From f1a1719e865c9ce95b40dfc92f7c570bd93da73d Mon Sep 17 00:00:00 2001
From: Marat Fayzullin <luarvique@gmail.com>
Date: Mon, 13 Feb 2023 14:31:28 -0500
Subject: [PATCH] SSTV integration started working.

---
 htdocs/css/openwebrx.css   |  2 +-
 htdocs/lib/MessagePanel.js | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index cd44f7d7..ce24230f 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -1209,7 +1209,7 @@ img.openwebrx-mirror-img
     border: 2px dotted white;
 }
 
- .aprs-symbol {
+.aprs-symbol {
     display: inline-block;
     width: 15px;
     height: 15px;
diff --git a/htdocs/lib/MessagePanel.js b/htdocs/lib/MessagePanel.js
index c1be6b89..eb01d674 100644
--- a/htdocs/lib/MessagePanel.js
+++ b/htdocs/lib/MessagePanel.js
@@ -291,6 +291,7 @@ SstvMessagePanel.prototype.render = function() {
 SstvMessagePanel.prototype.pushMessage = function(msg) {
     var $b = $(this.el).find('tbody');
     if(msg.hasOwnProperty('message')) {
+        // Append a new debug message text
         $b.append($('<tr><td class="message">' + msg.message + '</td></tr>'));
         $b.scrollTop($b[0].scrollHeight);
     }
@@ -298,21 +299,27 @@ SstvMessagePanel.prototype.pushMessage = function(msg) {
         var h = 'SCREEN ' + msg.width + "x" + msg.height + '<br>';
         var c = '<canvas width="' + msg.width + '" height="' + msg.height +
             '" class="frame"></canvas>';
+        // Append a new canvas
         $b.append($('<tr><td class="message">' + h + c + '</td></tr>'));
         $b.scrollTop($b[0].scrollHeight);
+        // Save canvas context and dimensions for future use
+        this.ctx    = $(this.el).find('canvas').last().getContext("2d");
+        this.width  = msg.width;
+        this.height = msg.height;
     }
     else if(msg.width>0 && msg.height>0 && msg.line>=0 && msg.hasOwnProperty('pixels')) {
+        // Will copy pixels to img
         var pixels = atob(msg.pixels);
-        var canvas = $(this.el).find('canvas');
-        var ctx = canvas.getContext("2d");
-        var img = $ctx.createImageData(msg.width, 1);
+        var img = this.ctx.createImageData(msg.width, 1);
+        // Convert BMP BGR pixels into HTML RGBA pixels
         for (var x = 0; x < msg.width; x++) {
             img.data[x*4 + 0] = pixels.charCodeAt(x*3 + 2);
             img.data[x*4 + 1] = pixels.charCodeAt(x*3 + 1);
             img.data[x*4 + 2] = pixels.charCodeAt(x*3 + 0);
             img.data[x*4 + 3] = 0xFF;
         }
-        ctx.putImageData(img, 0, msg.line);
+        // Render scanline
+        this.ctx.putImageData(img, 0, msg.line);
     }
 };