Properly handling multiple Waybars

[nyamcoder]

Hi all, hope you're fine!

I lately started using Sway along with Waybar, and I like it so far very much – especially as it looks like Waybar would easily deal with multiple instances (at least it's mentioned in the wiki). Since I have a small 1024x768px screen and would like to organize my panel stuff by a couple of stacked Waybars; preferably with Waybar tools only.

And if I am not wrong, as for now it seems not possible to optionally explicitely limit the width of the modules (see (my other issue) to avoid covering each other, I would rather need even up to six individual Waybars: 1 upper left for its "modules-left" only, 1 upper centered for "modules-center", 1 upper right for "modules-right", 1 lower left for its "modules-left" only, 1 lower centered for its own "modules-center", 1 lower right for its own "modules-right", respectively.

While on the one hand I got them all named and started – what does not work as intended is

1. to display them in their own shortened widths (per px), so that all upper 3 waybar instances would arrange themselves automatically in a single line next to each other (imagine "display: inline-block" in HTML-CSS), and the lower waybars in another line below the upper one accordingly. So if I set 2 x 3 (say, 450px+124px+450px) = 6 individual bars and widths such as:

   [{
   "name": "waybar#testbar1", 
   "position": "top", // Waybar position (top|bottom|left|right) -- i.e. screen edge
   "height": 30, // Waybar height (to be removed for auto height)
   "width": 450, // Waybar width -- no effect?
   "modules-left": ["sway/window"] // -- kind of multi-module alignment or gravity
   },
   ...
   etc. 
   ...
   ]

   – all bars appear stacked in full width though (and also now cover a bemenu app-starter):

   [2020-10-11 12:08:55.641] [info] Bar configured (width: 1024, height: 30) for output: LVDS-1
   [2020-10-11 12:08:55.812] [info] Bar configured (width: 1024, height: 30) for output: LVDS-1
   [2020-10-11 12:08:55.814] [info] Bar configured (width: 1024, height: 30) for output: LVDS-1
   [2020-10-11 12:08:55.815] [info] Bar configured (width: 1024, height: 30) for output: LVDS-1
   [2020-10-11 12:08:55.820] [info] Bar configured (width: 1024, height: 30) for output: LVDS-1
   [2020-10-11 12:08:55.826] [info] Bar configured (width: 1024, height: 30) for output: LVDS-1

   Besides this general warning btw.:

   (waybar:4175): Gtk-WARNING **: 12:08:51.648: Theme parsing error: style.css:3:20: Not using units is deprecated. Assuming 'px'.

   So how to make all Waybars to adhere to their assigned widths?

2. to address and style the multiple waybars and their modules correctly.

Though I am eagerly trying to follow the Config wiki while modifying the default config, I am still probably missing something, because any of the countless attempts of Pango CSS-styling the waybars' elements in my config are simply ignored! I also admit that interchanging the JSON and the CSS syntaxes is a bit confusing, as e.g. "battery#bat2": {...} in JSON becomes battery.bat2 {...} in CSS, while in the latter "." means a class and "#" means an ID, assuming .bat2 could be used as many times you want, though it's a unique ID in the Waybar config . . .

Then I tried in vain e.g. coloring the ["sway/window-module"] (see above) in the style.css such as:

.testbar1 { color: #ff0000; }
#testbar1 {  color: #ff0000; }
#testbar1 button { color: #ff0000; }
window#waybar.testbar1 { color: #ff0000; }
window#waybar .testbar1 { color: #ff0000; }
window#waybar.testbar1 button { color: #ff0000; }
waybar.testbar1 { color: #ff0000; }
#waybar#testbar1 button { color: #ff0000; }
.waybar#testbar1 button { color: #ff0000; }

Same unchanged result with {color: red}; and Pango's {foreground: red} giving an error. – Or, does it get styled, but overridden afterwards? Further I am not sure, if the leading "window" means the sway/window module or a Waybar itself. – Hence for testing: How would one explicitly paint the text string in the sway/window module in red, in a Waybar named "testbar1" (ideally with the width of 450px)?

Eventually, if these are yet not possible, these capabilities would be great to have as features:

1. individual setting of a Waybar width/max-width (in pixels, or percent); in the JSON config or the style.css
2. make multiple short Waybars fit into a line
3. optionally set starting x/y-coordinates for a Waybar (such as dzen2), or polybar, xmobar and other X.org-panels)
4. If a (short) Waybar's content exceed that width, just clip it (and don't let grow that Waybar; or optionally up to a max-width).
5. even a short Waybar might still keep its own "modules-left|right|center" alignments

So thanks all, and I am hopefully not mixing things up too much . . .

[nullobsi]

i've just opened a PR that should help with what you're trying to do! :)