From d57ae59697a423657d9380a75bf7ff35ad2c1d55 Mon Sep 17 00:00:00 2001
From: Marat Fayzullin <luarvique@gmail.com>
Date: Sun, 5 Nov 2023 18:56:55 -0500
Subject: [PATCH] Moving UI controls into UI.js. Saving values.

---
 htdocs/index.html          |  20 ++--
 htdocs/lib/UI.js           | 193 +++++++++++++++++++++++++++++++++++++
 htdocs/openwebrx.js        | 110 ++-------------------
 owrx/controllers/assets.py |   1 +
 4 files changed, 214 insertions(+), 110 deletions(-)
 create mode 100644 htdocs/lib/UI.js

diff --git a/htdocs/index.html b/htdocs/index.html
index ebcef0ff..77753c93 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -206,11 +206,11 @@
                     <div class="openwebrx-section-divider" onclick="toggleSection(this);">&blacktriangledown;&nbsp;Controls</div>
                     <div class="openwebrx-section">
                         <div class="openwebrx-panel-line">
-                            <div title="Mute on/off" class="openwebrx-button openwebrx-slider-button openwebrx-mute-button" onclick="toggleMute();">
+                            <div title="Mute on/off" class="openwebrx-button openwebrx-slider-button openwebrx-mute-button" onclick="UI.toggleMute();">
                                 <svg class="unmuted" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#speaker"></use></svg>
                                 <svg class="muted" viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#speaker-muted"></use></svg>
                             </div>
-                            <input title="Volume" id="openwebrx-panel-volume" class="openwebrx-panel-slider" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
+                            <input title="Volume" id="openwebrx-panel-volume" class="openwebrx-panel-slider" type="range" min="0" max="150" value="50" step="1" onchange="UI.setVolume(this.value);" oninput="UI.setVolume(this.value);">
                             <div title="Tuning step" class="openwebrx-button openwebrx-slider-button" onclick="tuning_step_reset();">
                                 <svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#tuning-step"></use></svg>
                             </div>
@@ -249,23 +249,23 @@
                             <input title="Waterfall minimum level" id="openwebrx-waterfall-color-min" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(0);" oninput="updateVolume()">
                         </div>
                         <div class="openwebrx-panel-line">
-                            <div title="Noise reduction on/off" class="openwebrx-nr-toggle openwebrx-button openwebrx-slider-button" onclick="toggleNR();">
+                            <div title="Noise reduction on/off" class="openwebrx-nr-toggle openwebrx-button openwebrx-slider-button" onclick="UI.toggleNR();">
                                 <svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#noise-reduce"></use></svg>
                             </div>
-                            <input title="Noise reduction level" disabled id="openwebrx-panel-nr" class="openwebrx-panel-slider" type="range" min="-10" max="10" value="0" step="1" onchange="updateNR()" oninput="updateNR()">
+                            <input title="Noise reduction level" disabled id="openwebrx-panel-nr" class="openwebrx-panel-slider" type="range" min="-10" max="10" value="0" step="1" onchange="UI.setNR(this.value)" oninput="UI.setNR(this.value)">
                             <div title="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button openwebrx-slider-button" onclick="waterfallColorsDefault()">
                                 <svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-default"></use></svg>
                             </div>
                             <input title="Waterfall maximum level" id="openwebrx-waterfall-color-max" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(1);" oninput="updateVolume()">
                         </div>
                     </div>
-                    <div class="openwebrx-section-divider" onclick="toggleSection(this);">&blacktriangledown;&nbsp;Theme</div>
-                    <div class="openwebrx-section">
+                    <div class="openwebrx-section-divider" onclick="toggleSection(this);">&blacktriangle;&nbsp;Settings</div>
+                    <div class="openwebrx-section" style="display: none;">
                         <div class="openwebrx-panel-line">
-                            <div title="Theme" class="openwebrx-button openwebrx-slider-button" onclick="set_ui_scheme('default');">
+                            <div title="Theme" class="openwebrx-button openwebrx-slider-button" onclick="UI.setTheme('default');">
                                 <svg viewBox="56 -900 835 835" style="overflow: visible"><use xlink:href="static/gfx/svg-defs.svg#theme-chooser"></use></svg>
                             </div>
-                            <select id="openwebrx-themes-listbox" class="openwebrx-panel-listbox" onchange="set_ui_scheme(this.value);">
+                            <select id="openwebrx-themes-listbox" class="openwebrx-panel-listbox" onchange="UI.setTheme(this.value);">
                                 <option value="default">Default</option>
                                 <option value="brown">Brown</option>
                                 <option value="red">Red</option>
