Being on the bench gives a man more time to do what he truly enjoys: mindlessly playing around with new technologies, APIs and generally making a lot of cool stuff that doesn’t really do anything. Enter…the gyroscope!
What is a gyroscope? No, it is not a telescope that automatically zooms in on the nearest Greek sandwich shop (sidebar: SOMEONE INVENT THIS), a gyroscope is – for the intents of this blog post – a little gismo inside your smartphone that measures and maintains orientation. WARNING: COMPLEX CONCEPTS AHEAD. SKIP SECTION IF EASILY CONFUSED. When you move your phone around (i.e. rotate it in any direction), the phone’s gyroscope measures and records this data from a fixed coordinate frame on the phone in relationship to a fixed coordinate frame on the Earth. The x- and y-planes on phone’s local coordinate frame are the planes of the screen, where the x-plane is positive towards the righthand side, and the y-plane is positive towards the top of the screen. The z-plane on this frame is perpendicular to the phone’s screen, and is positive out of the screen (up). The fixed Earth coordinate frame is defined as “East, North, Up,” meaning the x- and y-planes are the ground planes, positive towards the east and north respectively, while the z-plane is perpendicular to the ground and positive towards the sky. The purpose of knowing all of this is so you can understand that when you are holding your phone in portrait mode, completely parallel to the ground, and facing north, all the data measured by the gyroscope for the x-, y- and z-axes will read “0.” This would be considered a “base” position. IT IS NOW SAFE TO RESUME READING. It is a very interesting piece of equipment, and once you know how to harness its data, the applications for it are only limited by your feeble imagination. (example not related to subject at hand)
You may be thinking to yourself, “But I’m only a front-end developer! I don’t know anything about harnessing the power of a smartphone’s gyroscope.” Poppycock! All you need is a basic grip on HTML / Javascript and a can-do attitude. And besides, I am about to tell you how to do it, so settle down.
Let’s first start with some simple HTML to get us going.
We will come back to this later, but what we are going to do is set up variables to display what our device’s current orientation is in regards to yaw (rotation on the x-axis), pitch (rotation on the y-axis) and roll (rotation on the z-axis).
The first step towards achieving this is setting up a listener for the DeviceOrientationEvent.
Mini-Lesson! In this code snippet I am using the shorthand syntax for conditionals. It helps to make code cleaner, and it looks a lot fancier to someone walking by your screen.
Our conditional runs a check to see if the window object has a reference to the DeviceOrientationEvent. If it does, we add the event listener to the window object, and continue on with our code. If it does not, we alert the user that their device does not support device orientation, and presumably they cry.
Now that we have our listener in place, when does the event actually get triggered? That is a fantastic question, and the official answer I can provide you is “often.” I advise you ask our mutual friend, Google, if you would like a more specific answer.
Now, our handler for the DeviceOrientationEvent is where the fun takes place.
There are three properties of the event that we can access: alpha, beta and gamma. The alpha property contains information about the device’s orientation on the x-axis, and the beta and gamma properties maintain the y- and z-axes respectively. And there you have it my friend. Whenever the device’s orientation changes, your listener triggers the handler, and you have yourself some real-life data! What you do with this data is now completely up to you. In my example, I am saving this data to three variables, and changing the text of the three corresponding span tags so that we can read it. There is a link below for a demo of this tutorial, and you may feel free to view the source code to
Demo and source code
Bonus: I drew a detailed diagram to explain the intricacies of working with a three-dimensional coordinate plane. Knowledge is power.
