.comment-link {margin-left:.6em;}


A Periodic (P)review Of Leaping Forward

By: Johan

Saturday, January 21

Phidgets & Mac - Part 2 - Hacking The LED Example

Last week I wrote how to connect a Phidgets LED interface to your Mac. In the second part of the Mac Phidgets programming series we will take the supplied "Phidgets LED" sample program and hack its code so we get a feel for programming in Mac OS.

Xcode is the IDE we will be using, Cocoa the programming language. I know nothing about programming outside PHP/MySQL and some JavaScript and XML so we'll have an interesting Saturday night for sure...

From phidgets.com we downloaded the Phidgets.dmg package wit all the necessary files. Besides the Phidgets framework installer, this also contains a folder called "Examples". I copied its contents to my hard drive under Developer > Examples > Phidgets so they can be edited.

In that folder you will find examples for all Phidget interfaces. They come both compiled, as you find them in the root of this folder, and as source code. Last week I showed you how to get the compiled version running - the one with all the tick boxes to switch your LEDs on and off.

Today I'd like to find my way around in Xcode and get a feel for Objective-C programming with Cocoa. I set the simple task to modify the GUI (Graphical User Interface) of the application and some simple code modifications.

This Tutorial's Objective

At the end of today's Tony Robinson's mini-challenge I hope to have a 'Tick All' button to turn on all the LEDs in one go. If all goes well, maybe even convert all tick boxes to radio buttons; 3 for each LED with the options 'On', 'Off' and 'Flash'. Imagine that, automatically flashing LEDs! Wow! :)

First Steps in Xcode

Go to the folder where you saved the examples. Open the Source Code folder and then the CocoaLED folder. This is where all the project files are stored. The one with the xcodeproj extension is the one we need.

This opens the Xcode main or project view. From the Apple Developer site:

The Groups & Files list is comprised of all the source files, images, and other resources that make up a project. These files are grouped in the project group, the first item in the Groups & Files list; this group is named after the project. The project’s files are grouped into subgroups, such as Classes, Other Sources, Resources, and so on. These groups are very flexible in that they do not necessarily reflect either the on-disk layout of the project or the way the build system handles it. They are purely for organizing your project. The groups created by Xcode should be suitable for most developers, but you can rearrange them however you like.

Below the project group are other groups, including smart groups. Smart groups—identified by the purple folders on the left side of the list—allow you to sort the project’s files using custom rules in a way similar to using smart playlists in iTunes.

That text was from a Currency Converter tutorial I used for guidance. You can read it here.

In line with that tutorial we will first amend the user interface. Under 'Groups & Files' you see the project's name, "CocoaLED" and 5 folders below it containing the classes, frameworks and other code and sources needed to make up the application. Click the Resources folder.

From Apple's Tutorial: This group contains the nib files and other resources that specify the application’s user interface. "What Is a Nib File?" describes nib files.

Do read that Nib File link - it has some great info on it and almost all of it is used here to modify our Phidgets LED application.

MainMenu.nib (English) is the file we need. Double click it to open what is called the "Interface Builder". You'll get three windows; the main window, the Cocoa controls and the preview. The preview obviously looks just like the compiled version we used last week to get up and running with our LEDs.

My idea was to move down the tick boxes and create some space between the '0' box and the word 'Version:'. In that gap I want a button which I can click to tick all the boxes in one go, saving me 63 clicks to get all of them going.

In the preview window you can click any object to move it, change its values or delete it with the backspace button. If you want to change text values, you can double click the word or click it once and then on the menu bar go Tools > Show Inspector to open the window that lets you see and modify all the object's attributes. You'll see the text, colours, size etc. there.

You can select multiple objects by just dragging a box around those you whish to modify. I selected all the tick boxes and the brightness slider and moved them down. But first I made the window bigger to allow for the extra space needed for the tick all button.

Once you created enough space drag a button from the little Cocoa controls window to where you want it. Notice how lines automatically appear to properly position the selected object. I ligned it up neatly with the letters S, N and V from the three lines above where I placed the button.

Select the button and open the Inspector again to modify its text to something like "Tick All" or "Switch On All LEDs". I also gave it a keyboard short-cut. You can select yours right there in the same Inspector window. Next to the controls view where you found the button you find the Cocoa-Text items. I dragged the small text next to the button and changed it to "Hacked by Johan Terpstra" - just to give myself a little bit of credit for this mammoth task.

When you're done, just click File > Save to save off your work. If you want you can test the interface under File > Test Interface. That's the looks done, now let's do our magic under the hood (which is not going to be that easy) and actually get it to tick all boxes.

Sunday update...

I got it to tick all boxes but the LEDs don't come on! It seems like the tick boxes are triggered by actual mouse clicks only rather than a setState:NSOnState event. What an anti-climax after hours of effort! I'll post the code when it's working though...

Rather than letting the new code tick all boxes I'll make it so the button controls the LEDs directly. That way we remove one step and communicate with the applicable methods directly. Will do that next week...