[Question] How to custom/module on/off with different color?

[thyeun]

Below are the code to appear the recording on-air and off-air. Stuck on the off-air part.

For the on-air part, once i trigger the keybinding of the recording, the  On-air will appear with red color on the waybar (this one working fine).
The only part that cant possible to make it work, is the part  Off-air , if not trigger by the keybinding of the recording. it should stay on the waybar with black color, instead that, it hide from the bar.

Below are the code (config & style.css)

"custom/recorder": {
        "format": " On-air",
        "format-disabled": " Off-air", //An empty format will hide the module.
        "return-type": "json",
        "interval": 1,
        "exec": "echo '{\"class\": \"recording\"}'",
        "exec-if": "pgrep wf-recorder",
    },

#custom-recorder {
    background-color: #FA8BFF;
    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
    font-size: 12px;
    color:red;
}

With recording triggering

Without/Stop recording triggering

[hossbeast]

I was about to come submit a question, but this sounds roughly like what I am trying to do. Custom module which dynamically changes its appearance somehow (I was thinking of whether its possible to change the set of active classes, and then style them differently with css). Will watch this issue with interest.

[thyeun]

@hossbeast prefer when toggle with key-binding, the appearance on the waybar (custom module) will change the color or when it format-disable the color will change same like the on used on network.

[hossbeast]

I see #network and #network.disconnected have different background-color properties. But how does the #network element gain and lose that .disconnected class? Since network is a builtin module, I assume the code for the network module is doing it. But how can a custom module gain and lose classes dynamically? Perhaps in response to a signal?

Keybinding does not work for my case, the change I have in mind is not something initiated by the user (similar to how network connected -> disconnected is not initiated by the user, its just reacting to the state of the system)

[thyeun]

@hossbeast your ideal might not work for my case, since i need an input to trigger (custom module) than only it will changing the state from on to off.

Any how, you build it out, and i will tester it, to find out the outcome. :))

[BoomerangNebula]

You can use "return-type": "json" and a script to supply the format and assign custom CSS classes to your modules. See https://github.com/Alexays/Waybar/wiki/Module:-Custom#module-custom-config-return-type and scroll down for ideas.

@thyeun Every 5 seconds this will check if wf-recorder is running. The default style under #custom-recorder will always apply to  Off-air. When wf-recorder is running, format will return  On-air and #custom-recorder.enabled will trigger. When wf-recorder exits, the module will return  Off-air with the default style after the next script interval.

If you still need this to trigger on keybind, you can do so with signals. e.g. in Sway: bindsym <key> exec --no-startup-id "<command>; pkill -x -RTMIN+12 waybar" which will run the command and also immediately run the script to update the module.

waybar/config

"custom/recorder": {
        "format": "{}",
        "exec": "~/.config/waybar/scripts/recorder",
        "return-type": "json",
        "signal": 12,
        "interval": 5, // execute script every n seconds; adjust as desired
}

waybar/scripts/recorder

#!/bin/sh

if pgrep -x wf-recorder >/dev/null; then
	printf '{"text":" On-air","class":"enabled"}';
else
	printf '{"text":" Off-air"}';
fi

waybar/style.css

#custom-recorder {
    /* default module style */
}

#custom-recorder.enabled {
    color: red;
}

@hossbeast This might also be suitable for your case. You should be able to feed the module a custom format and CSS class for anything you can return via script.

[hossbeast]

@BoomerangNebula Yes. This is exactly what I was looking for. My custom waybar widget that shows whether pacman updates are ready, is working great!

[thyeun]

@BoomerangNebula will try it out, and will feedback to you. thanks

[bobblkabb]

Want to change the network icon color on click (vpn on/off). How do I trigger the enabled event?

From style.css:

#network {
	margin-top: 6px;
	margin-left: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	border-radius: 10px;
	transition: none;
	color: #161320;
	background: #bd93f9;
}

#network.enabled {
  color: #E8A2AF; 
  background: #E8A2AF; 
}

From config:

	"network": {
		// "interface": "wlp2*", // (Optional) To force the use of this interface
		"format-wifi": "",
		"format-ethernet": "",
		"tooltip-format": "{essid} ({signalStrength}%)",
		"format-linked": "{ifname} (No IP) ",
		"format-disconnected": "⚠",
		"format-alt": "{ifname}: {ipaddr}/{cidr}",
        "on-click": "vpntool.py"
		},