osd

.config/quickshell/modules/onScreenDisplay/OnScreenDisplay.qml

@@ -0,0 +1,118 @@
+import "root:/services/"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+
+Scope {
+    id: root
+    property bool showOsdValues: false
+
+    function triggerOsd() {
+        showOsdValues = true
+        osdTimeout.restart()
+    }
+
+    Timer {
+        id: osdTimeout
+        interval: ConfigOptions.osd.timeout
+        repeat: false
+        running: false
+        onTriggered: {
+            showOsdValues = false
+        }
+    }
+
+    Connections {
+        target: Brightness
+        function onValueChanged() {
+            if (!Brightness.ready) return
+            root.triggerOsd()
+        }
+    }
+
+    Connections {
+        target: Audio.sink.audio
+        function onVolumeChanged() {
+            if (!Audio.ready) return
+            root.triggerOsd()
+        }
+    }
+
+    Variants {
+        model: Quickshell.screens
+
+        PanelWindow {
+            property var modelData
+
+            screen: modelData
+            exclusionMode: ExclusionMode.Normal
+            WlrLayershell.namespace: "quickshell:onScreenDisplay"
+            WlrLayershell.layer: WlrLayer.Overlay
+            color: "transparent"
+
+            anchors {
+                top: true
+                left: true
+                right: true
+            }
+            mask: Region {
+                item: columnLayout
+            }
+
+            width: columnLayout.implicitWidth
+            height: columnLayout.implicitHeight
+            visible: showOsdValues
+
+            ColumnLayout {
+                id: columnLayout
+                anchors.horizontalCenter: parent.horizontalCenter
+                Item {
+                    height: 1 // Prevent Wayland protocol error
+                }
+                Item {
+                    implicitHeight: true ? osdValues.implicitHeight : 0
+                    implicitWidth: osdValues.implicitWidth
+                    clip: true
+
+                    Behavior on implicitHeight {
+                        NumberAnimation {
+                            duration: Appearance.animation.menuDecel.duration
+                            easing.type: Appearance.animation.menuDecel.type
+                        }
+                    }
+
+                    OsdValues {
+                        id: osdValues
+                        anchors.bottom: parent.bottom
+                        // height: showOsdValues ? implicitHeight : 0
+                        // implicitHeight: 0
+                    }
+                }
+            }
+
+        }
+
+    }
+
+    IpcHandler {
+		target: "osd"
+
+		function trigger() {
+            root.triggerOsd()
+        }
+
+        function hide() {
+            showOsdValues = false
+        }
+
+        function toggle() {
+            showOsdValues = !showOsdValues
+        }
+	}
+
+}

.config/quickshell/modules/onScreenDisplay/OsdValueIndicator.qml

@@ -0,0 +1,86 @@
+import "root:/services"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+    required property real value
+    required property string icon
+    required property string name
+
+    property real valueIndicatorVerticalPadding: 5
+    property real valueIndicatorLeftPadding: 10
+    property real valueIndicatorRightPadding: 20 // An icon is circle ish, a column isn't, hence the extra padding
+
+    Layout.margins: Appearance.sizes.elevationMargin
+    implicitWidth: valueIndicator.implicitWidth
+    implicitHeight: valueIndicator.implicitHeight
+
+    WrapperRectangle {
+        id: valueIndicator
+        radius: Appearance.rounding.full
+        color: Appearance.colors.colLayer0
+        implicitWidth: valueRow.implicitWidth
+
+        RowLayout { // Icon on the left, stuff on the right
+            id: valueRow
+            spacing: 5
+            Layout.margins: 10
+
+            MaterialSymbol { // Icon
+                Layout.alignment: Qt.AlignVCenter
+                Layout.leftMargin: valueIndicatorLeftPadding
+                Layout.topMargin: valueIndicatorVerticalPadding
+                Layout.bottomMargin: valueIndicatorVerticalPadding
+                text: root.icon
+                font.pixelSize: 30
+            }
+            ColumnLayout { // Stuff
+                Layout.alignment: Qt.AlignVCenter
+                Layout.rightMargin: valueIndicatorRightPadding
+                spacing: 5
+
+                RowLayout { // Name fill left, value on the right end
+                    Layout.leftMargin: valueBarHeight / 2 // Align text with progressbar radius curve's left end
+                    Layout.rightMargin: valueBarHeight / 2 // Align text with progressbar radius curve's left end
+
+                    StyledText {
+                        color: Appearance.colors.colOnLayer0
+                        font.pixelSize: Appearance.font.pixelSize.small
+                        Layout.fillWidth: true
+                        text: root.name
+                    }
+
+                    StyledText {
+                        color: Appearance.colors.colOnLayer0
+                        font.pixelSize: Appearance.font.pixelSize.small
+                        Layout.fillWidth: false
+                        text: Math.round(root.value * 100)
+                    }
+                }
+                
+                StyledProgressBar {
+                    id: valueProgressBar
+                    value: root.value
+                }
+            }
+        }
+    }
+
+    DropShadow {
+        id: valueShadow
+        anchors.fill: valueIndicator
+        source: valueIndicator
+        radius: Appearance.sizes.elevationMargin
+        samples: radius * 2 + 1
+        color: Appearance.colors.colShadow
+        verticalOffset: 2
+        horizontalOffset: 0
+    }
+}

.config/quickshell/modules/onScreenDisplay/OsdValues.qml

@@ -0,0 +1,24 @@
+import "root:/services"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+RowLayout {
+    spacing: -5
+
+    OsdValueIndicator {
+        value: Brightness.value
+        icon: "light_mode"
+        name: "Brightness"
+    }
+    OsdValueIndicator {
+        value: Audio.sink.audio.volume
+        icon: "volume_up"
+        name: "Volume"
+    }
+}