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); } };