Singularity: System Tray

Making the System Tray Creating the system tray for Singularity was probably one of the easiest parts. Andymon's xTray module is really easy to setup, but still provides a lot of flexibility that previous tray modules didn't necessarily offer.

Desired System Tray Features

• Want the graphic to use AlphaTransparency.
• Will require drop-shadows and anti-aliased edges.
• Here's the graphic:

• Want the system tray against the left-side of the screen, like the early Photoshop mockup image demonstrated.
• Graphic must auto-size.
• Middle part of image must tile (more efficient to render).
• Top 18 pixels (where it says "TRAY") must remain fixed.
• Bottom 29 pixels should remained fixed and outside icon area for the bottom shadow and curved part to be rendered properly.
• Would be nice if the icons could be dimmed, somehow, to make them less visible.
• Putting the mouse cursor over a tray icon should highlight it, probably by brightening it up to its default appearance.

Getting the tray image situated.

• The above graphic for the tray was selectively copied from my Photoshop file.
• The selection was done by turning off any bottom layers so that the grid indicating transparency was visible.
• The rectangular marquee selection tool was then used to create a big rectangle surrounding the desired part of the graphic, starting a little above where it says TRAY, but going very wide to the right and to the bottom of the image (to preserve any drop-shadow).
• The Copy-Merged option was then used.
• A new file was created (CTRL+N). New files are, by default, sized to the same dimensions as the current image in the clipboard. This will be the minimum area required to properly render the drop-shadow.
• The copied section was then pasted into this new file, and the file saved as a 24-bit PNG image.
• The traybg.png image was then copied to the ''images'' folder of the theme.

Coding in Theme.RC
This is the part I tend to do by trial and error. Generally, I start off by sticking in every single configuration parameter for the module, getting the positions of everything set right, and then selectively chopping unnecessary parameters. Probably not the most efficient method, but I'm no coder, and this is the method that seems to work for me.

These parameters tell the tray where to position on the screen and how big to make it. I knew where to put it onscreen because I sized things out in Photoshop first:
;----[ xTray ]----
xTrayX 0
xTrayY 320
xTrayAutoSize 20 20
xTrayWidth 38
xTrayHeight 300

These parameters tell xTray where to find the image and how to tile it. The tray will be dynamically sized vertically to contain the tray items. The different xxxxxEdge parameters tell the module what part not to tile. For instance, because I want the top of the image to say "TRAY", but not have that part tiled, the image doesn't start to tile until the 19th pixel from the top (xTrayImageTopEdge is set to 18):
xTrayImage $LSImageFolder$traybg.png
xTrayImageMode tile
xTrayImageLeftEdge 15
xTrayImageRightEdge 22
xTrayImageTopEdge 18
xTrayImageBottomEdge 39

These are a lot of the basic configuration options. Of note, the xTrayAlphaMap setting is critical here because our PNG image uses AlphaTransparency. The borders determine where the icons are actually drawn in our image. The spacing and wrap parameters determine some of the tray behaviors as icons are added or removed. The tooltip parameters have been specified here, 'cuz I like to be able to find out what an icon's for without having to activate it. Read the xTray documentation for a more detailed description of parameters.
xTrayAlphaMap
xTrayBorders 8 12 14 30
xTrayLines 1
xTrayMaxLines 2
xTrayXSpacing 2
xTrayYSpacing 4
xTrayLayout .vertical
xTrayDirection .right
xTrayWrapDirection .top
xTrayWrapCount 10
xTrayShowTooltip
xTrayShowInfoTip
xTrayBalloonTooltip
xTrayTooltipDurations 100 1000
xTrayToolTipColor c1c1c1
xTrayTooltipTextColor 111111
xTrayCleanUpInterval 10000

...And these parameters dim the color and brightness of normal tray icons, but change to full color and brightness if the mouse hovers over them:
xTrayIconSize 16
xTrayIconHueIntensity 150
xTrayIconHueColor 000000
xTrayHoverIconHueIntensity 00
xTrayHoverIconHueColor ffffff

That's it for the tray! If the rest of Andymon's ''x'' modules configure this intuitively, the theme should be well on its way to completion (wish he had a shortcut module).

Next blog will probably tackle at least a basic rendition of the taskbar.