new battery fml

README.md

@@ -1,6 +1,6 @@
 # Headset Battery Widget
 
-## Install:
+## Install
 
 ```
 git clone https://git.lat/Flummi/headsetcontrol-battery-widget.git
@@ -8,9 +8,9 @@ cd headsetcontrol-battery-widget
 kpackagetool5 -t Plasma/Applet --install ./package
 ```
 
-## Uninstall:
+## Uninstall
 
 ```
 cd headsetcontrol-battery-widget
-kpackagetool5 -t Plasma/Applet --remove ./package
+kpackagetool5 -t Plasma/Applet --remove org.kde.plasma.headsetcontrol-battery-widget
 ```

package/contents/ui/configGeneral.qml

@@ -30,12 +30,12 @@ QQC2.Pane {
         snapMode: Slider.SnapAlways
         Kirigami.FormData.label: i18nc("@label", "polling rate in seconds:")
         onMoved: {
-          test.text = this.value + " seconds";
+          pollingratevalue.text = this.value + " seconds";
         }
       }
 
       Text {
-        id: test
+        id: pollingratevalue
         text: pollingrate.value + " seconds"
         color: PlasmaCore.Theme.textColor
       }

package/contents/ui/main.qml

@@ -2,6 +2,7 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.3
 import org.kde.plasma.plasmoid 2.0
 import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.kirigami 2.14 as Kirigami
 
 Item {
   id: main
@@ -24,34 +25,70 @@ Item {
   Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation
 
   Plasmoid.compactRepresentation: Item {
-    Layout.minimumWidth: units.iconSizes.medium
+    Layout.minimumWidth: units.iconSizes.large
+    Layout.alignment: Qt.AlignHCenter
 
-    Image {
+    Rectangle { // battery
+      id: container
       anchors.fill: parent
-      smooth: true
-      fillMode: Image.PreserveAspectFit
-      source: batteryIcon()
+      anchors.rightMargin: 15
+      anchors.topMargin: 2
+      anchors.bottomMargin: 2
+      color: "transparent"
+      border.color: PlasmaCore.Theme.textColor
+      radius: 4
       Plasmoid.toolTipMainText: "battery level: " + batteryLevel()
       Plasmoid.toolTipSubText: "polling rate: " + pollingrate + " seconds"
+
+      Item {
+        anchors.fill: parent
+        anchors.margins: 2
+        Rectangle { // battery fill
+          anchors.left: parent.left
+          anchors.top: parent.top
+          anchors.bottom: parent.bottom
+          color: batteryColor()
+          width: parent.width * Math.max(0, Math.min(batteryPercent, 100)) / 100
+        }
+      }
+    }
+    Rectangle { // battery cap
+      anchors.left: container.right
+      anchors.leftMargin: 1
+      anchors.verticalCenter: parent.verticalCenter
+      radius: 4
+      height: parent.height / 3
+      width: 2
+      color: PlasmaCore.Theme.textColor
+    }
+    Rectangle { // symbol: headset
+      anchors.fill: parent
+      anchors.rightMargin: 23
+      color: "transparent"
+      Kirigami.Icon {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.right
+        height: container.height * 0.45
+        source: "audio-headset-symbolic"
+      }
     }
     
-    function batteryIcon() {
-      let iconName = "battery_100"
+
+    function batteryColor() {
+      let color = "red"
       if(batteryPercent == -1) // charging
-        iconName = "battery_charging"
+        color = "green";
       else if(batteryPercent == -2) // not connected
-        iconName = "battery_nc";
+        color = "red";
       else if(batteryPercent > 80)
-        iconName = "battery_100";
+        color = "green";
       else if(batteryPercent > 60)
-        iconName = "battery_80";
+        color = "green";
       else if(batteryPercent > 40)
-        iconName = "battery_60";
+        color = "yellow";
       else if(batteryPercent > 20)
-        iconName = "battery_40";
-      else
-        iconName = "battery_20";
-      return "../icons/" + iconName + ".png";
+        color = "red";
+      return color;
     }
 
     function batteryLevel() {