From d1941646957f75e88d42416f8c135531512a4452 Mon Sep 17 00:00:00 2001 From: Marat Fayzullin Date: Thu, 26 Oct 2023 20:34:53 -0400 Subject: [PATCH 1/4] Adding clean themes branch --- htdocs/index.html | 1 + htdocs/openwebrx.js | 20 ++++++++++++++++++++ owrx/config/defaults.py | 1 + owrx/connection.py | 1 + owrx/controllers/settings/general.py | 13 +++++++++++++ 5 files changed, 36 insertions(+) diff --git a/htdocs/index.html b/htdocs/index.html index 6828e0ef..4e771253 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -35,6 +35,7 @@ + diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js index dc18a21a..fd320d88 100644 --- a/htdocs/openwebrx.js +++ b/htdocs/openwebrx.js @@ -1141,6 +1141,10 @@ function on_ws_recv(evt) { Utils.setVesselUrl(config['vessel_url']); } + if ('ui_scheme' in config) { + set_ui_scheme(config['ui_scheme']); + } + break; case "secondary_config": var s = json['value']; @@ -2019,3 +2023,19 @@ function nr_changed() { } })); } + +function set_ui_scheme(theme) { + const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy']; + var $panels = $('.openwebrx-panel'); + var $buttons = $('.openwebrx-button'); + + themes.forEach(function(theme) { + $panels.removeClass('openwebrx-panel-' + theme); + $buttons.removeClass('openwebrx-button-' + theme); + }); + + if (theme && (theme != '') && (theme != 'default')) { + $panels.addClass('openwebrx-panel-' + theme); + $buttons.addClass('openwebrx-button-' + theme); + } +} diff --git a/owrx/config/defaults.py b/owrx/config/defaults.py index f73aa95c..bc845d6f 100644 --- a/owrx/config/defaults.py +++ b/owrx/config/defaults.py @@ -153,6 +153,7 @@ defaultConfig = PropertyLayer( waterfall_auto_level_default_mode=False, waterfall_auto_min_range=50, key_locked=False, + ui_scheme="default", ui_opacity=100, ui_frame=False, ui_swap_wheel=False, diff --git a/owrx/connection.py b/owrx/connection.py index ce802bff..5de48b82 100644 --- a/owrx/connection.py +++ b/owrx/connection.py @@ -140,6 +140,7 @@ class OpenWebRxReceiverClient(OpenWebRxClient, SdrSourceEventClient): "fft_compression", "max_clients", "tuning_precision", + "ui_scheme", "ui_opacity", "ui_frame", "ui_swap_wheel", diff --git a/owrx/controllers/settings/general.py b/owrx/controllers/settings/general.py index 0400f75d..9193a7bf 100644 --- a/owrx/controllers/settings/general.py +++ b/owrx/controllers/settings/general.py @@ -184,6 +184,19 @@ class GeneralSettingsController(SettingsFormController): ), Section( "Display settings", + DropdownInput( + "ui_scheme", + "User interface color scheme", + options=[ + Option("default", "Default"), + Option("brown", "Brown"), + Option("red", "Red"), + Option("green", "Green"), + Option("khaki", "Khaki"), + Option("blue", "Blue"), + Option("navy", "Navy"), + ], + ), NumberInput( "ui_opacity", "User interface opacity", From 8da00acd8e2bcff3cc58aaafef1edd2b8f64e338 Mon Sep 17 00:00:00 2001 From: Marat Fayzullin Date: Thu, 26 Oct 2023 20:35:31 -0400 Subject: [PATCH 2/4] Adding themes file. --- htdocs/css/themes.css | 94 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 htdocs/css/themes.css diff --git a/htdocs/css/themes.css b/htdocs/css/themes.css new file mode 100644 index 00000000..2000ce6f --- /dev/null +++ b/htdocs/css/themes.css @@ -0,0 +1,94 @@ +/* + + This file is part of OpenWebRX, + an open-source SDR receiver software with a web UI. + Copyright (c) 2013-2015 by Andras Retzler + Copyright (c) 2019-2021 by Jakob Ketterl + Copyright (c) 2022-2023 by Marat Fayzullin + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . + +*/ + +.openwebrx-panel-brown +{ + background-color: #472700; +} + +.openwebrx-button-brown +{ + background-color: #270700; + background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #270700), color-stop(1, #3F1F00) ); + background: -moz-linear-gradient( center top, #270700 0%, #3F1F00 100% ); +} + +.openwebrx-panel-red +{ + background-color: #470000; +} + +.openwebrx-button-red +{ + background-color: #270000; + background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #270000), color-stop(1, #3F0000) ); + background: -moz-linear-gradient( center top, #270000 0%, #3F0000 100% ); +} + +.openwebrx-panel-green +{ + background-color: #003700; +} + +.openwebrx-button-green +{ + background-color: #001700; + background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #001700), color-stop(1, #002F00) ); + background: -moz-linear-gradient( center top, #001700 0%, #002F00 100% ); +} + +.openwebrx-panel-khaki +{ + background-color: #373F17; +} + +.openwebrx-button-khaki +{ + background-color: #171F07; + background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #171F07), color-stop(1, #272F17) ); + background: -moz-linear-gradient( center top, #171F07 0%, #272F17 100% ); +} + +.openwebrx-panel-blue +{ + background-color: #000047; +} + +.openwebrx-button-blue +{ + background-color: #000027; + background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #000027), color-stop(1, #00003F) ); + background: -moz-linear-gradient( center top, #000027 0%, #00003F 100% ); +} + +.openwebrx-panel-navy +{ + background-color: #003747; +} + +.openwebrx-button-navy +{ + background-color: #001727; + background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #001727), color-stop(1, #002F3F) ); + background: -moz-linear-gradient( center top, #001727 0%, #002F3F 100% ); +} From eaab18028842237c53d01c441a6c877522b40d71 Mon Sep 17 00:00:00 2001 From: Marat Fayzullin Date: Fri, 27 Oct 2023 20:35:28 -0400 Subject: [PATCH 3/4] Improving themes. --- htdocs/css/themes.css | 18 ++++++------------ htdocs/openwebrx.js | 8 +++++++- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/htdocs/css/themes.css b/htdocs/css/themes.css index 2000ce6f..18127a6d 100644 --- a/htdocs/css/themes.css +++ b/htdocs/css/themes.css @@ -29,8 +29,7 @@ .openwebrx-button-brown { background-color: #270700; - background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #270700), color-stop(1, #3F1F00) ); - background: -moz-linear-gradient( center top, #270700 0%, #3F1F00 100% ); + background: linear-gradient(to bottom, #270700 0%, #3F1F00 100%); } .openwebrx-panel-red @@ -41,8 +40,7 @@ .openwebrx-button-red { background-color: #270000; - background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #270000), color-stop(1, #3F0000) ); - background: -moz-linear-gradient( center top, #270000 0%, #3F0000 100% ); + background: linear-gradient(to bottom, #270000 0%, #3F0000 100%); } .openwebrx-panel-green @@ -53,8 +51,7 @@ .openwebrx-button-green { background-color: #001700; - background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #001700), color-stop(1, #002F00) ); - background: -moz-linear-gradient( center top, #001700 0%, #002F00 100% ); + background: linear-gradient(to bottom, #001700 0%, #002F00 100%); } .openwebrx-panel-khaki @@ -65,8 +62,7 @@ .openwebrx-button-khaki { background-color: #171F07; - background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #171F07), color-stop(1, #272F17) ); - background: -moz-linear-gradient( center top, #171F07 0%, #272F17 100% ); + background: linear-gradient(to bottom, #171F07 0%, #272F17 100%); } .openwebrx-panel-blue @@ -77,8 +73,7 @@ .openwebrx-button-blue { background-color: #000027; - background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #000027), color-stop(1, #00003F) ); - background: -moz-linear-gradient( center top, #000027 0%, #00003F 100% ); + background: linear-gradient(to bottom, #000027 0%, #00003F 100%); } .openwebrx-panel-navy @@ -89,6 +84,5 @@ .openwebrx-button-navy { background-color: #001727; - background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, #001727), color-stop(1, #002F3F) ); - background: -moz-linear-gradient( center top, #001727 0%, #002F3F 100% ); + background: linear-gradient(to bottom, #001727 0%, #002F3F 100%); } diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js index fd320d88..5e4ff498 100644 --- a/htdocs/openwebrx.js +++ b/htdocs/openwebrx.js @@ -37,6 +37,7 @@ var tuning_step = 1; var nr_enabled = false; var nr_threshold = 0; var swap_wheel = false; +var ui_theme = "default"; function updateVolume() { audioEngine.setVolume(parseFloat($("#openwebrx-panel-volume").val()) / 100); @@ -1142,7 +1143,8 @@ function on_ws_recv(evt) { } if ('ui_scheme' in config) { - set_ui_scheme(config['ui_scheme']); + ui_scheme = config['ui_scheme']; + set_ui_scheme(ui_scheme); } break; @@ -1241,6 +1243,7 @@ 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']); @@ -2028,14 +2031,17 @@ function set_ui_scheme(theme) { const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy']; var $panels = $('.openwebrx-panel'); var $buttons = $('.openwebrx-button'); + var $lists = $('.openwebrx-panel select'); themes.forEach(function(theme) { $panels.removeClass('openwebrx-panel-' + theme); $buttons.removeClass('openwebrx-button-' + theme); + $lists.removeClass('openwebrx-button-' + theme); }); if (theme && (theme != '') && (theme != 'default')) { $panels.addClass('openwebrx-panel-' + theme); $buttons.addClass('openwebrx-button-' + theme); + $lists.addClass('openwebrx-button-' + theme); } } From 0e900387db30ba0a7a10eb35149eb32e0c8f0105 Mon Sep 17 00:00:00 2001 From: "Stanislav Lechev [0xAF]" Date: Mon, 30 Oct 2023 04:35:38 +0200 Subject: [PATCH 4/4] rework the themes --- htdocs/css/themes.css | 127 ++++++++++++++++++++++++++++-------------- htdocs/openwebrx.js | 13 ++--- 2 files changed, 88 insertions(+), 52 deletions(-) diff --git a/htdocs/css/themes.css b/htdocs/css/themes.css index 18127a6d..69d9db64 100644 --- a/htdocs/css/themes.css +++ b/htdocs/css/themes.css @@ -18,71 +18,112 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see . - */ -.openwebrx-panel-brown -{ - background-color: #472700; +/* Theme: brown */ +body.theme-brown { + --theme-top-bar: #47270026; + --theme-color1: #270700; + --theme-color2: #472700; + --theme-gradient-color1: #270700; + --theme-gradient-color2: #3F1F00; } -.openwebrx-button-brown -{ - background-color: #270700; - background: linear-gradient(to bottom, #270700 0%, #3F1F00 100%); +/* Theme: red */ +body.theme-red { + --theme-top-bar: #47000026; + --theme-color1: #270000; + --theme-color2: #470000; + --theme-gradient-color1: #270000; + --theme-gradient-color2: #3F0000; } -.openwebrx-panel-red -{ - background-color: #470000; +/* Theme: green */ +body.theme-green { + --theme-top-bar: #00370026; + --theme-color1: #001700; + --theme-color2: #003700; + --theme-gradient-color1: #001700; + --theme-gradient-color2: #002F00; } -.openwebrx-button-red -{ - background-color: #270000; - background: linear-gradient(to bottom, #270000 0%, #3F0000 100%); +/* Theme: khaki */ +body.theme-khaki { + --theme-top-bar: #373F1726; + --theme-color1: #171F07; + --theme-color2: #373F17; + --theme-gradient-color1: #171F07; + --theme-gradient-color2: #272F17; } -.openwebrx-panel-green -{ - background-color: #003700; +/* Theme: blue */ +body.theme-blue { + --theme-top-bar: #00004726; + --theme-color1: #000027; + --theme-color2: #000047; + --theme-gradient-color1: #000027; + --theme-gradient-color2: #00003F; } -.openwebrx-button-green -{ - background-color: #001700; - background: linear-gradient(to bottom, #001700 0%, #002F00 100%); +/* Theme: navy */ +body.theme-navy { + --theme-top-bar: #00374726; + --theme-color1: #001727; + --theme-color2: #003747; + --theme-gradient-color1: #001727; + --theme-gradient-color2: #002F3F; } -.openwebrx-panel-khaki -{ - background-color: #373F17; + +/* theme implementation follows */ +body.has-theme .webrx-top-bar { + background: var(--theme-top-bar); } -.openwebrx-button-khaki -{ - background-color: #171F07; - background: linear-gradient(to bottom, #171F07 0%, #272F17 100%); +body.has-theme #openwebrx-frequency-container { + background-image: none; + background: linear-gradient(to bottom, var(--theme-gradient-color1) 0%, var(--theme-gradient-color2) 100%); } -.openwebrx-panel-blue -{ - background-color: #000047; +body.has-theme .openwebrx-panel { + background-color: var(--theme-color2); } -.openwebrx-button-blue -{ - background-color: #000027; - background: linear-gradient(to bottom, #000027 0%, #00003F 100%); +body.has-theme .openwebrx-panel select, +body.has-theme .openwebrx-panel input, +body.has-theme .openwebrx-dialog select, +body.has-theme .openwebrx-dialog input { + background-color: var(--theme-color1); + background: linear-gradient(to bottom, var(--theme-gradient-color1) 0%, var(--theme-gradient-color2) 100%); } -.openwebrx-panel-navy -{ - background-color: #003747; +body.has-theme .openwebrx-button:hover, +body.has-theme .openwebrx-demodulator-button.highlighted, +body.has-theme .openwebrx-button.highlighted { + background-color: var(--theme-color1); + filter: saturate(200%) brightness(150%); } -.openwebrx-button-navy -{ - background-color: #001727; - background: linear-gradient(to bottom, #001727 0%, #002F3F 100%); +body.has-theme .openwebrx-button { + background-color: var(--theme-color1); + background: linear-gradient(to bottom, var(--theme-gradient-color1) 0%, var(--theme-gradient-color2) 100%); +} + +body.has-theme #openwebrx-digimode-canvas-container { + background-color: var(--theme-color1); +} + +body.has-theme #openwebrx-digimode-content-container .gradient { + background: initial; +} + + +/* these need more work */ +body.has-theme input[type=range] { + /* --track-background: #001727; */ +} + +body.has-theme input[type=range]::-webkit-slider-runnable-track, +body.has-theme input[type=range]:focus::-webkit-slider-runnable-track { + /* background: #001727; */ } diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js index 5e4ff498..8660da38 100644 --- a/htdocs/openwebrx.js +++ b/htdocs/openwebrx.js @@ -2029,19 +2029,14 @@ function nr_changed() { function set_ui_scheme(theme) { const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy']; - var $panels = $('.openwebrx-panel'); - var $buttons = $('.openwebrx-button'); - var $lists = $('.openwebrx-panel select'); themes.forEach(function(theme) { - $panels.removeClass('openwebrx-panel-' + theme); - $buttons.removeClass('openwebrx-button-' + theme); - $lists.removeClass('openwebrx-button-' + theme); + $('body').removeClass('theme-' + theme); }); + $('body').removeClass('has-theme'); if (theme && (theme != '') && (theme != 'default')) { - $panels.addClass('openwebrx-panel-' + theme); - $buttons.addClass('openwebrx-button-' + theme); - $lists.addClass('openwebrx-button-' + theme); + $('body').addClass('theme-' + theme); + $('body').addClass('has-theme'); } }