When Google introduced the Cardboard VR viewer, it had an action button made from a magnetic switch. The switch didn’t work on all devices so version 2 replaced the magnet with a screen touching button. The two designs created an inconsistency when handling action events. Third parties like Samsung Gear VR added even more alternate designs. Add all of these disparate designs together and you have a VR standard with no standard control scheme. This is what led me to write nod.js, a simple gesture based event system for Google Cardboard enabled web apps.

Based on shake.js by Alex Gibson, which uses device accelerometers to detect a shaking motion, nod.js detects a sharp motion in one of four directions: up, down, left and right. Upon detection, nod.js fires a custom event which includes the direction of motion. With nod.js you can implement actions such as next, previous, confirm and cancel without the need for an external controller.

Nod.js doesn’t require any javascript dependencies. It relies on the devicemotion event, which is built into mobile Safari (iOS) and Chrome (Android). Simply include the script in your page, initialize and add an event handler for your own code. Nod has two parameters set on instantiation:

  • threshold – the speed at which the head must move to trigger the event.
  • timeout – amount of time, in milliseconds, in which the gesture must occur.

The default values 5 for threshold and 1000 for timeout mean that the device must reach a directional velocity of 5 within one second to trigger the event.

Check out the VR DEMO (Requires Google Cardboard compatible viewer.) And visit the project page on GitHub for more information.