Final fixed to bandplan display.

This commit is contained in:
Marat Fayzullin 2024-06-01 00:54:27 -04:00
parent 8472181f8f
commit 45fcd0a772
1 changed files with 43 additions and 28 deletions

View File

@ -1,7 +1,8 @@
function Bandplan(el) { function Bandplan(el) {
this.el = el; this.el = el;
this.bands = []; this.bands = [];
this.ctx = null; this.ctx = null;
this.enabled = false;
// Make sure canvas fills the container // Make sure canvas fills the container
el.style.width = '100%'; el.style.width = '100%';
@ -15,10 +16,10 @@ function Bandplan(el) {
// Colors used for band types // Colors used for band types
this.colors = { this.colors = {
'hamradio' : 'rgba(0, 255, 0, 0.5)', 'hamradio' : '#006000',
'broadcast': 'rgba(0, 0, 255, 0.5)', 'broadcast': '#000080',
'public' : 'rgba(191, 64, 0, 0.5)', 'public' : '#400040',
'service' : 'rgba(255, 0, 0, 0.5)' 'service' : '#800000'
}; };
}; };
@ -33,25 +34,35 @@ Bandplan.prototype.update = function(bands) {
}; };
Bandplan.prototype.draw = function() { Bandplan.prototype.draw = function() {
// Must be enabled to draw
if (!this.enabled) return;
var width = this.el.offsetWidth; var width = this.el.offsetWidth;
var height = this.el.offsetHeight; var height = this.el.offsetHeight;
// Do not draw if not shown // If new dimensions are available...
if (!height) return; if ((height>0) && (width>0)) {
// If canvas got resized or no context yet...
if (!this.ctx || width!=this.el.width || height!=this.el.height) {
this.el.width = width;
this.el.height = height;
// If canvas got resized, or no context yet... this.ctx = this.el.getContext('2d');
if (!this.ctx || width!=this.el.width || height!=this.el.height) { this.ctx.lineWidth = height - 2;
this.el.width = width; this.ctx.fillStyle = '#FFFFFF';
this.el.height = height; this.ctx.textAlign = 'center';
this.ctx.font = 'bold 11px sans-serif';
this.ctx = this.el.getContext('2d'); this.ctx.textBaseline = 'middle';
this.ctx.lineWidth = height; }
this.ctx.fillStyle = 'rgba(255, 255, 255, 1.0)';
this.ctx.textAlign = 'center';
this.ctx.font = 'bold 11px sans-serif';
this.ctx.textBaseline = 'middle';
} }
// Use whatever dimensions we have at the moment
width = this.el.width;
height = this.el.height;
// Must have context and dimensions here
if (!this.ctx || !height || !width) return;
// Clear canvas to transparency // Clear canvas to transparency
this.ctx.clearRect(0, 0, width, height); this.ctx.clearRect(0, 0, width, height);
@ -60,7 +71,7 @@ Bandplan.prototype.draw = function() {
if (!range || !this.bands.length) return; if (!range || !this.bands.length) return;
// Center of the ribbon // Center of the ribbon
height /= 2; height = (height - 2) / 2;
//console.log("Drawing range of " + range.start + " - " + range.end); //console.log("Drawing range of " + range.start + " - " + range.end);
@ -89,13 +100,17 @@ Bandplan.prototype.draw = function() {
}; };
Bandplan.prototype.toggle = function(on) { Bandplan.prototype.toggle = function(on) {
// If no argument given, toggle spectrum // If no argument given, toggle bandplan
if (typeof(on) === 'undefined') on = !this.el.offsetHeight; if (typeof(on) === 'undefined') on = !this.enabled;
// Toggle based on the current redraw timer state if (on != this.enabled) {
if (this.el.offsetHeight && !on) { this.enabled = on;
this.el.parentElement.classList.remove('expanded'); if (on) {
} else if (!this.el.offsetHeight && on) { this.el.parentElement.classList.add('expanded');
this.el.parentElement.classList.add('expanded'); // Try drawing right away, since we may know dimensions
this.draw();
} else {
this.el.parentElement.classList.remove('expanded');
}
} }
}; };