|
CPSC 110-08: Computing on Mobile Phones
|
This is a follow-up to the WhereIsNorth homework assignment in which you a simple compass app. Let's add some enhancements that "prettify" the app -- i.e., make it more attractive and easier to use.
One of the enhancements we want is to add directional labels to the cavas that mark, north, south, east, and west. as in the following screen shot:
Open up App Inventor and create a checkpoint of your WhereIsNorth app. Then open up the Blocks Editor.
The first thing we need to do is draw the directional markers (N, S, E, and W) on the Canvas. The best time to do this is when the app first starts up.
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 block will be run 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.
App Inventor provides a whole collection of built-in blocks for drawing shapes and text on a 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 create one of these blocks for each of the four directional symbols, N, E, S, and W. Then you will put the four drawing blocks inside the do slot of the Screen1.Initialize block.
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:
Abstraction. The challenge here is to specify the X and Y coordinates for each of the four directional symbols in such a way that the app will work correctly on phones no matter what their actual screeen dimensions. Therefore, you don't want to put literal values (e.g., numbers like 300 or 150) as the values the X and Y arguments. Instead, you want base the values of X and Y on the actual dimensions of the phone's screen. This is an example of abstraction.
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.
So, We want to place the N in the middle of the top of the canvas. If you open the Canvas drawer, you will find blocks that refer to the Canvas's width and height properties.
Use these blocks plus the arithmetic blocks (+, -, /, ×) to calculate the correct values for the X and Y coordinates of each of the four labels. For example, the N symbol should be located approximately half way across the top of the screen. So its X coordinate would be Canvas.Width / 2.
Modify the user interface so that instead of displaying the current latitude and longitude it displays the current address.
NOTE: In its current implementation, the location sensor will get results from the phone only if the app has been packaged and downloaded to the phone.
Write a new app called LocationSensorTester that
consists of a LocationSensor component plus five (5)
Labels. It should look something like this (click to enlarge):
Package your app for your phone and then use it to record the Provider, the Accuracy, the latitude and longitude, and the Address for each of the following locations:
Post your data on your portfolio page.