From 1088a261b5a339ae68a6dbbaf485207960b48da0 Mon Sep 17 00:00:00 2001
From: Marat Fayzullin <luarvique@gmail.com>
Date: Sat, 25 Mar 2023 00:03:53 -0400
Subject: [PATCH] Improving code.

---
 htdocs/css/openwebrx.css |  1 +
 htdocs/lib/Spectrum.js   |  7 +++++++
 htdocs/openwebrx.js      | 21 +++++++++------------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 0a7e2a91..946e74c6 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -1420,4 +1420,5 @@ img.openwebrx-mirror-img
 .openwebrx-spectrum-container.expanded {
     opacity: 1;
     height: 50px;
+    border-bottom: 2px solid white;
 }
diff --git a/htdocs/lib/Spectrum.js b/htdocs/lib/Spectrum.js
index f0ddbf85..9355ea92 100644
--- a/htdocs/lib/Spectrum.js
+++ b/htdocs/lib/Spectrum.js
@@ -5,6 +5,13 @@ function Spectrum(el) {
     this.max   = 0;
     this.timer = 0;
     this.data  = [];
+
+    // Make sure canvas fills the container
+    el.style.width  = '100%';
+    el.style.height = '100%';
+
+    // Start with hidden spectrum display
+    this.close();
 }
 
 Spectrum.prototype.update = function(data) {
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 267e5ef7..352a6406 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -1429,8 +1429,6 @@ function waterfall_add(data) {
     if (!waterfall_setup_done) return;
     var w = fft_size;
 
-    if (spectrum != null) spectrum.update(data);
-
     if (waterfall_measure_minmax_now) {
         var levels = waterfall_measure_minmax_do(data);
         waterfall_measure_minmax_now = false;
@@ -1443,6 +1441,9 @@ function waterfall_add(data) {
         waterfallColorsContinuous(level);
     }
 
+    // Feed spectrum display with data
+    if (spectrum) spectrum.update(data);
+
     // create new canvas if the current one is full (or there isn't one)
     if (canvas_actual_line <= 0) add_canvas();
 
@@ -1657,21 +1658,17 @@ function initPanels() {
 function initSpectrum() {
     var canvas = document.getElementById('openwebrx-spectrum-canvas');
 
-    // Assume spectrum canvas behaving like scale canvas
-    canvas.addEventListener("mousedown", scale_canvas_mousedown, false);
-    canvas.addEventListener("mousemove", scale_canvas_mousemove, false);
-    canvas.addEventListener("mouseup", scale_canvas_mouseup, false);
-    canvas.addEventListener("wheel", scale_canvas_mousewheel, false);
+    // Assume spectrum display behaving like the waterfall
+    canvas.addEventListener("mousedown", canvas_mousedown, false);
+    canvas.addEventListener("mousemove", canvas_mousemove, false);
+    canvas.addEventListener("mouseup", canvas_mouseup, false);
+    canvas.addEventListener("wheel", canvas_mousewheel, false);
     canvas.addEventListener("touchmove", process_touch, false);
     canvas.addEventListener("touchend", process_touch, false);
     canvas.addEventListener("touchstart", process_touch, false);
 
-    canvas.style.width  = '100%';
-    canvas.style.height = '50px';
-
-    // Start with hidden spectrum display
+    // Create spectrum display
     spectrum = new Spectrum(canvas);
-    spectrum.close();
 }
 
 function toggleSpectrum() {