From 51913320d28b14e9cc0ade8697cd95ef1d4edebc Mon Sep 17 00:00:00 2001
From: Marat Fayzullin <luarvique@gmail.com>
Date: Sun, 21 Apr 2024 23:07:55 -0400
Subject: [PATCH] Adding user-selectable waterfall color theme.

---
 htdocs/css/openwebrx.css |  4 +++
 htdocs/gfx/svg-defs.svg  |  1 +
 htdocs/index.html        | 12 +++++++
 htdocs/lib/UI.js         | 72 ++++++++++++++++++++++++++++++++++++++++
 htdocs/openwebrx.js      | 11 +++---
 5 files changed, 94 insertions(+), 6 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index bc34f2c9..8c54b8e5 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -919,6 +919,10 @@ img.openwebrx-mirror-img
     font-size: 10pt;
 }
 
+#openwebrx-wf-themes-listbox {
+    font-size: 10pt;
+}
+
 #openwebrx-cursor-blink
 {
 	animation: cursor-blink 1s infinite;
diff --git a/htdocs/gfx/svg-defs.svg b/htdocs/gfx/svg-defs.svg
index f0228e0a..02e8330f 100644
--- a/htdocs/gfx/svg-defs.svg
+++ b/htdocs/gfx/svg-defs.svg
@@ -35,5 +35,6 @@
         <g id="scanner-running"><g stroke="#fff" stroke-width="8"><path d="M5 40A35 35 0 0 1 26.606 7.664a35 35 0 0 1 38.143 7.587" fill="none"/><path d="m68.284 11.716 2.828 9.9-9.899-2.829z" fill="#fff"/></g><path d="m 27.185152,59.581257 0,-7.177735 q 0.966797,0.878907 2.285156,1.582032 1.347657,0.703125 2.841797,1.201172 1.494141,0.46875 2.988281,0.732421 1.494141,0.263672 2.753907,0.263672 4.394531,0 6.533203,-1.464843 2.167969,-1.464844 2.167969,-4.248047 0,-1.494141 -0.732422,-2.578125 -0.703125,-1.113282 -1.992188,-2.021485 -1.289062,-0.908203 -3.046875,-1.728515 -1.728515,-0.84961 -3.720703,-1.757813 -2.138672,-1.142578 -3.984375,-2.314453 -1.845703,-1.171875 -3.222656,-2.578125 -1.347656,-1.435547 -2.138672,-3.222656 -0.761719,-1.78711 -0.761719,-4.189453 0,-2.958985 1.31836,-5.126953 1.347656,-2.197266 3.515625,-3.603516 2.197265,-1.435547 4.980468,-2.109375 2.783203,-0.703125 5.683594,-0.703125 6.591797,0 9.609375,1.494141 l 0,6.884765 q -3.574219,-2.578125 -9.199219,-2.578125 -1.552734,0 -3.105468,0.292969 -1.523438,0.292969 -2.753907,0.966797 -1.201172,0.673828 -1.96289,1.728515 -0.761719,1.054688 -0.761719,2.548829 0,1.40625 0.585937,2.43164 0.585938,1.025391 1.699219,1.875 1.142578,0.84961 2.753906,1.669922 1.640625,0.791016 3.779297,1.728516 2.197266,1.142578 4.13086,2.402343 1.96289,1.259766 3.427734,2.783204 1.494141,1.523437 2.34375,3.398437 0.878906,1.845703 0.878906,4.21875 0,3.193359 -1.289062,5.390625 -1.289063,2.197266 -3.486328,3.574219 -2.167969,1.376953 -5.009766,1.992187 -2.841797,0.615235 -6.005859,0.615235 -1.054688,0 -2.607422,-0.175782 -1.523438,-0.146484 -3.134766,-0.46875 -1.611328,-0.292968 -3.046875,-0.732421 -1.435547,-0.439454 -2.314453,-0.996094 z" fill="#fff"/><g stroke="#fff" stroke-width="8"><path d="M75 40a35 35 0 0 1-21.606 32.336 35 35 0 0 1-38.143-7.587" fill="none"/><path d="m11.716 68.284-2.828-9.9 9.899 2.829z" fill="#fff"/></g></g>
         <g id="opacity" fill="#fff" stroke="#fff" stroke-width="8"><path d="M360-120H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h160v80H200v560h160v80Zm80 80v-880h80v880h-80Zm160-80v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80q0 33-23.5 56.5T760-120Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80q33 0 56.5 23.5T840-760h-80Z"/></g>
         <g id="theme-chooser" fill="#fff" stroke="#fff" stroke-width="8"><path d="M480-120q-133 0-226.5-92T160-436q0-65 25-121.5T254-658l226-222 226 222q44 44 69 100.5T800-436q0 132-93.5 224T480-120ZM242-400h474q12-72-13.5-123T650-600L480-768 310-600q-27 26-53 77t-15 123Z"/></g>
+        <g id="wf-theme-chooser" fill="#fff" stroke="#fff" stroke-width="8"><path d="M480-120q-133 0-226.5-92.5T160-436q0-66 25-122t69-100l226-222 226 222q44 44 69 100t25 122q0 131-93.5 223.5T480-120Zm0-80v-568L310-600q-35 33-52.5 74.5T240-436q0 97 70 166.5T480-200Z"/></g>
     </defs>
 </svg>
diff --git a/htdocs/index.html b/htdocs/index.html
index f1fc45ff..a07726bc 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -296,6 +296,18 @@
                             </div>
                             <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 class="openwebrx-panel-line">
+                            <div title="Reset waterfall theme" class="openwebrx-button openwebrx-slider-button" onclick="UI.setWfTheme('default');">
+                                <svg viewBox="56 -900 835 835" style="overflow: visible"><use xlink:href="static/gfx/svg-defs.svg#wf-theme-chooser"></use></svg>
+                            </div>
+                            <select title="Waterfall theme" id="openwebrx-wf-themes-listbox" class="openwebrx-panel-listbox" onchange="UI.setWfTheme(this.value);">
+                                <option value="default">Default</option>
+                                <option value="turbo">Turbo</option>
+                                <option value="ha7ilm">Legacy</option>
+                                <option value="teejeez">Teejeez</option>
+                                <option value="zoran">Zoran</option>
+                            </select>
+                        </div>
                         <div class="openwebrx-panel-line">
                             <label class="openwebrx-checkbox">
                                 <input id="openwebrx-frame-checkbox" type="checkbox" onchange="UI.toggleFrame(this.checked);" />
diff --git a/htdocs/lib/UI.js b/htdocs/lib/UI.js
index ea32b5c2..6c21e18c 100644
--- a/htdocs/lib/UI.js
+++ b/htdocs/lib/UI.js
@@ -6,6 +6,7 @@ function UI() {}
 
 // We start with these values
 UI.theme = 'default';
+UI.wfTheme = null;
 UI.frame = false;
 UI.opacity = 100;
 UI.volume = -1;
@@ -30,6 +31,7 @@ UI.loadSettings = function() {
     this.toggleFrame(LS.has('ui_frame')? LS.loadBool('ui_frame') : false);
     this.toggleWheelSwap(LS.has('ui_wheel')? LS.loadBool('ui_wheel') : false);
     this.toggleSpectrum(LS.has('ui_spectrum')? LS.loadBool('ui_spectrum') : false);
+    this.setWfTheme(LS.has('wf_theme')? LS.loadStr('wf_theme') : 'default');
     this.setNR(LS.has('nr_threshold')? LS.loadInt('nr_threshold') : false);
     this.toggleNR(LS.has('nr_enabled')? LS.loadBool('nr_enabled') : false);
 
@@ -245,3 +247,73 @@ UI.setTheme = function(theme) {
         $('body').addClass('has-theme');
     }
 };
+
+// Set waterfall color theme.
+UI.setWfTheme = function(theme) {
+    // Theme name must be valid
+    if (!(theme in this.wfThemes)) return;
+
+    // Do not set twice
+    if (this.wfTheme === theme) return;
+
+    // Save current theme name
+    this.wfTheme = theme;
+    LS.save('wf_theme', theme);
+
+    // Set selector
+    $('#openwebrx-wf-themes-listbox').val(theme);
+
+    // Generate new colors
+    waterfall_colors = chroma.scale(this.wfThemes[theme]).colors(256, 'rgb');
+};
+
+// Set default waterfall color theme.
+UI.setDefaultWfTheme = function(colors) {
+    this.wfThemes['default'] = colors;
+    if (this.wfTheme === 'default') {
+        this.wfTheme = null;
+        this.setWfTheme('default');
+    }
+};
+
+// Waterfall color schemes
+UI.wfThemes = {
+    'default' : [0x000000, 0xFFFFFF],
+    'teejeez' : [0x000000, 0x0000FF, 0x00FFFF, 0x00FF00, 0xFFFF00, 0xFF0000, 0xFF00FF, 0xFFFFFF],
+    'ha7ilm'  : [0x000000, 0x2E6893, 0x69A5D0, 0x214B69, 0x9DC4E0, 0xFFF775, 0xFF8A8A, 0xB20000],
+    'zoran'   : [0x000000, 0x000965, 0x00E0FF, 0x2EFF00, 0xFFEC00, 0xFF0000],
+    'turbo'   : [
+        0x30123B, 0x311542, 0x33184A, 0x341B51, 0x351E58, 0x36215F, 0x372466, 0x38266C,
+        0x392973, 0x3A2C79, 0x3B2F80, 0x3C3286, 0x3D358B, 0x3E3891, 0x3E3A97, 0x3F3D9C,
+        0x4040A2, 0x4043A7, 0x4146AC, 0x4248B1, 0x424BB6, 0x434EBA, 0x4351BF, 0x4453C3,
+        0x4456C7, 0x4559CB, 0x455BCF, 0x455ED3, 0x4561D7, 0x4663DA, 0x4666DD, 0x4669E1,
+        0x466BE4, 0x466EE7, 0x4671E9, 0x4673EC, 0x4676EE, 0x4678F1, 0x467BF3, 0x467DF5,
+        0x4680F7, 0x4682F9, 0x4685FA, 0x4587FC, 0x458AFD, 0x448CFE, 0x448FFE, 0x4391FF,
+        0x4294FF, 0x4196FF, 0x3F99FF, 0x3E9BFF, 0x3D9EFE, 0x3BA1FD, 0x3AA3FD, 0x38A6FB,
+        0x36A8FA, 0x35ABF9, 0x33ADF7, 0x31B0F6, 0x2FB2F4, 0x2DB5F2, 0x2CB7F0, 0x2AB9EE,
+        0x28BCEC, 0x26BEEA, 0x25C0E7, 0x23C3E5, 0x21C5E2, 0x20C7E0, 0x1FC9DD, 0x1DCCDB,
+        0x1CCED8, 0x1BD0D5, 0x1AD2D3, 0x19D4D0, 0x18D6CD, 0x18D8CB, 0x18DAC8, 0x17DBC5,
+        0x17DDC3, 0x17DFC0, 0x18E0BE, 0x18E2BB, 0x19E3B9, 0x1AE5B7, 0x1BE6B4, 0x1DE8B2,
+        0x1EE9AF, 0x20EAAD, 0x22ECAA, 0x24EDA7, 0x27EEA4, 0x29EFA1, 0x2CF09E, 0x2FF19B,
+        0x32F298, 0x35F394, 0x38F491, 0x3CF58E, 0x3FF68B, 0x43F787, 0x46F884, 0x4AF980,
+        0x4EFA7D, 0x51FA79, 0x55FB76, 0x59FC73, 0x5DFC6F, 0x61FD6C, 0x65FD69, 0x69FE65,
+        0x6DFE62, 0x71FE5F, 0x75FF5C, 0x79FF59, 0x7DFF56, 0x80FF53, 0x84FF50, 0x88FF4E,
+        0x8BFF4B, 0x8FFF49, 0x92FF46, 0x96FF44, 0x99FF42, 0x9CFE40, 0x9FFE3E, 0xA2FD3D,
+        0xA4FD3B, 0xA7FC3A, 0xAAFC39, 0xACFB38, 0xAFFA37, 0xB1F936, 0xB4F835, 0xB7F835,
+        0xB9F634, 0xBCF534, 0xBFF434, 0xC1F334, 0xC4F233, 0xC6F033, 0xC9EF34, 0xCBEE34,
+        0xCEEC34, 0xD0EB34, 0xD2E934, 0xD5E835, 0xD7E635, 0xD9E435, 0xDBE236, 0xDDE136,
+        0xE0DF37, 0xE2DD37, 0xE4DB38, 0xE6D938, 0xE7D738, 0xE9D539, 0xEBD339, 0xEDD139,
+        0xEECF3A, 0xF0CD3A, 0xF1CB3A, 0xF3C93A, 0xF4C73A, 0xF5C53A, 0xF7C33A, 0xF8C13A,
+        0xF9BF39, 0xFABD39, 0xFABA38, 0xFBB838, 0xFCB637, 0xFCB436, 0xFDB135, 0xFDAF35,
+        0xFEAC34, 0xFEA933, 0xFEA732, 0xFEA431, 0xFFA12F, 0xFF9E2E, 0xFF9C2D, 0xFF992C,
+        0xFE962B, 0xFE932A, 0xFE9028, 0xFE8D27, 0xFD8A26, 0xFD8724, 0xFC8423, 0xFC8122,
+        0xFB7E20, 0xFB7B1F, 0xFA781E, 0xF9751C, 0xF8721B, 0xF86F1A, 0xF76C19, 0xF66917,
+        0xF56616, 0xF46315, 0xF36014, 0xF25D13, 0xF05B11, 0xEF5810, 0xEE550F, 0xED530E,
+        0xEB500E, 0xEA4E0D, 0xE94B0C, 0xE7490B, 0xE6470A, 0xE4450A, 0xE34209, 0xE14009,
+        0xDF3E08, 0xDE3C07, 0xDC3A07, 0xDA3806, 0xD83606, 0xD63405, 0xD43205, 0xD23105,
+        0xD02F04, 0xCE2D04, 0xCC2B03, 0xCA2903, 0xC82803, 0xC62602, 0xC32402, 0xC12302,
+        0xBF2102, 0xBC1F01, 0xBA1E01, 0xB71C01, 0xB41B01, 0xB21901, 0xAF1801, 0xAC1601,
+        0xAA1501, 0xA71401, 0xA41201, 0xA11101, 0x9E1001, 0x9B0F01, 0x980D01, 0x950C01,
+        0x920B01, 0x8E0A01, 0x8B0901, 0x880801, 0x850701, 0x810602, 0x7E0502, 0x7A0402
+    ]
+};
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index afc1909d..5ee0c306 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -123,16 +123,12 @@ var waterfall_min_level;
 var waterfall_max_level;
 var waterfall_min_level_default;
 var waterfall_max_level_default;
-var waterfall_colors = buildWaterfallColors(['#000', '#FFF']);
+var waterfall_colors;
 var waterfall_auto_levels;
 var waterfall_auto_min_range;
 var waterfall_measure_minmax_now = false;
 var waterfall_measure_minmax_continuous = false;
 
-function buildWaterfallColors(input) {
-    return chroma.scale(input).colors(256, 'rgb')
-}
-
 function updateWaterfallColors(which) {
     var $wfmax = $("#openwebrx-waterfall-color-max");
     var $wfmin = $("#openwebrx-waterfall-color-min");
@@ -981,7 +977,7 @@ function on_ws_recv(evt) {
                     case "config":
                         var config = json['value'];
                         if ('waterfall_colors' in config)
-                            waterfall_colors = buildWaterfallColors(config['waterfall_colors']);
+                            UI.setDefaultWfTheme(config['waterfall_colors']);
                         if ('waterfall_levels' in config) {
                             waterfall_min_level_default = config['waterfall_levels']['min'];
                             waterfall_max_level_default = config['waterfall_levels']['max'];
@@ -1577,6 +1573,9 @@ function openwebrx_init() {
     scanner = new Scanner(bookmarks, 1000);
     initSliders();
 
+    // Initialize waterfall colors
+    UI.setWfTheme('default');
+
     // Create and run clock
     clock = new Clock($('#openwebrx-clock-utc'));
 }