Volume Number: 19 (2003)
Issue Number: 9
Column Tag: Cool Tools
by John C. Daub
Between my day job as a software engineer and occasionally fiddling with my hsoi.com web site in the evenings, I find myself every so often being concerned with pixels. I want to know how many pixels long is this? How many pixels are there between this and that? Will that many pixels fit onto the screen? What color is that pixel? Are all these pixels lined up? In trying to have my software adhere to Apple's Human Interface Guidelines and to have my web site be usable by any web browser, I need to employ tools to help me count pixels because my eyesight is too poor to count manually. J
Interface Builder has the terrific functionality of supporting guides and snapping-to when laying out your GUI, and the added cool factor having support for adhering to the Aqua Interface Guidelines. When designing in Interface Builder, I always have this support on because it generally alleviates the need to count pixels for relative measurements, e.g. is the widget 20 pixels from the left and right edges of the window, 14 pixels of vertical spacing, etc. While Interface Builder's support is useful, there are other measurements that sometimes need to be taken. For years I used a tool called colorScope, which served my "pixel" needs quite well. However, colorScope didn't make it over to Mac OS X. I dug around the 'net looking for a replacement tool. I found the ARTIS Screen Tools, a collection of four simple utility applications aimed towards solving a specific screen issue: measuring, ensuring fit, magnification, and ensuring alignment.
ARTIS Screen Tools is an application suite consisting of: ARTIS Screen Ruler, the screen ruler for your desktop; ARTIS Small Screen, small screen sizes on your desktop; ARTIS Screen Loupe, the magnifying glass for your desktop; and ARTIS Screen Guides, visual guide lines on your desktop.
Figure 1. Contents of ARTIS Screen Tools 2.5.3.
Screen Ruler's purpose is measuring. You are given both horizontal and vertical rulers by which you can measure items on screen. The rulers float above all other windows, allowing control over their opacity, as well as control over the units and length of the ruler. Screen Ruler allows for quick and easy measuring of screen items, and is as simple to use as a physical ruler.
Small Screen's purpose is to help you ensure your window and its contents fit on screen. As developers we tend to be spoiled with a lot of screen real estate, but many of our users are still using small 640x480 screens. Small Screen places the thin black outline of a rectangle on screen wired to the sizes of well-established screen sizes, e.g. 640x480, 1024x768, or you can establish your own sizes. When Small Screen places the boundary on screen it can adjust for items such as the menubar so you can truly see how your window will fit and display on a monitor of that size. Small Screen also has a Browser Content mode which further adjusts the boundary rectangle to consider browser window content such as toolbars and scrollbars so you can see how the more popular browsers will squeeze your content and force it to reflow. Handy for debugging your code prior to posting it to your web site.
Screen Loupe is a magnification tool, like Apple's Pixie but more powerful. With Screen Loupe you can view pixels close up, up to 8x magnification. You can also view information about the pixel under the cursor: global coordinates, RGB color, HSB color, and HTML code color. I remember using this sort of tool when I was working on the Grayscale implementations of the PowerPlant Appearance Classes. I had to determine the correct patterns for an indeterminate progress bar and chasing arrows so LGAProgressBarImp and LGAChasingArrowsImp could reproduce them. Being able to zoom in on the pixel patterns of the Appearance Manager-generated widgets and pick up the RGB color values was a necessary part of recreating those widgets.
Screen Guides is a way to add guides when you can't have guide support or wish to augment existing guide support. Guides are lines that help you position your layout but don't appear in the final layout; they are tools to aid in supporting proper alignment of your content. You begin working in the Screen Guides application, creating and moving guides as necessary for your layout purposes. When you switch out of the Screen Guides application, the guides are no longer editable and you can begin your work. The guides float above your windows, so they'll be just where you'll find them useful while you work on your layout, but they won't get in your way.
Figure 2: ARTIS Screen Tools at work.
The ARTIS Screen Tools are offered as shareware, US$9.95 at the time of this writing, for the suite of all four tools. Once you register, functionality is unlocked in the applications: in Screen Ruler, the ability to use the vertical ruler; in Small Screen, the Browser Content sizes; and in Screen Guides the ability to use vertical guides. When I contacted the author for support, the response was quick, courteous, and helpful.
The ARTIS Screen Tools work together as a nice suite for handling pixel-measuring needs. Each application is lightweight and focused in its purpose, and serve to address needs that both software and web developers can encounter in designing, testing, debugging, and development of a successful user interface. If you find yourself needing to measure, fit, magnify, or align pixels, you'll find ARTIS Screen Tools a useful addition to your toolkit.
ARTIS Screen Tools - http://www.artissoftware.com/screentools/
Apple Human Interface Guidelines -
http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/index.html
John C. Daub lives in Austin, Texas USA with his wife, three children, and all the BBQ he can eat. You can contact John at hsoi@hsoi.com.
