diff --git a/htdocs/lib/Bandplan.js b/htdocs/lib/Bandplan.js
index b969d947..67e12cbf 100644
--- a/htdocs/lib/Bandplan.js
+++ b/htdocs/lib/Bandplan.js
@@ -1,7 +1,8 @@
 function Bandplan(el) {
-    this.el    = el;
-    this.bands = [];
-    this.ctx   = null;
+    this.el      = el;
+    this.bands   = [];
+    this.ctx     = null;
+    this.enabled = false;
 
     // Make sure canvas fills the container
     el.style.width  = '100%';
@@ -15,10 +16,10 @@ function Bandplan(el) {
 
     // Colors used for band types
     this.colors = {
-        'hamradio' : 'rgba(0, 255, 0, 0.5)',
-        'broadcast': 'rgba(0, 0, 255, 0.5)',
-        'public'   : 'rgba(191, 64, 0, 0.5)',
-        'service'  : 'rgba(255, 0, 0, 0.5)'
+        'hamradio' : '#006000',
+        'broadcast': '#000080',
+        'public'   : '#400040',
+        'service'  : '#800000'
     };
 };
 
@@ -33,25 +34,35 @@ Bandplan.prototype.update = function(bands) {
 };
 
 Bandplan.prototype.draw = function() {
+    // Must be enabled to draw
+    if (!this.enabled) return;
+
     var width  = this.el.offsetWidth;
     var height = this.el.offsetHeight;
 
-    // Do not draw if not shown
-    if (!height) return;
+    // If new dimensions are available...
+    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...
-    if (!this.ctx || width!=this.el.width || height!=this.el.height) {
-        this.el.width  = width;
-        this.el.height = height;
-
-        this.ctx = this.el.getContext('2d');
-        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';
+            this.ctx = this.el.getContext('2d');
+            this.ctx.lineWidth = height - 2;
+            this.ctx.fillStyle = '#FFFFFF';
+            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
     this.ctx.clearRect(0, 0, width, height);
 
@@ -60,7 +71,7 @@ Bandplan.prototype.draw = function() {
     if (!range || !this.bands.length) return;
 
     // Center of the ribbon
-    height /= 2;
+    height = (height - 2) / 2;
 
     //console.log("Drawing range of " + range.start + " - " + range.end);
 
@@ -89,13 +100,17 @@ Bandplan.prototype.draw = function() {
 };
 
 Bandplan.prototype.toggle = function(on) {
-    // If no argument given, toggle spectrum
-    if (typeof(on) === 'undefined') on = !this.el.offsetHeight;
+    // If no argument given, toggle bandplan
+    if (typeof(on) === 'undefined') on = !this.enabled;
 
-    // Toggle based on the current redraw timer state
-    if (this.el.offsetHeight && !on) {
-        this.el.parentElement.classList.remove('expanded');
-    } else if (!this.el.offsetHeight && on) {
-        this.el.parentElement.classList.add('expanded');
+    if (on != this.enabled) {
+        this.enabled = on;
+        if (on) {
+            this.el.parentElement.classList.add('expanded');
+            // Try drawing right away, since we may know dimensions
+            this.draw();
+        } else {
+            this.el.parentElement.classList.remove('expanded');
+        }
     }
 };