diff --git a/htdocs/gfx/openwebrx-speaker-muted.png b/htdocs/gfx/openwebrx-speaker-muted.png
new file mode 100644
index 0000000..0d54570
Binary files /dev/null and b/htdocs/gfx/openwebrx-speaker-muted.png differ
diff --git a/htdocs/gfx/openwebrx-speaker.png b/htdocs/gfx/openwebrx-speaker.png
new file mode 100644
index 0000000..6c88e23
Binary files /dev/null and b/htdocs/gfx/openwebrx-speaker.png differ
diff --git a/htdocs/index.wrx b/htdocs/index.wrx
index 65efe8a..fa64d08 100644
--- a/htdocs/index.wrx
+++ b/htdocs/index.wrx
@@ -76,16 +76,18 @@
---.--- MHz
---.--- MHz
- FM
- AM
- LSB
- USB
- CW
-
- Volume:
-
+
+
FM
+
AM
+
LSB
+
USB
+
CW
-
Mute
+
+
diff --git a/htdocs/openwebrx.css b/htdocs/openwebrx.css
index 1511f41..37f6b62 100644
--- a/htdocs/openwebrx.css
+++ b/htdocs/openwebrx.css
@@ -46,13 +46,12 @@ input[type=range]:focus
input[type=range]::-webkit-slider-runnable-track
{
- width: 100%;
- height: 7px;
+ height: 5px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #B6B6B6;
- border-radius: 11px;
+ /*border-radius: 11px;*/
border: 1px solid #8A8A8A;
}
@@ -60,13 +59,13 @@ input[type=range]::-webkit-slider-thumb
{
box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A;
- height: 24px;
- width: 7px;
- border-radius: 0px;
+ height: 15px;
+ width: 15px;
+ border-radius: 10px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
- margin-top: -9.5px;
+ margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track
@@ -76,8 +75,7 @@ input[type=range]:focus::-webkit-slider-runnable-track
input[type=range]::-moz-range-track
{
- width: 100%;
- height: 7px;
+ height: 3px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
@@ -90,9 +88,9 @@ input[type=range]::-moz-range-thumb
{
box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A;
- height: 24px;
- width: 7px;
- border-radius: 0px;
+ height: 12px;
+ width: 12px;
+ border-radius: 10px;
background: #FFFFFF;
cursor: pointer;
}
@@ -532,9 +530,7 @@ input[type=range]:focus::-ms-fill-upper
-moz-border-radius: 5px;
color: White;
font-weight: bold;
- width: auto;
- float: left;
- margin-right: 5px;
+ margin-right: 1px;
cursor: pointer;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.0 , #373737), color-stop(1, #4F4F4F) );
background:-moz-linear-gradient( center top, #373737 0%, #4F4F4F 100% );
@@ -544,6 +540,7 @@ input[type=range]:focus::-ms-fill-upper
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
+ display: inline-block;
}
.openwebrx-button:hover
@@ -673,5 +670,19 @@ input[type=range]:focus::-ms-fill-upper
#openwebrx-panel-volume
{
- width:70%;
+ position: relative;
+ top: -2px;
+ width:170px;
+}
+
+#openwebrx-mute-img
+{
+ width: 14px;
+ position:relative;
+ top: 1px;
+}
+
+.openwebrx-panel-line
+{
+ padding-top: 5px;
}
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 02540ed..a4bc72c 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -118,14 +118,9 @@ function style_value(of_what,which)
else if (window.getComputedStyle) return document.defaultView.getComputedStyle(of_what,null).getPropertyValue(which);
}
-function setVolume(str)
-{
- volume = mute ? 0 : parseFloat(str)/100;
-}
-
function updateVolume()
{
- setVolume(e("openwebrx-panel-volume").value);
+ volume = parseFloat(e("openwebrx-panel-volume").value) / 100;
}
function toggleMute()
@@ -133,9 +128,18 @@ function toggleMute()
if (mute) {
mute = false;
e("openwebrx-mute-on").id="openwebrx-mute-off";
+ e("openwebrx-mute-img").src="gfx/openwebrx-speaker.png";
+ e("openwebrx-panel-volume").disabled=false;
+ e("openwebrx-panel-volume").style.opacity=1.0;
+ e("openwebrx-panel-volume").value = volumeBeforeMute;
} else {
mute = true;
- e("openwebrx-mute-off").id="openwebrx-mute-on"
+ e("openwebrx-mute-off").id="openwebrx-mute-on";
+ e("openwebrx-mute-img").src="gfx/openwebrx-speaker-muted.png";
+ e("openwebrx-panel-volume").disabled=true;
+ e("openwebrx-panel-volume").style.opacity=0.5;
+ volumeBeforeMute = e("openwebrx-panel-volume").value;
+ e("openwebrx-panel-volume").value=0;
}
updateVolume();
@@ -1144,7 +1148,8 @@ function divlog(what, is_error)
var audio_context;
var audio_initialized=0;
-var volume;
+var volume = 1.0;
+var volumeBeforeMute = 100.0;
var mute = false;
var audio_received = Array();