Retired Techie
Getting older, not necessarily wiser!
JWM Agnostic X on Arch – Part 6
Published on November 11, 2022 at 10:20 pm by LEWIntroduction
In this post we will be taking a look at the JWM tray, and how to position and size it. We will also look at creating multiple trays.Many other Window Managers (WM) or Desktops have something equivalent to the JWM tray. And there are third party applications that can be used if there is no equivalent.
JWM trays are part of the base JWM install (but totally optional, weather you chose to use them or not.
What is a Tray?
A tray is a container that sits along one edge of the screen (horizontally/vertically or left/right), and can contain a number of useful application. Windows calls it a task bar, Gnome calls it a panel. JWM calls it a tray and it is part of the WM, so no third party appreciations are required.
By itself and empty tray does not do anything but exist. The power of the tray comes from being a container for specific application that enhance the Graphical User Interface (GUI) usability.
While JWM has a limited number of applications for the tray, you are free to use any of them or none of them. You don’t even need to use any trays at all, and by default there is no tray, unless one is defined in the configuration file. Or you can have multiple trays. In this respect the tray is very flexible.
Adding Trays
On my desktop, I am going to be adding two trays. One will function as a very simple launcher dock, and the other will function more like a panel holding various system tools and functions. But first we need to discuss the physical properties of a tray.
The tray tag can be styled with several physical properties. There is a separate traystyle tag for controlling tray decoration and color that we will cover later, when we talk about styling JWM (most of JWM styling has common elements so it makes sense to discuss them together).
To add a tray simply add a set of <Tray></Tray> tags. In my case I am going to move the Tray tags from the default configuration file, ~/.config/jwm/default.jwm (see previous posts for notes on the file structure I am using, but feel free to use your own) to ~/.config/jwm/function.jwm. Don’t forget to add appropriate comments.
Physical Tray Properties
Location: This is defined by the x (left and right) and y (up and down) styles. Default values for both (if not included) are 0. This places the origin of the tray in the upper left corner of the screen. Entering positive integers will move the tray down and right. If you make one of the numbers negative it is then measured from the opposite side. For example if x = “1” and y = “-1” then the tray origin is in the lower left corner of the screen.
An additional location style is screen. The default is 0 placing the tray on every screen defined. If no zero, then a tray will only appear on a specific screen.
Size: The size styles are width and height. They default to 0, which causes the width and height to be calculated based on the tray content. If you set a non zero number you can sort of force a specific width and height.
Alignment: The fist style in this category is layout, which can be either vertical or horizontal. If not used, the default is horizontal. If you want a tray to hug the left or right sides of the screen then this has to be defined as layout = “vertical”.
There are two additional alignment tags, halign and valign. These control the alignment of components within the tray. Possible values are fixed and center. The halign tag also can have values of left and right. The valign tag can have values of top and bottom.
Note these styles do not perform exactly as i would have expected. You iwll have to play around with them to see how useful they are.
Layer: The layer style determines if the visible tray is in front or behind other windows. It has three values; below, normal, and above. If not defined, then the default is above.
Autohide: A couple of final style for the tray, autohide and delay. The autohide style, when enabled makes the tray disappear when not being used. It can be defined as top, bottom, left, right, or off. The default is off (no auto hide). The other values specify the hot side to make the tray reappear. For example a top of the screen tray would use the top of the screen as a hot spot to make the tray reappear (tough technically you could use any of the others).
The delay parameter is how long it take the tray to disappear after being made visible. I believe the default is 0 if it is not defined. Otherwise, I believe, the time is in milliseconds.
Examples
I am going to have two examples, one for my panel tray and one for my dock tray. In the panel tray, first example, I will use all styles, with the defaults being in bold. For the dock I will remove all the defaults, making it much shorter.
<Tray x=”0” y=”0” width=”0” height=”0” autohide=”top”
delay=”1500” layer=”top” layout=”horizontal”
valign=”fixed” halign=”fixed” screen=”0”
layer=”above”>
…
</Tray>
The above tray will appear on the top of the screen and the length will be based on components. Size will be calculated from content, and no vertical or horizontal alignment of content will be required. And the tray will appear on all defined screens.
<Tray x=”0” y=”-1” autohide=”bottom” delay=”1500”
height=”40”>
<Spacer width=”0” />
…
<Spacer width=”0” />
</Tray>
In this case the tray is at the bottom of the screen. Any items will be centered between the two spacer elements. This, for me, has worked best for making a dock like tray. Because of the way the tray seems to work, there are issues with using width and halign. I was hoping that setting width to screen width and halign to center would cause any icons added to show up in the center of the screen. But such is not the case.
Basically from what I have observed the width is a maximum width, and the tray will only be as long as the width of the elements. Including spacers, set to zero, on either side forces items to the center of the tray. Not ideal as we can then see the tray on either side, but usable.
Update: Another way to do this is to adjust the tray origin, then the spacer elements can be removed. For example my screen is 1920 wide. if I have eight 32 pixel icons, that makes the displayed tray length 256 pixels. If I subtract half the tray length (128) from half the screen width (960), I get a starting tray position of 832 centering the icons along the bottom of the screen.
A height needs to be set if using svg icons. If using png icons with a specific size, the tray should adapt to their height.
Conclusion
In this post we made some adjustments to the tray elements physical properties. And we added a second tray. In the next post we will start working with tray elements like the pager and tray buttons to further customize the look and functionality of our GUI.
JWM Agnostic X on Arch – Part 1 – The Install
JWM Agnostic X on Arch – Part 2 – Adding Some Applications
JWM Agnostic X on Arch – Part 3 – Initial Setup for Config File
JWM Agnostic X on Arch – Part 4 – StartupCommand and Group
JWM Agnostic X on Arch – Part 5 – Building a Menu Structure
JWM Agnostic X on Arch – Part 6 – Tray Attributes
JWM Agnostic X on Arch – Part 7 – Tray Content
JWM Agnostic X on Arch – Part 8 – Desktops, Bindings, Colors, and Fonts
JWM Agnostic X on Arch – Part 9 – Styling of Major Elements
Add New Comment