Final fixed to bandplan display.
This commit is contained in:
parent
8472181f8f
commit
45fcd0a772
|
|
@ -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');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue