dashboard: resources

config/DashboardConfig.qml

@@ -16,5 +16,6 @@ Singleton {
         readonly property int mediaWidth: 200
         readonly property int mediaProgressSweep: 180
         readonly property int mediaProgressThickness: 8
+        readonly property int resourceProgessThickness: 10
     }
 }

modules/bar/Bar.qml

@@ -1,5 +1,4 @@
 import "root:/widgets"
-import "root:/services"
 import "root:/config"
 import Quickshell
 import QtQuick
@@ -27,7 +26,6 @@ Variants {
                 win.anchors.bottom = true;
             else
                 win.anchors.right = true;
-            console.log(Players.list);
         }
 
         Connections {

modules/dashboard/Dash.qml

@@ -1,7 +1,7 @@
-import "root:/widgets"
 import "root:/services"
 import "root:/config"
 import "dash"
+import QtQuick
 import QtQuick.Layouts
 
 GridLayout {
@@ -17,7 +17,7 @@ GridLayout {
     }
 
     Rect {
-        text: "toggles"
+        // text: "toggles"
 
         Layout.column: 3
         Layout.columnSpan: 2
@@ -32,7 +32,7 @@ GridLayout {
     }
 
     Rect {
-        text: "calendar"
+        // text: "calendar"
 
         Layout.row: 1
         Layout.column: 1
@@ -42,12 +42,11 @@ GridLayout {
     }
 
     Rect {
-        text: "perf"
-
         Layout.row: 1
         Layout.column: 4
-        Layout.preferredWidth: 120
         Layout.fillHeight: true
+
+        Resources {}
     }
 
     Rect {
@@ -59,15 +58,22 @@ GridLayout {
         Media {}
     }
 
-    component Rect: StyledRect {
+    component Rect: Rectangle {
-        property string text
+        default property Item child
+
+        children: [child]
+        implicitWidth: child.implicitWidth
+        implicitHeight: child.implicitHeight
 
         radius: Appearance.rounding.small
         color: Colours.palette.m3surfaceContainer
 
-        StyledText {
+        Behavior on color {
-            anchors.centerIn: parent
+            ColorAnimation {
-            text: parent.text
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
         }
     }
 }

modules/dashboard/dash/Media.qml

@@ -13,11 +13,13 @@ Item {
         return active ? active.position / active.length : 0;
     }
 
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
     implicitWidth: DashboardConfig.sizes.mediaWidth
 
     Behavior on playerProgress {
         NumberAnimation {
-            duration: Appearance.anim.durations.normal
+            duration: Appearance.anim.durations.large
             easing.type: Easing.BezierSpline
             easing.bezierCurve: Appearance.anim.curves.standard
         }

modules/dashboard/dash/Resources.qml

@@ -0,0 +1,85 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Controls
+
+Row {
+    id: root
+
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+
+    padding: Appearance.padding.large
+    spacing: Appearance.spacing.normal
+
+    Resource {
+        icon: "memory"
+        value: SystemUsage.cpuPerc
+        colour: Colours.palette.m3primary
+    }
+
+    Resource {
+        icon: "memory_alt"
+        value: SystemUsage.memPerc
+        colour: Colours.palette.m3secondary
+    }
+
+    Resource {
+        icon: "hard_disk"
+        value: SystemUsage.storagePerc
+        colour: Colours.palette.m3tertiary
+    }
+
+    component Resource: Item {
+        id: res
+
+        required property string icon
+        required property real value
+        required property color colour
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.margins: Appearance.padding.large
+        implicitWidth: icon.implicitWidth
+
+        StyledRect {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.bottom: icon.top
+            anchors.bottomMargin: Appearance.spacing.small
+
+            implicitWidth: DashboardConfig.sizes.resourceProgessThickness
+
+            color: Colours.palette.m3surfaceContainerHigh
+            radius: Appearance.rounding.full
+
+            StyledRect {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                implicitHeight: res.value * parent.height
+
+                color: res.colour
+                radius: Appearance.rounding.full
+            }
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.bottom: parent.bottom
+
+            text: res.icon
+            color: res.colour
+        }
+
+        Behavior on value {
+            NumberAnimation {
+                duration: Appearance.anim.durations.large
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+}

services/Brightness.qml

@@ -95,7 +95,6 @@ Singleton {
             if (Math.round(brightness * 100) === rounded)
                 return;
             brightness = value;
-            console.log(brightness)
             setProc.command = isDdc ? ["ddcutil", "-b", busNum, "setvcp", "10", rounded] : ["brightnessctl", "s", `${rounded}%`];
             setProc.startDetached();
         }
@@ -107,7 +106,7 @@ Singleton {
 
         Component.onCompleted: {
             initProc.command = isDdc ? ["ddcutil", "-b", busNum, "getvcp", "10", "--brief"] : ["sh", "-c", `echo "a b c $(brightnessctl g) $(brightnessctl m)"`];
-    	    initProc.running = true;
+            initProc.running = true;
         }
     }
 

services/SystemUsage.qml

@@ -0,0 +1,84 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Io
+import QtQuick
+
+Singleton {
+    id: root
+
+    property real cpuPerc
+    property int memUsed
+    property int memTotal
+    readonly property real memPerc: memTotal > 0 ? memUsed / memTotal : 0
+    property int storageUsed
+    property int storageTotal
+    property real storagePerc: storageTotal > 0 ? storageUsed / storageTotal : 0
+
+    property int lastCpuIdle
+    property int lastCpuTotal
+
+    Timer {
+        running: true
+        interval: 1000
+        repeat: true
+        onTriggered: {
+            stat.reload();
+            meminfo.reload();
+            storage.running = true;
+        }
+    }
+
+    FileView {
+        id: stat
+
+        path: "/proc/stat"
+        onLoaded: {
+            const data = text().match(/^cpu\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/);
+            if (data) {
+                const stats = data.slice(1).map(n => parseInt(n, 10));
+                const total = stats.reduce((a, b) => a + b, 0);
+                const idle = stats[3];
+
+                const totalDiff = total - root.lastCpuTotal;
+                const idleDiff = idle - root.lastCpuIdle;
+                root.cpuPerc = totalDiff > 0 ? (1 - idleDiff / totalDiff) : 0;
+
+                root.lastCpuTotal = total;
+                root.lastCpuIdle = idle;
+            }
+        }
+    }
+
+    FileView {
+        id: meminfo
+
+        path: "/proc/meminfo"
+        onLoaded: {
+            const data = text();
+            root.memTotal = parseInt(data.match(/MemTotal: *(\d+)/)[1], 10) || 1;
+            root.memUsed = (root.memTotal - parseInt(data.match(/MemAvailable: *(\d+)/)[1], 10)) || 0;
+        }
+    }
+
+    Process {
+        id: storage
+
+        running: true
+        command: ["sh", "-c", "df | grep '^/dev/' | awk '{print $3, $4}'"]
+        stdout: SplitParser {
+            splitMarker: ""
+            onRead: data => {
+                let used = 0;
+                let avail = 0;
+                for (const line of data.trim().split("\n")) {
+                    const [u, a] = line.split(" ");
+                    used += parseInt(u, 10);
+                    avail += parseInt(a, 10);
+                }
+                root.storageUsed = used;
+                root.storageTotal = used + avail;
+            }
+        }
+    }
+}