Moved UI and utility functions outside openwebrx.js.

htdocs/index.html

@@ -329,7 +329,7 @@
                             <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="UI.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 class="openwebrx-button openwebrx-square-button openwebrx-record-button" onclick="UI.toggleRecording();" title="Record audio">REC</div>
                         </div>
                         <div class="openwebrx-panel-line">
                             <div id="openwebrx-smeter">

htdocs/lib/MessagePanel.js

@@ -740,7 +740,7 @@ SstvMessagePanel.prototype.pushMessage = function(msg) {
         var f = msg.frequency>0? ' at ' + Math.floor(msg.frequency/1000) + 'kHz' : '';
         var h = '<div>' + msg.timestamp + ' ' + msg.width + 'x' + msg.height +
             ' ' + msg.sstvMode + f + '</div>';
-        var c = '<div onclick="saveCanvas(\'' + msg.filename + '\');">' +
+        var c = '<div onclick="Utils.saveCanvas(\'' + msg.filename + '\');">' +
             '<canvas class="frame" id="' + msg.filename +
             '" width="' + msg.width + '" height="' + msg.height +
             '"></canvas></div>';
@@ -809,7 +809,7 @@ FaxMessagePanel.prototype.pushMessage = function(msg) {
         var f = msg.frequency>0? ' at ' + Math.floor(msg.frequency/1000) + 'kHz' : '';
         var h = '<div>' + msg.timestamp + ' ' + msg.width + 'x' + msg.height +
             ' ' + msg.faxMode + f + '</div>';
-        var c = '<div onclick="saveCanvas(\'' + msg.filename + '\');">' +
+        var c = '<div onclick="Utils.saveCanvas(\'' + msg.filename + '\');">' +
             '<canvas class="frame" id="' + msg.filename +
             '" width="' + msg.width + '" height="' + msg.height +
             '"></canvas></div>';

htdocs/lib/UI.js

@@ -139,6 +139,25 @@ UI.updateNR = function() {
     }));
 }
 
+//
+// Audio Recording Controls
+//
+
+UI.toggleRecording = function(on) {
+    // If no argument given, toggle audio recording
+    var toggle = typeof(on) === 'undefined';
+
+    var $recButton = $('.openwebrx-record-button');
+
+    if (audioEngine.recording && (toggle || !on)) {
+        audioEngine.stopRecording();
+        $recButton.css('animation-name', '');
+    } else if (toggle || on) {
+        audioEngine.startRecording();
+        $recButton.css('animation-name', 'openwebrx-record-animation');
+    }
+};
+
 //
 // Look & Feel Controls
 //

htdocs/lib/Utils.js

@@ -233,6 +233,30 @@ Utils.mmsiIsGround = function(mmsi) {
     return mmsi.substring(0, 2) === '00';
 };
 
+// Save given canvas into a PNG file.
+Utils.saveCanvas = function(canvas) {
+    // Get canvas by its ID
+    var c = document.getElementById(canvas);
+    if (c == null) return;
+
+    // Convert canvas to a data blob
+    c.toBlob(function(blob) {
+        // Create and click a link to the canvas data URL
+        var a = document.createElement('a');
+        a.href = window.URL.createObjectURL(blob);
+        a.style = 'display: none';
+        a.download = canvas + ".png";
+        document.body.appendChild(a);
+        a.click();
+
+        // Get rid of the canvas data URL
+        setTimeout(function() {
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(a.href);
+        }, 0);
+    }, 'image/png');
+};
+
 //
 // Local Storage Access
 //

htdocs/openwebrx.js

@@ -35,54 +35,6 @@ var secondary_fft_size;
 var tuning_step_default = 1;
 var tuning_step = 1;
 
-function toggleSection(el) {
-    var next_el = el.nextElementSibling;
-    if (next_el) {
-        if (next_el.style.display === "none") {
-            el.innerHTML = el.innerHTML.replace("\u25B4", "\u25BE");
-            next_el.style.display = "block";
-        } else {
-            el.innerHTML = el.innerHTML.replace("\u25BE", "\u25B4");
-            next_el.style.display = "none";
-        }
-    }
-}
-
-function toggleRecording() {
-    var $recButton = $('.openwebrx-record-button');
-
-    if (audioEngine.recording) {
-        audioEngine.stopRecording();
-        $recButton.css('animation-name', '');
-    } else {
-        audioEngine.startRecording();
-        $recButton.css('animation-name', 'openwebrx-record-animation');
-    }
-}
-
-function saveCanvas(canvas) {
-    // Get canvas by its ID
-    var c = document.getElementById(canvas);
-    if (c == null) return;
-
-    // Convert canvas to a data blob
-    c.toBlob(function(blob) {
-        // Create and click a link to the canvas data URL
-        var a = document.createElement('a');
-        a.href = window.URL.createObjectURL(blob);
-        a.style = 'display: none';
-        a.download = canvas + ".png";
-        document.body.appendChild(a);
-        a.click();
-
-        // Get rid of the canvas data URL
-        setTimeout(function() {
-            document.body.removeChild(a);
-            window.URL.revokeObjectURL(a.href);
-        }, 0);
-    }, 'image/png');
-}
-
 function zoomInOneStep() {
     zoom_set(zoom_level + 1);
 }