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

Merge branch 'develop' into pycsdr

Browse Source
This commit is contained in:
Jakob Ketterl 2021-01-03 15:59:27 +01:00
commit 91be89e44e
4 changed files with 32 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
htdocs/css/openwebrx.css
View File

@ -559,13 +559,11 @@ img.openwebrx-mirror-img
border-radius: 5px; border-radius: 5px;
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; transition-property: transform, background-color;
left: -100%;
transition-property: left,background-color;
transition-duration: 1s; transition-duration: 1s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transform: translateZ(0); transform: translate(-100%) translateZ(0);
will-change: left; will-change: transform, background-color;
} }
.openwebrx-progressbar--over .openwebrx-progressbar-bar { .openwebrx-progressbar--over .openwebrx-progressbar-bar {
@ -678,8 +676,7 @@ img.openwebrx-mirror-img
} }
} }
#openwebrx-smeter-outer #openwebrx-smeter {
{
border-color: #888; border-color: #888;
border-style: solid; border-style: solid;
border-width: 0px; border-width: 0px;
@ -687,16 +684,20 @@ img.openwebrx-mirror-img
height: 7px; height: 7px;
background-color: #373737; background-color: #373737;
border-radius: 3px; border-radius: 3px;
position: relative; overflow: hidden;
} }
#openwebrx-smeter-bar
{ .openwebrx-smeter-bar {
transition: all 0.2s linear; transition-property: transform;
width: 0px; transition-duration: 0.2s;
height: 7px; transition-timing-function: linear;
will-change: transform;
transform: translate(-100%) translateZ(0);
width: 100%;
height: 100%;
background: linear-gradient(to top, #ff5939 , #961700); background: linear-gradient(to top, #ff5939 , #961700);
position: absolute; margin: 0;
margin: 0; padding: 0; left: 0; padding: 0;
border-radius: 3px; border-radius: 3px;
} }

4
htdocs/index.html
View File

@ -151,8 +151,8 @@
<div id="openwebrx-smeter-db">0 dB</div> <div id="openwebrx-smeter-db">0 dB</div>
</div> </div>
<div class="openwebrx-panel-line"> <div class="openwebrx-panel-line">
<div id="openwebrx-smeter-outer"> <div id="openwebrx-smeter">
<div id="openwebrx-smeter-bar"></div> <div class="openwebrx-smeter-bar"></div>
</div> </div>
</div> </div>
</div> </div>

2
htdocs/lib/ProgressBar.js
View File

@ -18,7 +18,7 @@ ProgressBar.prototype.set = function(val, text, over) {
ProgressBar.prototype.setValue = function(val) { ProgressBar.prototype.setValue = function(val) {
if (val < 0) val = 0; if (val < 0) val = 0;
if (val > 1) val = 1; if (val > 1) val = 1;
this.$innerBar.css({left: (val - 1) * 100 + '%'}); this.$innerBar.css({transform: 'translate(' + ((val - 1) * 100) + '%) translateZ(0)'});
}; };
ProgressBar.prototype.setText = function(text) { ProgressBar.prototype.setText = function(text) {

20
htdocs/openwebrx.js
View File

@ -151,13 +151,19 @@ function waterfallColorsContinuous(levels) {
function setSmeterRelativeValue(value) { function setSmeterRelativeValue(value) {
if (value < 0) value = 0; if (value < 0) value = 0;
if (value > 1.0) value = 1.0; if (value > 1.0) value = 1.0;
var bar = e("openwebrx-smeter-bar"); var $meter = $("#openwebrx-smeter");
var outer = e("openwebrx-smeter-outer"); var $bar = $meter.find(".openwebrx-smeter-bar");
bar.style.width = (outer.offsetWidth * value).toString() + "px"; $bar.css({transform: 'translate(' + ((value - 1) * 100) + '%) translateZ(0)'});
var bgRed = "linear-gradient(to top, #ff5939 , #961700)"; if (value > 0.9) {
var bgGreen = "linear-gradient(to top, #22ff2f , #008908)"; // red
var bgYellow = "linear-gradient(to top, #fff720 , #a49f00)"; $bar.css({background: 'linear-gradient(to top, #ff5939 , #961700)'});
bar.style.background = (value > 0.9) ? bgRed : ((value > 0.7) ? bgYellow : bgGreen); } else if (value > 0.7) {
// yellow
$bar.css({background: 'linear-gradient(to top, #fff720 , #a49f00)'});
} else {
// red
$bar.css({background: 'linear-gradient(to top, #22ff2f , #008908)'});
}
} }
function setSquelchSliderBackground(val) { function setSquelchSliderBackground(val) {