diff options
Diffstat (limited to 'modules')
| -rw-r--r-- | modules/dashboard/Content.qml | 15 | ||||
| -rw-r--r-- | modules/dashboard/Performance.qml | 230 |
2 files changed, 239 insertions, 6 deletions
diff --git a/modules/dashboard/Content.qml b/modules/dashboard/Content.qml index 4026989..5b88f9b 100644 --- a/modules/dashboard/Content.qml +++ b/modules/dashboard/Content.qml @@ -54,18 +54,21 @@ Item { radius: Appearance.rounding.normal color: "transparent" - Dash { - clip: true - } + Dash {} } ClippingWrapperRectangle { radius: Appearance.rounding.normal color: "transparent" - Media { - clip: true - } + Media {} + } + + ClippingWrapperRectangle { + radius: Appearance.rounding.normal + color: "transparent" + + Performance {} } } } diff --git a/modules/dashboard/Performance.qml b/modules/dashboard/Performance.qml new file mode 100644 index 0000000..9334874 --- /dev/null +++ b/modules/dashboard/Performance.qml @@ -0,0 +1,230 @@ +import "root:/widgets" +import "root:/services" +import "root:/config" +import QtQuick + +Row { + id: root + + spacing: Appearance.spacing.large * 3 + padding: Appearance.padding.large + leftPadding: padding * 2 + rightPadding: padding * 3 + + Resource { + value1: Math.min(1, SystemUsage.gpuTemp / 90) + value2: SystemUsage.gpuPerc + + label1: `${Math.ceil(SystemUsage.gpuTemp)}°C` + label2: `${Math.round(SystemUsage.gpuPerc * 100)}%` + + sublabel1: "GPU temp" + sublabel2: "Usage" + } + + Resource { + primary: true + + value1: Math.min(1, SystemUsage.cpuTemp / 90) + value2: SystemUsage.cpuPerc + + label1: `${Math.ceil(SystemUsage.cpuTemp)}°C` + label2: `${Math.round(SystemUsage.cpuPerc * 100)}%` + + sublabel1: "CPU temp" + sublabel2: "Usage" + } + + Resource { + value1: SystemUsage.memPerc + value2: SystemUsage.storagePerc + + label1: { + const fmt = SystemUsage.formatKib(SystemUsage.memUsed); + return `${+fmt.value.toFixed(1)}${fmt.unit}`; + } + label2: { + const fmt = SystemUsage.formatKib(SystemUsage.storageUsed); + return `${Math.floor(fmt.value)}${fmt.unit}`; + } + + sublabel1: "Memory" + sublabel2: "Storage" + } + + component Resource: Item { + id: res + + required property real value1 + required property real value2 + required property string sublabel1 + required property string sublabel2 + required property string label1 + required property string label2 + + property bool primary + readonly property real primaryMult: primary ? 1.2 : 1 + + readonly property real thickness: DashboardConfig.sizes.resourceProgessThickness * primaryMult + + property color fg1: Colours.palette.m3primary + property color fg2: Colours.palette.m3secondary + property color bg1: Colours.palette.m3primaryContainer + property color bg2: Colours.palette.m3secondaryContainer + + anchors.verticalCenter: parent.verticalCenter + + implicitWidth: DashboardConfig.sizes.resourceSize * primaryMult + implicitHeight: DashboardConfig.sizes.resourceSize * primaryMult + + onValue1Changed: canvas.requestPaint() + onValue2Changed: canvas.requestPaint() + onFg1Changed: canvas.requestPaint() + onFg2Changed: canvas.requestPaint() + onBg1Changed: canvas.requestPaint() + onBg2Changed: canvas.requestPaint() + + Column { + anchors.centerIn: parent + + StyledText { + anchors.horizontalCenter: parent.horizontalCenter + + text: res.label1 + font.pointSize: Appearance.font.size.extraLarge * res.primaryMult + } + + StyledText { + anchors.horizontalCenter: parent.horizontalCenter + + text: res.sublabel1 + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.smaller * res.primaryMult + } + } + + Column { + anchors.horizontalCenter: parent.right + anchors.top: parent.verticalCenter + anchors.horizontalCenterOffset: -res.thickness / 2 + anchors.topMargin: res.thickness / 2 + Appearance.spacing.small + + StyledText { + anchors.horizontalCenter: parent.horizontalCenter + + text: res.label2 + font.pointSize: Appearance.font.size.smaller * res.primaryMult + } + + StyledText { + anchors.horizontalCenter: parent.horizontalCenter + + text: res.sublabel2 + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.small * res.primaryMult + } + } + + Canvas { + id: canvas + + readonly property real centerX: width / 2 + readonly property real centerY: height / 2 + + readonly property real arc1Start: degToRad(45) + readonly property real arc1End: degToRad(220) + readonly property real arc2Start: degToRad(230) + readonly property real arc2End: degToRad(360) + + function degToRad(deg: int): real { + return deg * Math.PI / 180; + } + + anchors.fill: parent + + onPaint: { + const ctx = getContext("2d"); + ctx.reset(); + + ctx.lineWidth = res.thickness; + ctx.lineCap = "round"; + + const radius = (Math.min(width, height) - ctx.lineWidth) / 2; + const cx = centerX; + const cy = centerY; + const a1s = arc1Start; + const a1e = arc1End; + const a2s = arc2Start; + const a2e = arc2End; + + ctx.beginPath(); + ctx.arc(cx, cy, radius, a1s, a1e, false); + ctx.strokeStyle = res.bg1; + ctx.stroke(); + + ctx.beginPath(); + ctx.arc(cx, cy, radius, a1s, (a1e - a1s) * res.value1 + a1s, false); + ctx.strokeStyle = res.fg1; + ctx.stroke(); + + ctx.beginPath(); + ctx.arc(cx, cy, radius, a2s, a2e, false); + ctx.strokeStyle = res.bg2; + ctx.stroke(); + + ctx.beginPath(); + ctx.arc(cx, cy, radius, a2s, (a2e - a2s) * res.value2 + a2s, false); + ctx.strokeStyle = res.fg2; + ctx.stroke(); + } + } + + Behavior on value1 { + NumberAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + + Behavior on value2 { + NumberAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + + Behavior on fg1 { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + + Behavior on fg2 { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + + Behavior on bg1 { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + + Behavior on bg2 { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + } +} |