@@ -276,10 +276,10 @@
                                 <option value="black">Black</option>
                                 <option value="night">Night</option>
                             </select>
-                            <div title="Reset opacity" id="openwebrx-waterfall-colors-default" class="openwebrx-button openwebrx-slider-button" onclick="set_ui_opacity(100);">
+                            <div title="Reset opacity" id="openwebrx-waterfall-colors-default" class="openwebrx-button openwebrx-slider-button" onclick="UI.setOpacity(100);" oncontextmenu="UI.toggleFrame();">
                                 <svg viewBox="56 -900 835 835"><use xlink:href="static/gfx/svg-defs.svg#opacity"></use></svg>
                             </div>
-                            <input title="Opacity" id="openwebrx-opacity-slider" class="openwebrx-panel-slider" type="range" min="20" max="100" value="100" step="1" oninput="set_ui_opacity(this.value);">
+                            <input title="Opacity" id="openwebrx-opacity-slider" class="openwebrx-panel-slider" type="range" min="20" max="100" value="100" step="1" oninput="UI.setOpacity(this.value);">
                         </div>
                     </div>
                     <div class="openwebrx-section-divider" onclick="toggleSection(this);">&blacktriangledown;&nbsp;Display</div>
diff --git a/htdocs/lib/UI.js b/htdocs/lib/UI.js
new file mode 100644
index 00000000..d0fff7ba
--- /dev/null
+++ b/htdocs/lib/UI.js
@@ -0,0 +1,193 @@
+//
+// User Interface functions
+//
+
+function UI() {}
+
+// We start with these values
+UI.theme = 'default';
+UI.frame = false;
+UI.opacity = 100;
+UI.volume = -1;
+UI.volumeMuted = -1;
+UI.nrThreshold = 0;
+UI.nrEnabled = false;
+
+//
+// Local Storage Access
+//
+
+// Return true of setting exist in storage.
+UI.has = function(key) {
+    return localStorage && (localStorage.getItem(key)!=null);
+};
+
+// Save named UI setting to local storage.
+UI.save = function(key, value) {
+    if (localStorage) localStorage.setItem(key, value);
+};
+
+// Load named UI setting from local storage.
+UI.loadStr = function(key) {
+    return localStorage? localStorage.getItem(key) : null;
+};
+
+UI.loadInt = function(key) {
+    var x = localStorage? localStorage.getItem(key) : null;
+    return x!=null? parseInt(x) : 0;
+}
+
+UI.loadBool = function(key) {
+    var x = localStorage? localStorage.getItem(key) : null;
+    return x==='true';
+}
+
+// Load UI settings from local storage.
+UI.loadSettings = function() {
+    if (this.has('ui_theme'))    this.setTheme(this.loadStr('ui_theme'));
+    if (this.has('ui_frame'))    this.setFrame(this.loadBool('ui_frame'));
+    if (this.has('ui_opacity'))  this.setOpacity(this.loadInt('ui_opacity'));
+    if (this.has('volume'))      this.setVolume(this.loadInt('volume'));
+    if (this.has('nrThreshold')) this.setNR(this.loadInt('nrThreshold'));
+
+    // Reapply mute
+    if (this.has('volumeMuted')) {
+        var x = this.loadInt('volumeMuted');
+        if ((x >= 0) != (this.volumeMuted >= 0)) this.toggleMute();
+        this.volumeMuted = x;
+    }
+
+    // Reapply NR
+    if (this.has('nrEnabled')) {
+        var x = this.loadBool('nrEnabled');
+        if (x != this.nrEnabled) this.toggleNR();
+    }
+};
+
+//
+// Volume Controls
+//
+
+// Set audio volume in 0..150 range.
+UI.setVolume = function(x) {
+    if (this.volume != x) {
+        this.volume = x;
+        this.save('volume', x);
+        $("#openwebrx-panel-volume").val(x)
+        if (audioEngine) audioEngine.setVolume(x / 100);
+    }
+};
+
+// Toggle audio muting.
+UI.toggleMute = function() {
+    var $muteButton = $('.openwebrx-mute-button');
+    var $volumePanel = $('#openwebrx-panel-volume');
+
+    if ($volumePanel.prop('disabled')) {
+        $muteButton.removeClass('muted');
+        $volumePanel.prop('disabled', false);
+        this.setVolume(this.volumeMuted);
+        this.volumeMuted = -1;
+    } else {
+        $muteButton.addClass('muted');
+        $volumePanel.prop('disabled', true);
+        this.volumeMuted = this.volume;
+        this.setVolume(0);
+    }
+
+    // Save muted volume, or lack thereof
+    this.save('volumeMuted', this.volumeMuted);
+};
+
+//
+// Noise Reduction Controls
+//
+
+// Set noise reduction threshold in decibels.
+UI.setNR = function(x) {
+    if (this.nrThreshold != x) {
+        this.nrThreshold = x;
+        this.save('nrThreshold', x);
+        $('#openwebrx-panel-nr').attr('title', 'Noise level (' + x + ' dB)').val(x);
+        this.updateNR();
+    }
+};
+
+// Toggle noise reduction function.
+UI.toggleNR = function() {
+    var $nrPanel = $('#openwebrx-panel-nr');
+    this.nrEnabled = !!$nrPanel.prop('disabled');
+    this.save('nrEnabled', this.nrEnabled);
+    $nrPanel.prop('disabled', !this.nrEnabled);
+    this.updateNR();
+}
+
+// Send changed noise reduction parameters to the server.
+UI.updateNR = function() {
+    ws.send(JSON.stringify({
+        "type": "connectionproperties",
+        "params": {
+            "nr_enabled": this.nrEnabled,
+            "nr_threshold": this.nrThreshold
+        }
+    }));
+}
+
+//
+// Look & Feel Controls
+//
+
+// Toggle frame around receiver and other panels.
+UI.toggleFrame = function() {
+    this.setFrame(!this.frame);
+};
+
+// Show or hide frame around receiver and other panels.
+UI.setFrame = function(x) {
+    if (this.frame != x) {
+        this.frame = x;
+        this.save('ui_frame', x);
+        $('#openwebrx-panel-receiver').css('border', x? '2px solid':'');
+        $('#openwebrx-dialog-bookmark').css('border', x? '2px solid':'');
+    }
+};
+
+// Set user interface opacity in 10..100% range.
+UI.setOpacity = function(x) {
+    x = x<10? 10 : x>100? 100 : x;
+    if (this.opacity != x) {
+        this.opacity = x;
+        this.save('ui_opacity', x);
+        $('.openwebrx-panel').css('opacity', x/100);
+        $('#openwebrx-opacity-slider')
+            .attr('title', 'Opacity (' + Math.round(x) + '%)')
+            .val(x);
+    }
+};
+
+// Set user interface theme.
+UI.setTheme = function(theme) {
+    // Do not set twice
+    if (this.theme === theme) return;
+
+    // Save current theme name
+    this.theme = theme;
+    this.save('ui_theme', theme);
+
+    // Set selector
+    var lb = $('#openwebrx-themes-listbox');
+    lb.val(theme);
+
+    // Remove existing theme
+    var opts = lb[0].options;
+    for(j=0 ; j<opts.length ; j++) {
+        $('body').removeClass('theme-' + opts[j].value);
+    }
+    $('body').removeClass('has-theme');
+
+    // Apply new theme
+    if (theme && (theme != '') && (theme != 'default')) {
+        $('body').addClass('theme-' + theme);
+        $('body').addClass('has-theme');
+    }
+};
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 54d9bf9c..8f6fe5db 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -34,14 +34,7 @@ var waterfall_setup_done = 0;
 var secondary_fft_size;
 var tuning_step_default = 1;
 var tuning_step = 1;
