ua1zbe
/
openwebrxplus
mirror of https://github.com/luarvique/openwebrx
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Gave user ability to change theme and opacity.

This commit is contained in:
Marat Fayzullin 2023-11-04 22:23:10 -04:00
parent 035da0d7d7
commit e2f062904a
3 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/css/openwebrx.css
View File

@ -891,6 +891,10 @@ img.openwebrx-mirror-img
font-size: 10pt;
}
#openwebrx-themes-listbox {
font-size: 10pt;
}
#openwebrx-cursor-blink
{
animation: cursor-blink 1s infinite;

21
htdocs/index.html
View File

@ -259,6 +259,27 @@
<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-panel-line">
<div title="Reset opacity" id="openwebrx-waterfall-colors-default" class="openwebrx-button openwebrx-slider-button" onclick="set_ui_opacity(100);">
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#waterfall-default"></use></svg>
</div>
<input title="Opacity" class="openwebrx-panel-slider" type="range" min="10" max="100" value="100" step="1" onchange="set_ui_opacity(this.value);">
<div title="Theme" class="openwebrx-button openwebrx-slider-button" onclick="set_ui_scheme('default');">
<svg viewBox="0 0 80 80"><use xlink:href="static/gfx/svg-defs.svg#tuning-step"></use></svg>
</div>
<select id="openwebrx-themes-listbox" class="openwebrx-panel-listbox" onchange="set_ui_scheme(this.value);">
<option value="default">Default</option>
<option value="brown">Brown</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="khaki">Khaki</option>
<option value="blue">Blue</option>
<option value="navy">Navy</option>
</select>
</div>
</div>
<div class="openwebrx-section-divider" onclick="toggleSection(this);">&blacktriangledown;&nbsp;Display</div>
<div class="openwebrx-section">
<div class="openwebrx-panel-line">

26
htdocs/openwebrx.js
View File

@ -37,7 +37,7 @@ var tuning_step = 1;
var nr_enabled = false;
var nr_threshold = 0;
var swap_wheel = false;
var ui_theme = "default";
var ui_scheme = "default";
function updateVolume() {
audioEngine.setVolume(parseFloat($("#openwebrx-panel-volume").val()) / 100);
@ -1095,15 +1095,11 @@ function on_ws_recv(evt) {
}
if ('ui_opacity' in config) {
var x = config['ui_opacity'];
x = x<10? 10 : x>100? 100 : x;
$('.openwebrx-panel').css('opacity', x/100);
set_ui_opacity(config['ui_opacity']);
}
if ('ui_frame' in config) {
var x = config['ui_frame'];
$('#openwebrx-panel-receiver').css('border', x? '2px solid':'');
$('#openwebrx-dialog-bookmark').css('border', x? '2px solid':'');
set_ui_frame(config['ui_frame']);
}
if ('ui_swap_wheel' in config) {
@ -1143,8 +1139,7 @@ function on_ws_recv(evt) {
}
if ('ui_scheme' in config) {
ui_scheme = config['ui_scheme'];
set_ui_scheme(ui_scheme);
set_ui_scheme(config['ui_scheme']);
}
break;
@ -2031,9 +2026,22 @@ function nr_changed() {
}));
}
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);
}
function set_ui_scheme(theme) {
const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy', 'night'];
// Save current theme name
ui_scheme = theme;
themes.forEach(function(theme) {
$('body').removeClass('theme-' + theme);
});