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 org.kde.plasma.headsetcontrol-battery-widget
+kpackagetool5 -t Plasma/Applet --remove ./package
 ```

package/contents/ui/configGeneral.qml

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

package/contents/ui/main.qml

@@ -2,7 +2,6 @@ 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
@@ -25,70 +24,34 @@ Item {
   Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation
 
   Plasmoid.compactRepresentation: Item {
-    Layout.minimumWidth: units.iconSizes.large
+    Layout.minimumWidth: units.iconSizes.medium
-    Layout.alignment: Qt.AlignHCenter
 
-    Rectangle { // battery
+    Image {
-      id: container
       anchors.fill: parent
-      anchors.rightMargin: 15
+      smooth: true
-      anchors.topMargin: 2
+      fillMode: Image.PreserveAspectFit
-      anchors.bottomMargin: 2
+      source: batteryIcon()
-      color: "transparent"
-      border.color: PlasmaCore.Theme.textColor
-      radius: 4
       Plasmoid.toolTipMainText: "battery level: " + batteryLevel()
       Plasmoid.toolTipSubText: "polling rate: " + pollingrate + " seconds"
+    }
 
-      Item {
+    function batteryIcon() {
-        anchors.fill: parent
+      let iconName = "battery_100"
-        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 batteryColor() {
-      let color = "red"
       if(batteryPercent == -1) // charging
-        color = "green";
+        iconName = "battery_charging"
       else if(batteryPercent == -2) // not connected
-        color = "red";
+        iconName = "battery_nc";
       else if(batteryPercent > 80)
-        color = "green";
+        iconName = "battery_100";
       else if(batteryPercent > 60)
-        color = "green";
+        iconName = "battery_80";
       else if(batteryPercent > 40)
-        color = "yellow";
+        iconName = "battery_60";
       else if(batteryPercent > 20)
-        color = "red";
+        iconName = "battery_40";
-      return color;
+      else
+        iconName = "battery_20";
+      return "../icons/" + iconName + ".png";
     }
 
     function batteryLevel() {