It wasn’t always easy to keep up with the latest trends, and trying out multitouch experiments then required an iPad. So I wrote a touch event simulation tool, called addTouch. The principle was to use the mouse to add, manipulate and remove multiple touch points, dispatching touch events to the browser.
This made it possible to develop multitouch experiences and test them using an average desktop browser. I supported both Apple’s touch events and the (now extinct) Mozilla touch events.
Sparky : just a demo app
To demonstrate what addTouch could do, I put together a simple demonstration app called Sparky. Its principle is very simple — put your fingers on the screen to create sparking lines that you can move around. This was in the really early days of HTML5 support, and I hadn’t learned Canvas drawing yet, so my implementation uses a few
<div> elements and some CSS
This has worked fine for almost six years now. I just had to fix a small issue when Apple released the iPhone 4, which had a high-dpi (“Retina”) display. There were a few versions of the iOS Safari browser that had bugs when it came to handling device pixels vs logical pixels. I had to do a lot of experimenting with this, and wrote a StackOverflow answer that is currently my third most up-voted one.
What started out as just a demo app for addTouch, now has a life of its own. After my latest complete blog remake, I have been keeping a close look at the IIS logs that I get from Azure. It turns out that Sparky still gets a few hundred visits per week from different incoming sources, which is nice, but it prompted me to do some much-needed spring cleaning.
The code was actually not too shabby, but some of it was really outdated. It still supported the old Mozilla touch events, and it used screen coordinates instead of local coordinates, which made it look pretty horrible in a non-fullscreen view, especially on the Android Chrome browser. That needed to change.
Other than that, it was just the small issue of estimating screen DPI, where I had used hard-coded values directly adapted for various iOS devices. That needed to be replaced with some more general-purpose code, and after a little head-scratching, I just decided to go with the same hard-coded value for all devices. At least for now.
I will try to fix some of the issues with addTouch as well, but I’ll save that exercise for later. It is not very useful anymore, because the major browsers and development environments have really good touch emulation built in.
Try it out: spark.attrakt.se