Remote-Tiltspacer

Because motion events are a bitch to test

What does it do?

Testing motion events was never going to be easy task. You have two options, both of which suck.

If you decide to use a mobile device equipped with an accelerometer you'll be left stranded without your favourite debugging tools.

Alternatively, if you decide to develop on your favourite computer you will find yourself up motion event creek without an accelerometer.

That's where Remote-Tilt comes in. By including a single line of JavaScript you can emulate device motion events in your test page which can either be a regular browser or even a mobile emulator.

Find out more

Want to Node?

Want to know how this was built? Want to have the skills to build this yourself?

Join @rem's Node workshop in March

How does it work?

<script src="/img/spacer.gif">

Using Remote-Tilt polyfill is easy! All you have to do is add a single JavaScript include to the pages you wish to test.

When you refresh your browser, it will either open a popup or notify you that it couldn't open the popup and give you the option as to how to continue.

If you enable popups, a small window will open that allows you to send motion events to your page. If you don't open the popup, you'll be given a key that can be entered in this site to create a separate window that can remotely send the motion events.

The advantage of using the remote key, is that you can open remote-tilt.com/MY_REMOTE_KEY on a mobile device like an iPhone (which does have native support for motion events) and these will be sent from your phone to your test page.

You can also specify your own remote key if don't want to use the randomly generated key each time. Simply append this to the script include and this will automatically be used as your remote key as follows.

<script src="/img/spacer.gif">

In your JavaScript code you can bind to the DeviceMotionEvent or DeviceOrientationEvent as you would normally do:

window.addEventListener('deviceorientation', function (event) {
  tilt(event.beta);
  rotate(event.gamma);
}, false);

Support

spacer

  • Chrome
  • Safari
  • Opera
  • Firefox (thanks to @louisremi)

IE9 testing needs to be added.

Download JS

Who made it?

Development of the Remote-Tilt Polyfill and all backend code by Remy Sharp.

Remy is a developer running Left logic, a speaker, an author, a proud father and a Part-time Doctor.

Follow @rem

User Interface design and development for this site by Chris Bewick.

By day Chris leads the UI Team at Yell.com, by night he occasionally blogs and is an wannabe luthier.

Follow @stompfrog

See it in action!

If you've got a cool example that uses motion events, send me a message and I'll add it the list above.

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.