color yourself

package/contents/config/main.xml

@@ -16,5 +16,12 @@
       <min>1.0</min>
       <max>10.0</max>
     </entry>
+
+    <entry name="colorEmpty" type="String">
+      <default>#ff0000</default>
+    </entry>
+    <entry name="colorFull" type="String">
+      <default>#008800</default>
+    </entry>
   </group>
 </kcfg>

package/contents/ui/configGeneral.qml

@@ -3,12 +3,17 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.5 as QQC2
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.kirigami 2.4 as Kirigami
+import org.kde.kquickcontrols 2.0 as KQControls
+
+import "./lib/helper.js" as Helper
 
 QQC2.Pane {
   id: root
 
   property alias cfg_pollingrate: pollingrate.value
   property alias cfg_batteryheight: batteryheight.value
+  property alias cfg_colorEmpty: colorEmpty.color
+  property alias cfg_colorFull: colorFull.color
 
   Kirigami.FormLayout {
     anchors.fill: parent
@@ -31,13 +36,9 @@ QQC2.Pane {
         to: 60.0
         stepSize: 2.0
         snapMode: QQC2.Slider.SnapAlways
-        onMoved: {
-          pollingratevalue.text = this.value + " seconds";
-        }
       }
       Text {
-        id: pollingratevalue
+        text: cfg_pollingrate + " seconds"
-        text: pollingrate.value + " seconds"
         color: PlasmaCore.Theme.textColor
       }
 
@@ -53,15 +54,94 @@ QQC2.Pane {
         to: 10.0
         stepSize: 1.0
         snapMode: QQC2.Slider.SnapAlways
-        onMoved: {
-          batteryheightvalue.text = this.value
       }
-      }
+      Text {
-      Text { // dummy
+        text: cfg_batteryheight
-        id: batteryheightvalue
-        text: batteryheight.value
         color: PlasmaCore.Theme.textColor
       }
     }
+
+    // color config
+    GridLayout {
+      columns: 3
+      rows: 2
+      rowSpacing: 1
+
+      // first row
+      Text {
+        text: "empty:"
+        color: PlasmaCore.Theme.textColor
+      }
+      KQControls.ColorButton {
+        id: colorEmpty
+        color: cfg_colorEmpty
+      }
+      Text {
+        text: cfg_colorEmpty
+        color: PlasmaCore.Theme.textColor
+      }
+
+      // second row
+      Text {
+        text: "full:"
+        color: PlasmaCore.Theme.textColor
+      }
+      KQControls.ColorButton {
+        id: colorFull
+        color: cfg_colorFull
+      }
+      Text {
+        text: cfg_colorFull
+        color: PlasmaCore.Theme.textColor
+      }
+    }
+
+    // color gradient example
+    GridLayout {
+      columns: 10
+      rows: 1
+      rowSpacing: 0
+
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.1)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.2)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.3)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.4)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.5)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.6)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.7)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.8)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 0.9)
+      }
+      Text {
+        text: "█"
+        color: Helper.interpolateColor(cfg_colorEmpty.toString(), cfg_colorFull.toString(), 1)
+      }
+    }
   }
 }

package/contents/ui/lib/helper.js

@@ -1,13 +1,3 @@
-const colors = [
-  '#f00', '#e21c00', '#c83800', '#a50', '#8d7100',
-  '#718d00', '#6fa100', '#5c8000', '#498000', '#080'
-];
-
-const batteryColor = batteryPercent => colors[({
-  "-2": 9,
-  "-1": 0
-})[batteryPercent] ?? ~~(batteryPercent / 10 + 0.5) - 1];
-
 const batteryLevel = batteryPercent => ({
   "-2": "not connected",
   "-1": "charging"
@@ -17,3 +7,14 @@ const batteryIcon = batteryPercent => ({
   "-2": "action-unavailable",
   "-1": "battery-ac-adapter"
 })[batteryPercent] ?? "audio-headphones-symbolic";
+
+const interpolateColor = (c0, c1, f) => { // https://stackoverflow.com/a/63775249
+  if(isNaN(f)) return "transparent";
+  c0 = c0.replace('#', '').match(/.{1,2}/g).map(oct => parseInt(oct, 16) * (1-f));
+  c1 = c1.replace('#', '').match(/.{1,2}/g).map(oct => parseInt(oct, 16) * f);
+  return "#" + [0, 1, 2]
+    .map(i => Math.min(Math.round(c0[i] + c1[i]), 255))
+    .reduce((a, v) => ((a << 8) + v), 0)
+    .toString(16)
+    .padStart(6, "0");
+};

package/contents/ui/main.qml

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