DankMaterialShell/SYSTEM_MONITOR_WIDGETS.md

System Monitor Widgets Usage Example

Installation Complete

The CPU and RAM monitor widgets have been successfully created and integrated into your quickshell project:

Files Created:

• /Widgets/CpuMonitorWidget.qml - CPU usage monitor with progress bar and percentage
• /Widgets/RamMonitorWidget.qml - RAM usage monitor with progress bar and percentage
• /Services/SystemMonitorService.qml - Backend service for system monitoring

Files Updated:

• /Widgets/qmldir - Added widget exports
• /Services/qmldir - Added service export

Usage in TopBar

To add the system monitor widgets to your TopBar, add them to the right section alongside the BatteryWidget:

// In TopBar.qml, around line 716 after BatteryWidget
BatteryWidget {
    anchors.verticalCenter: parent.verticalCenter
}

// Add these new widgets:
CpuMonitorWidget {
    anchors.verticalCenter: parent.verticalCenter
    showPercentage: true
    showIcon: true
}

RamMonitorWidget {
    anchors.verticalCenter: parent.verticalCenter
    showPercentage: true
    showIcon: true
}

Widget Features

CpuMonitorWidget:

• Real-time CPU usage monitoring (updates every 2 seconds)
• Visual progress bar with color coding:
  • Green: < 60% usage
  • Orange: 60-80% usage
  • Red: > 80% usage
• Tooltip showing CPU usage, core count, and frequency
• Material Design CPU icon (󰘚)
• Configurable properties:
  • showPercentage: bool - Show/hide percentage text
  • showIcon: bool - Show/hide CPU icon

RamMonitorWidget:

• Real-time RAM usage monitoring (updates every 3 seconds)
• Visual progress bar with color coding:
  • Blue: < 75% usage
  • Orange: 75-90% usage
  • Red: > 90% usage
• Tooltip showing memory usage, used/total memory in GB/MB
• Material Design memory icon (󰍛)
• Configurable properties:
  • showPercentage: bool - Show/hide percentage text
  • showIcon: bool - Show/hide RAM icon

SystemMonitorService:

• Centralized system monitoring backend service
• CPU monitoring: usage, core count, frequency, temperature
• Memory monitoring: usage percentage, total/used/free memory
• Automatic updates with configurable intervals
• Helper functions for formatting and color coding

Widget Customization

Both widgets inherit your theme colors and styling:

• Uses Theme.cornerRadius for rounded corners
• Uses Theme.primary/secondary colors for progress bars
• Uses Theme.error/warning for alert states
• Uses Theme.surfaceText for text color
• Consistent hover effects matching other widgets

System Requirements

The widgets use standard Linux system commands:

• /proc/stat for CPU usage
• /proc/meminfo via free command for memory info
• /proc/cpuinfo for CPU details
• Works on most Linux distributions

The widgets are designed to integrate seamlessly with your existing quickshell material design theme and provide essential system monitoring information at a glance.