headsetcontrol-battery-widget/package/contents/ui/main.qml

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

  property int pollingrate: Plasmoid.configuration.pollingrate
  property int batteryPercent: -2

  PlasmaCore.DataSource {
    id: hsSource
    engine: "executable"
    connectedSources: ["headsetcontrol -bc"]
    interval: pollingrate * 1e3
    onNewData: {
      if(data['exit_code'] > 0)
        return console.log('error lol');
      batteryPercent = data['stdout'];
    }
  }

  Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation

  Plasmoid.compactRepresentation: Item {
    Layout.minimumWidth: units.iconSizes.large
    Layout.alignment: Qt.AlignHCenter

    Rectangle { // battery
      id: container
      anchors.fill: parent
      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 batteryColor() {
      let color = "red"
      if(batteryPercent == -1) // charging
        color = "green";
      else if(batteryPercent == -2) // not connected
        color = "red";
      else if(batteryPercent > 80)
        color = "green";
      else if(batteryPercent > 60)
        color = "green";
      else if(batteryPercent > 40)
        color = "yellow";
      else if(batteryPercent > 20)
        color = "red";
      return color;
    }

    function batteryLevel() {
      if(batteryPercent == -1)
        return "charging";
      else if(batteryPercent == -2)
        return "not connected";
      else
        return batteryPercent + "%";
    }
  }
}