We sat down with one of our Vaadin guys here at the office, (in)famous for his earthshaking add-ons, Johan Ånäs.
Johan thanks for sitting down with us. Tell us what kinds of add-ons you have created so people know why we’re here?
I’ve created a few in my time, but the latest one is Head tilter. Head tilter lets you control your mouse cursor and click with just your head, using your webcam to track your head.Previously I created Baller, which has gotten lots of positive feedback. Baller is basically a football game for your Vaadin application, but it’s much easier to see than explain, so check out baller here (enable the feature by clicking the “Funmode” button).
How did you come up with the ideas?
I work with a lot of business applications, interesting work but not always the most playful. So I thought, what hasn’t been done yet, would create a wow effect and put a smile on people’s faces.
Could you tell us a bit more about Head tilter and how you created it?
It uses a ready-made JavaScript library called headtrackr.js which tracks your head through the webcam and gives you the head’s tilt and position among others. You should just try it out first and remember to turn on your webcam ;)I use the information I get through JSNI to project a drawn cursor in the DOM tree by calling native GWT code to handle it. It’s not naturally the real cursor but just an image. The trickiest part was getting the clicks. You "click" the mouse button by quickly tilting your head to the side and back. This is caught by the add-on by comparing frames of “head positions” and checking whether it has changed to the side and back within a portion of time.
Something that I had to scratch my head for a while with was when I fired a click event. I had to remove my imaginary cursor from the DOM tree so that the click event would fire on the widget underneath it – and when it had, I added the cursor back to the DOM. Here I leveraged Vaadin’s findWidget() to easily find the right widget to click on.
All in all, it was a very simple example of how to integrate a JavaScript widget with GWT (and Vaadin).
Does it actually work with the client-side alone as well?
Absolutely, you can use it in offline mode as well, in any pure-GWT / Vaadin-clientside application you have.Where can we get it?
It’s available in the Vaadin Directory at http://vaadin.com/directory#addon/headtilter and the source can be found at https://github.com/Aph0/HeadTilter so please have a look. It's only a hobby project but if you have improvement ideas or patches, they're always welcome. Baller is also available in the Directory at https://vaadin.com/directory#addon/ballingYou’ve gained some clown-respect with these, but what’s next?
Too many “real work” projects at the moment :) Speech to text would be nice via some library, I have some ideas, but I can’t tell you too much about it at the moment… trade secrets and all ;)Do you have any tips to others for creating JavaScript based add-ons?
It’s surprisingly easy. The ones I’ve done aren’t even connected to Vaadin that much – they’re fully usable in a pure-GWT project as well.Start with a javascript library to get something on the screen quickly. Create an example Widget in Eclipse and have a look at the example. The Vaadin plugin in Eclipse creates a very good example with everything from State changes to how you send RPC events back and forth. That would be my tip.
We’re not sure yet whether to make this into a series of blog posts, but please let us know in the comments if you’d like to hear more about others as well.