Improve volume & mute: button icon, behaviour on mute, slider appearance.

htdocs/index.wrx

@@ -76,16 +76,18 @@
 					<div id="webrx-actual-freq">---.--- MHz</div>
 					<div id="webrx-mouse-freq">---.--- MHz</div>
 					<!--<div class="openwebrx-button" onclick="ws.send('SET mod=wfm');" >WFM</div>-->
-					<div class="openwebrx-button" onclick="demodulator_analog_replace('nfm');">FM</div>
+					<div class="openwebrx-panel-line">
-					<div class="openwebrx-button" onclick="demodulator_analog_replace('am');">AM</div>
+						<div class="openwebrx-button" onclick="demodulator_analog_replace('nfm');">FM</div>
-					<div class="openwebrx-button" onclick="demodulator_analog_replace('lsb');">LSB</div>
+						<div class="openwebrx-button" onclick="demodulator_analog_replace('am');">AM</div>
-					<div class="openwebrx-button" onclick="demodulator_analog_replace('usb');">USB</div>
+						<div class="openwebrx-button" onclick="demodulator_analog_replace('lsb');">LSB</div>
-					<div class="openwebrx-button" onclick="demodulator_analog_replace('cw');">CW</div>
+						<div class="openwebrx-button" onclick="demodulator_analog_replace('usb');">USB</div>
-
+						<div class="openwebrx-button" onclick="demodulator_analog_replace('cw');">CW</div>
-					<div>Volume:
-					<input id="openwebrx-panel-volume" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
 					</div>
-					<div id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute()">Mute</div>
+					<div class="openwebrx-panel-line">
+						<div id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute()"><img src="gfx/openwebrx-speaker.png" id="openwebrx-mute-img"></div>
+						<input id="openwebrx-panel-volume" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
+					</div>
+					
 
 				</div>
 

htdocs/openwebrx.css

@@ -46,13 +46,12 @@ input[type=range]:focus
 
 input[type=range]::-webkit-slider-runnable-track
 {
-	width: 100%;
+	height: 5px;
-	height: 7px;
 	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;
+	height: 15px;
-	width: 7px;
+	width: 15px;
-	border-radius: 0px;
+	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: 3px;
-	height: 7px;
 	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;
+	height: 12px;
-	width: 7px;
+	width: 12px;
-	border-radius: 0px;
+	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;
+	margin-right: 1px;
-	float: left;
-	margin-right: 5px;
 	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;
 }

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();