Custom styles on CPU module based on CPU usage (low/med/high)

[haasn]

Hey,

I want to style the CPU module with colors that depend on the current CPU load. It would be nice if you could add a custom style like #cpu.high / #cpu.medium, #cpu.low that are based on configurable high/medium watermarks, respectively.

[s0ulslack]

Here's my cpu.sh I use as a custom module. This is the basis for all my waybar scripts that sets the icon dynamically

#!/bin/bash
# (C) 2022 Tony Annen, wrote for waybar
# cpu stuff and sets classes dynamically via JSON for theming

# get stuff
load=$(echo $[100-$(vmstat 1 2|tail -1|awk '{print $15}')])
temp=$(sensors -f | grep "id 0" | awk '{print $4}' | sed 's/+//' | sed 's/\..*//')
uptime=$(awk '{m=$1/60; h=m/60; printf "%sd%sh", int(h/24), int(h%24), int(m%60), int($1%60) }' /proc/uptime)
tc=$(ps ax -o %cpu,comm --no-headers | sort -k1 | tail -n3 | sed 's/\.[0-9]//' | sort -rnk1 | awk '{print $1"% -> "$2"\r"}')
tooltip='<big>Top Republicans</big>\r '$tc'\r'$load'% <small>/</small> '$temp'° <small>/</small> '$uptime''
 
# do stuff
if [ "$load" -le "25" ]; then
    echo '{"text":"","tooltip":"'$tooltip'","class":"custom-cpu"}'
elif [ "$load" -gt "26" ] && [ "$load" -le "70" ]; then
    echo '{"text":"","tooltip":"'$tooltip'","class":"mid"}'
elif [ "$load" -ge "71" ]; then
	echo '{"text":"","tooltip":"'$tooltip'","class":"critical"}'
else # error handling? lol fuck you
	echo '{"text":"","tooltip":"'$tooltip'","class":"critical"}'
fi

[haasn]

Turns out you can already do this manually:

    "cpu": {
        // "format": "\uF201 {usage}%",
        "format-critical":  "<span color='#c20821'><b>\uF201 {usage}%</b></span>",
        "format-high":      "<span color='#e03c52'>\uF201 {usage}%</span>",
        "format-medium":    "<span color='#85c600'>\uF201 {usage}%</span>",
        "format-low":       "<span color='grey'>\uF201 {usage}%</span>",
        "tooltip": false,
        "interval": 2,
        "states": {
            "critical": 80,
            "high": 50,
            "medium": 5,
            "low": 0,
        },
    },