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

Moving UI controls into UI.js. Saving values.

This commit is contained in:
Marat Fayzullin 2023-11-05 18:56:55 -05:00
parent 23d4c46cbe
commit d57ae59697
4 changed files with 214 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
htdocs/index.html
View File

@ -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>

193
htdocs/lib/UI.js Normal file
View File

@ -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');
}
};

110
htdocs/openwebrx.js
View File

@ -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');
}
}

1
owrx/controllers/assets.py
View File

@ -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",