joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Actions 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
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

20
htdocs/index.wrx
View File

@@ -76,16 +76,18 @@
<div id="webrx-actual-freq">---.--- MHz</div> <div id="webrx-actual-freq">---.--- MHz</div>
<div id="webrx-mouse-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="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>
<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> </div>

43
htdocs/openwebrx.css
View File

@@ -46,13 +46,12 @@ input[type=range]:focus
input[type=range]::-webkit-slider-runnable-track input[type=range]::-webkit-slider-runnable-track
{ {
width: 100%; height: 5px;
height: 7px;
cursor: pointer; cursor: pointer;
animate: 0.2s; animate: 0.2s;
box-shadow: 0px 0px 0px #000000; box-shadow: 0px 0px 0px #000000;
background: #B6B6B6; background: #B6B6B6;
border-radius: 11px; /*border-radius: 11px;*/
border: 1px solid #8A8A8A; border: 1px solid #8A8A8A;
} }
@@ -60,13 +59,13 @@ input[type=range]::-webkit-slider-thumb
{ {
box-shadow: 1px 1px 1px #828282; box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A; border: 1px solid #8A8A8A;
height: 24px; height: 15px;
width: 7px; width: 15px;
border-radius: 0px; border-radius: 10px;
background: #FFFFFF; background: #FFFFFF;
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -9.5px; margin-top: -7px;
} }
input[type=range]:focus::-webkit-slider-runnable-track 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 input[type=range]::-moz-range-track
{ {
width: 100%; height: 3px;
height: 7px;
cursor: pointer; cursor: pointer;
animate: 0.2s; animate: 0.2s;
box-shadow: 0px 0px 0px #000000; box-shadow: 0px 0px 0px #000000;
@@ -90,9 +88,9 @@ input[type=range]::-moz-range-thumb
{ {
box-shadow: 1px 1px 1px #828282; box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A; border: 1px solid #8A8A8A;
height: 24px; height: 12px;
width: 7px; width: 12px;
border-radius: 0px; border-radius: 10px;
background: #FFFFFF; background: #FFFFFF;
cursor: pointer; cursor: pointer;
} }
@@ -532,9 +530,7 @@ input[type=range]:focus::-ms-fill-upper
-moz-border-radius: 5px; -moz-border-radius: 5px;
color: White; color: White;
font-weight: bold; font-weight: bold;
width: auto; margin-right: 1px;
float: left;
margin-right: 5px;
cursor: pointer; cursor: pointer;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.0 , #373737), color-stop(1, #4F4F4F) ); 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% ); 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; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
display: inline-block;
} }
.openwebrx-button:hover .openwebrx-button:hover
@@ -673,5 +670,19 @@ input[type=range]:focus::-ms-fill-upper
#openwebrx-panel-volume #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); else if (window.getComputedStyle) return document.defaultView.getComputedStyle(of_what,null).getPropertyValue(which);
} }
function setVolume(str)
{
volume = mute ? 0 : parseFloat(str)/100;
}
function updateVolume() function updateVolume()
{ {
setVolume(e("openwebrx-panel-volume").value); volume = parseFloat(e("openwebrx-panel-volume").value) / 100;
} }
function toggleMute() function toggleMute()
@@ -133,9 +128,18 @@ function toggleMute()
if (mute) { if (mute) {
mute = false; mute = false;
e("openwebrx-mute-on").id="openwebrx-mute-off"; 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 { } else {
mute = true; 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(); updateVolume();
@@ -1144,7 +1148,8 @@ function divlog(what, is_error)
var audio_context; var audio_context;
var audio_initialized=0; var audio_initialized=0;
var volume; var volume = 1.0;
var volumeBeforeMute = 100.0;
var mute = false; var mute = false;
var audio_received = Array(); var audio_received = Array();