Mama don't take my MODA 'phones away!

I ordered a set of V-MODA Vibe earphones on eBay last week for $70 US, and I've been trying them out on my iPod Shuffle, comparing them to the original Apple earbuds.

All I can say is "Wow"!

Having designed professional audio gear in a previous life, I knew the original Apple earbuds weren't anything spectacular, but after A/B ing the V-MODAs against the original PodBuds, I'm hooked.

The difference is incredible, even for an old guy like me. Bass exists once more, huzzah! I wear my iPod while cycling, and I was afraid that the silicon fittings would block out all the road noise, but that's not the case. Road noise is definitely muted, but still noticeable, so I'm still aware of my surroundings.

And now I can turn down the volume on my iPod and still hear more of the music than before. Yay!

Highly recommended (especially at the eBay price!)

3GB in my MacBook: Best $300 spent ever!

I've had my MacBook Pro since late December (Merry Christmas), and I ordered it with 2GB of RAM, thinking that would be enough. And it was, for a while.

Virtually Home Free

However, I'm now at a 4-week gig where I need to be running Windoze. I have a 20 GB Boot Camp partition running WinXP. I have both Parallels Desktop (paid for) and VMWare Fusion (beta) installed, and both allow me to run a virtual machine using my Boot Camp partition. I've configured my VM to use 1GB of RAM for Windows, leaving the rest for OS X to do its stuff.

So now I can either boot direct to Windows and get the full power of my MacBook to run Windows, or I can run Windows-in-a-window using one of my virtualization tools.

The problem is that running the 1GB VM on a 2GB Mac just ends up bogging down OS X to the point where I can't run anything else. Not Firefox, not Entourage, nottin'!

Solution - Just add money!

So I decided to max-out my MacBook's RAM, swapping out one of the two 1GB SODIMMs for a 2GB SODIMM, giving me a total of 3GB.

I ordered from CanadaRAM.com. They had a great price for a 2GB module ($299 Cdn) and they shipped overnight. With shipping and taxes, everything came to about $360 Cdn. I had other Mac stores in town quoting me between $600 and $800 (before taxes), but I've had good experiences with CanadaRAM before.

Wow. What a difference that extra 1GB makes. OS X is back to its old snappy self when running a Windows VM. All the Dock effects, Expose, and Dashboard apps make lovely smooth transitions, and the OS is no longer paging to disk like crazy.

Right now, I'm running my Windows VM, plus OS X is running Entourage, Excel, Flex Builder 2, Firefox, ecto, and Acrobat Reader. Everything is happy-n-snappy.

Plus I should be able to resell the extra 1GB SODIMM for about $150 on craigslist, making the deal even sweeter!

Which VM tool to run?

I had previously been running Parallels Workstation on my PC, so I bought Parallels Desktop when I got my Mac, so that I could reuse the same VMs on either host platform. When VMware announced their Fusion product for Mac, I just let it go and kept using Parallels. But my experience with later versions of Parallels has seen quite a large slow down. VMs just didn't seem snappy, no matter what the configuration was.

So I installed the Fusion beta and gave it a try. It is great so far. The biggest advantage so far over Parallels is that Fusion will present 2 virtual CPUs to the guest OS, letting my Windows VM take full advantage of any unused cycles.

As part of the Fusion beta tester agreement, I'm not allowed to post any public claims about the performance of the product. I don't want to violate that agreement. But I am running VMware Fusion exclusively now, so I'll let you draw your own conclusions. :-)

Technorati Tags: Boot Camp, OS X, VMware Fusion, Parallels Desktop, virtualization

Inside DryerFox - Part 3: Using WebKit

The DryerFox hack was accomplished by a few basic ActionScript3 stunts.

Get Thee Behind Me, HTML!

When the application starts, it creates an HTML component beneath the image of the drum window, and slightly smaller than the window, so that event when rotated at 45 degrees, no parts of the HTML control "peek out" from behind the graphics.

