From e8d60e2dc0a55236964dd648a96fb42254213231 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sun, 27 Oct 2019 16:04:00 +0100
Subject: [PATCH] animate the squelch slider background

---
 htdocs/css/openwebrx.css |  3 +++
 htdocs/openwebrx.js      | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index a2911a3..203d60a 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -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
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index d4df31c..cfe4a3e 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -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);