Article 10304: : xScope

A common task for programmers or web designers is creating on-screen graphics for user interfaces, often for different devices or screen sizes. Figuring out how such graphics will look in various configurations is tedious and time-consuming, and you often have to do math to figure out the sizes of everything. The Iconfactory has come to the rescue with xScope, a Mac program (from the Mac App Store or direct from the company's website) that assists you with everything from measuring the size of screen elements to grabbing a color from anywhere on your screen.

On the surface, xScope seems simple, but it offers a ton of features. It's really multiple utilities in one. You can access the application's feature via a menubar widget (you can configure which widgets are displayed), a global floating palette, the app itself, or the app's icon on the Dock. You can also set keyboard shortcuts to activate any of the app's modes.

Some of the app's modes are very simple. _Crosshair_ mode shows you your mouse pointer's current x/y location. _Rulers_ displays adjustable on-screen rulers you can use to measure anything you see on your screen. _Dimensions_ displays the distance between on-screen elements. It does this intelligently, so you just point and it instantly shows the current value as you move the cursor around.

_Guides_ lets you add visual vertical or horizontal guidelines to your screen. While similar to non-printing guidelines in a graphics program, these overlay on top of everything else. You can completely control their position and frequency. There's even a tool to let you create repeating guides automatically, so you can overlay a grid on your screen, and you can save sets of guides and reload them later.

_Loupe_ displays a small zoomed-in window which magnifies whatever is under the pointer. You can see the color of current pixel, and that color can be shown in Hex, RBG, rgb() like Real Studio uses, or other color numbering systems. You can even have Loupe show you what the screen would look like for people with various eye problems, such as types of color-blindness.

_Screens_ displays a window overlay that shows you the size of various other screens. You can move this on top of your artwork to ensure that it fits or see how it might look. There are presets for dozens of devices and screen sizes, such as iPhones and iPads (both landscape and portrait), and various Mac and Windows systems. The content inside the screen can be modified to show how it will look with various eye troubles, just like with Loupe. A really handy feature are checkboxes on the side of the screen which let you turn on shading to display how much space user interface chrome on those devices might use (such as the Mac Dock or menubar, Windows' taskbar, an iPhone's top bar, or an iPhone's on-screen keyboard).

_Frames_ is similar to Screens except that it lets you set a frame shape of any size you'd like instead of using presets. It also allows you to divide the frame into a grid, force into a certain aspect ratio, and more. Just like with Guides, you can save and reload frame designs you've created.

There's also _Mirror_ mode, which displays the current window on an iOS device using a free app. This works extremely well and easily—just run the app on your iPhone, select the computer, and bingo, whatever window is under the mouse pointer on your Mac is on your iPhone. You can show it zoomed in or out or actual size, and you can move around the window with your finger. Note that this only displays the current window, not the entire Mac screen—this means it's faster and more convenient, and it can display the contents of a window that's currently covered on your Mac, which is interesting.

It's important to note I've only touched on the basic functionality of xScope—it's very powerful and its many preferences let you customize the application to work the way you prefer. Some might argue it's a little expensive for such a special-purpose tool, but the polish and power of this application makes me think it's well worth the money. It's an excellent addition to every developer's toolbox.

Introducing the “Welcome to Xojo” Bundle!

xScope