Merge pull request #20 from Gnoxter/master

Volume Slider and Mute Button

htdocs/index.wrx

@@ -72,7 +72,7 @@
 				<!-- add canvas here by javascript -->
 			</div>
 			<div id="openwebrx-panels-container">
-				<div class="openwebrx-panel" id="openwebrx-panel-receiver" data-panel-name="client-params" data-panel-pos="right" data-panel-order="0" data-panel-size="215,70">
+				<div class="openwebrx-panel" id="openwebrx-panel-receiver" data-panel-name="client-params" data-panel-pos="right" data-panel-order="0" data-panel-size="215,115">
 					<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>-->
@@ -81,7 +81,14 @@
 					<div class="openwebrx-button" onclick="demodulator_analog_replace('lsb');">LSB</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>
+
 				<div class="openwebrx-panel" id="openwebrx-panel-log" data-panel-name="debug" data-panel-pos="left" data-panel-order="1" data-panel-size="619,142">
 					<div class="openwebrx-panel-inner" id="openwebrx-log-scroll">
 						<div id="openwebrx-client-log-title">OpenWebRX (beta) client log<span style="color: #ff5900;"></span> </strong><span id="openwebrx-problems"></span></div>

htdocs/openwebrx.css

@@ -28,6 +28,123 @@ html, body
 	overflow: hidden;
 }
 
+input
+{
+	vertical-align:middle;
+}
+
+input[type=range]
+{
+	-webkit-appearance: none;
+	margin: 10px 0;
+	width: 100%;
+}
+input[type=range]:focus
+{
+	outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track
+{
+	width: 100%;
+	height: 7px;
+	cursor: pointer;
+	animate: 0.2s;
+	box-shadow: 0px 0px 0px #000000;
+	background: #B6B6B6;
+	border-radius: 11px;
+	border: 1px solid #8A8A8A;
+}
+
+input[type=range]::-webkit-slider-thumb
+{
+	box-shadow: 1px 1px 1px #828282;
+	border: 1px solid #8A8A8A;
+	height: 24px;
+	width: 7px;
+	border-radius: 0px;
+	background: #FFFFFF;
+	cursor: pointer;
+	-webkit-appearance: none;
+	margin-top: -9.5px;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track
+{
+	background: #B6B6B6;
+}
+
+input[type=range]::-moz-range-track
+{
+	width: 100%;
+	height: 7px;
+	cursor: pointer;
+	animate: 0.2s;
+	box-shadow: 0px 0px 0px #000000;
+	background: #B6B6B6;
+	border-radius: 11px;
+	border: 1px solid #8A8A8A;
+}
+
+input[type=range]::-moz-range-thumb
+{
+	box-shadow: 1px 1px 1px #828282;
+	border: 1px solid #8A8A8A;
+	height: 24px;
+	width: 7px;
+	border-radius: 0px;
+	background: #FFFFFF;
+	cursor: pointer;
+}
+
+input[type=range]::-ms-track
+{
+	width: 100%;
+	height: 7px;
+	cursor: pointer;
+	animate: 0.2s;
+	background: transparent;
+	border-color: transparent;
+	color: transparent;
+}
+
+input[type=range]::-ms-fill-lower
+ {
+	background: #B6B6B6;
+	border: 1px solid #8A8A8A;
+	border-radius: 22px;
+	box-shadow: 0px 0px 0px #000000;
+}
+
+input[type=range]::-ms-fill-upper
+{
+	background: #B6B6B6;
+	border: 1px solid #8A8A8A;
+	border-radius: 22px;
+	box-shadow: 0px 0px 0px #000000;
+}
+
+input[type=range]::-ms-thumb
+{
+	box-shadow: 1px 1px 1px #828282;
+	border: 1px solid #8A8A8A;
+	height: 24px;
+	width: 7px;
+	border-radius: 0px;
+	background: #FFFFFF;
+	cursor: pointer;
+}
+
+input[type=range]:focus::-ms-fill-lower
+{
+	background: #B6B6B6;
+}
+
+input[type=range]:focus::-ms-fill-upper
+{
+	background: #B6B6B6;
+}
+
 #webrx-top-container
 {
 	position: relative;
@@ -539,3 +656,22 @@ html, body
 	font-weight: bold;
 }
 
+#openwebrx-panel-receiver
+{
+	width:110px;
+}
+
+#openwebrx-mute-on
+{
+	color: lime;
+}
+
+#openwebrx-mute-off
+{
+	color: white;
+}
+
+#openwebrx-panel-volume
+{
+	width:70%;
+}

htdocs/openwebrx.js

@@ -118,6 +118,31 @@ 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);
+}
+
+function toggleMute()
+{
+	if (mute) {
+		mute = false;
+		e("openwebrx-mute-on").id="openwebrx-mute-off";
+	} else {
+		mute = true;
+		e("openwebrx-mute-off").id="openwebrx-mute-on"
+	}
+
+	updateVolume();
+}
+
+
+
 // ========================================================
 // =================  ANIMATION ROUTINES  =================
 // ========================================================
@@ -1119,6 +1144,8 @@ function divlog(what, is_error)
 
 var audio_context;
 var audio_initialized=0;
+var volume;
+var mute = false;
 
 var audio_received = Array();
 var audio_buffer_index = 0;
@@ -1156,9 +1183,9 @@ function audio_prepare(data)
 	//audio_rebuffer.push(sdrjs.ConvertI16_F(data));//no resampling
 	//audio_rebuffer.push(audio_resampler.process(sdrjs.ConvertI16_F(data)));//resampling without ADPCM
 	if(audio_compression=="none")
-		audio_rebuffer.push(audio_resampler.process(gain_ff(0.9,sdrjs.ConvertI16_F(data))));//resampling without ADPCM
+		audio_rebuffer.push(audio_resampler.process(gain_ff(volume,sdrjs.ConvertI16_F(data))));//resampling without ADPCM
 	else if(audio_compression=="adpcm")
-		audio_rebuffer.push(audio_resampler.process(gain_ff(0.9,sdrjs.ConvertI16_F(audio_codec.decode(data))))); //resampling & ADPCM
+		audio_rebuffer.push(audio_resampler.process(gain_ff(volume,sdrjs.ConvertI16_F(audio_codec.decode(data))))); //resampling & ADPCM
 	else return;
 
 	//console.log("prepare",data.length,audio_rebuffer.remaining());
@@ -1699,6 +1726,9 @@ function openwebrx_init()
 	window.setTimeout(function(){window.setInterval(debug_audio,1000);},1000);
 	window.addEventListener("resize",openwebrx_resize);
 	check_top_bar_congestion();
+
+	//Synchronise volume with slider
+	updateVolume();
 }
 
 /*
@@ -1808,13 +1838,14 @@ function place_panels()
 			if (c.dataset.panelPos=="left") { left_col.push(c); }
 			else if(c.dataset.panelPos=="right") { right_col.push(c); }
 			c.style.width=newSize[0]+"px";
-			c.style.height=newSize[1]+"px";
+			//c.style.height=newSize[1]+"px";
 			if(!c.openwebrxPanelTransparent) c.style.margin=panel_margin.toString()+"px";
 			else c.style.marginLeft=panel_margin.toString()+"px";
 			c.openwebrxPanelWidth=parseInt(newSize[0]);			
 			c.openwebrxPanelHeight=parseInt(newSize[1]);
 		}
 	}
+
 	y=hoffset; //was y=0 before hoffset
 	while(left_col.length>0)
 	{