Compass
In this lesson we will learn to make a simple compass using the Orientation Sensor. Prior to conducting this lesson, we must test the program on the phones that will be used ahead of time to ensure that they have a working sensor.
A compass performs one function and that is to notify the user which direction they are facing. Traditionally, a compass features a compass rose that includes the four cardinal points (North, South, East, West) and their intermediary points. Our compass will be modeled after this using a TableArrangement and nine Labels. In order to denote what direction the compass is pointing we will enlarge the letter of the direction. There are other ways to denote which way is being faced such as color, bold faced text, as well as rotating the letters to keep N facing North. The UI should look similar to the following.
In addition to this we will need an OrientationSensor from the Sensors section in the Palette. This sensor helps the phone know what direction it is facing, as well as how much it is rotated along the x, y, and z axes. The functionality we will be using is what direction it is facing. This is called Azimuth. The sensor works best when the device is not moving and level hence the notice that is included in the UI (this is completely optional).
With the relatively simple user interface finished we need to program the compass to actually work. The first thing we are going to do is scale our compass to the size of the screen we are working on. We are going to need to keep track of the size of the screen as well as the font size for denoting what direction we are facing so we will need three variables. Remember, if you are using color to denote what direction is being faced then you will use color variables instead of font size variables.
We are going to scale the compass components to the width of the screen. We are going to take a screen.Initialize block from the Blocks menu and then initialize the Bounds variable to the width of the screen. We also need to make sure the Orientation Sensor is enabled and to set the dimensions of the TableArrangement to be this to keep it a square and then the dimensions of each label inside to be 1/3 this size (since we have a 3 x 3 grid). The code for the first two labels is shown as the rest is just repetitive code for each label.
This code that we just wrote will ensure the compass will fit snugly on any screen (just ensure any font sizes for test are not too small or too big). The next thing we are going to do pull out the OrientationChanged block from the Orientation Sensor. This block will run its code every time the phone's orientation changes. In this example we are using the center label in the compass to display the output from the sensor for the Azimuth and update it everytime this block is called but it is not mandatory.
Since we are dealing with rotation we will need to portion off degree intervals to represent different directions. The sensor assigns North to be 0 and East to be 90 and so on. Since we have 8 different points we will need to divide 360 by 8 which leaves us with 45. Each direction will cover a 45 degree interval starting halfway from the previous point to halfway to the next point. For example, South will cover degrees 257.5 to 202.5. Each interval will have its own if statement and it will reset the selected direction and then select the new direction. As with the screen initialization, the blocks for this portion of code is cut off because it is repetitive until the end.
The direction colors/fontsize are reset in the Reset Direction procedure. This procedure simply sets the colors or font size of all directions back to their default values.
Once this is done the compass should be complete. Congrats! It is very sensitive so it is best used on a flat non-moving surface.
