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($('
| ' + msg.message + ' |
'));
$b.scrollTop($b[0].scrollHeight);
}
@@ -298,21 +299,27 @@ SstvMessagePanel.prototype.pushMessage = function(msg) {
var h = 'SCREEN ' + msg.width + "x" + msg.height + '
';
var c = '';
+ // Append a new canvas
$b.append($('| ' + h + c + ' |
'));
$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);
}
};