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

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

Browse Source
This commit is contained in:
ha7ilm 2016-02-14 00:31:28 +01:00
parent 3632c53985
commit fcae87ee93
5 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
htdocs/gfx/openwebrx-speaker-muted.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 699 B

BIN
htdocs/gfx/openwebrx-speaker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

8
htdocs/index.wrx
View File

@ -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-panel-line">
<div class="openwebrx-button" onclick="demodulator_analog_replace('nfm');">FM</div>
<div class="openwebrx-button" onclick="demodulator_analog_replace('am');">AM</div>
<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:
</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 id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute()">Mute</div>
</div>

43
htdocs/openwebrx.css
View File

@ -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;
}

21
htdocs/openwebrx.js
View File

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