CPSC 110-08: Computing on Mobile Phones
Where is North?

Where is North?

This tutorial teaches you how to use App Inventor's image sprite and orientation sensor to create a simple compass.


LayoutScreenshotQR Code

The User Interface

The user interface for this app uses the following visible components. Follow the layout provided in the snapshot.

Drag these items onto the Viewer from the Palette. Place the two Labels inside the HorizontalArrangement component at the top of the screen as shown in the snapshot above. Place the Canvas below the buttons and place the ImageSprite in the center of the canvas.

The Blocks Editor

We will use the Blocks Editor to program the behavior of our app. Click on the Open the Blocks Editor button (top right of the App Inventor page) and click approval on the download permission.

Plug your phone into your laptop using the USB Cable and after a second or two, click on the the Connect to Device button in the Blocks Editor. You should see your phone listed there. Select it.

In a few moments you will see your Labels and the ImageSprite on your phone. With your phone connected App Inventor will immediately display any changes you make to your app.

Back to the User Interface

It's a good idea to rename some of these component so they will be easier to keep straight in the Blocks Editor. Use the following names (no internal spaces):

Adjust the Properties of the visible components as follows:

For the ImageSprite component, it will be necessary to do upload a image file for its Picture property:

When you're done with the user interface, it should look like the picture shown here (click to enlarge).

Back to the Blocks Editor

At this point your app should look something like this, minus the markings on the Canvas and the numbers in the Labels (click to enlarge):

Initializing the Screen

The first thing we will do is draw the details of the Canvas when the app starts up.

The Orientation Sensor

To complete the compass we have to animate the compass needle. To do so we will use the event handler for the OrientationSensor. Open the OrientationSensor drawer under the My Blocks tab and pull out the when OrientationSensor.OrientationChanged block. This block will fire whenever the phone is moved.

Notice that it has three arguments, for yaw, pitch, and roll. We are only interested in the yaw, which is another word for azimuth.

The yaw value will be 0 degrees when the top of the phone is pointing due North. On the other hand, the ImageSprite will be 0 degrees when it is pointing toward the right edge of the screen. To adjust for this difference, we want to add 90 to the yaw and make this the direction that the arrow points. We also want to display the yaw value on the LabelOrientation.

Your OrientationBlock should look like this when you are finished:

With these changes you should have functioning compass on your phone.

The Location Sensor (Optional)

If time permits, add a block that will display the phone's location on the LabelLocation label. Find the when LocationSensor.LocationChanged block and add code to it that will simply set the label to the sensor's latitude and longitude. It should look like this:

Hands-on Exercises

Download the app's WhereIsNorth.zip sourcecode and import it into App Inventor as one of your projects. Here's a couple of revisions you could try.

  1. Prettify it. Add some color and think about other ways to improve the app's appearance.

  2. Add graphics. For example, draw a line running North/South down the center of the canvas.

  3. Make a game (Challenging). Let the user guess where North is.

  4. Brainstorm: Propose a change and we'll try to do it together.