Where is North?

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

Snapshot

Layout	Screenshot	QR Code
Blocks

The User Interface

• A HorizontalArrangement component -- in the Screen Arrangement drawer.
• Two Labels -- in the Basic drawer.
• A Canvas -- in the Basic drawer.
• An ImageSprite -- Animation drawer.

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):

• Labels: LabelOrientation, LabelLocation.

Adjust the Properties of the visible components as follows:

• Set the FontSize property to 14 for both Labels.
• Set the Width of the Labels to Fill parent and their Height to Automatic.
• Set the Width of the Canvas to Fill parent and its Height to 400 pixels. Set its FontSize to 20.

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

• Click on this arrow.gif and download it to your desktop or to your downloads folder.
• Click on the Picture property in the Properties panel and then on the Add button.
• Use the Upload File dialog to navigate to the arrow.gif file and click Ok. Then click Ok in the Add dialog to associate the file with your ImageSprite.

  Invisible Components

  This app uses two invisible components, an OrientationSensor and a LocationSensor, in the Sensors drawer. Drag each of these onto the Viewer.

  Uncheck the TimerEnabled for the Clock.

  Make sure both of these components are Enabled and check the ProviderLocked property for the LocationSensor.

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

• Click on the My Blocks tab (top left) and then click on the Screen1 drawer. This will open up a list of blocks that control the Screen. Select the when Screen1.Initialize block and drag it onto the workspace. It looks like this:

  This is an example of an Event Handler block. It will be execute automatically when the app starts up. For our app we'll use it to initialize the drawing Canvas by drawing the directional markings, N, E, S, and W on the Canvas.

• Click on the Canvas1 drawer under the My Blocks tab and drag the Canvas1.DrawText block onto the workspace. As you can see, this block has slots for three arguments, the text to be drawn, and the X and Y coordinates where we'll want it placed.
• You will want to assign values to each of these slots. Let's work on the N first. Here's it what you'll want the block to look like when you're done:

  

  You can find the text value in the Text drawer under the Built-in tab. Snap it into the text slot. You can also bring up the Built-in components by clicking on the background of the Blocks Editor workspace.

  The Canvas has a coordinate system with (0,0) at the top left corner. The X represents the horizontal axis, which grows positively to the right, and the Y represents the vertical axis, which grows positively from top to bottom. We want to place the N in the middle of the top of the canvas -- i.e, at approximately Canvas.Width / 2.

  To make the Canvas1.Width / 2 expression for the text slot, look for the Division block and the Number block in the Math drawer. Snap them together as shown in the above figure.

  You'll find the Canvas1.Width value in the Canvas1 drawer under My Blocks.

• When you finish filling in the Canvas1.DrawText block, snap it into the do slot of the Screen1.Initialize block. Then repeat that exercise for each of the S, E, and W directions. If you need help, refer to the blocks diagram at the top of this page.

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.