Explore MIT App Inventor - App Inventor 2

Pizza Party with Fusion Tables for App Inventor 2

joanie — Thu, 08 Aug 2013 15:19:00 +0000

In this tutorial, you will create an app that lets people enter food orders for a pizza party. Orders are stored in a Fusion Table, providing one easy to access place for the data. By reading from the table, the app can easily display the orders that have been entered.

A Fusion Table is a Google service to support the gathering, managing, sharing, and visualizing of data. Data are stored in multiple tables on Google's cloud. Individual tables can be merged (or fused) if they contain a common column, and they can be easily visualized on maps and in various kinds of charts and graphs. All of the data are stored in a public table that can be accessed via Google Drive, and allows different users** to add information to the tables. Coupled with a location sensor, an App Inventor app could post periodic updates of each user's location to a public fusion table. Users could post notes to mark noteworthy locations. For example, a team of botanists could use a Fusion Table app to create an annotated catalog of the trees or plants within a certain geographical area.

This tutorial introduces:

Using the FusionTables component
Using a WebViewer component

This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the Blocks Editor to specify the app's behavior. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

IF YOU DOWNLOAD THE SOURCE CODE you will need to supply your own API KEY, your own Table ID, and your own TABLE URL in the global variables in the blocks editor. This source code will not work without these additions.

Creating your own Fusion Table

Creating your own Fusion Tables is as easy as creating a Google document, if you are familiar with that process.

On the web, login to your Gmail account or any other Google service (e.g., Drive, YouTube).
Select the More > Even more menu and scroll to the bottom of the page of Google services where you will find the Fusion Tables service under "Innovation", click on the Fusion Tables link.
Click "Create New Table"
You will be given three options for the new table: "From this computer", "Google Spreadsheets", or "Create an empty table". For the purposes of this tutorial, select Create an empty table.
You will see that the new table automatically comes with four columns. Change the column names for your Pizza app by going to Edit > Change Columns.You'll rename the four default columns to Date (type=Date), Name (type=Text), Pizza (type=Text), Drink (type=Text). Click save and then add a fifth column by going to the Edit > Add Column. Name this fifth column Comment (type=Text). .
Leave this window open so that you can come back and get the URL, which you'll need when you set up the properties of the WebViewer component in your app.
Click on the Share button (top right) to modify the table's permissions. For this tutorial, you can specify a few friends who will use the app. Only people who are explicitly given permission will be able to enter pizza party preferences through your app.

Another way to create a new table: go to Google Drive. Click the Create button, then go to More > Fusion Table. The picture at right shows what the Create button's menu should look like. If you do not see Fusion Table in your menu, then you may need to contact your school's network administrator. (See Troubleshooting section at the bottom of this page.)

NOTE about Sharing Fusion Tables: To share a FusionTable with others, you have to share it with each person individually, or you can share with a Google Group (see footnote at the end of this tutorial), the same way you would share a private google doc. There is no way to share write privileges to a FusionTable with the public. Public access is restricted to read-only.

Getting an API Key

In order to use the FusiontablesControl Component you need to acquire a Google Applications Programming Interface (API) key, an API Key. To get an API key, follow these instructions:

Go to your Google APIs Console and login if necessary.
Select the Services item from the menu on the upper left.
In the list of services, find the Fusion Tables API service and click the toggle button that currently says "off".
Read and agree to the terms of service. When you return to the APIs Console page you'll see that the on/off switch next to Fusion Tables API is now "On" and green.
Go back up the menu on the upper left of the screen and select the API Access item.
Your API Key will be in the rectangular box in the section called "Simple API Access". You will need set the "API Key" property of the Fusiontables Control component in any app that you make that uses Fusion Tables. (More info below.)

Building the App

Connect to the App Inventor web site and start a new project. Name the new project PizzaParty, set the screen's orientation to Portrait and uncheck the Screen's scrollable property. You may also wish to set the Screen's Title property to something other than 'Screen 1'.

The User Interface

In addition to the FusiontablesControl component, the Pizza Party app makes use of several other types of components. It is assumed that you have learned how to use these in previous lessons. Use the component designer to create the interface for the Search Party. When completed, the designer should look like this:

The components are:

Component Type	Palette Group	What you'll name it	Purpose of Component	Settings of Component
Label	Basic	LabelName	Shows the text "Your Name:"
TextBox	Basic	TextBoxUserName	Gets input from user	Set the width property to Fill Parent
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Contains Name Label and Textbox
ListPicker	Basic	ListPickerPizza	Accesses the list of available pizza types	Set the Width property to Fill Parent Set the Text property to "What type of pizza?" Set the ElementsFromString to "Cheese, Pepperoni, Anchovies, Hawaiian"
ListPicker	Basic	ListPickerDrink	Accesses the list of available drinks.	Set the Width property to Fill Parent Set the Text property to "What type of drink?" Set the ElementsFromString to "Coke, Diet Coke, Sprite, Ginger Ale"
Label	Basic	LabelComment	Shows the text "Comments:"
TextBox	Basic	TextBoxComments	Takes user input	Set the width property to Fill Parent
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Contains Comments Label and Textbox
Button	Basic	ButtonSubmit	Adds new data to the public fusion table	Set the Text to "Submit" Set the width property to Fill Parent
WebViewer	Not ready for prime time	WebViewer1	Displays Fusion Table	Set width and height properties to Fill Parent
FusiontablesControl	Not ready for prime time	FusiontablesControl1	Manages interactions with the app's Fusion Table
Clock	Basic	Clock1	Used to provide a timestamp each time an order is placed.
Notifier	Other stuff	Notifier1	Notifies the user of any errors

Determining your Fusion Table URL and Table ID

In the blocks editor, you will set the WebViewer component's HomeURL property to point to the URL of your table. To find your Fusion Table's URL:

In your browser, navigate to the new Fusion Table you just created.
Go to the menu and select Tools > Publish.
You'll see a notice saying: "This table is private and will not be visible". Click the blue link that says "Change Visibility".
In the list of "Who Has Access", click the blue "Change..." link next to "Private - Only people listed below..."
Choose"Public on the Web" or "Anyone with the link". Either of these settings will work for this tutorial. In the future, you should decide this setting based on the sensitivity of your data.
Click the green Save button, then the blue Done button.
Back on the Fusion Table page, go to the menu bar and select Tools > Publish. Select the URL from the top text box (labeled "Send in an email or IM"), copy the URL and return to App Inventor. You will paste the URL into the definition block for the TABLE_URL (see below).
The Table ID of the fusion table is contained within the URL after the plus sign. Look for "from+" and then copy all of the characters after the plus. This is the Table's ID. You can also find the Table ID by browsing to your table, then selecting File>About this table in the menu.

Blocks Editor

Open the Blocks Editor so you can program the app's behavior. First, you will describe the app's variables. Variables whose names are ALL_CAPS are constants -- that is, variables whose values do not change while the program is running. It is good to get into the habit of using this naming convention. Define the following variables and give them the initial values shown in the table.

Variable Name	Initial Value	Purpose
TABLE_URL	text	Initialize this global variable to the "published" URL of your fusion table. See instructions above.
TABLE_ID	text	Initialize this global variable to your table ID (e.g. a long string of characters unique to your fusion table). See instructions above.
API_KEY	text	Initialize this global variable to your own API Key for Google Fusion Tables. See instructions above.
UserName	text	Records the name of the user.
pizza	text	Stores the pizza choice input by the user.
drink	text	Stores the drink choice input by the user.
comment	text	Stores the comment input by the user.

Initializing the App

It is important to perform some initialization steps whenever the app is started. These are done in the Screen1.Initialize block. For this app we need to set the initial values for the FusionTable component's API Key property (set to global API_KEY) and the WebViewer component's HomeURL property (set to global TABLE_URL). We also tell the app to forget the user's login credentials. This will prompt the user to login to their Google account and give permission to the app to access the Fusion Table. This authentication step will happen only once when the app first tries to access the Fusion Table. Remember, Fusion Tables are only writeable by users who have been given permission by the table's owner. You specify this in the Sharing settings for the Fusion Table (easy to do from the Google Drive webpage.)

Set up the resetForm procedure as shown below. After recording an entry, this procedure resets the interface back to the original state.

List Picker Blocks

In the designer, you set the choices for the pizza and drink types by filling in the "Selection" property with comma separated lists. These pre-programmed choices will be displayed on the user interface so the user can select their food and drink. Their selections are stored in the pizza and drink variables.

Submitting Data

Once the user has entered their name, food choices, and comments, they will click the Submit button. The app tests to make sure that the name, pizza, and drink fields have values in them, and prompts the user to try again if any of the required answers are missing. Notice that the text = block is used (find it under Built-in palette, Text drawer). This block compares two strings of text to see if they are equal. If all required information is present, it calls the procedure InsertDataInTable (see below). The blocks for the ButtonSubmit.Click are shown here:

Inserting Data into the Fusion Table

The FusiontablesControl component is used to send the data to the Fusion Table. This action will create a new row in the Fusion Table, setting the values of the various columns involved. App Inventor makes this easy to do, but you have to be careful that the insert query is formatted correctly.

This procedure involves two steps: (1) constructing the insert query and then (2) sending the query to Google's Fusion Table service. The query we want to send will take this format:

INSERT INTO
(, , ...) VALUES (, , ...)

The words in CAPS are part of the query's syntax. The words in parentheses are values that we need to plug in. First there is a list of (column names) followed by VALUES followed by a list of (value names). The order of the column names and value names must be in the same order so that they match up. An example of what this might look like is shown below. Notice that the values must be enclosed in single quotes:

INSERT INTO 191GHtZ_B2 (Name, Date) VALUES ('Sam', '10/10/2012')

First, setup a new Procedure With Result that takes a string and returns it surrounded by single quotes. The procedure quotify is used in the InsertDataInTable procedure to place quotes around all of the values in the query. It also takes care of "escaping" any single quotes or apostrophes that are input by the user. You can send single apostrophes as part of a value in the query, so the "replace all" block adds an extra single quote. Two single quotes in a row are interpreted as one single quote.

To construct the query we use App Inventor's join text block. Be sure to put spaces where needed, such as before and after the words INSERT INTO and VALUES:

For this app, the column names must match the column names of the table we created earlier (with columns Date, Name, Pizza, Drink, Comment). Their respective values are taken from the procedure's global variables. Note: If you did not use these exact words for your table's columns, then be sure to use your table's column names when you build your query.

Don't forget the FusiontablesControl.SendQuery command at the very end of this procedure. It's small in size compared to rest of the procedure, but very important.

Handling the Response from the Fusion Tables Service

The FusiontablesControl.GotResult event will be fired when the app receives a response from Google's Fusion Tables Service. For an insert query the service will return the rowID of the new row that was inserted or an error message if something went wrong. In this simple example, we use the "contains" block ( (find it under Built-in palette, Text drawer) to check whether the result string has the rowID in it. If so, then we know that the rowID was received, and we then invoke the WebViewer.GoHome procedure, which reloads the "HomeURL" as specified in the WebViewer's properties. Note that this set of blocks also calls the resetForm procedure. After recording an entry, it resets the interface back to the original state.