// Match the size & location of the drum image
html.x = dryerDrumImage.x + 10;
html.y = dryerDrumImage.y - 10;
html.width = dryerDrumImage.width - 20;
html.height = dryerDrumImage.height - 20;

// Now add the html control to the beginning of the display list
application.addChildAt( html, 0 );

Allow mouse events to flow through

Since the dryer frame and the drum window are in front of the HTML control, we need to allow mouse events to flow through to the HTML control. This is done by setting the mouseEnabled and mouseFocusEnabled properties of the mx:Image components to false.

Browser events

Now that the HTML control can respond to mouse and keyboard events, the control can now load web pages and respond to user input. Just to make things fun, I wired up some event handlers to start the drum rotation and sound FX when a page starts loading, plus another handler to stop the drum and sound when the page is fully rendered.

WebKit limitations

The Apollo HTML control is based on the open source WebKit engine. This is the HTML engine used for Apple's Safari browsers, and others too, including the Nokia S60 mobile platform. So yeah, maybe I should have called the app SurfinSafari, but I thought DryerFox was more catchy.

The WebKit control is capable of handling most HTML and JavaScript, but I've found a few things it won't do.

• The mouse cursor doesn't change from an arrow to a hand when you mouse over a hyperlink, nor do the links change color to indicate they can be clicked. Some pages contain JavaScript snippets to perform similar animations (like changing the background color), and those appear to work. Even if the HTML control dispatched some sort of event like ON_LINK_ENTER and ON_LINK_EXIT, then an app could add a bit more affordance that most people expect from a browser.
• There is no control over a right-click menu for the control, again something that most browsers offer.
• Ironically, the WebKit control does not run Flash apps. If a web page attempts to load a .SWF, the page thinks that Flash is not installed. Maybe this is a security sandbox issue, but it doesn't seem to work.
• There are no events raised for page-load timeouts or server-not-found.
  

Maybe these issues will be fixed by the time the Apollo runtime gets out of beta.

Inside DryerFox - Part 2: Web 2.0 is all about transparency

Transparent System Chrome

Yeah, that sounds like something that Scotty might complain about to captain Kirk. "We've run out of transparent system chrome, captain!"

I wanted to make DryerFox run without a normal window frame and live as a dryer/browser mashup floating on the desktop. It just seemed funnier that way.

In Apollo-speak, the outer window that contains the app is called the chrome. The chrome window behaviour is OS dependent, but it usually includes the window title, plus buttons for closing, moving, and minimizing the app.

An Apollo application has a choice of either using the OS chrome (default behaviour), or disabling the system chrome completely. If you disable the system chrome, your app will need to handle window movement, sizing, and closing in some other way.

Thankfully, the Apollo samples include the WeatherStation app as an example of how to do this.

Hidden Gotchas

If you skim the documentation, it seems like all you need to do is tweak the -app.xml file to remove the system chrome, but it is a little more subtle than that.

Here are the steps I used:

1. Create a new Apollo project in the Flex Builder IDE. Let's assume the app is called "NoChrome".
2. Edit the NoChrome-app.xml file generated by the IDE. Change the systemChrome and transparent attributes of the node. should be changed to ="none" transparent="true" ...>.
3. Run the app. Hey! It still has chrome! WTF? (why the frown *cough*)
4. I was stuck at the previous step for about 30 minutes until I read the comments in the -app.xml file and remembered that Mike Chambers had said "now pay attention to this" in one of his ApolloCamp sessions..
5. Change the type of the root application component from to (from which ApolloApplication derives). Then you're good to go.
6. I also duplicated the Application sytle sheet from the WeatherStation app, but I'm not 100% sure if this is required.
   

Application {
/* make app window transparent */
background-color:"";
background-image:"";
padding: 0px;
}

Perhaps later releases of the Flex Builder Apollo extensions will provide an easier way of switching between systemChrome and noChrome modes. For an alpha release, it's still a pretty kick-ass offering.

Inside DryerFox - Part 1: Creating the media assets

Artwork
Just in case my DryerFox post didn't make it apparent, I'm not a graphic artist. But I can hack away with Adobe Fireworks with the best of them, so that's what I did. I googled for the biggest image I could find of a front loading dryer, and I found the image on the left.

