Final touches to the spectrum display.

htdocs/gfx/svg-defs.svg

@@ -29,5 +29,6 @@
         <g id="tuning-step" fill="#fff" stroke="#fff" stroke-width="4.0"><path d="M 3.75,67.704399 22.378472,40.00535 3.75,12.306311 Z M 76.25,12.306311 57.621528,40.00535 76.25,67.704399 Z m -18.628472,27.699039 -35.243056,0"/></g>
         <g id="left" fill="#fff" stroke="#fff" stroke-width="4.0"><path d="M 55,15 55,65 15,40 Z"/></g>
         <g id="right" fill="#fff" stroke="#fff" stroke-width="4.0"><path d="M 25,15 25,65 65,40 Z"/></g>
+        <g id="spectrum" fill="#0000" stroke="#fff" stroke-width="7"><path d="M 9.7579071,55.000065 C 9.7579071,55.000065 15,10 25.288469,9.8661268 35,10 45,70 54.985123,70.170795 65,70 69.983185,25.030854 69.983185,25.030854"/><path d="m 0,40 80,0"/></g>
     </defs>
 </svg>

htdocs/index.html

@@ -241,7 +241,7 @@
                         <div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomOutOneStep();" title="Zoom out one step"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-out"></use></svg></div>
                         <div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomInTotal();"  title="Zoom in totally"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-in-total"></use></svg></div>
                         <div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="zoomOutTotal();" title="Zoom out totally"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#zoom-out-total"></use></svg></div>
-                        <div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="toggleSpectrum();" title="Toggle spectrum display"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-default"></use></svg></div>
+                        <div class="openwebrx-button openwebrx-square-button openwebrx-zoom-button" onclick="toggleSpectrum();" title="Toggle spectrum display"><svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#spectrum"></use></svg></div>
                         <div class="openwebrx-button openwebrx-square-button openwebrx-record-button" onclick="toggleRecording();" title="Record audio">REC</div>
                     </div>
                     <div class="openwebrx-panel-line">

htdocs/lib/Spectrum.js

@@ -1,5 +1,6 @@
-function Spectrum(el) {
+function Spectrum(el, msec) {
     this.el    = el;
+    this.msec  = msec;
     this.ctx   = null;
     this.min   = 0;
     this.max   = 0;
@@ -24,8 +25,9 @@ Spectrum.prototype.update = function(data) {
     }
 
 //    this.min = Math.min(...data);
+//    this.max = Math.max(...data);
     this.min = waterfall_min_level - 5;
-    this.max = Math.max(...data);
+    this.max = waterfall_max_level + 5;
 };
 
 Spectrum.prototype.draw = function() {
@@ -55,7 +57,7 @@ Spectrum.prototype.draw = function() {
     // Clear canvas to transparency
     this.ctx.clearRect(0, 0, spec_width, spec_height);
 
-    if(spec_width < data_width) {
+    if(spec_width <= data_width) {
         var x_ratio = data_width / spec_width;
         var y_ratio = spec_height / data_height;
         for(var x=0; x<spec_width; x++) {
@@ -65,9 +67,12 @@ Spectrum.prototype.draw = function() {
     } else {
         var x_ratio = spec_width / data_width;
         var y_ratio = spec_height / data_height;
+        var x_pos   = 0;
         for(var x=0; x<data_width; x++) {
             var y = (this.data[data_start + x] - this.min) * y_ratio;
-            this.ctx.fillRect(x * x_ratio, spec_height, x_ratio, -y);
+            var k = ((x + 1) * x_ratio) | 0;
+            this.ctx.fillRect(x_pos, spec_height, k - x_pos, -y);
+            x_pos = k;
         }
     }
 };
@@ -93,7 +98,7 @@ Spectrum.prototype.open = function() {
     // Start redraw timer
     if (!this.timer) {
         var me = this;
-        this.timer = setInterval(function() { me.draw(); }, 100);
+        this.timer = setInterval(function() { me.draw(); }, this.msec);
     }
 }
 

htdocs/openwebrx.js

@@ -1170,15 +1170,18 @@ function on_ws_recv(evt) {
             case 1:
                 // FFT data
                 if (fft_compression === "none") {
-                    waterfall_add(new Float32Array(data));
+                    waterfall_f32 = new Float32Array(data);
                 } else if (fft_compression === "adpcm") {
                     fft_codec.reset();
 
                     waterfall_i16 = fft_codec.decode(new Uint8Array(data));
                     waterfall_f32 = new Float32Array(waterfall_i16.length - COMPRESS_FFT_PAD_N);
                     for (i = 0; i < waterfall_i16.length; i++) waterfall_f32[i] = waterfall_i16[i + COMPRESS_FFT_PAD_N] / 100;
-                    waterfall_add(waterfall_f32);
                 }
+                // Feed waterfall display with data
+                waterfall_add(waterfall_f32);
+                // Feed spectrum display with data
+                if (spectrum) spectrum.update(waterfall_f32);
                 break;
             case 2:
                 // audio data
@@ -1441,9 +1444,6 @@ 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();
 
@@ -1668,7 +1668,7 @@ function initSpectrum() {
     canvas.addEventListener("touchstart", process_touch, false);
 
     // Create spectrum display
-    spectrum = new Spectrum(canvas);
+    spectrum = new Spectrum(canvas, 150);
 }
 
 function toggleSpectrum() {

inkscape files/openwebrx-spectrum.svg

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="80"
+   viewBox="0 0 80 80"
+   version="1.1"
+   id="svg2431"
+   sodipodi:docname="openwebrx-spectrum.svg"
+   inkscape:version="0.91 r13725">
+  <defs
+     id="defs2425" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.741278"
+     inkscape:cx="39.875604"
+     inkscape:cy="42.649117"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="true"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1707"
+     inkscape:window-height="897"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4137" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata2428">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="original image"
+     style="display:inline">
+    <image
+       width="80"
+       height="71.287132"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,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 "
+       id="image4964"
+       x="0"
+       y="4.3564358"
+       style="display:none" />
+  </g>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="display:inline;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 9.7579071,55.000065 C 9.7579071,55.000065 15,10 25.288469,9.8661268 35,10 45,70 54.985123,70.170795 65,70 69.983185,25.030854 69.983185,25.030854"
+       id="path3226"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.99999988px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 0,40 80,40"
+       id="path4151"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>