You're done! Package the app by going to Package for Phone on the Designer. You can now test the App for the purposes of the pizza party. Once you understand this tutorial, you'll be ready to make new Fusion Tables and modify the app to collect different types data from users. Remember, you have to give each user permission to access the Fusion Table. You do this through the Google Fusion Tables interface, not through App Inventor. Luckily, this means you don't have to change the app in order to add more users who can access the table.

Challenges

This app has the Fusion Table hard-coded into the blocks. Find a way to let users specify their own fusion table ID so that they can host their own Pizza Party.

Variations

Now that you have a simple app that uses fusion tables and a webviewer working, you might want to build some other apps with Fusion Tables. For example:

Include a LocationSensor so that the user's location can be added to the Fusion Table to create a map with notes
Make the WebViewer display something other than the table of stored values; perhaps a map or a chart

Troubleshooting

If you are using a Google Apps for Education account, and you are not able to create a new fusion table (in the "Create" menu of Google Drive you won't even see an option for Fusion Tables), you will need to ask your system administrator to turn this option on for you. Or, you can switch to a standard gmail account. Fusion Tables are not automatically turned on for Google Apps for Education Accounts, your system administrator must make Fusion Tables available to the accounts in your domain.

If you are receiving errors when trying to submit to the Fusion Table, especially if the error mentions Authentication, be sure that you have put the correct API Key into the API Key property field on the FusionTables component in the Design Window.

To familiarize yourself with fusion tables, have a look around the Fusion Tables Web Site. Check out the example gallery to see what kinds of things are possible. Work through this Fusion Table tutorial, which shows how import some data, create a Fusion Table, and view the data on a map with your browser. You'll need to log in with your Google account.

To share a FusionTable with many people, rather than by entering email addresses individually, you can create a dedicated Google Group for your app and let all the app users know how to join the group (maybe through the web page for your app). From the moment you create your app, you share the Fusion Table once with your Google Group (using its email address), and make sure to give to the group editing rights. Every user who joins the group will inherit the editing rights automatically.

Done with PizzaParty? Return to the other tutorials.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source. Remember to add in your API KEY and Fusion Table information in the Designer and blocks.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

Mini Golf: Fling, TouchUp, TouchDown Gestures for App Inventor 2

joanie — Wed, 07 Aug 2013 14:13:24 +0000

This Mini Golf App demonstrates how to use the Fling, TouchUp, and TouchDown gestures for Sprites
Note that these event handlers are also available for the Canvas.

To play this mini golf app, the player first positions his/her ball within the confines of the tee, and then flings the ball toward the hole. The ball will bounce off of the rectangular obstacle and the sides of the course. For each fling of the ball, the stroke count goes up by one. The total score is the number of strokes it takes to complete the entire course.

This tutorial covers:

Using the Sprite component and the TouchUp, TouchDown, and Flung events
Using a Clock component
Dynamic Positioning of sprites on a canvas, based on the size of the screen
Sprite Collisions

Part I: Start a new app and make a ball that responds to fling events

We'll build this app in stages, adding a little bit of the game at a time. Log into App Inventor and start a new project. Name it "MiniGolf". When the Design window opens notice that App Inventor automatically names the screen "Screen1", but you can set the Title of the screen, which will show up in the top bar of the app. Think of a title related to Mini Golf, or feel free to use the suggested title "Fling It Mini Golf", and type it into the Properties pane on the right side of the Designer.

In the Screen Properties (shown in right-hand pane): Uncheck the checkbox labeled "Scrollable" so that the screen will not scroll when the app is running. Screens that are set to scroll do not have a height. We’ll need our screen to have a defined height in order to set up the golf course properly.

Add the following components in the Designer:

Component Type	Palette Group	What You'll Name It	Purpose	Properties
Canvas	Basic	Canvas1	The canvas serves as the golf course	Height: 300 Width: FillParent BackgroundColor: Green (or whatever you like!)
BallSprite	Animation	GolfBall	This is the ball the player will fling to try to hit the Hole	Radius = 10 Color: White (or your choice!) Speed: 0 Interval: 1 (ms) Z = 2 (when sprites are overlapping, the one with the higher z will appear on top)
BallSprite	Animation	Hole	This will be the target for the GolfBall	Radius = 15 Color: Black Speed: 0
Clock	Basic	Clock1	The clock will fire continuously to control the movement of the ball	Timer Always Fires Timer Enabled TimerInterval: 100

Open the Blocks Editor

Program the behavior of the Ball:

First, use the GolfBall.Flung event handler to move the golf ball when it is flung. Notice how this event handler takes in 6 different arguments:

x, the x position on the Canvas grid of the user's finger
y, the y position on the Canvas grid of the user's finger
speed, the speed of the user's flinging gesture
heading, the direction (in degrees) of the user's fling gesture
xvel, the speed in the x direction of the user's fling
yvel, the speed in the y direction of the user's fling

Essentially, you want to set the GolfBall sprite’s speed and heading to match the speed and heading of the player’s fling gesture. You may want to scale up the speed a little bit because the speed of the fling is a little slower than how a golf ball would move. You can play with this "scaling factor" to make the ball more or less responsive to a fling.

Program the behavior of the clock:

Use timer event to slow ball down so it doesn’t bounce around forever.

Each time the clock fires, it will reduce the speed of the ball slightly. Notice that if the ball is not moving then these blocks will do nothing. If you don’t have this then the ball will just bounce forever.

You'll need to use the if mutator function to change the if block into an if-else block. For a summary of mutators, check out the Mutators page

Program a new procedure called SetupNewHole:

This procedure will be called when a hole is scored and the ball has to be placed back at the starting point. Note that the Hole.MoveTo block sets the hole up in a new random location for the next play.

Program the Behavior of the Hole: When the ball collides with the hole, the ball disappears and resets at the bottom of the screen.

Note: When you first drag out the GolfBall.CollidedWith event handler, the named parameter is called "other". Notice that the if then block tests to see if the object involved in the collision with the golf ball (other) is the black ball sprite representing the hole. You can't just put a text block with the word "Hole" in it, you must use the component Hole block, that can be found in the drawer for the Hole image sprite. Do not use a text block here.

Test this Behavior. Connect your device to AppInventor, or start the emulator to load your app. When you fling the ball it should move in the direction of your fling, with a speed similar to the strength of your fling. The ball should slow down as it moves, eventually stopping. When the ball hits the hole, the ball should reset at the bottom of the screen and the hole should move to a new random location.

Does your ball get stuck if it hits the edge?

This is easy to fix with the when EdgeReached event. Note that you can find the "edge" value block by using a get block and selecting "edge" from the dropdown.

Double check to make sure your code is right: fling the ball a few times and see that that ball now bounces off the edges of the course.

Part II: Keeping Score

Games are more fun if you have a way to see how you’re doing. Let’s add a stroke counter. In mini golf your score goes up as you take more strokes. The goal is to have the lowest score possible. Let’s show the player how many strokes she or he has taken on this hole. Let’s also show the number of strokes taken during the whole game.

Go back to the Designer and set up the following components:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
Horizontal Arrangement	Screen Arrangement	HorizontalArrangement1	Contains LabelScore and LabelStroke	Place at top of screen
Label1	Basic	LabelScore	Displays the total stroke count for the entire game
Label2	Basic	LabelStroke	Displays the stroke count for the hole the player is currently on

In the Blocks Editor, you can program updates to the Score and Stroke labels. First, set two new global variables called StrokeCount and Score, and set their initial values to 0.

Then add the following blocks to the GolfBall.Flung event (red rectangle indicates new blocks):

Next add the following blocks to the Event that handles the ball hitting the hole:

Test the behavior. With these new changes, you should have a "Total Strokes" count and "This Hole" count at the top of the screen. When you fling the ball, the "This Hole" count  and "Total Strokes" count should both increase by one, and when you make the ball go into the hole the "This Hole" count should reset to 0.

Part III: Positioning Ball on Tee using TouchUp and TouchDown events

Ok, so now you’ve got a working game! Now let’s make it a little more interesting and fun. First we’ll add a Tee and let the player position the golf ball on the tee before they fling the ball.

Go back to the Designer and add three new image sprite components:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
ImageSprite	Animation	Tee	A rectangular area in which the player can position their ball before teeing off.	Upload the Tee image (right click on this link, or see below).
ImageSprite	Animation	LeftSprite	This is a left pointing arrow that the player will use to move the ball to the left on the tee	Upload the left arrow graphic (right click on this link
ImageSprite	Animation	RightSprite	This is a right pointing arrow that the player will use to move the ball to the left on the tee	Upload the right arrow graphic (right click on this link

Program the size of the canvas, and the placement of the ball and image sprites on the canvas:

First, program the setup of these components on the screen. It’s best to accommodate all different screen sizes by placing the sprites on the screen relative to the size of the screen. The blocks below show how to set up the screen dynamically so that everything fits the right way. We start off by making the canvas size based on the screen size, and then we place each sprite in relation to the width and height of the canvas. We'll make a procedure to do this for us. Try to understand all of these blocks before you move on.

Position the Golf Ball on the Tee using TouchUp and TouchDown on the Arrow sprites:

To handle this, first set up two global variables that are toggled each time an arrow is pressed.

Program the behavior of the Right and Left Arrows

The left and right arrows are image sprites, so they come equipped with the ability to know when the player is is holding his/her finger down on them. The following blocks toggle the global variables based on whether the user is pressing either of these arrows.

Procedure MoveBallOnTee:

Make a new procedure MoveBallOnTee that makes the golf ball move left or right on the tee depending on the global variables. Although the math here looks complicated, it’s pretty simple. If the ball is supposed to move left, you first check to make sure that moving the ball 2 pixels left will not exceed the left-most coordinate of the Tee. If moving the golf ball to the right, you first check that moving the ball right 2 pixels will not move it past the right-most coordinate of the Tee.

Note: if blocks look different in this image than on your own screen, this is because they were aligned differently. If you right click on the blocks, a list of options will appear and one of them is external inputs. When you select this, it will change how the blocks are configured. It does not change how the blocks function. If you want to change this, right click again and select internal inputs.

MoveBallOnCourse Procedure

Note that the blocks that we had inside the Clock1.Timer event are now moved over to a new procedure called MoveBallOnCourse:

On each new course, players can position the ball on the tee before attempting to fling the ball toward the hole. To program this, you first have to check to make sure this is a new course and the ball has not been flung yet. If StrokeCount = 0 then we know this course is brand new and the player has not yet attempted to get the ball into the hole.

As the blocks above show, after verifying that the StrokeCount is 0, you then want to proceed to move the golf ball left or right depending on which arrow is being pressed.

Test the behavior. Make sure your app is doing what you expect: play the game on your device or emulator. Before you tee off, are you able to move the ball left and right on the tee by using the left and right arrows? After you tee off, you should no longer be able to use the left and right arrows (pressing them will do nothing). After the ball goes into the hole and the screen resets, you should then be able to move the ball left and right on the tee before teeing off again.

Keep track of the number of holes played, and allow a game reset

The game is working pretty well now, but what about giving the player a way to reset the game? Also, it would be nice to give the player some instructions so they know how to play the game. While we’re at it, let’s also give an indication of how many holes the player has completed. Add the following components in the Designer:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
Horizontal Arrangement2	Screen Arrangement	Horizontal Arrangement2	Contains the NewGame button and the HoleNum label
Button	Basic	ButtonNewGame	Resets the game to Hole #1 with a score of 0.	Text: "New Game"
Label3	Basic	LabelHoleNum	Displays the current hole number, increments by one each time a hole is completed.	Text = "Hole # 1" Font: bold, 28, blue
Label4	Basic	LabelInstruct	Displays instructions	Text = "Use arrows to position ball on tee. Hit the ball by flinging it with your finger."

Define a new global variable to keep track of the Hole Number:

Add the following blocks to the SetupNewHole procedure: set global HoleCount and set LabelHoleNum.Text...

Program the "New Game" button’s behavior, which is pretty simple. When the button is pressed, set up a new course and reset both the hole stroke counter and total stroke counter to zero. Also set the hole number back to 1, by displaying "Hole #1" in LabelHoleNum. The blocks look like this:

Test the behavior.

Go back to your device or emulator and play the game some more. Now you should see the Hole # displayed in the lower right. Hitting "New Game" button should reset the game, returning both scores to 0, resetting the screen, and setting the Hole number to #1.

Part IV: Introduce an Obstacle

Most mini golf courses have obstacles on them. Let’s add a simple rectangular obstacle that will randomly position itself on the course somewhere between the Tee and the Hole. Each time a new course is presented, the obstacle will move, just the same way the Hole moves each time a new course is set up.

Add the following component in the Designer:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
ImageSprite	Animation	ObstacleSprite1	This sprite will be somewhere between the golf ball and hole and will make it harder to get the ball into the hole	Upload the obstacle (rectangle) graphic (right click on this link, or see below).

Program the behavior of the obstacle in the blocks editor. First, set the behavior for when the ball hits the obstacle. *Note: Using Heading = 0 - heading works because we are dealing with bouncing off of horizonal surfaces, this will not work for bouncing off of vertical or inclined surfaces. For our purposes, it works all right. See Challenge #2 below for more information.

Each time the course is reset, position the obstacle will be positioned randomly. Add these blocks to the SetupNewHole procedure:

Test the behavior. Play the game again. Notice that the ball bounces off when it hits the obstacle. When the ball goes into the hole, or when the New Game button is pressed, the obstacle appears in a new location somewhere between the tee and the hole.

That’s it! Share your game with friends by building an APK or by downloading the source and sharing the zip file with other App Inventors!

Part V: Challenges

Here are some extra challenges to make your game better.

Challenge 1: Program the Ball to Hole collision so that the ball only goes into the hole if the golf ball’s speed is not too fast. In real mini golf, the ball will bounce right over the hole if you hit the ball too hard.

Challenge 2: There is a slight bug when the ball hits the vertical sides of obstacle. Figure out how to program the ball to obstacle collision so that it bounces the way you would expect when the ball hits the vertical sides.

Challenge 3: Limit the number of holes per game. Keep track of the number of holes and end the game after a set number. (A typical mini golf course has 18 holes.)

Below is a summary of all of the components:

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with Mini Golf? Return to the other tutorials.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

PaintPot (Part 2) for App Inventor 2

joanie — Tue, 16 Jul 2013 14:33:50 +0000

This tutorial has two parts: Part 1 | Part 2

Part 2 extends Part 1 of the tutorial to create both large and small dots, as a demonstration of how to use global variables.

Starting

Make sure you've completed the Set Up process and you have your completed project from PaintPot Part 1 loaded.

Start where you left off at the end of Part 1, with the project open in App Inventor. Use the Save As button to make a copy of PaintPot so you can work on the new version without affecting the original version. Name the copy "PaintPotV2" (with no spaces). After saving a copy, you should see PaintPotV2 in the Designer.

Creating variables

The size of the dots drawn on the canvas is determined in the when DrawingCanvas.Touched event handler where call Drawing.DrawCircle is called with r, the radius of the circle, equal to 5. To change the thickness, all we need to do is use different values for r. Use r = 2 for small dots and r = 8 for large dots.

Start by creating names for these values:

Open the Blocks Editor if it isn't already open and connect the phone. Your phone should show the buttons and the canvas you built previously.
In the Blocks Editor, in the Built-In column, open the Variables drawer. Drag out a initialize global name to block. Change the text that reads "name" to read "small". A yellow warning exclamation mark might appear on the block. If you mouse over this you'll see a warning message explaining that the block has an empty socket.
You need to fill in the socket with a number block that specifies the value for "small" -- use 2 as the value. To create the number block, type the number 2. A menu will appear, showing you all the possible blocks that include "2" in their name. Click on the first one, which is the number 2 itself, and a number block with the value 2 should appear. Plug that in to the initialize global small to block. The yellow warning mark will disappear, because the empty socket has been filled. (The second value listed in the menu is the math block atan2 which you won't use here.)

Here are the steps in the sequence:

You've now defined a global variable named small whose value is the number 2.
Similar to small, define a global variable big, whose value is 8.
Finally, define a global variable dotsize and give it an initial value of 2.

You might wonder whether it would be better programming style to make the initial value of dotsize be the value of small rather than 2. That would be true, except for a subtle programming point: Doing that would be relying on the assumption that small will already have a value at the point in time when dotsize is assigned its value. In App Inventor, you can't make assumptions about the order in which different def blocks will be processed. In general, of course, you really would like to specify the order in which variables are assigned. You can do this by assigning all values when the application is initialized, using the Screen initialize event. The Quiz Me tutorial gives an example of initialization.

Using variables

Now go back to the touch event handler you set up in Part 1 and change the call to DrawCircle block so that it uses the value of dotsize rather than always using 5.

In the Blocks Editor, switch to the My Blocks column, and open the Variables drawer. Pull out a get block and click on the dropdown. You should see three new variables in the dropdown: small, big, and dotsize

These blocks were automatically created and put in the dropdown of get and set variable blocks, similarly to the way that x and y were created in the dropdown when you defined the when DrawingCanvas.Touched event handler in the part 1 of this tutorial. "Global" means "global variable", in contrast to the event-handler arguments, which are considered "local variables". The difference is that the argument values are accessible only within the body of the event handler, while global variables are accessible throughout the entire program.

Go to the when MyCanvas.Touched event handler and replace the number 5 block in call DrawCircle with the get dotsize block from the Variables drawer.

Changing the values of variables

Now set up a way to change dotsize to be small (2) or big (8). Do this with buttons.

In the Designer, drag a HorizontalArrangement component into the Viewer pane below the DrawingCanvas component. Name the component "BottomButtons".
Drag the existing ButtonWipe into BottomButtons.
Drag two more button components from the Palette into BottomButtons, placing them next to ButtonWipe.
Name the buttons "ButtonBig" and "ButtonSmall", and set their Text to read "Big dots" and "Small dots", respectively.
In the Blocks Editor under My Blocks, create a when ... Clicked event handler for ButtonSmall that changes dotsize to be the value of small. To change dotsize use the set global dotsize to block from the MyDefinitions drawer and plug in the global small block.
Make a similar event handler for ButtonBig.

The two click event handlers should look like this:

You're done! You can draw in PaintPot and use the new buttons to draw either big dots or small dots. Notice that dragging your finger still produces a thin line. That's because the changes we just made don't affect how DrawLine is called.

Here's the finished program in the Designer:

and in the Blocks Editor:

A bug for you to work on: The program you just built has a slight bug. If you start drawing before pressing any of the paint buttons, the paint color will be black; however, after you choose a color, there's no way to get back to black. Think about how you could fix that.

Review

You create global variables by using def blocks from the Variables drawer.

For each global variable you define, App Inventor automatically supplies a global block that gives the value of the variable, and a set global ... to block for changing the value of the variable. These blocks can be found in the Variables drawer.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with PaintPot? Return to the other tutorials here.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Basic

Tutorial Type:

Drawing Canvas

PicCall for App Inventor 2

aaron — Wed, 03 Jul 2013 14:50:54 +0000

PicCall shows you how you can use App Inventor to make apps that do actual things, like calling friends.

This tutorial assumes that you have completed the Set Up process.

Before starting

To run PicCall, your phone must be set up and activated for making phone calls. If it isn't you can still build PicCall for practice, but the phone won't actually make the calls.

Warning: PicCall does not work on all Android phones in the current implementation of App Inventor: you'll get an error notice on some phones when you try to pick a phone number. Also, you won't see all your contacts — only those created from Gmail. These limitations will be removed in the future.

In this tutorial, unlike HelloPurr, you'll give names to components, rather than just using the default names that App Inventor provides (like "Button1"). Using meaningful names is good programming practice: it helps you keep your programs straight in your own mind, and it helps others understand your programs.

Your phone should also contain a few contacts with pictures. You can use the Contacts app to save pictures for your contacts. You can also click on Contacts in your Gmail account on your computer and add pictures there.

Make sure your computer and your phone are set up to use App Inventor. Start a new project in the Designer window. Name it "PicCall" and change the screen Title to PicCall. Open the Blocks Editor, click Connect to Companion, and check that the phone has started the App Inventor app.

Getting started

Start out just like in HelloPurr by placing a button on the screen. Make the button 150 pixels wide and 150 pixels high. Set button's Image to a picture. You may as well use the picture of the kitty if it's handy -- you'll be changing the picture soon. Set the Text of the button to "Press to Call", although you'll be changing that soon as well.

Change the name of the Button component to "TopButton" (you'll make one called "BottomButton" later in the tutorial). To change a component's Name, click the Rename button in the Components panel and enter the new name.

In this tutorial, unlike HelloPurr, you'll give names to components, rather than just using the default names that App Inventor provides (like "Button1"). Using meaningful names is good programming practice: it helps you keep your programs straight in your own mind, and it helps others understand your programs.Don't confuse the Name of a component with the Text of a component. The Text is what appears on the screen. The Name is the name your program uses to refer to the component. You'll see the name in the Components structure list in the Designer and on the drawers in the Blocks editor.

Making phone calls

In HelloPurr, you made the phone play a sound when the button was clicked. PicCall in almost the same, except that instead of playing a sound, the phone makes a call.

App Inventor's PhoneCall component makes phone calls. You can find PhoneCall in the Social section of the Palette. Open that section and drag out a PhoneCall into the viewer. It will go into the Non-visible components area. Name it "TopCall". The PhoneCall's PhoneNumber property determines the number to call. Set that to some 10-digit phone number you'd like to call. Here's how the Designer should look:

Now switch to the Blocks Editor and pull out the when TopButton.Click do block. In the do slot, place a call TopCall.MakePhoneCall block from the TopCall drawer, so that the event handler looks like this:

Go ahead and test what you have so far on the phone: Press the button and make the call. You could package this up as an app right now. It would be a pretty limited app, always calling the same fixed number, some people might find that useful.

Phone contact information

In addition to making phone calls, App Inventor apps can also get information from the phone's contact list. You do this with the PhoneNumberPicker component.

Pull out a PhoneNumberPicker component from the Social section of the Palette, place it under TopButton. A PhoneNumberPicker is a kind of button: when you press it, it brings up your phone contacts list and lets you pick someone. Change the name of the PhoneNumberPicker to "TopPick", and change its Text to "Press to pick a number to call". Try it by pressing the picker on your phone: you should see your contacts come up, and you can pick one. Nothing will happen after you pick, because you haven't yet told the components to do anything. You'll do that next.

Using the picker

Switch to the Blocks window and open the drawer for TopPick. Drag out the when TopPick.AfterPicking do block. This lets you define an event handler that says what to do after you've picked a number from your contacts.

Now open the TopCall drawer and drag out set TopCall.PhoneNumber to and fit it into the slot in the when TopPick.AfterPicking do block. Now drag out TopPick.PhoneNumber from the TopPick drawer and plug it into the empty socket. Here's how your event handler should look:

Try it on the phone: Press the picker, choose a contact and a phone number. Then press the phone call button to make the call. Add a command to the event handler to set TopButton's Text property to TopPick.PhoneNumber:

Pictures

If you have a picture stored with your contacts, you can make the button show that along with the phone number, rather than always using the picture of the kitty. To do this, add an command to the event handler, to set the Image property of TopButton to be the the Picture property of TopPick:

PhoneNumberPicker has two properties that are easy to confuse: Picture and Image. Picture is the picture associated with the contact that's picked. Image is the image of the PhoneNumberPicker component as it appears in the Designer and on the phone.

Enhancements

Here are some variations for you to try:

Add a second button, BottomButton, and a second PhoneNumberPicker, so that your app gives you the choice of two numbers.
Add a label with instructions on how to use the app.
Show the name of the person being called in addition to the phone number. Use an extra label to show the additional information.

Using PicCall

You can package PicCall and download it to the phone so you can use it when you're not connected to the computer. But there's a big limitation: Every time you restart PicCall, it starts fresh and does not remember what you picked last time. Later, we'll see how to use the TinyDB component to create apps that can remember information from one time to the next. Such information is called persistent data.

Review

Here are the key ideas covered in this tutorial:

You can name components by means of the Rename button.
App Inventor has components that can use information stored on the phone. The PhoneNumberPicker can get phone numbers and pictures for your contacts, and PhoneCall can make calls.

Tip: The list that comes up when you run the phone number picker does not show the pictures associated with your contacts, on some Android systems. Even though the image isn't shown, the "Picture" property will still return a picture that will show up when you run the app, provided that the phone has a picture for that contact.

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with PicCall? Return to the other tutorials here.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Basic

PaintPot (Part 1) for App Inventor 2

joanie — Wed, 03 Jul 2013 14:47:23 +0000

This tutorial has two parts: Part 1 | Part 2

This tutorial introduces the Canvas component for creating simple two-dimensional graphics. You'll build an app that lets you draw on the phone screen in different colors.

Historical note: PaintPot was one of the first programs developed to demonstrate the potential of personal computers, as far back as the 1970s.

Download Book Chapter PDF

What you're building

With the PaintPot app, you can:

Dip your finger into a virtual paint pot to draw in that color.
Drag your finger along the screen to draw a line.
Tap the screen to make dots.
Use the button at the bottom to wipe the screen clean.
Include an image as a drawing background.

This tutorial assumes that you have completed the HelloPurr tutorial. This tutorial introduces the following App Inventor concepts:

The Canvas component for drawing.
Controlling screen layout with Arrangement components.
Event handlers that take arguments.
Variables.

Before starting

Make sure your computer and your phone are set up to use App Inventor. Start a new project in the Designer window, and name it "PaintPot". Open the Blocks Editor, click Connect to Phone, and make sure the phone has started the App Inventor app.

Screen title

To get started, go to the Properties panel on the right of the Designer and change the screen Title to "PaintPot". You should see this change on phone, with the new title showing in the title bar.

There are three names in App Inventor, and it's easy to confuse them:

The name you choose for your project as you work on it (in this case, PaintPot). This will also be the name of the application if you package it for the phone.
The name "Screen1", which is the name of the Screen component. You'll see it listed in the Components panel in the Designer. You can't change the name of the first Screen component in the current version of App Inventor but you can create additional screens with names of anything you should choose.
The Title property of the screen, which is what you'll see in the phone's title bar. Title is a property of the Screen component. The Title starts out being "Screen1", which is what you used in HelloPurr. However, you can change it, as you're doing for PaintPot. To reiterate, the name and the title of Screen1 are initially the same, but you can change the title if you want.

Set up the Components

You'll use these components to make PaintPot:

Three Buttons for selecting red, blue, or green paint, and another button for wiping the drawing.
A Canvas, the drawing surface. This canvas has a BackgroundImage, which is this kitty from the HelloPurr tutorial. You can also draw on a blank canvas. That's just a canvas without a background image.
There's also a component you don't see: you use a HorizontalArrangement to make the three color buttons line up.

That makes five components in all. Let's get them and build the app.

Color Buttons

Drag a Button component onto the Viewer and change the button's Text attribute to "Red" and make its BackgroundColor red.
Click on Button1 in the components list in the Viewer to highlight it (it might already be highlighted) and use the Rename... button to change its name from "Button1" to "ButtonRed".
Similarly, make two more buttons for blue and green, named "ButtonBlue" and "ButtonGreen", placing them vertically under the red button.

Here's how this should look in the designer, with the button names appearing in the list of project components. In this project, you're changing the names of the components rather than leaving them as the default names as you did with HelloPurr. Using meaningful names makes your projects more readable to yourself and others.

You should also see the three buttons on the phone screen.

Layout with Screen Arrangement

You should now have three buttons, one above the other. The next step is to make them line up horizontally. You do this using a HorizontalArrangement component.

From the Palette's Screen Arrangement category, drag out a HorizontalArrangement component and place it under the buttons. Change the name of this component from "HorizontalArrangement1" to "ThreeButtons".
In the Properties panel, change the Width of ThreeButtons to "Fill Parent..." so that it fills the entire width of the screen.
Move the three buttons side by side into the HorizontalArrangement component. Hint: You'll see a blue vertical line that shows where the piece you're dragging will go.

If you look in the list of project components, you'll see the three buttons indented under the ThreeButtons to show that they are now its subcomponents. Notice that all the components are indented under Screen1.

You should also see your three buttons line up in a row on the phone screen, although things might not look exactly as on the Designer. For example, the Arrangement's outline shows in the Designer but not on the phone.

In general, you use Screen Arrangement to create simple vertical or horizontal layouts. You can create more complex layouts by nesting Screen Arrangement components. There is also a TableArrangement component (not covered in this tutorial).

Canvas and wipe button

The final two components are the canvas and the wipe button.

From the Palette's Basic category drag a Canvas component onto the Viewer. Change its name to "DrawingCanvas". Set its Width to "Fill Parent" and set its Height to 300 pixels.

Add a Background Image to the Canvas. Click on the field containing "None..." next to BackgroundImage in the canvas's Properties panel. You can use the same kitty.png file, if you still have it on your desktop from an earlier tutorial. Or you can use another image.

You can use any image you like, but you'll get the best results if the size of the image (in pixels) is close to the size at which you'll be showing it on the phone. Also, large images will take a long time to load, and might exceed the memory capacity of the phone allocates for applications.

From the Palette, drag the final button onto the screen, placing it under the canvas. Change its id to "ButtonWipe" and change its Text attribute to "Wipe".

You've now completed the steps to set the appearance of your app. Here's how this should look in the Designer. Next, you'll define how the components behave.

Add behaviors to the components

Click the Blocks button to switch to the Blocks Editor. First you will set up the buttons that change the paint color. Later you will add blocks to decide what happens when someone touches or drags the screen.

Add button event handlers

In the Blocks Editor:

Open the drawer for ButtonRed and drag out the when ButtonRed.Click block.
Open the DrawingCanvas drawer. Drag out the set DrawingCanvas.PaintColor to block (remember that the set block of components is a dropdown so PaintColor is a selection in the dropdown) and place it in the do section of when ButtonRed.Click .
Open the Colors drawer and drag out the block for the color Red and put it into set DrawingCanvas.PaintColor to . (Clicking on a color block after it's been placed will display a table of colors that you can select from.)
Repeat steps 2-4 for the blue and green buttons.
The final button to set up is the Wipe button. Make a click event handler for ButtonWipe by dragging when ButtonWipe.Click from the ButtonWipe drawer. From the DrawingCanvas drawer, drag call DrawingCanvas.Clear and place it in the do area of the when ButtonWipe.Click block.

The blocks for the buttons should look like this:

Add Touch-event Handlers

Now for the next step: drawing on the Canvas. You'll arrange things so that when you touch the canvas, you get a dot at the spot where you touch. If you drag your finger slowly along the canvas, it draws a line.

In the Blocks Editor, open the drawer for the canvas and drag the when DrawingCanvas.Touched block to the workspace. As soon as you drag the block out, you may notice three argument names located at the top of the block x, y, and touchedSprite. These arguments are also known as local variables and can get accessed by using the get or set block found in the Variables drawer.

You've already seen button click events. Clicks are simple, because there's nothing to know about the click other than that it happened. Other event handlers such as when ... Touched need information about the event. In App Inventor, this information is expressed as the value of arguments associated with the event handler. For the when ... Touched event, the first two arguments stand for the x and y coordinates of where the touch happened. We'll save touchedSprite for a later tutorial.

For this touch event, make the canvas draw a small circle at the point with coordinates (x, y). Drag out a call DrawingCanvas.DrawCircle command from the canvas drawer and place it in the do section of when DrawingCanvas.Touched.

On the right side of the call DrawingCanvas.DrawCircle block are three sockets where you must specify values for the x and y coordinates where the circle should be drawn, and r, which is the radius of the circle. For x and y, you'll use values of the arguments that were supplied to the Touched handler:

Open the Variables drawer. Find the get block.
Drag out two get blocks and plug them into the corresponding sockets in the when DrawingCanvas.Touched block. Click on the dropdown to select x and y in the corresponding block.
You'll also need to specify the radius of the circle to draw. Five (pixels) is a good value for this app. Click in a blank area of the screen and type the number 5 followed by return to create a number block with a value of 5. Typing on the blank area of the screen is called typeblocking and is a useful shortcut to know. This can be done for any block, not just numbers. Plug the block for 5 into the radius slot.

Here's how the touch event handler should look:

Try out what you have so far on the phone. Touch a color button. Now touch the canvas, and your finger should leave a spot at each place you touch. Touching the Wipe button should clear your drawing.

Add Drag Events

Finally, add the drag event handler. Here's the difference between a touch and a drag:

A touch is when you place your finger on the canvas and lift it without moving it.
A drag is when you place your finger on the canvas and move your finger while keeping it in contact.

When you drag your finger across the screen, it appears to draw a giant, curved line where you moved your finger. What you're actually doing is drawing hundreds of tiny straight lines: each time you move your finger, even a little bit, you extend the line from your finger's immediate last position to its new position.

A drag event comes with 6 arguments. These are three pairs of x and y coordinates that show:

The position of your finger back where the drag started.
The current position of your finger.
The immediately previous position of your finger.

There's also a sprite, which we'll ignore for this tutorial.

Now make dragging draw a line between the previous position and the current position by creating a drag handler:

From the DrawingCanvas drawer, drag the when DrawingCanvas.Dragged block to the workspace.
Also from the DrawingCanvas drawer, drag the call DrawingCanvas.DrawLine block into the do slot of the when DrawingCanvas.Dragged block.
Drag a get block to the open slots in when DrawingCanvas.Dragged and select the corresponding value: x1 and y1 should be prevX and prevY; x2 and y2 should be currentX and currentY.

Here's the result:

Test your work by trying it on the phone: drag your finger around on the screen to draw lines and curves. Touch the screen to make spots. Use the Wipe button to clear the screen.

In PaintPot Part 2, you'll see how to use global variables to create dots of different sizes.

Review

Here are some of the ideas covered in this tutorial:

You can use Screen Arrangement components to specify screen layouts other than just placing components one under the other.
The Canvas component lets you draw on it. It can also sense touches and drags.
Some event handlers are called with information about the event, such as the coordinates of where the screen was touched. This information is represented by arguments. When you select an event handler that has arguments, App Inventor creates value blocks for these and places them in the My Definitions drawer.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Basic

Tutorial Type:

Drawing Canvas

MoleMash for App Inventor 2

aaron — Wed, 03 Jul 2013 14:29:42 +0000

In the game MoleMash, a mole pops up at random positions on a playing field, and the player scores points by hitting the mole before it jumps away. This tutorial shows how to build MoleMash as an example of a simple game that uses animation.

The tutorial assumes that you have completed the HelloPurr and PaintPot tutorials.

Download Book Chapter (PDF)

Getting Started

Connect to the App Inventor web site and start a new project. Name it "MoleMash", and also set the screen's Title to "MoleMash". Open the Blocks Editor and connect to the phone.

Also download this picture of a mole and save it on your computer.

Introduction

You'll design the game so that the mole moves once every half-second. If it is touched, the score increases by one, and the phone vibrates. Pressing restart resets the score to zero.

This tutorial introduces:

image sprites
timers and the Clock component
procedures
picking random numbers between 0 and 1
text blocks
typeblocking

The first components

Several components should be familiar from previous tutorials:

A Canvas named "MyCanvas". This is the area where the mole moves.
A Label named "ScoreLabel" that shows the score, i.e., the number of times the player has hit the mole.
A Button named "ResetButton".

Drag these components from the Palette onto the Viewer and assign their names. Put MyCanvas on top and set its dimensions to 300 pixels wide by 300 pixels high. Set the Text of ScoreLabel to "Score: ---". Set the Text of ResetButton to "Reset". Also add a Sound component and name it "Noise". You'll use Noise to make the phone vibrate when the mole is hit, similar to the way you made the kitty purr in HelloPurr.

Timers and the Clock component

You need to arrange for the mole to jump periodically, and you'll do this with the aid of a Clock component. The Clock component provides various operations dealing with time, like telling you what the date is. Here, you'll use the component as a timer that fires at regular internals. The firing interval is determined by the Clock 's TimerInterval property. Drag out a Clock component; it will go into the non-visible components area. Name it "MoleTimer". Set its TimeInterval to 500 milliseconds to make the mole move every half second. Make sure that Enabled is checked.

Adding an Image Sprite

To add the moving mole we'll use a sprite.

Sprites are images that can move on the screen within a Canvas. Each sprite has a Speed and a Heading, and also an Interval that determines how often the sprite moves at its designated speed. Sprites can also detect when they are touched. In MoleMash, the mole has a speed zero, so it won't move by itself. Instead, you'll be setting the mole's position each time the timer fires. Drag an ImageSprite component onto the Viewer. You'll find this component in the Animation category of the Palette. Place it within MyCanvas area. Set these properties for the Mole sprite:

Picture: Use mole.png, which you downloaded to your computer at the beginning of this tutorial.
Enabled: checked
Interval: 500 (The interval doesn't matter here, because the mole's speed is zero: it's not moving by itself.)
Heading: 0 The heading doesn't matter here either, because the speed is 0.
Speed: 0.0
Visible: checked
Width: Automatic
Height: Automatic

You should see the x and y properties already filled in. They were determined by where you placed the mole when you dragged it onto MyCanvas. Go ahead and drag the mole some more. You should see x and y change. You should also see the mole on your connected phone, and the mole moving around on the phone as you drag it around in the Designer. You've now specified all the components. The Designer should look like this. Notice how Mole is indented under MyCanvas in the component structure list, indicating that the sprite is a sub-component of the canvas.

Component Behavior and Event Handlers

Now you'll specify the component behavior. This introduces some new App Inventor ideas. The first is the idea of a procedure. For an overview and explanation of procedures, check out the Procedures page.

A procedure is a sequence of statements that you can refer to all at once as single command. If you have a sequence that you need to use more than once in a program, you can define that as a procedure, and then you don't have to repeat the sequence each time you use it. Procedures in App Inventor can take arguments and return values. This tutorial covers only the simplest case: procedures that take no arguments and return no values.

Define Procedures

Define two procedures:

MoveMole moves the Mole sprite to a new random position on the canvas.
UpdateScore shows the score, by changing the text of the ScoreLabel

Start with MoveMole:

In the Blocks Editor, under Built-In, open the Procedures drawer. Drag out a to procedure block and change the label "procedure" to "MoveMole".
```
Note: There are two similar blocks: procedure then do and procedure then resu;t. Here you should use procedure then do.
```
The to MoveMole block has a slot labeled "do". That's where you put the statements for the procedure. In this case there will be two statements: one to set the mole's x position and one to set its y position. In each case, you'll set the position to be a random fraction, between 0 and 1, of the difference between the size of the canvas and the size of the mole. You create that value using blocks for random fraction and multiplication and subtraction. You can find these in the Math drawer.
Build the MoveMole procedure. The completed definition should look like this:

MoveMole does not take any arguments so you don't have to use the mutator function of the procedure block. Observe how the blocks connect together: the first statement uses the Mole.X set block to set mole's horizontal position. The value plugged into the block's socket is the result of multiplying:
1. The result of the call random fraction block, which a value between 0 and 1
2. The result of subtracting the mole's width from the canvas width
The vertical position is handled similarly.

With MoveMole done, the next step is to define a variable called score to hold the score (number of hits) and give it initial value 0. Also define a procedure UpdateScore that shows the score in ScoreLabel. The actual contents to be shown in ScoreLabel will be the text "Score: " joined to the value of score.

To create the "Score: " part of the label, drag out a text block from the Text drawer. Change the block to read "Score: " rather than "text".
Use a join block to attach this to a block that gives the value of the score variable. You can find the join block in the Text drawer.

Here's how score and UpdateScore should look:

Add a Timer

The next step is to make the mole keep moving. Here's where you'll use MoleTimer. Clock components have an event handler called when ... Timer that triggers repeatedly at a rate determined by the TimerInterval.

Set up MoleTimer to call MoveMole each time the timer fires, by building the event handler like this:

Notice how the mole starts jumping around on the phone as soon as you define the event handler. This is an example of how things in App Inventor start happening instantaneously, as soon as you define them.

Add a Mole Touch Handler

The program should increment the score each time the mole is touched. Sprites, like canvases, respond to touch events. So create a touch event handler for Mole that:

Increments the score.
Calls UpdateScore to show the new score.
Makes the phone vibrate for 1/10 second (100 milliseconds).
Calls MoveMole so that the mole moves right away, rather than waiting for the timer.

Here's what this looks like in blocks. Go ahead and assemble the when Mole.Touched blocks as shown.

Here's a tip: You can use typeblocking: typing to quickly create blocks.

To create a value block containing 100, just type 100 and press return.
To create a MoveMole block, just type MoveMole and select the block you want from the list

Reset the Score

One final detail is resetting the score. That's simply a matter of making the ResetButton change the score to 0 and calling UpdateScore.

Complete Program

Here's the complete MoleMash program:

Variations

Once you get the game working, you might want to explore some variations. For example:

Make the game vary the speed of the mole in response to how well the player is doing. To vary how quickly the mole moves, you'll need to change the MoleTimer's Interval property.
Keep track of when the player hits the mole and when the player misses the mole, and show a score with both hits and misses. To do this, you'll need do define touched handlers both for Mole, same as now, and for MyCanvas. One subtle issue, if the player touches the mole, does that also count as a touch for MyCanvas? The answer is yes. Both touch events will register.

Review

Here are some of the ideas covered in this project:

Sprites are touch-sensitive shapes that you can program to move around on a Canvas.
The Clock component can be used as a timer to make events that happen at regular intervals.
Procedures are defined using to blocks.
For each procedure you define, App Inventor automatically creates an associated call block and places it in the My Definitions drawer.
Making a random-fraction block produces a number between 0 and 1.
Text blocks specify literal text, similar to the way that number blocks specify literal numbers.
Typeblocking is a way to create blocks quickly, by typing a block's name.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with MoleMash? Return to the other tutorials here.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Basic

Tutorial Type:

Magic 8-ball for App Inventor 2

joanie — Tue, 02 Jul 2013 20:43:39 +0000

Lesson One: Magic 8-Ball Predicts the Future

This introductory module will guide you through building a “Magic 8-Ball” app with App Inventor 2. When activated, your 8-ball will deliver one of its classic predictions, such as “It is decidedly so” or “Reply hazy, try again.”

Learning Goals

After completing this app, you will be able to:

Navigate the App Inventor environment: designer, blocks editor, emulator and/or physical phone
Correctly use the following App Inventor components: accelerometer sensor, button, sound
Correctly use the following App Inventor concepts: making and using a list, responding to an event

Materials

A selection of images and sounds are available at the App Inventor Media Library.
Optional supporting hard copy materials for the original App Inventor version of this tutorial such as the App Inventor Overview Handouts, and the PDF version of this lesson.

Outline

Set up computers and phones or emulators. (Suggestion: do this ahead of time)
Part One:Click a Button, Hear a Sound
Part Two: Click the Button, Get a Prediction + Hear a Sound
Part Three: Shake the Phone, Get a Prediction + Hear a Sound
Suggestions for further exploration: Text-to-Speech, Rotating image, Custom prediction lists

Part One: Click a Button, Hear a Sound

The final Magic 8-Ball App will deliver a prediction from a list that you have designed. To get started, first we'll make a button with a picture on it, and program it to play a sound when the button is clicked.

DESIGN: App Inventor Designer

To open the App Inventor Designer window, go to http://newblocks.appinventor.mit.edu. See setup instructions above if you are not sure how to sign in.
If you have already made an app (such as Hello Purr), you will automatically be directed to the Designer with the last project you worked on showing. Click "My Projects" in the upper left corner of the screen, which will take you to your list of projects. Click "New" and name your project something like "Magic8Ball"(note: spaces are not allowed).
Download one image and one sound file from below to be used in your app. Right click (control-click) on the link of the image or sound, then choose "Download" or "Save As". Save the media files to a convenient location that you will remember.
On the left column of the Designer, open the Basic palette, and drag a Button component over to the Viewer(#1).
Set the button image to an 8-Ball image:
Click on your newly added button to see its properties in the Properties pane on the right. Under "Image" click on the word "None..." and a small selection window will pop up (#2). Click the "Add" button and browse to where you saved the 8-Ball image. Select the file, then click “OK” to close the selection window. Click “OK” again on the properties pane to close the small popup window (#3).
Go to the text field in the Properties pane and delete the display text of your button component (#4).
From the Media palette, drag over a Sound component onto the Viewer pane (#1). Notice that since the sound will not be a visible part of the app, it appears at the bottom of the Viewer pane, as a “Non-visible component”.
Set the sound component's source file:
Click on your newly added sound component to see its properties in the Properties pane on the right. Under "Source" click in the small box on the word "None..." and a small selection window will pop up (#2). Click the "Add" button and browse to where you saved the sound file. Select the sound file, then click “OK” to close the selection window. Click “OK” again on the properties pane to close the small popup window (#3).

You have now completed the work in the Designer for Part One of this app. It's time now to go over to the Blocks Editor to program the behavior of these components.

BUILD: Blocks Editor

In the upper right corner of the Designer, click on the Blocks button.

Now you are going to tell your app how to behave when the button is clicked. This is actually very simple in App Inventor, because the "code" for the program only consists of two blocks!

Once the Blocks Editor is open, there are several options running along the left side of the screen. We refer to these as "Palettes" with “Drawers.”

From the blocks palette located under Screen1, click on the Button1 drawer. Drag the when Button1.Click block into the work area (#1). From the blocks palette, click on the Sound1 drawer, drag the Sound1.Play block into the work area and insert it into the when Button1.Click block (#2). They will click together like magnetic puzzle pieces.

Your blocks should now look like this:

That's it! You've written the program for Part One of Magic 8-Ball. Now it's time to test that it's working right.

TEST: Phone/Emulator

You have now built an app! To test that it works, you either have to launch an emulator, or connect to a phone. Go back to the Setup Instructions if you do not have a phone or an emulator running.

Emulator: click on the picture, you will hear the sound play.
Phone: tap the picture, you will hear the sound play.

Note: If you don't hear the sound, first be sure you have the volume turned up on your device (or computer if using emulator). Also, make sure your device has an SD card. App Inventor stores media files to the SD card. In some devices, the Play component does not work correctly. You will need to use the Player component instead of the Sound component.

Part Two: Output a Prediction

Now that we've gotten the button to perform an action (play a sound), we want to extend that action to include giving the user a prediction. First we'll need two labels: Label1 will display the instructions, and Label2 will display the chosen prediction. We'll use blocks to program a "list picker" to choose from a list of predictions. Each time the button is clicked, the app will change the text of Label2 to display the chosen prediction.

DESIGN: App Inventor

Go back to the Designer window in your browser and add some new things to your app.

From the Screen Arrangement palette, drag over the Vertical Arrangement component (#1). At first it will just look like an empty box, but when you put things in it, App Inventor will know that you want to line them up vertically (one on top of the other).

From the Basic palette, drag over a Label component (#2) and drop it inside of the vertical arrangement component. In the Properties pane, change the "Text" property of Label1 to “Ask the Magic 8-Ball a question”.(#3)

From the Basic palette, drag over another Label component (Label2) into the Vertical Arrangement box so that it sits right below Label1. Change the "Text" property of the Label2 to “Touch the Magic 8-Ball to receive your answer.” Now drag the 8-Ball image so that it is also inside the Vertical Arrangement component on top of the two labels. This will cause them to line up with each other in a vertical line. (Note: this can be tricky mouse work, but get them in there just right and the vertical arrangement will resize itself to fit everything.)

Now it’s time to go back into the Blocks Editor to program the components you just added to your project.

BUILD: Blocks Editor

Now for the fun part! You're going to make a list of predictions and program the button to pick one item from the list and display it inside Label2. The button will also still play the sound that you programmed in Part One. Here's how to do it...

From the blocks palette, click on Label2 drawer to see all of its associated blocks. Drag over the green set Label2.BackgroundColor and insert it just above the Sound1.Play block. Notice that the when Button1.Click block automatically gets bigger to accomodate the new block.
Clicking on the word "BackgroundColor" will allow you to change the property that is being set. We want to change the Text so our block will look like set Label2.Text. This is called a mutator block.
From the Built-In palette, click on the Lists drawer. Drag over the pick random item block and connect it to the open socket of the set Label2.Text block.
From the Built-In palette, click on Lists again, then drag out the make a list block and plug it into the "list" socket on the right side of the pick random item block.
From the Built-In palette, click on the Text drawer, drag out a text block and connect it to the item socket of the make a list block. Click directly on the word “text” so that it gets highlighted. You can then type in new text there. Think about the sayings you want in your list of predictions for the Magic 8-Ball. Type the first prediction into this new text block.
Notice after you plug in two text blocks, there are no more sockets to add more responses. To create more sockets, you need to click the blue plus button. make a list is a mutator block and thus can be expanded or shrunk by clicking the blue plus sign.
Plug each text block into the pick random item block. (Ideas for answers: http://en.wikipedia.org/wiki/Magic_8-Ball)

Blocks should look something like this:

You've got a Magic 8-Ball App! Now your app is fully functional and will predict the future with absolute certainty. Test out that this works, and then come back for some challenge tasks to make the app even more fun.

TEST: Emulator or Phone

Emulator: Click on the picture of the 8-Ball, you should see one of your answers displayed in the Label2.Text field, followed by the sound.
Phone: Tap on the picture of the 8-Ball, you should see one of your answers displayed in the Label2.Text field, followed by the sound.

Part Three: Shake the Phone, Get a Prediction

Even though you have a working Magic 8-Ball app, there is a way to make it even more fun. You can use the accelerometer component to make the phone respond to shaking instead of responding to a button click. This will make the app much more like a real Magic 8-Ball toy. Note: This part can only be done with an actual phone or tablet equipped with an accelerometer. If you are using an emulator, skip this part and go to Challenge 1 instead.

DESIGN: App Inventor

From the Sensors palette, drag over an AccelerometerSensor sensor component. Notice that it automatically drops down to the “Non-visible components” area of the Viewer window. This is the only new component you need, so go on over to the Blocks Editor to change your program.

BUILD: Blocks Editor

From the blocks drawer, click on AccelerometerSensor, then drag out the block for when AccelerometerSensor.Shaking.
Disconnect all of the blocks from inside the Button1.Click block and move them inside the AccelerometerSensor.Shaking block. NOTE: you can move whole sections of connected blocks by clicking on the uppermost or leftmost block and dragging it. The connected blocks will come with it.
Delete the Button1.Click block to keep your work area tidy.

The blocks should look something like this:

TEST: Phone/Emulator

Phone: When you shake the phone it should show an answer and play a sound.
Emulator: unfortunately, you can not simulate shaking the phone when using the emulator.

Package the App to Your Phone!

Your app would disappear if you were to disconnect your phone from the Blocks Editor. This is because the app is still stored on the App Inventor server and not on your phone. Follow these instructions to package your app to your phone or to make an ".apk" file that can be installed on any android phone. Or, if you want to make your app even cooler, try the challenges below.

Challenge 1: Make the Magic 8-Ball Speak

Instead of (or in addition to) making the prediction appear as text, can you make the 8-Ball speak it aloud? Hint: the text-to-speech component is under the Other Stuff palette in the Designer. Note: Most Android devices have the text-to-speech (TTS) capability, but if you have trouble getting the TTS component in App Inventor to work, you may need to find out how to install TTS and/or enable TTS on your device.

Suggestions for Further Exploration

Make the image rotate when the phone is shaken or have several images that the app rotates through while the phone is shaken. You could use this technique to make it look like the triangle piece inside the 8-ball window is surfacing. You could also make different images for different predictions and display the correct image for each prediction.
Make a similar app but for a different purpose. The phone could be used in place of dice or yahtzee letters. It could simulate a coin toss or a random number or color generator for investigating probability.
Ask end users to add choices to the list of predictions (See Make Quiz tutorial).
"Crowd source" for prediction choices: allow people to send text messages and have the app add them to the list.
Make the 8 Ball app a "server" so that anyone who sends a text to it will receive a text message prediction in return.
Complete change the list to humorous choices (e.g. an app for teacher to use when a student has an excuse for not doing homework), or for useful purposes like randomly selecting a name from amongst people in the class.

Done with Magic 8-Ball? Return to Curriculum (Teacher Resources) or Tutorials.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Basic

Tutorial Type:

Accelerometer

StockQuotes for App Inventor 2

aaron — Tue, 02 Jul 2013 20:35:01 +0000

StockQuotes

What You're Building

Just like you can access web pages from your phone -- for example, to look up a stock price -- so can App Inventor. This app enables the user to enter a stock symbol, then looks up the price of the stock on Yahoo! Finance and displays the price on the phone.

This tutorial assumes that you are familiar with the basics of App Inventor -- using the Component Designer to build a user interface and using the Blocks Editor to specify event handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Introduction

This tutorial includes

Accepting text input from the user to specify the stock symbol.
Using the Web component to ask Google Finance for the latest price for the stock.
Displaying the result.

Getting Started

Connect to the App Inventor web site and start a new project. Name it StockQuotes, and also set the screen’s Title to “Stock Quotes”. Open the Blocks Editor and connect it to the phone.

Set up the Components

Use the component designer to create the user interface. When you are done, it should look something like the picture below. Additional instructions are below the picture.

Create the following components by dragging them from the Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
TextBox	Basic	StockSymbolTextBox	Where the user enters the stock symbol
Button	Basic	GetQuoteButton	To request the stock quote
Label	Basic	ValueLabel	To display the stock quote
Web	Other stuff	Web1	To request and receive the stock quote

Stick with the default properties except for the following changes:

Component	Action
StockSymbolTextBox	Set its Hint property to "Enter a stock symbol". Clear its Text property by deleting or backspacing over the contents.
GetQuoteButton	Set its Text property to "Get Stock Quote".
ValueLabel	Clear its Text property.

The Yahoo! Finance API

Many web services provide an application programmer interface (API) for developers to enable their programs to access the service. Some ways to discover APIs are through the website http://programmableweb.com or just by doing a web search for the service name and “API”.

The Yahoo! Finance API is documented in gory detail at http://www.gummy-stuff.org/Yahoo-data.htm . The highlights are that you can get the latest price for the stock with the symbol "GOOG", for example, with the URL http://finance.yahoo.com/d/quotes.csv?f=l1&s=GOOG . The section "f=l1" (lower-case letter L, followed by the number 1) says we would like the latest price, and the section “s=GOOG” says we would like information about the stock whose symbol is “GOOG”. The result is returned in comma-separated value (CSV) format, which you may be familiar with from spreadsheets. Since only one value will be returned for our query, the result will be a plain old number, such as “511.5”, without any commas. (Commas would be used if we requested multiple pieces of data from Yahoo!, such as the name of the company and the daily trade volume.)

Add Behaviors to the Components

Requesting the Data

The blocks to make the web request are shown here and detailed below:

Block type	Drawer	Purpose
GetQuoteButton.Click	GetQuoteButton	Handle a click of the "Get Quote" button.
set Web1.Url to	Web1	Specify the URL to request.
call make text	Text	Concatenate the parts of the URL.
text (http://finance.yahoo.com/d/quotes.csv?f=l1&s=)	Text	Specify the first unchanging part of the URL.
StockSymbolTextBox.Text	StockSymbolTextBox	Get the stock symbol from the text box.
call Web1.Get	Web1	Make the web request.

The meaning is: When GetQuoteButton is clicked:

Build the Web component’s URL by concatenating “http://finance.yahoo.com/d/quotes.csv?f=l1&s=” (which you should copy and paste into the text block) and the symbol entered by the user (StockSymbolTextBox.Text).
Request the page specified by the URL. (This is like pressing return after entering a URL in your web browser.)

Receiving the Data

When the response to the web request arrives, the Web.GotText event is raised with four parameters (only some of which we’ll use in this app):

url: the URL of the original request (which is useful if requests are made with many different URLs).
responseCode: the HTTP status code, which indicates whether the web request succeeded or how it failed; for example, 200 means that the request succeeded, 404 that the page could not be found, etc.
responseType: the MIME type of the response, such as “text/csv” in this app, “image/jpeg”, etc.
responseContent: the data being returned, such as “511.5”.

Here are a picture and table of the blocks you need to create:

Block type	Drawer	Purpose
Web1.GotText	Web1	Specify what to do when the reply comes back from the web.
ifelse	Control	Provide different behavior depending on whether the request succeeded.
get responseCode	Variables	Gets the response code returned for the web request, which...
= (equals) block	Math	...is checked for equality with...
number (200)	Math	...200, the code for valid web responses.
set ValueLabel.Text to	ValueLabel	Display the result on the screen.
call make text	Text	Build the result by concatenating...
text ("Current value: ")	Text	...the text “Current value: “ and...
get responseContent	Variables	Gets the value returned from the web.
set ValueLabel.Text to	ValueLabel	Display an error message.
text ("Error getting stock quote")	Text	The error message

Here's a description of the block's behavior:

If the response code indicates that the web request succeeded (= 200), set the label to the concatenation of “Current value: “ and the returned data (e.g., 511.5).
Otherwise, set the label to “Error getting stock quote”.

Review

Here are some ideas introduced in this tutorial:

Using an application programmer interface (API)
Making a request with the Web component
Checking whether a web request was successful
Displaying information returned from the web

These ideas will be developed further in the second part of this tutorial, which is under development.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Credits

This tutorial is based on an app created by Prof. David Wolber and relies on the Yahoo! Finance API.

Done with StockQuotes? Return to the other tutorials here.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

External API

VideoWall for App Inventor 2

aaron — Tue, 02 Jul 2013 20:18:30 +0000

What you're building

The VideoWall app tutorial demonstrates how you can control the size of a video playing in an app by using the Video Player component's Width, Height, and FullScreen features. The VideoWall uses media assets (videos stored in the app itself), but you can use the app to display videos from the internet as well.

Getting Started

Connect to the App Inventor web site and start a new project. Name the new project VideoWall and set the screen's Orientation to Landscape.

Download the following video files* for use later on:

*Attributions for these videos are included at the end of this tutorial.

Introduction

The finished VideoWall app will display a wall of three videos that can be expanded to their true size and then shrunk back down again. The app will also allow you to display the videos in fullscreen. This tutorial assumes you have followed earlier tutorials to learn how the following blocks work:

Variables
Procedures
Button.Click blocks
Control (if-else) blocks

This tutorial introduces the following:

Resizing the VideoPlayer
Showing the VideoPlayer video in fullscreen mode

Set up the Components

Use the component designer to create the interface for the VideoWall. When completed, the designer should look similar to the snapshot below.

First, you need to upload the video files. Click on the Add... button and select a video file downloaded earlier. Repeat this step to add the other two video files. Now create the interface by dragging and dropping the components from the Palette to the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Holds all other components: makes the three vertical arrangements line up side by side
VerticalArrangement	Screen Arrangement	VerticalArrangement1	Holds the left-most VideoPlayer and controls
VerticalArrangement	Screen Arrangement	VerticalArrangement2	Holds the middle VideoPlayer and controls
VerticalArrangement	Screen Arrangement	VerticalArrangement3	Holds the right-most VideoPlayer and controls
VideoPlayer	Media	VideoPlayer1	Displays the BigBuckBunny video
VideoPlayer	Media	VideoPlayer2	Displays the NASA video
VideoPlayer	Media	VideoPlayer3	Displays the Sintel video
Button	Basic	ResizeButton1	Resizes VideoPlayer1
Button	Basic	ResizeButton2	Resizes VideoPlayer2
Button	Basic	ResizeButton3	Resizes VideoPlayer3
Button	Basic	FullScreenButton1	Shows the VideoPlayer1 video in fullscreen
Button	Basic	FullScreenButton2	Shows the VideoPlayer2 video in fullscreen
Button	Basic	FullScreenButton3	Shows the VideoPlayer3 video in fullscreen

Set the properties as described below:

Component	Action
HorizontalArrangement1	Set Width to Fill parent...
VerticalArrangement1, VerticalArrangement2, and VerticalArrangement3	Set Width to Fill parent...
ResizeButton1, ResizeButton2, and ResizeButton3	Set Text to "Grow" and set Width to Fill parent...
FullScreenButton1, FullScreenButton2, and FullScreenButton3	Set Text to Show FullScreen and set Width to Fill parent...
VideoPlayer1	Set Source to bigbuckbunny.3gp , set Width to Fill parent... , and set Height to 36 pixels
VideoPlayer2	Set Source to nasa.3gp , set Width to Fill parent... , and set Height to 36 pixels
VideoPlayer3	Set Source to sintel.3gp , set Width to Fill parent... , and set Height to 36 pixels

Add Behaviors to the Components

The interface is complete, but the buttons don't resize the videos yet. Open the Blocks Editor to add the behavior to the buttons. First, you'll define three variable blocks to keep track of the size of the VideoPlayers:

Block Type	Drawer	Purpose
initialize global name to	Variables	Defines the vid1_zoomed variable (rename it)
initialize global name to	Variables	Defines the vid2_zoomed variable (rename it)
initialize global name to	Variables	Defines the vid3_zoomed variable (rename it)

The three variables should like this:

Create the resizeVideoPlayer Procedure block. There are three VideoPlayers in the app, but you'll use one Procedure block to resize all three. To accomplish this simplicity, you will use the Any Component blocks component Any VideoPlayer blocks. Create the resizeVideoPlayer Procedure block using the following blocks:

Block Type	Drawer	Purpose
Procedure	Procedures	Defines the resizeVideoPlayer procedure. Use the mutator ability of the procedure to add three arguments: x2, x3, x5.
ifelse	Control	Defines the ifelse block that chooses whether the VideoPlayer is shrunk or expanded
= block	Logic	Defines the equals block for testing if the zoomed block is true
true	Logic	Defines the block that zoomed is compared to
VideoPlayer.Width (x2)	Any VideoPlayer	Sets the VideoPlayer Width to a number
Number (-1) (x2)	Math	Width to set VideoPlayer to
VideoPlayer.Height (x2)	Any VideoPlayer	Sets the VideoPlayer Height to a number
Number (x2), values of 26 and 144	Math	Height to set VideoPlayer to
Button.text	Any Button	Changes the button text
Text	Text	Text to set button to. Make one text block text's Shrink and the other's Grow.

The resizeVideoPlayer block should look like the following:

The resizeVideoPlayer block will be explained later after you create the blocks for responding to button clicks.

Create the Click Blocks

The blocks you will create respond to clicks on the ResizeButton buttons. To build the three blocks, you will need the following blocks:

Block Type	Drawer	Purpose
ResizeButton1.Click	ResizeButton1	Defines the block for responding to clicks on ResizeButton1
ResizeButton2.Click	ResizeButton2	Defines the block for responding to clicks on ResizeButton2
ResizeButton3.Click	ResizeButton3	Defines the block for responding to clicks on ResizeButton3
ResizeVideoPlayer (x3)	Procedures	Starts the resizeVideoPlayer block for resizing a VideoPlayer
not (x3)	Logic	Defines the block for switching the various zoomed block values
set global vid1_zoomed	Variables	Sets the vid1_zoomed block to a different value
set global vid2_zoomed	Variables	Sets the vid2_zoomed block to a different value
set global vid3_zoomed	Variables	Sets the vid3_zoomed block to a different value
global vid1_zoomed	Variables	Used to change the vid1_zoomed value.
global vid2_zoomed	Variables	Used to change the vid2_zoomed value.
global vid3_zoomed	Variables	Used to change the vid3_zoomed value.
component ResizeButton1	ResizeButton1	Passed to the resizeVideoPlayer procedure
component ResizeButton2	ResizeButton2	Passed to the resizeVideoPlayer procedure
component ResizeButton3	ResizeButton3	Passed to the resizeVideoPlayer procedure
component VideoPlayer1	VideoPlayer1	Passed to the resizeVideoPlayer procedure
component VideoPlayer2	VideoPlayer2	Passed to the resizeVideoPlayer procedure
component VideoPlayer3	VideoPlayer3	Passed to the resizeVideoPlayer procedure

The blocks should look like the following:

Most blocks in App Inventor require you to know exactly what component your app will manipulate when you design the app. For some apps, you will have several of the same type of component and you want to program the same behavior for all of the similar components (like the VideoPlayer blocks in this app). The blocks in the Any component section allow you to build some general manipulation on some type of component. When you built the resizeVideoPlayer procedure block, you didn't know specifically which VideoPlayer would be used in the procedure. The resizeVideoPlayer works on VideoPlayers; but not until the resizeVideoPlayer block is used in the ResizeButton1.Click block (for example) is the specific VideoPlayer known.

Note: The VideoWall app could have been designed with a specific resizing procedure for each VideoPlayer. By using the Advanced blocks in a single resizing procedure, the app is much simpler.

How the Blocks Work

Setting the Width and Height property for a VideoPlayer works exactly the same way as setting the Width and Height of a Button. For whatever positive number is set, the video playing will resize its appearance to fit that value. There are two values that are exceptions to the using positive values rule: -1 and -2. Setting VideoPlayer.Width or VideoPlayer.Height to -1 is like setting the Width or Height to Fill parent in the designer. Setting VideoPlayer.Width or VideoPlayer.Height to -2 is like setting the Width or Height to Automatic in the designer.

Warning: You can set the VideoPlayer Width and Height to any positive number you want. The VideoPlayer will change its size to match the values you set; but on some devices, the VideoPlayer does not change its size correctly. The behavior on such devices is usually unpredictable.

Test this behavior. Click on the Grow button below the BigBuckBunny video. The video's size should expand, and the text of the button should change to "Shrink". Click on the Shrink button below the BigBuckBunny video. The video's size should shrink back to its original size and the text should change back to "Grow".

Create the blocks for showing fullscreen video

You will now add the blocks for showing the videos in fullscreen mode. Use the following blocks:

Block Type	Drawer	Purpose
true (x3)	Logic	Value to set FullScreen as
FullScreenButton1.Click	FullScreenButton1	Responds to clicks on FullScreenButton1
set VideoPlayer1.FullScreen	VideoPlayer1	Used to show fullscreen video
FullScreenButton2.Click	FullScreenButton2	Responds to clicks on FullScreenButton2
set VideoPlayer2.FullScreen	VideoPlayer2	Used to show fullscreen video
FullScreenButton3.Click	FullScreenButton3	Responds to clicks on FullScreenButton3
set VideoPlayer3.FullScreen	VideoPlayer3	Used to show fullscreen video

The blocks should look like the following:

How the Blocks Work

The VideoPlayer.FullScreen block takes a true/false value (also called a boolean) to tell it whether to go full screen or not. Setting a VideoPlayer.FullScreen block to true causes that VideoPlayer to be displayed in fullscreen mode. If there is another VideoPlayer in fullscreen mode, that VideoPlayer's .FullScreen value is set to false and it is replaced with the current VideoPlayer. If a VideoPlayer.FullScreen is true, setting a VideoPlayer.FullScreen block to false causes the fullscreen mode to be exited and the app's interface to display. Test this behavior. Start playing the BigBuckVideo, and click on the Show FullScreen button below the BigBuckBunny video. The app's interface should disappear and some media controls with the BigBuckBunny video should appear. Use the Back button on your device or the emulator to exit fullscreen. The app's interface should appear.

Final Program

VideoWall Final Version

Package the final version of the app by choosing Package For Phone | Barcode from the Component Designer menu. When the barcode appears, use the barcode scanner on your phone to download and install the app.

Variations

Now that you have finished the first VideoWall app, you might want to build some variations. For example:

Get more video files and add a second row to create a real VideoWall
Use videos from an online server.
Expand the resizeVideoPlayer procedure to resize VideoPlayers by small increments to create an animation effect. You could use multiple Clocks to start the resizeVideoPlayer procedure and animate multiple VideoPlayers at once.

If you distribute your app to others, make sure you respect any license requirements for the videos you use.

Below are the attributions to the video files included in this demo app. The creators of the source videos that these clips are from do not endorse App Inventor.

Video File	Information	Attribution
bigbuckbunny.3gp	A clip from the full length film	(c) copyright 2008, Blender Foundation / http://www.bigbuckbunny.org
nasa.3gp	A formatted version of the Mars' Whirling Dust Devil clip.	Here is the original video.
sintel.3gp	A clip from the full length film	(c) copyright Blender Foundation \| http://durian.blender.org

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

MIT is grateful to Vance Turnewitsch for developing this tutorial.

Done with VideoWall? Return to the other App Inventor 2 tutorials here.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

Video

MoleMash 2 for App Inventor 2

aaron — Tue, 02 Jul 2013 14:47:11 +0000

What You're Building

Download Refined Version (Book Chapter PDF)

This tutorial shows you how to build a game similar to the Whac-A-MoleTM arcade game. Specifically, your goal is to whack (tap) a mole that randomly pops out of one of five fixed holes. Every time you succeed, your score is increased by one point.

In order to highlight new App Inventor features — the Advanced tab and Sprite Z-layering — this app takes a different approach than the original Mole Mash tutorial, which you need not have read in order to do this one. You should, however, be familiar with the basics of App Inventor — using the Component Designer to build a user interface and using the Blocks Editor to specify event handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Introduction

This tutorial includes:

Creating a list of components
Using functionality from the Advanced section of the Blocks Editor to get and set properties of arbitrary components
Having game events controlled by the Clock component
Using Sprite Z-layering to ensure that one sprite (ImageSprite or Ball) appears in front of another

Getting Started

Connect to the App Inventor web site and start a new project. Set the screen's Title property to an appropriate name, such as "Mole Mash". Open the Blocks Editor and connect it to the phone. Download these image files (created by Yun Miao) by right-clicking on them, then add them to the project by pressing the "Add..." button in the Media pane.

Set up the Components

The user interface will contain a total of 6 ImageSprites: 5 unmoving holes and 1 mole, which will move on top of the holes. Use the component designer to create the user interface. When you are done, it should look something like the picture below. Don't worry about lining up the holes evenly. You will specify their locations through their X and Y properties. Additional instructions are below the picture.

Create the following components by dragging them from the Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Canvas	Basic	GameCanvas	The game field
ImageSprite (5)	Animation	Hole1 ... Hole5	Holes from which the mole can appear
ImageSprite	Animation	Mole	The mole
HorizontalArrangement	Screen Arrangement	ScoreArrangement	To display the score
Label	Basic	ScoreTextLabel	To hold "Score: "
Label	Basic	ScoreValueLabel	To hold the score (# of times the mole was hit)
Clock	Basic	MoleClock	To control the mole's movement
Sound	Media	Buzzer	To vibrate when the mole is touched

Make the following changes to the components' properties:

Component	Action
Canvas1	Set BackgroundColor to Green. Set Width to 320 pixels. Set Height to 320 pixels.
Hole1	Set X to 20 and Y to 60 (upper left).
Hole2	Set X to 130 and Y to 60 (upper center).
Hole3	Set X to 240 and Y to 60 (upper right)
Hole4	Set X to 75 and Y to 140 (lower left).
Hole5	Set X to 185 and Y to 140 (lower right).
Mole	Set Picture to "mole.png". Set Z to 2 so the mole appears in front of the other ImageSprite s, which have the default Z value of 1.
ScoreTextLabel	Set Text to "Score: ".
ScoreTextValue	Set Text to "0".

Don't worry now about setting the Picture property for the holes; we'll set the property in the Blocks Editor.

Add Behaviors to the Components

Here is an overview of what we need to create blocks to do:

Create variables:
1. holes: a list of holes
2. currentHole: the hole the mole is currently coming out of
When the app starts:
1. Populate the list of holes.
2. Set each hole's Picture property to "hole.png".
3. Call procedure MoveMole (below).
Create a procedure MoveMole to:
1. Set currentHole to a random hole from the list holes.
2. Move the mole to the location of currentHole.
Make MoleClock call MoveMole whenever its timer goes off (every second).
Implement a handler that does the following when the mole is touched:
1. Add one to the score.
2. Make the phone briefly vibrate.
3. Call MoveMole.

To proceed, switch to the Blocks Editor.

Creating Variables

Create the variables holes and currentHole. For now, we will give them "dummy" initial values; we'll set their real initial values in the Screen1.Initialize event handler, which is run when the app starts. (For technical reasons, components cannot be referred to in def blocks, which are run before the app has started.) Here is a picture and list of the blocks you will need:

Block type	Drawer	Purpose
def variable as (holes)	Definition	Hold a list of holes.
make a list	Lists	Create an empty list, to be filled in when the program starts.
def variable as (currentHole)	Definition	Hold the mole's current hole.
number (0)	Numbers	Provide a required initial value for currentHole.

As always, comments (created by right-clicking on a block) are encouraged but not required.

Starting the App

The first event to occur in any program in Screen1.Initialize, so we will put start-up code in that handler. Specifically, we will add the hole components to the list holes, set each hole's Picture property to "hole.png", and call MoveMole. Since we have not yet written MoveMole, we will create an empty procedure with that name, which we will fill in later.

Below are a picture and table of the blocks you need to create. Note that the "Any ImageSprite" drawer is found under the "Advanced" tab to the right of "Built-In" and "My Blocks" in the Blocks Editor.

Block type	Drawer	Purpose
Screen1.Initialize	Screen1	Specify what should happen when the app starts.
add items to list	Lists	Add the following values to...
holes	My Definitions	...the list of holes:
component Hole1	Hole1	-the upper left hole
component Hole2	Hole2	-the upper center hole
component Hole3	Hole3	-the upper right hole
component Hole4	Hole4	-the lower left hole
component Hole5	Hole5	-the lower right hole
foreach	Control	Specify that we would like...
name (hole)	Definitions	...a variable named "hole"...
holes	My Definitions	...to take on each of the values in the list holes .
ImageSprite.Picture	Any Image Sprite	Set the Picture property of...
value hole	My Definitions	...the ImageSprite referred to by the variable hole ...
text (hole.png)	Text	...to the picture of the empty hole.
to procedure (MoveMole)	Definition	Create an procedure, to be filled in later, for moving the mole.
MoveMole	My Definitions	Call MoveMole to make the first placement of the mole.

Compare the foreach block to the equivalent blocks that would be necessary without it:

Not only is the left set of blocks shorter, it is less repetitious, sparing the programmer from semi-mindless copy-and-pasting and making it easier to modify, for example, if the name of the picture is changed.

Moving the Mole

Now let's fill in the body of the procedure MoveMole, which we'll call when the program starts, when the mole gets touched, and when our timer goes off every second. What we want it to do is to pick a random hole and move the mole on top of it. Here are a picture and list of the new blocks:

Block type	Drawer	Purpose
set currentHole to	My Definitions	Save the...
call pick random item	Lists	...randomly selected...
holes	My Definitions	...hole.
call Mole.MoveTo	Mole	Move the mole to the...
ImageSprite.X	Advanced/ImageSprite	..x-coordinate of...
currentHole	My Definitions	...the chosen hole...
ImageSprite.Y	Advanced/ImageSprite	...and the y-coordinate of...
current Hole	My Definitions	...the chosen hole.

We now need to specify that MoveMole should be called whenever MoleClock's Timer goes off. We just need two blocks to accomplish that:

Block type	Drawer	Purpose
MoleClock.Timer	MoleClock	When the timer goes off...
call MoveMole	My Definitions	...move the mole.

Registering Touches

Finally, we need to specify what happens when the mole is touched. Specifically, we want to:

Increment the score.
Make the phone vibrate briefly.
Move the mole.

We can easily translate these to blocks:

Block type	Drawer	Purpose
Mole.Touched	Mole	When the mole is touched...
set ScoreValueLabel.Text to	ScoreValueLabel	...update the visible score to...
block	Math	...the result of adding...
number (1)	Math	...1 [and]...
ScoreValueLabel.Text	ScoreValueLabel	...the previous score.
call Buzzer.Vibrate	Buzzer	Make the phone vibrate for...
number (100)	Math	...100 milliseconds.
call MoveMole	My Definitions	Move the mole to a new location.

Final Program

Variations

Here are some variations you might want to implement:

Adding a Reset button to set the score back to 0.
Having the score depend not just on the number of hits but also the number of misses and escaped moles.
Increasing the speed of the game of mole movement if the player is doing well and decreasing it if the player is doing poorly.
Adding a second mole on a different timer.

You can see how to implement the first two variations in the original Mole Mash tutorial.

Review

Here are some of the ideas covered in this tutorial:

Putting components in a List.
Performing an operation on every component in a List using the foreach block and Advanced features.
Placing an ImageSprite on top of another, using their Z properties to control which goes in front.
Using the Clock component to control game play.
Creating a procedure and calling it from multiple places.

Done with MoleMash 2? Return to the other tutorials here.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.