Introducing the “Welcome to Xojo” Bundle!

New to Xojo and looking for guidance? We've put together a terrific bundle to welcome you! Xojo Bundle

This bundle includes six back issues of the magazine -- all of year 21 in printed book and digital formats -- plus a one-year subscription (beginning with 22.1) so you'll be learning all about Xojo for the next year. It's the perfect way to get started programming with Xojo. And you save as much as $35 over the non-bundle price!

This offer is only available for a limited time as supplies are limited, so hurry today and order this special bundle before the offer goes away!

Article Preview

Buy Now

Issue 10.3 ('Hashes')
Instant purchase and download via GumRoad!



Issue: 10.3 (March/April 2012)
Author: Marc Zeedar
Article Description: No description available.
Article Length (in bytes): 5,242
Starting Page Number: 18
Article Number: 10304
Related Web Link(s):


Full text of article...

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.

End of article.