-var nr_enabled = false;
-var nr_threshold = 0;
 var swap_wheel = false;
-var ui_scheme = "default";
-
-function updateVolume() {
-    audioEngine.setVolume(parseFloat($("#openwebrx-panel-volume").val()) / 100);
-}
 
 function toggleSection(el) {
     var next_el = el.nextElementSibling;
@@ -56,43 +49,6 @@ function toggleSection(el) {
     }
 }
 
-function toggleMute() {
-    var $muteButton = $('.openwebrx-mute-button');
-    var $volumePanel = $('#openwebrx-panel-volume');
-    if ($muteButton.hasClass('muted')) {
-        $muteButton.removeClass('muted');
-        $volumePanel.prop('disabled', false).val(volumeBeforeMute);
-    } else {
-        $muteButton.addClass('muted');
-        volumeBeforeMute = $volumePanel.val();
-        $volumePanel.prop('disabled', true).val(0);
-    }
-
-    updateVolume();
-}
-
-function updateNR() {
-    var $nrPanel = $('#openwebrx-panel-nr');
-
-    nr_threshold = Math.round(parseFloat($nrPanel.val()));
-    $nrPanel.attr('title', 'Noise level (' + nr_threshold + ' dB)');
-    nr_changed();
-}
-
-function toggleNR() {
-    var $nrPanel = $('#openwebrx-panel-nr');
-
-    if ($nrPanel.prop('disabled')) {
-        $nrPanel.prop('disabled', false);
-        nr_enabled = true;
-    } else {
-        $nrPanel.prop('disabled', true);
-        nr_enabled = false;
-    }
-
-    nr_changed();
-}
-
 function toggleRecording() {
     var $recButton = $('.openwebrx-record-button');
 
@@ -1094,12 +1050,12 @@ function on_ws_recv(evt) {
                             tuning_step_reset();
                         }
 
-                        if ('ui_opacity' in config) {
-                            set_ui_opacity(config['ui_opacity']);
-                        }
+//                        if ('ui_opacity' in config) {
+//                            UI.setOpacity(config['ui_opacity']);
+//                        }
 
                         if ('ui_frame' in config) {
-                            set_ui_frame(config['ui_frame']);
+                            UI.setFrame(config['ui_frame']);
                         }
 
                         if ('ui_swap_wheel' in config) {
@@ -1138,9 +1094,9 @@ function on_ws_recv(evt) {
                             Utils.setVesselUrl(config['vessel_url']);
                         }
 
-                        if ('ui_scheme' in config) {
-                            set_ui_scheme(config['ui_scheme']);
-                        }
+//                        if ('ui_scheme' in config) {
+//                            UI.setTheme(config['ui_scheme']);
+//                        }
 
                         break;
                     case "secondary_config":
@@ -1238,7 +1194,6 @@ function on_ws_recv(evt) {
                         break;
                     case 'modes':
                         Modes.setModes(json['value']);
-                        set_ui_scheme(ui_scheme);
                         break;
                     default:
                         console.warn('received message of unknown type: ' + json['type']);
@@ -1383,8 +1338,8 @@ function onAudioStart(apiType){
         toggle_panel("openwebrx-panel-log", !!was_error);
     }, 2000);
 
-    //Synchronise volume with slider
-    updateVolume();
+    // Load user interface settings from local storage
+    UI.loadSettings();
 }
 
 var reconnect_timeout = false;
@@ -1632,7 +1587,7 @@ function openwebrx_init() {
 function initSliders() {
     $('#openwebrx-panel-receiver').on('wheel', 'input[type=range]', function(ev){
         var $slider = $(this);
-        if (!$slider.attr('step')) return;
+        if (!$slider.attr('step') || $slider.attr('disabled')) return;
         var val = Number($slider.val());
         var step = Number($slider.attr('step'));
         if (ev.originalEvent.deltaY > 0) {
@@ -2015,48 +1970,3 @@ function tuning_step_reset() {
     $('#openwebrx-tuning-step-listbox').val(tuning_step_default);
     tuning_step = tuning_step_default;
 }
-
-function nr_changed() {
-    ws.send(JSON.stringify({
-        "type": "connectionproperties",
-        "params": {
-            "nr_enabled": nr_enabled,
-            "nr_threshold": nr_threshold
-        }
-    }));
-}
-
-function set_ui_frame(x) {
-    $('#openwebrx-panel-receiver').css('border', x? '2px solid':'');
-    $('#openwebrx-dialog-bookmark').css('border', x? '2px solid':'');
-}
-
-function set_ui_opacity(x) {
-    x = x<10? 10 : x>100? 100 : x;
-    $('.openwebrx-panel').css('opacity', x/100);
-    $('#openwebrx-opacity-slider')
-        .attr('title', 'Opacity (' + Math.round(x) + '%)')
-        .val(x);
-}
-
-function set_ui_scheme(theme) {
-    // Save current theme name
-    ui_scheme = theme;
-
-    // Set selector
-    var lb = $('#openwebrx-themes-listbox');
-    lb.val(theme);
-
-    // Remove existing theme
-    var opts = lb[0].options;
-    for(j=0 ; j<opts.length ; j++) {
-        $('body').removeClass('theme-' + opts[j].value);
-    }
-    $('body').removeClass('has-theme');
-
-    // Apply new theme
-    if (theme && (theme != '') && (theme != 'default')) {
-        $('body').addClass('theme-' + theme);
-        $('body').addClass('has-theme');
-    }
-}
diff --git a/owrx/controllers/assets.py b/owrx/controllers/assets.py
index bbd4f183..e5da4a25 100644
--- a/owrx/controllers/assets.py
+++ b/owrx/controllers/assets.py
@@ -141,6 +141,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
             "lib/Scanner.js",
             "lib/Utils.js",
             "lib/Clock.js",
+            "lib/UI.js",
         ],
         "map-google.js": [
             "lib/jquery-3.2.1.min.js",