Awhile back, we wanted to create demo videos for clients, showcasing some of our iPad Web Application work. One of the challenges was how to show the interactions — the touches and gestures — when working with the application. There is no mouse, like on desktops. A screenshot, or a video of the application, will simply show things happening as if by magic. And taking a video or photo of a user interacting with the device is just clumsy and laborious: You need a camera, the user’s hand covers the content, you have to get a manicure, all that.

With the programming expertise of Xiyuan Shen and our good friend Ian Gilman, I set out to do something about this. I knew from having seen the awesome yet thoroughly creepy Phantom Limb that it was possible to inject a mouse-marker using a bookmarklet. This would allow us to run our code on almost any webpage, without the author having to include our script on their page. It could be injected on an as-needed basis by the presenter.

Another challenge was that if we rendered an object where the user touched, by default the newly rendered element would receive the touch event, and not the element below it. And since the newly drawn element is absolutely positioned and not part of the DOM hierarchy, we couldn’t fall back on event bubbling. Luckily, I had read somewhere that webkit supported the pointer-events:none css style, which effectively renders an object invisible to touches. Problem fixed: the touch could now act on the underlying object, and not on the marker itself.

The directions were thus: create a bookmarklet that loads a script to inject jQuery on the page if needed, then capture any touch, displaying a marker for each touch point. Oh, and then if the user zooms the page, scale the marker accordingly. And invoke hardware acceleration to make it snappy…

Below is a screenshot from the iPad, showing a four-finger touch (aside: it’s not easy to create a screenshot and touching the screen at the same time):

If you are reading this in Chrome, Safari, or Firefox you can try the code right on the TouchView page. Better yet, to see all your digits in action, grab an iOS device and give it a whirl there. Then if you have any suggestions, submit an issue, or better yet fork our code, improve it and create a pull request: the code is provided under the MIT License.