add three color gradient

package/contents/config/main.xml

@@ -20,6 +20,9 @@
     <entry name="colorEmpty" type="String">
       <default>#ff0000</default>
     </entry>
+    <entry name="colorHalf" type="String">
+      <default>#ffff00</default>
+    </entry>
     <entry name="colorFull" type="String">
       <default>#008800</default>
     </entry>

package/contents/ui/configGeneral.qml

@@ -13,6 +13,7 @@ QQC2.Pane {
   property alias cfg_pollingrate: pollingrate.value
   property alias cfg_batteryheight: batteryheight.value
   property alias cfg_colorEmpty: colorEmpty.color
+  property alias cfg_colorHalf: colorHalf.color
   property alias cfg_colorFull: colorFull.color
 
   Kirigami.FormLayout {
@@ -64,7 +65,7 @@ QQC2.Pane {
     // color config
     GridLayout {
       columns: 3
-      rows: 2
+      rows: 3
       rowSpacing: 1
 
       // first row
@@ -81,7 +82,21 @@ QQC2.Pane {
         color: PlasmaCore.Theme.textColor
       }
 
-      // second row
+      // secod row
+      Text {
+        text: "half:"
+        color: PlasmaCore.Theme.textColor
+      }
+      KQControls.ColorButton {
+        id: colorHalf
+        color: cfg_colorHalf
+      }
+      Text {
+        text: cfg_colorHalf
+        color: PlasmaCore.Theme.textColor
+      }
+
+      // third row
       Text {
         text: "full:"
         color: PlasmaCore.Theme.textColor
@@ -104,43 +119,43 @@ QQC2.Pane {
 
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.1)
+        color: Helper.interpolateColor(.1, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.2)
+        color: Helper.interpolateColor(.2, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.3)
+        color: Helper.interpolateColor(.3, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.4)
+        color: Helper.interpolateColor(.4, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.5)
+        color: Helper.interpolateColor(.5, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.6)
+        color: Helper.interpolateColor(.6, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.7)
+        color: Helper.interpolateColor(.7, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.8)
+        color: Helper.interpolateColor(.8, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.9)
+        color: Helper.interpolateColor(.9, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
       Text {
         text: "█"
-        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 1)
+        color: Helper.interpolateColor( 1, cfg_colorEmpty.toString(), cfg_colorHalf.toString(), cfg_colorFull.toString())
       }
     }
   }

package/contents/ui/lib/helper.js

@@ -8,13 +8,34 @@ const batteryIcon = batteryPercent => ({
   "-1": "battery-ac-adapter"
 })[batteryPercent] ?? "audio-headphones-symbolic";
 
-const interpolateColor = (c0, c1, f) => { // https://stackoverflow.com/a/63775249
+const hex2rgb = hex => ({
+  r: parseInt(hex.slice(1, 3), 16),
+  g: parseInt(hex.slice(3, 5), 16),
+  b: parseInt(hex.slice(5, 7), 16)
+});
+const rgb2Hex = rgb => `#${((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1)}`;
+
+const interpolateColor = (f, c0, c1, c3) => {
   if(isNaN(f)) return "transparent";
-  c0 = c0.replace('#', '').match(/.{1,2}/g).map(oct => parseInt(oct, 16) * (1-f));
+  c0 = hex2rgb(c0);
-  c1 = c1.replace('#', '').match(/.{1,2}/g).map(oct => parseInt(oct, 16) * f);
+  c1 = hex2rgb(c1);
-  return "#" + [0, 1, 2]
+  c3 = hex2rgb(c3);
-    .map(i => Math.min(Math.round(c0[i] + c1[i]), 255))
+  let color1 = c0;
-    .reduce((a, v) => ((a << 8) + v), 0)
+  let color2 = c1;
-    .toString(16)
+  let fade = f;
-    .padStart(6, "0");
+
+  if(c3) {
+    fade *= 2;
+    if(fade >= 1) {
+      fade--;
+      color1 = c1;
+      color2 = c3;
+    }
+  }
+
+  return rgb2Hex({
+    r: parseInt(~~(color1.r + ((color2.r - color1.r) * fade)), 10),
+    g: parseInt(~~(color1.g + ((color2.g - color1.g) * fade)), 10),
+    b: parseInt(~~(color1.b + ((color2.b - color1.b) * fade)), 10),
+  });
 };

package/contents/ui/main.qml

@@ -12,6 +12,7 @@ Item {
   property int pollingrate: Plasmoid.configuration.pollingrate
   property int batteryheight: Plasmoid.configuration.batteryheight
   property string colorEmpty: Plasmoid.configuration.colorEmpty
+  property string colorHalf: Plasmoid.configuration.colorHalf
   property string colorFull: Plasmoid.configuration.colorFull
   property int batteryPercent: -2
 
@@ -52,7 +53,7 @@ Item {
           anchors.left: parent.left
           anchors.top: parent.top
           anchors.bottom: parent.bottom
-          color: Helper.interpolateColor(colorEmpty, colorFull, parseFloat("." + batteryPercent))
+          color: Helper.interpolateColor(parseFloat("." + batteryPercent), colorEmpty, colorHalf, colorFull)
           width: parent.width * Math.max(0, Math.min(batteryPercent, 100)) / 100
         }
         Kirigami.Icon { // headphones icon