This tutorial teaches you how to use App Inventor's image sprite and orientation sensor to create a simple compass.
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.
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.
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:
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).
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):
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.
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.
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.
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:
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.