Follow me on Twitter @JulienNicault Back to http://juliennicault.com/

Mobile + Websockets + CSS 3D

Visit http://tiny.cc/jnws from your iPhone & enter the following pin code to control the logo

PIN Code: 684

Your browser doesn't support CSS 3D properties. Please try this experiment with Safari or Chromium latest build.

More about this experiment

Thanks to Pusher hosting websocket service, i was able to create this quick experiment using smartphones' accelerometer, websockets (with fallback to flash) and CSS 3D magic. All CSS tricks are inspired by the Mika Tuupola's post here.

So here's the logic: Smartphone subscribes to this client channel with the same PIN code and send JSON object containing X, Y & Z position returned by the mobile phone. Then, the Pusher's JavaScript client library received those data and call the function to upgrade CSS values. Quite simple right?
The only tricky stuff to do was to fired the JS client event using only JavaScript because this feature is actualy in beta at Pusher and you have to be validate by the Pusher's team i would like to thanks again for their reactivity.

So the real magic of this experiment is that you can run it wherever you want, also on mutualised hosting because you don't have to set up a websockets server in Ruby or others languages. That's why you can download the full code of this application and run it in your own server without install anything else! You'll just have to get an pusher app id here and ask the support team to validate your app by send them a email at support(at)pusher.com I hope you enjoyed this experiment. For more cool stuffs about HTML5, CSS3 & JS, you can follow me on Twitter here http://twitter.com/JulienNicault