IWC.com features a great deal of content which includes some amazing videos. Two great examples of these videos can be found on the Aquatimer family page. Galapagos is an eight and a half minute video highlighting IWC’s longstanding relationship with the Charles Darwin Foundation and includes some really incredible cinematography. Don’t miss the footage of iguanas foraging underwater. A little further down on the Aquatimer page is a short animation demonstrating the engineering behind the depth gauge within the Aquatimer Deep Two. It is an example of how IWC uses video to educate customers about their watches.
Galapagos video on the Aquatimer page
As the second installment of our series on building IWC.com, we’re looking more closely at how this video is delivered to both desktop and mobile browsers.
The trickiest part was finding the right file within /dev to point Tinkerproxy at. The EiBotBoard shows up as /dev/cu.usbmodemNNN which is quite different from the way an Arduino board shows up.
With the proxy in place, I set up a Flash file to load images, transform them into halftone dot patterns and then plot them onto eggs. Plotting is done with 3 different commands, one to raise and lower the pen, one to turn the egg (xaxis) and the last to move the pen (yaxis).
An Odopod Hack Days project that draws using simulated gravity forces, Orbit is a mobile web application using multi-touch events, canvas API and offline cache.
The blank canvas includes two gravity wells. To start drawing, add orbiters by tapping or swiping the screen. Try different directions and speeds to get different paths. For a single orbiter, points and lines are drawn along the path. Once there are two or more orbiters, lines and fills will be drawn between the different paths.
Settings are provided in the bottom left of the screen to pause the orbiters, turn different drawing layers on and off and to clear the drawing.
Each layer in Orbit is rendered into a unique canvas. All together, there are five canvases. Using multiple canvases slows down the application; however, the ability to turn each layer on and off as the drawing progresses was important to me. Besides, even with five canvases, the application performs quite well.
If you find the performance too slow, here’s a tip: the application will continue to draw into hidden canvases, but since rendering the pixels to the screen is the primary performance bottleneck it will run much more quickly when one or more canvases are hidden (especially connections and fills).
Handling multiple touches
Handling the touch events is relatively straightforward. The browser provides events for touchstart, touchmove and touchend. Since any of the canvases can be hidden, I bound the events to each one of them. This can be found starting on line 299 in obrit.js.
The touch events include an identifier which I use to associate touchmove and touchend events with the original object created on touchstart. Once the touch has ended, it is important to clear the identifier from the object. This is because any future touchstart event can use the same identifier (this actually happens quite often).
On iOS devices the browser will generate events for multiple touches at a time but Android browsers currently only recognize a single touch at any time. This code works for both cases.
jQuery Mobile is used to create the settings and the about screens as well as the settings UI elements. The mobile framework organizes application screens into pages and dialogs. I included all pages for Orbit within the index.html file.
For the settings, I use different controls based on the size of the screen. For tablets, I have settings open on the main drawing page, but switch to a dedicated page on smaller devices. At first I had all devices using a separate page, but switching between pages is cumbersome and on tablet screens, there is enough room for my options on the main screen.
Starting on line 241 of orbit.js, you will find the function which determines the appropriate interface to show based on the screen’s width. This function is bound to the settings button in the lower left of the main page. The HTML for both settings’ interfaces is included in the index.html file.
Incidentally, I used buttons with a non-breaking space as the text string rather than buttons without text because those buttons were too small to easily touch.
Try it out
All-in-all I was impressed with the browser’s touch events and canvas performance. Have a go and let me know what you think in the comments below.