Paris Map Tour Variations

As we work our way through the App Inventor 2 tutorials, it is becoming easier to see how the logic works together to provide seemingly complex apps with very little actual programming. The blocks make for a nice, neat package without having to learn extensive amounts of coding. The near-immediate results serve as a great motivator to continue doing more with each app. As one of my classmates said, App Inventor 2 can be addictive. “Let’s just see what happens when I tweak this”, for example, can stretch the actual chapter out quite a bit further than the original sample app!

The Paris Map Tour provides two ways of accomplishing the same goal. First is the ActivityStarter. I can see where this will be useful in a variety of apps. But I chose to use the second option – WebViewer – for my final app. It provided the end result that I wanted to see in the app. I changed the destination from Paris to the San Antonio Missions National Historical Park. This park has recently been named a World Heritage Site by UNESCO. There are four missions in the park, which suits itself well to this particular app tutorial, too.

Basically, my version of the Paris Map Tour works like the original. I have the ListPicker for selecting a mission and the WebViewer for viewing the map and the park’s home page. From there, though, I have changed several details. Here is a rundown of how I developed this app. There are a total of four screen shots to provide a better picture of the app. You can also test the app using the QR code below.

appscreenshotsFor the home screen, I wanted to use more screen real estate for the opening image. Instead of using an image component, I set the screen background to the photo of one of the missions. I also added a banner using Fireworks for quick identification of the app without using screen space for a label. Using the image as a background wreaked havoc on the help page, so there were some tweaks for that page (explained below).

As soon as a mission is selected the map appears. It takes longer than I expected on my tablet, but I’m not sure what to do about that. Regardless, I wondered what people would want to know in addition to the map. Since the park is actually stretched across several miles of the city, I thought people may want to know where gas stations and restaurants are located. In order to make the gas station and restaurant buttons show the map related to the currently selected mission, I used the index number from the ListPicker, along with some nested if/then/else blocks.

Once someone chose the gas station map, though, there was no way to go back to just the mission map without viewing the home page and starting over. I added a “map” button to take the user back to the same mission as the one the gas stations were by without having to go back home first. I thought this was necessary for the user to be able to get their bearings as far as the mission’s location in relation to the gas stations (or restaurants). If the mission map is shown by itself (without the gas stations or restaurants), then there is no need to have the map button, so it is hidden.

Each of my apps so far in this class has been sorely missing a help screen, at least in the first version. This app has a help screen already, so that is covered. It was hard to read over the picture of the mission, though. To solve this problem I added blocks to the Help button click event which set the screen background color to white and the background image to a semi-transparent blue image I created in Fireworks. The effect is pretty cool, I think, but I had to remember to get rid of those two setting and put it back to “normal” when the user clicks out of the help screen (clicking the OK button).

DUSanAntonioMissionTourMy favorite part of this app is a simple little trick I learned. In earlier apps I decided to use icons for buttons because the text-on-color options with the backgrounds available in App Inventor 2 seem so stark to me. The two buttons on the home page, though, require text. To solve this problem, I used the same semi-transparent image that I used on the help screen as the button backgrounds. All three buttons on the home screen have this background, which gives it the appearance of one menu bar-type menu, and the screen background (mission photo) is visible behind the buttons. Such a simple thing, but I was thrilled that it actually worked!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s