Here's what I did to get the one on the right:

I spent a bunch of time learning & fiddling with Fireworks. At least 50% of this project time was due to my lack of design skillz.

1. The black background was easy to turn transparent.
2. I then split the image into 4 layers: the control panel, the lid, the frame, and the drum.
3. I stretched the lid and frame to make the dryer more squarish.
4. I repositioned the unstretched control panel appropriately.
5. I made the drum as large as possible, even making the rim thinner, to maximize the portion of the browser window that will show inside the drum.
6. I got rid of the squarish reflection on the glass bubble. I used the "magic wand" selector in Fireworks to find all the similar connected pixels, and then I just lowered the brightness.
   
7. Then I realized that the image was actually a top-load washer, not a dryer. Agh! Darn you inaccurate search engine metadata! But my result looked pretty, so on I went ...
   

Sound Effects
OK, now I that I had graphics, I needed some decent sound FX. Here I have a bit more of a background, having spent 6 years designing digital audio equipment. Normally, I'd hop on over to Sound Dogs (think iStockPhoto, but for sounds), since they have such a huge library.


But one of the main inspirations for this project is the nagging sound of my own dryer, which is right next to my home office. So I just brought my MacBook Pro into the laundry room and recorded it directly using the built-in mic.

I needed to disable the "Use ambient noise reduction" setting, since ambient noise was exactly what I was after.

I cranked up the input volume and recorded a 40 second run of good heavy load of towels, complete with the wonderful clunk of the relays kicking in when the dryer shut off.

Alrighty, I had all my media assets, so then it was off to Flex Builder to create the app, covered in the next post.

DryerFox - It's like Firefox, but inside a dryer!

Long-time listener, first-time coder! Here's my first Apollo app ...

I was lucky enough to attend the original ApolloCamp event in March, and I've been spending the last while learning the Flex & Apollo environments.

One of the cooler things about the Apollo framework is the addition of an HTML control based on the WebKit engine. This is the HTML engine used for Apple's Safari browsers, and others too, including the Nokia S60 mobile platform.


Since the Apollo mx:HTML component is rendered as part of the Flash display list, this allows any Flash effects to be applied to an active web page. Blurs, tweens, rotations, it all works.

Presenting ... DryerFox!
I knew I wanted to do something fun with HTML, but the question was: do what? Inspriration hit las Thursday, and I decided to create DryerFox - A rotating browser window wrapped by a dryer image.

You can type any URL into the app, and the page will be loaded and rendered. As the page is loading, the dryer's drum turns, and therefore so does the page. You can also manually rotate the drum using push buttons. The page remains fully interactive, no matter what the rotation. You can read your webmail, surf the net, or whatever. There is even a button to reset the drum rotation back to normal, so that you don't strain your neck.

Installing the demo

1. Install the Apollo runtime framework on your Mac or PC, if you haven't already done so. It is an alpha release, but still pretty solid.
2. Download the DryerFox demo .AIR file. (.AIR is the extension for Apollo apps, but it is just a ZIP file)
   
3. Double-click the downloaded .AIR file, and the Apollo runtime will lead you through the rest of the installation process.

The source for the hack is available here, in case you want to hack it further yourself. You'll need the Flex development environment to do that.

I'll describe the making of DryerFox in a future post, but I wanted to get this out there for feedback.

printf( "Hello world!\n" );

Why do I have the nagging feeling that blogging has suddenly become unhip?

Thanks for showing up anyway. I hope to use this blog to write up some of the fun things I'm learning as I make the leap from diehard C++ developer to a Web 2.0 GUI guy.

I've recently started developing rich internet apps running on the Flash platform, using Adobe's Flex Builder 2 and the Apollo desktop framework. I'm especially intrigued by how easy it is to develop useful apps using Flex.

There is a great body of Flex & Flash work online, and I hope I can contribute some worthwhile stuff as well. Some of that contribution depends on your, dear reader, so let's try and make this blog into a useful conversation.