Sensors: How to use the Orientation Sensor
Smart phones and tablets contain several kinds of āsensorsā to sense information about their environment. For example, an accelerometer provides information about movement of the phone (or tablet) ā letting us know the speed and direction of travel in x, y and z coordinates (three dimensions).
The orientation sensor tells us if the phone is tilted to the left or right, or up or down (or flipped over). App Inventor provides a simple to use interface to the orientation sensor. We can use this to control a sprite or ball on the screen ā by tilting our phone, we can make graphic items move around on the screen!
Sample source code that you can download is at the bottom of this post!
After going through this tutorial, you now know enough to create your own interactive smart phone game!
Before we get started, please review these earlier tutorials:
How to Create a Bouncing Ball Animation in App Inventor 2
Using ImageSprites for Animated App Inventor Graphics
Controlling the sprite animation with the finger on your screen
What the Sample Program Does
The sample program, in this tutorial, adds the orientation sensor to the earlier sprite-based animation. By tilting the phone, we control the image sprite (or if you prefer, a ball object) on the screen. The sprite moves in the direction of the phoneās tilt angle ā the steeper the tilt, the faster the sprite moves in the tilt direction.
Hereās a video clip to illustrate how this works:
This program also adds a button āOrientā and introduces a simple way toĀ see whatās going on inside an app.
When the program starts running, it operates as it did in the earlier tutorial ā the sprite just moves around and bounces off the wall. But if we press the āOrientā button, the app switches to using the orientation sensor to control the spriteās movement. Ā Press the āOrientā button again, and the orientation mode is switched off.
Tip: Turn off Auto-Rotate on your phone
When rotating your phone around in odd directions, Android may think you are switching from āportraitā viewing mode to ālandscapeā viewing mode. Which is probably not want you want the phone to do when using this demo program. You can turn off the automatic screen rotation by going to:
Settings | Display | Auto-rotate screen
and remove the check mark next to this item.
Additionally, the ātxtCurrentHeadingā text box displaysĀ the values returned by the orientation sensor so we can see what the program is doing on the āinsideā.
Introduction to the Orientation SensorĀ
The orientation sensor appears in the āSensorsā section of the Palette ā drag the OrientationSensor component to the Viewer and drop on your app.
The sensor is added as a non-visible component, at the bottom:
Ā The orientation sensor provides the angle of tilt of the phone in an x and y axis ā known as roll and pitch.
Think of an airplane in flight. When the plane turns to the left, the left wing drops down and the right wing raises up ā thatās called ārollā.
When the pilot pushes the control wheel (or stick) forward, the nose drops down ā thatās āpitchā. When the pilot pulls back on the controls, the nose moves upwards ā in fact, we say āthe nose pitched upā.
Hold your phone in front of you in āportraitā mode so that the short sides are at top and bottom and the long sides at left and right. Hold the phone so that itās basically flat (backside down).
(You donāt need to know the next two paragraphs to useĀ this example ā but it may be helpful to understand some of the orientation sensor features.)
If you rotate your phone so the right edge goes up at a 45 degree angle, then its ārollā is +45 degrees. If you rotate your phone so the left edge goes up instead, at a 45 degree angle, this ārollā is -45 degrees.
If you tilt the phone so that the top of the phone is pointed down, then the pitch might have a value -45 or even -90 degrees if you point the top all the way down. If you pitch the top up, then the pitch goes in positive degrees between 0 and 90 degrees.
The amount of roll in the x and y axes (roll and pitch) can be used to calculate the angle of trajectory for the the sprite, on the screen, and the speed of movement. That is, the steeper we tilt the phone, the faster the sprite should move on the screen. (Please see āAfterwordā at the bottom of this post.)
Using the Orientation Sensor
In the Blocks editor, we can look at the code. When the phone is moved, the orientation sensor throws an event āOrientationChangedā. Our blocks code handles this with a āwhen OrientationSensor1.OrientationChangedā event handler. In the sample code below, the last two lines are the two lines that change the direction and speed of the sprite based on the phoneās angle ā the rest of the blocks code is to display the orientation sensor values in txtCurrentHeading.
The orientation sensor has a property value called āAngleā, which conveniently is the angle determined by the phoneās tilt, and in a form that we can assign to the spriteās Heading property.
Similarly, the sensor returns a āmagnitudeā value that we can use to set the spriteās movement speed. The Magnitude has a value between 0 and 1, while the Speed is set to positive integer values, like 10 or 20 or 30, and so on. To convert the fractional magnitude to a useful speed, we multiply by a constant value ā in this example 50. Why 50? I experimented with the program and found that 50 produced a nice speed that felt right ā but you can certainly change this value to something else and see what happens!
Important Note ā not all Android devices have an orientation sensor built in! You can check the OrientationSensor1 property āAvailableā ā if true, then there is an orientation sensor on board the device. The sample demo code in this tutorial does not check the Available property ā its possible that if your device is missing an orientation sensor, then this code will not work for you.
How the Orient Button Works
The orient button acts like a ātoggleā. Press it once and the orientation feature is switched to on; press it again, and the orientation feature is switched to off.
There are many ways to implement a ātoggleā in software ā the method I used relies on a ābooleanā variable. A boolean variable may have only one ofĀ two values ā ātrueā or āfalseā. When set to false, the orientation mode of the program is off, but when set to true, the orientation mode of the program is on.
The Orient buttonās Click event turns the orientation feature on or off. We could implement this with an if-then-else block (if orientation is off then set orientation on, else set orientation to off). But instead we implement this using aĀ BooleanĀ algebra operator: the āNotā function in Boolean algebra inverts the value of a boolean. If the value is true, then NOT true is actually a value of false and NOT false is actually a value of true.
The following blocks code inverts the current orientation setting from true to false or false to true.
Source code App Inventor ā.aiaā source fileĀ (App Inventor source code files have the filename extension .aia)
Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select āImport project (.aia) from my computerā¦ā
The roll and pitch values can be used to calculate the appropriate angle and speed.The roll and pitch can also be combined using trigonometry to calculate the new Heading for the sprite. And theĀ greater the angles, the greater the resulting speed. Ā It just takes a little math to convert the angles into a heading and speed.
But some days I can be dense. I actually scribbled out circles and triangles and started down a path of calculating the arc tangent for the heading and the slant distance for the speed. As the code became complex I said to myself, āYou know, App Inventor is supposed to be easy ā this approach isnāt easy. May be Iād better look at the documentation again!ā.
Followed by a whopping big DUH: The Angle and Magnitude properties do all these calculations behind the scenes, making it easy to use the orientation sensor for controlling sprites. I didnāt need to do all those calculations myself!
Sensors: How to use the Orientation Sensor was originally published on App Inventor 2 - Learn to Code!