Visualizing DeviceOrientation Events #

I was looking to play around with the DeviceOrientation events (which are now supported by iOS devices, in addition to Chrome and Firefox), but I was having trouble picturing all the event fields, and how they would change in response to the device being moved.

DeviceOrientation events graphs

I therefore made a simple visualization of the deviceorientation and devicemotion events. It just plots the acceleration (or accelerationIncludingGravity if that's not available) and alpha, beta and gamma fields from the events. Incidentally, to get <canvas> to render at a 1:1 pixel mapping to the iPhone 4's high resolution screen, a similar technique to the one used for images can be used (i.e. make the canvas displayed size be half of its actual pixel dimensions).

Post a Comment