Alexays
Show/hide modules
I would be great to be able to hide and show modules dynamically, without changing the config.
In my specific case, I would like to hide the tray module on a keypress. The only solution I can think of is having a script generating the config file and restarting Waybar, but that is very ugly :(
This would be a very nice feature. For example I have two batteries in my laptop, when one is at 5% the computer stops using it, and I would like to hide it when it gets low.
@muniter it's already possible with the battery module, just define a state named low: 5, and a format-low: "" the empty format will hide the module.
@muniter it's already possible with the battery module, just define a state named
low: 5, and aformat-low: ""the empty format will hide the module.
It would be great to get the same options for the Taskbar module.
Tried to get it working with the CSS properties display and visibility of course without any success.
This seems to work for me, though perhaps to make it more general it'd need to change borders and other things (that I don't use so will surely forget).
#pulseaudio {
font-size: 0;
margin: 0;
padding: 0;
}
But how can I inject this CSS into Waybar dynamically - I only know how to do it with GTK_DEBUG=interactive, but I'd like to do it from a script.
Yes, for example hide the taskbar module while there are no open windows, because with my config it looks weird (I use an outline which then just looks lie a line).
With no specific time frame, I will start looking into adding a configuration option similar to exec in how it will execute programs(using the shell). It will read the exit code of your command, if it's ok (exit code 0), then module is visible, otherwise not. Combine that with the existing signal option and you should be able to make neat integrations with waybar to trigger visibility changes in modules.
Any thoughts or suggestions please?
With no specific time frame, I will start looking into adding a configuration option similar to
execin how it will execute programs(using the shell). It will read the exit code of your command, if it's ok (exit code 0), then module is visible, otherwise not. Combine that with the existingsignaloption and you should be able to make neat integrations with waybar to trigger visibility changes in modules. Any thoughts or suggestions please?
I'm assuming this feature is what I'm looking for. I'm trying to use keyboard-state to only be there when my Caps Lock is active. Right now I'm trying to get it to at least be transparent in CSS when it's unlocked but it's tricky since it's my first time using CSS.
I wouldn't know how to give any technical suggestions but I would assume either an if or a when then statement could be used. I haven't looked at the internal logic of Waybar but I would imagine for keyboard-state it's a listener logic.
As for implementation it would need to be conditional arguments that any module could use. One could be "visible-when-empty" and by default it's false and true would make the module hide such that if it's between two other modules those modules would move together.
At least that's how I imagine it would work as it would seem very weird to have just a blank space between the two modules.
The empty conditional wouldn't work for every module but it's the backend function that is the hassle and implementing the conditionals should be easier.
Even for the keyboard-state module it's a little tricky with the way things are declared since it's never empty. A conditional that might work could be checking if a certain module state is in effect. This might be the best way to do it in certain situations.
As for how it might work for keyboard-state it could look like this:
"keyboard-state": {
"capslock": true,
"format": {
"capslock": "⇪ {icon}"
},
"format-icons": {
"locked": "",
"unlocked": ""
},
"hide-when-active": "format-icons.unlocked"
},
Again, this is still tricky since what if someone wanted to use more than just caps lock? Could you just hide each button/indicators individually? Ideally yes but still trickier than just turning off the whole module. Though it might be that unless a module is properly made it doesn't get that finer grained control.
However, I think if done well enough any module can use hide conditionals whether or not they can use every one of them.
With the keyboard-state module to use some fine grained control we might have something like this:
"keyboard-state": {
"capslock": true,
"numlock": true,
"format": {
"capslock": "⇪ {icon}",
"numlock": "Num {icon}"
},
"format-icons": {
"locked": "",
"unlocked": ""
},
"hide-button-when-active": "format-icons.unlocked"
},
With this example you would at least not have to worry about the whole module being hidden if only one of the buttons meets the condition.
Again, I wouldn't know how to implement this on a technical level but I hope this is at least helpful as a sort of pseudo-code.
while i think this would be a nice feature to add, because there are a lot of user cases where hiding or showing a module depending on its output or even loading or unloading said module based on a user/script input is a extremely useful thing to do.
hiding a module can be done in CSS with:
#class-name{ opacity: 0; padding: 0; margin: 0; }
in the caps case, the opacity hiding needs to be done by the label.capslock and the showing by the label.capslock.locked, but i think it would be useful to have a keyboard-state.locked to handle all the possible keys at once. ` #keyboard-state label.capslock{ opacity: 0; padding: 0; margin: 0; }
#keyboard-state label.capslock.locked { font-family: "Fira Code Nerd Font", monospace; font-size: 14px; border-radius: 6px; padding: 4px 4px; margin-left: 6px; transition: background-color 0.2s ease, color 0.2s ease; color: #a6adc8; background-color: #1e1e2e; opacity: 1; } `
