9.9. Where is North: A Compass App (Optional)

Time Estimate: 45 minutes

9.9.1. Preview

( Teacher Tube version) 		Where is North: This app uses the orientation and location sensors to create a simple compass app.

Objectives: In this lesson you will learn to :

  • Create an app that
    • uses the Global Positioning System (GPS) to display your latitude and longitude,
    • uses the OrientationSensor to point to North,
    • uses the Canvas component for drawing,
    • uses an ImageSprite component to animate the arrow.
  • Think abstractly about the problem of placing labels on various sized screens.

9.9.2. Some Preliminaries

Before we start the tutorial, there are some important concepts to talk about.

Orientation Sensor

App Inventor’s Orientation Sensor (in the Sensor drawer) is a non-visible component that provides information about the device’s orientation in 3 dimensions:

  • Roll: 0 degrees when the device is level, increases to 90 degrees as the device is tilted up on its left side, and decreases to -90 degrees when the device is tilted up on its right side.
  • Pitch: 0 degrees when the device is level, up to 90 degrees as the device is tilted so its top is pointing down, up to 180 degrees as it gets turned over. Similarly, as the device is tilted so its bottom points down, pitch decreases to -90 degrees, then further decreases to -180 degrees as it gets turned all the way over.
  • Azimuth: 0 degrees when the top of the device is pointing north, 90 degrees when it is pointing east, 180 degrees when it is pointing south, 270 degrees when it is pointing west, etc.

For this compass app we will only be using the device’s azimuth, which tells us the device’s position relative to due North. Note that the azimuth is reported as 0 degrees when the top of the devices is pointing North. You can read more about the orientation sensor in App Inventor’s glossary.

GPS and the Location Sensor

App Inventor’s Location Sensor (in the Sensor drawer) is a non-visible component that provides location about the device’s longitude, latitude, altitude and street address. It can also perform geocoding. You can read more about the Location Sensor in App Inventor’s glossary.

A mobile device can detect its location in one of three ways:

  • Using its built-in GPS sensor. This is the most accurate but, ideally, requires that the phone have a clear shot of the sky so that it can receive readings from at least 3 GPS satellites. This is accurate within a few meters but uses the most battery power.
  • Using a Wifi signal from surrounding Wifi router. The phone’s location would be the latitude and longitude of the router. This might work indoors and uses less battery power.
  • Using the Cell ID -- i.e., signals from surrounding cell towers. This is least accurate but uses the least power.

For this app we will just display the phone’s latitude and longitude in a label whenever the phone’s location changes.

Canvas Component

This app uses App Inventor's Canvas component (Graphics and Animation drawer). The Canvas is App Inventor’s graphics component. It is used for drawing, painting, and displaying ImageSprites. The Canvas component has a coordinate system that is similar to the Cartesian coordinate system that you might have learned about in geometry, but it has some important differences. Its main characteristics are summarized in the diagram shown here.

The Canvas’s origin, the point (0,0) is at its top-left. So its horizontal x-axis grows positively from left to right. Its vertical y-axis grows positively from top to bottom. Coordinate values on the Canvas are represented as pixels, which is short for picture elements. So, for example, the Width of the Canvas might be 300 pixels and its height might be 450 pixels.

The Canvas component has blocks that enable you to draw and paint on it. For example, the Canvas.DrawText block lets you draw text on the canvas at coordinates (x,y). Note that the letter's (x,y) coordinates are located at the top-left point of its enclosing rectangle, as in many other graphics systems.





9.9.3. Tutorial

To get started, open App Inventor with the Where Is North Template in a separate tab and follow along with the following video tutorial. If you prefer, you can click here for a text-based version of the tutorial.

( Teacher Tube version)

9.9.4. Questions




9.9.5. Still Curious?

Want to learn more about the GPS system, how it came into being and more of the technical details about how it works? Check out the Wikipedia article on GPS.

9.9.6. Reflection

In your portfolio, create a new page named Where is North Tutorial under the Reflections category and answer the following questions:

  1. What is the Orientation Sensor component? How is it used in the Where is North tutorial?
  2. What is the Location Sensor component? How is it used in the Where is North tutorial? Be sure to include how GPS works in your answer.
  3. In your opinion, is the Where is North app a good example of a location aware app or can the location sensor be used in a better, more efficient way? Explain.
You have attempted of activities on this page