iPhone Controlled HTML5 Logo and Color Cube
Heads up! This article was written in 2011 and it exists mostly for historical purposes.
When Apple released iOS 4.2 end of last year I was on a boat trip to Finland. For me the most interesting features were added to Safari browser. I wanted to learn about WebSockets. New DeviceOrientation API just begged to be abused. I had an idea to control the content of laptop browser by tilting and rotating the phone. I had working but ugly code before ship arrived to Helsinki.
If you have short attention span go straight to the HTML5 logo demo.
Code has been sitting on my hard drive since. I cleaned it up during last couple of days. Also added additional eye candy by using the oh-so-hot-at-the-moment HTML5 logo.
How Does It Look?
How Does It Work?
First open demo page with your browser. Browser must support WebSockets. If you are using Safari which also support CSS 3D transforms check HTML5 Logo page. If you are using Chrome try Colour Cube page. When you open a demo page it generates a random PIN number and connects to a WebSocket server. PIN number is used as part of channel name.
var socket = new WebSocket("ws://ws.appelsiini.net:8080/iphone/" + pin);
Next open the mobile page with you iPhone or iPod. Enter PIN number from previous page and press connect. Your mobile browser now connects to same WebSocket server.
var socket = new WebSocket("ws://ws.appelsiini.net:8080/iphone/" + pin);
If the PIN numbers match your browsers are effectively paired. Mobile browser then uses DeviceOrientation API do determine iPhone orientation. When user tilts or turn the device new orientation is sent via WebSocket to server. Server in turn sends the same data to computer browser which is listening on same channel.
Every time HTML5 Logo page receives WebSocket message it animates the logo using CSS 3D transforms.
socket.onmessage = function(event) {
var payload = JSON.parse(event.data);
$("#elevator").css("-webkit-transform", "rotateX(" + payload.data.x * -1 + "deg)");
$("#aileron").css("-webkit-transform", "rotateZ(" + payload.data.y * 1 + "deg)");
$("#pitch").css("-webkit-transform", "rotateY(" + payload.data.z * 1 + "deg)");
}
Colour Cube is almost the same. Only difference is It uses Pre3d JavaScript 3d rendering engine to draw and animate the cube.
Note! Spinning HTML5 logo is taken from HTML5 demo by Boaz Sender. Color cube is taken from Pre3d demo gallery by Dean McNamee. I did not originally create them. I just adapted them to connect and animate with iPhones.
WebSocket Server
WebSocket server itself is simple Ruby script based on Event Machine and em-websocket. I could have used Pusher which provides a hosted service. However I wanted to use this as learning experience. Also if this demo goes popular I might hit some message limits of Pusher.