Saturday, September 21, 2013

Hammer.js + PhoneGap

PhoneGap developments are coming along well. If you already have a massive HTML5 canvas + JavaScript application (like my customer does) and you want to convert it to an app, PhoneGap may be the tool for you to consider. I have had a lot of fun, and not too much frustration, with developments.

Right now, I am using a library called hammer.js ("You CAN touch this!") for multitouch support. I highly recommend it. One of the only issues I ran into with hammer.js was it's event loop having some issues with JavaScript's event loop, when I (incorrectly) listened for hammer events on the body. When I listened for events only on my canvas, things worked all right.

Below are some images of the app running on my Samsung Galaxy 3S.

App Running. It can be a bit slow with tons of nodes, but is WAY better if my phone isn't running a ton of other crap. We're doing all the rendering in JavaScript. 

After a pinch-to-zoom.

Click on a node, and bring up information about them...

...and edit a node to bring up the on screen keyboard.

Or rotate your phone if you like landscape more.

I've been very happy to work on this project with a fun customer, that is paying me to learn about PhoneGap development and make a cool app. Eventually we may try deploying this on an iPad!

No comments: