From fcae87ee93139cd5db93a1a86f9b4ea11e0e102b Mon Sep 17 00:00:00 2001 From: ha7ilm Date: Sun, 14 Feb 2016 00:31:28 +0100 Subject: [PATCH] Improve volume & mute: button icon, behaviour on mute, slider appearance. --- htdocs/gfx/openwebrx-speaker-muted.png | Bin 0 -> 699 bytes htdocs/gfx/openwebrx-speaker.png | Bin 0 -> 2898 bytes htdocs/index.wrx | 20 ++++++------ htdocs/openwebrx.css | 43 ++++++++++++++++--------- htdocs/openwebrx.js | 21 +++++++----- 5 files changed, 51 insertions(+), 33 deletions(-) create mode 100644 htdocs/gfx/openwebrx-speaker-muted.png create mode 100644 htdocs/gfx/openwebrx-speaker.png diff --git a/htdocs/gfx/openwebrx-speaker-muted.png b/htdocs/gfx/openwebrx-speaker-muted.png new file mode 100644 index 0000000000000000000000000000000000000000..0d5457039dab4617ba84a2b60c3de9e6a220191f GIT binary patch literal 699 zcmeAS@N?(olHy`uVBq!ia0vp^i9npn!3HE_r}u6JQfx`y?k)`fL2$v|<&%LToCO|{ z#S9EA>LAQ`(_gj$D9B#o>Fdh=fQeU3NBl!Ew+RCSlZU5^V@SoVw|Dn@hbGD#|M>lE zw@8q}CH{^@jv`W0J#B4G3+9KkyimFFDCEMGq+DKJNAC+k&KCq!oJ1C;^={ogExG*i zNzV%(Ebbh)Kd|G=&Z>L)1-3E!^efI)&eMKwwrbU(O>c`?lxA=!-OzKAV9M*5@S5d= ztc8}-vcs$omYfb;=6oPL;YPL7GUfx~2}h)hm#G;r$9#FI@jdb$qj{~%*{@tP3g%CE zEm?5?Y}7jU1H$EJcB(asU)iH_$l`-kw_*(IJ!V^>6oGTh@{MuF=Q~<3pJA%)vuifs z&|&!7XWLvb=Ue9sL-%=(5)Atom&=s1JybB@pHp^4vgPlA^apd2&ncKR@*hxjpW~Rp zkl$$CXWsrnXvgb}Vh;bt_P)~R+27am#jcjOc;xY)H}QtymE_|&N*xJgqASbQ3~nvV z{>sqbxEW|R$9$`by_UD$@7(<$qxkeisRHSUk}Wr@4`~(f{&-ul+5DO41FjFp1=HvE zMX@H`G)$KdoZj#{wR6)0yF|eqp?SB&?yULCa;$;ZecoNe^Ox%!A1+HiugKsN{P_O4 zmtrgp<_D%MKCi@JqhIg#O{A2oK3Khv;X}hW>#eRF+c@uN`}--e+}5b>kXK4s{Z+8S zymoKoZRHPnzxyhGbL>%d+9p=8v!O#EXQhtsYM_dw~Ua`tm_%A-1`>^lAUq5Ef0VXpBPgg&ebxsLQ02?wWlmGw# literal 0 HcmV?d00001 diff --git a/htdocs/gfx/openwebrx-speaker.png b/htdocs/gfx/openwebrx-speaker.png new file mode 100644 index 0000000000000000000000000000000000000000..6c88e23c4b54f575a7a10c638fbaf0dbf388ade4 GIT binary patch literal 2898 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.--- 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();