joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animate the squelch slider background

Browse Source
This commit is contained in:
Jakob Ketterl 2019-10-27 16:04:00 +01:00
parent 944e9df7cc
commit e8d60e2dc0
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
htdocs/css/openwebrx.css
View File

@ -40,6 +40,7 @@ input[type=range]
-webkit-appearance: none;
margin: 0 0;
background: transparent;
--track-background: #B6B6B6;
}
input[type=range]:focus
{
@ -55,6 +56,7 @@ input[type=range]::-webkit-slider-runnable-track
background: #B6B6B6;
/*border-radius: 11px;*/
border: 1px solid #8A8A8A;
background: var(--track-background);
}
input[type=range]::-webkit-slider-thumb
@ -73,6 +75,7 @@ input[type=range]::-webkit-slider-thumb
input[type=range]:focus::-webkit-slider-runnable-track
{
background: #B6B6B6;
background: var(--track-background);
}
input[type=range]::-moz-range-track

13
htdocs/openwebrx.js
View File

@ -188,6 +188,18 @@ function setSmeterRelativeValue(value) {
bar.style.background = (value > 0.9) ? bgRed : ((value > 0.7) ? bgYellow : bgGreen);
}
function setSquelchSliderBackground(val) {
var $slider = $('#openwebrx-panel-squelch');
var min = Number($slider.attr('min'));
var max = Number($slider.attr('max'));
var sliderPosition = $slider.val();
var relative = (val - min) / (max - min);
// use a brighter color when squelch is open
var color = val >= sliderPosition ? '#22ff2f' : '#008908';
var style = 'linear-gradient(90deg, ' + color + ' ' + relative * 100 + '%, #B6B6B6 ' + (1 - relative) * 100 + '%)';
$slider.css('--track-background', style);
}
function getLogSmeterValue(value) {
return 10 * Math.log10(value);
}
@ -199,6 +211,7 @@ function getLinearSmeterValue(db_value) {
function setSmeterAbsoluteValue(value) //the value that comes from `csdr squelch_and_smeter_cc`
{
var logValue = getLogSmeterValue(value);
setSquelchSliderBackground(logValue);
var lowLevel = waterfall_min_level - 20;
var highLevel = waterfall_max_level + 20;
var percent = (logValue - lowLevel) / (highLevel - lowLevel);