From 9d89cbceed4ccc147045f46cfff2885be76148e2 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sat, 2 Jan 2021 17:53:54 +0100
Subject: [PATCH 1/2] use transform for better performance

---
 htdocs/css/openwebrx.css  | 8 +++-----
 htdocs/lib/ProgressBar.js | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 05cfcbf..f4fa7f6 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -559,13 +559,11 @@ img.openwebrx-mirror-img
 	border-radius: 5px;
 	height: 100%;
 	width: 100%;
-	position: absolute;
-	left: -100%;
-	transition-property: left,background-color;
+	transition-property: transform, background-color;
 	transition-duration: 1s;
 	transition-timing-function: ease-in-out;
-	transform: translateZ(0);
-	will-change: left;
+	transform: translate(-100%) translateZ(0);
+	will-change: transform, background-color;
 }
 
 .openwebrx-progressbar--over .openwebrx-progressbar-bar {
diff --git a/htdocs/lib/ProgressBar.js b/htdocs/lib/ProgressBar.js
index 71b1754..9b791ad 100644
--- a/htdocs/lib/ProgressBar.js
+++ b/htdocs/lib/ProgressBar.js
@@ -18,7 +18,7 @@ ProgressBar.prototype.set = function(val, text, over) {
 ProgressBar.prototype.setValue = function(val) {
     if (val < 0) val = 0;
     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) {

From 57e5923a4d96f95ac32919510326be9ec1df4a8e Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sat, 2 Jan 2021 18:16:25 +0100
Subject: [PATCH 2/2] apply performance optimizations to s-meter, too

---
 htdocs/css/openwebrx.css | 23 +++++++++++++----------
 htdocs/index.html        |  4 ++--
 htdocs/openwebrx.js      | 20 +++++++++++++-------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index f4fa7f6..c2e87fc 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -676,8 +676,7 @@ img.openwebrx-mirror-img
     }
 }
 
-#openwebrx-smeter-outer
-{
+#openwebrx-smeter {
 	border-color: #888;
 	border-style: solid;
 	border-width: 0px;
@@ -685,16 +684,20 @@ img.openwebrx-mirror-img
 	height: 7px;
 	background-color: #373737;
 	border-radius: 3px;
-	position: relative;
+	overflow: hidden;
 }
-#openwebrx-smeter-bar
-{
-	transition: all 0.2s linear;
-	width: 0px;
-	height: 7px;
+
+.openwebrx-smeter-bar {
+	transition-property: transform;
+	transition-duration: 0.2s;
+	transition-timing-function: linear;
+	will-change: transform;
+	transform: translate(-100%) translateZ(0);
+	width: 100%;
+	height: 100%;
 	background: linear-gradient(to top, #ff5939 , #961700);
-	position: absolute;
-	margin: 0; padding: 0; left: 0;
+	margin: 0;
+	padding: 0;
 	border-radius: 3px;
 }
 
diff --git a/htdocs/index.html b/htdocs/index.html
index 21dd986..3932923 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -151,8 +151,8 @@
                     <div id="openwebrx-smeter-db">0 dB</div>
                 </div>
                 <div class="openwebrx-panel-line">
-                    <div id="openwebrx-smeter-outer">
-                        <div id="openwebrx-smeter-bar"></div>
+                    <div id="openwebrx-smeter">
+                        <div class="openwebrx-smeter-bar"></div>
                     </div>
                 </div>
             </div>
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 594f0b5..05bce97 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -151,13 +151,19 @@ function waterfallColorsContinuous(levels) {
 function setSmeterRelativeValue(value) {
     if (value < 0) value = 0;
     if (value > 1.0) value = 1.0;
-    var bar = e("openwebrx-smeter-bar");
-    var outer = e("openwebrx-smeter-outer");
-    bar.style.width = (outer.offsetWidth * value).toString() + "px";
-    var bgRed = "linear-gradient(to top, #ff5939 , #961700)";
-    var bgGreen = "linear-gradient(to top, #22ff2f , #008908)";
-    var bgYellow = "linear-gradient(to top, #fff720 , #a49f00)";
-    bar.style.background = (value > 0.9) ? bgRed : ((value > 0.7) ? bgYellow : bgGreen);
+    var $meter = $("#openwebrx-smeter");
+    var $bar = $meter.find(".openwebrx-smeter-bar");
+    $bar.css({transform: 'translate(' + ((value - 1) * 100) + '%) translateZ(0)'});
+    if (value > 0.9) {
+        // red
+        $bar.css({background: 'linear-gradient(to top, #ff5939 , #961700)'});
+    } 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) {