Pinch, Twist, Zoom: Bringing Multitouch to a Browser Near You

I’ve been working this past year together with Nokia to bring multitouch APIs to a browser near you, and this is how it looks and feels like, in a little demo of just about 50 lines of JavaScript code:

Nokia’s new technology is the Starlight browser, a browser based on the Qt port of WebKit, and they’re working with the Mozilla community on the specifications. If you have the hardware/software needed (Windows 7 Multitouch-PC with latest drivers), grab the Starlight browser, and try for yourself. And it’s all open-source, so visit the Starlight open source project page to learn more about the modifications and enhancements to WebKit and grab the source.

scripty2 supports multiple API vendors for Multitouch events, and even provides a desktop emulation (click+drag to pan, shift+click+drag to scale and rotate)– so you can try this out even without having multitouch hardware at your disposal.

Currently the scripty2 API abstraction event supports Desktop emulation, Nokia Starlight and Apple iPhone Mobile Safari. With just one API, you can now multi-touch enable any web application easily, just check out the demos.

In a recent update to scripty2, I’ve also introduced automatic support for WebKit CSS transitions, so whenever scripty2 effects are used and CSS transitions are available, the effects engine will automatically do the right thing for you.

All in all, using this in your web sites or apps boils down to just a couple of lines of code:

$('element').observe('manipulate:update', function(event){
  $('element').transform(event.memo).setStyle({ 
    left: event.memo.panX+'px', top: event.memo.panY+'px'
  });
});

Note the manipulate:update event and the new Element#transform method.

It’s really exiciting to finally get this technology out, and I’d love your feedback, patches and of course see your demos or real-world apps that you build with it! And big thanks to the Team at Nokia for making this possible!

Again, here’s the demos, the scripty2 Multitouch documentation and more videos!