Day 5: PaintPot / Events

What We're Going to Learn Today

In today's tutorial, we are going learn how to work with event handlers. We are going to make a simple painting program.

Parts of this tutorial was written by Google so its language will be different than our first tutorials. This tutorial was written for adults. PLEASE go slowly and don't skip directions. Let a teacher know if you need help.

Getting Started

1. Go to the MIT App Inventor and log in using your google account
2. Click on "My Projects" on the top and then press the New button.
3. Name the new project Day5
4. Click on Day5 to open it
5. Open an emulator or connect your phone to app inventor using the MIT Companion App

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.

1. From the Palette's Layout category, drag out a HorizontalArrangement component and place it under the buttons. Change the name of this component from "HorizontalArrangement1" to "ThreeButtons".
2. In the Properties panel, change the Width of ThreeButtons to "Fill Parent..." so that it fills the entire width of the screen.
3. 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.
4. Change the AlignHorizontal property to "center" so the buttons go to the center of the HorizontalArrangement.

Canvas and Wipe

1. From the Palette's Drawning and Animation 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.
2. From the Palette, drag the final button onto the screen, placing it under the canvas. Rename its id to "ButtonWipe" and change its Text property to "Wipe".

Add Button Event Handlers

In the Blocks Editor:

1. Switch to the Blocks screen.
2. Click on ButtonRed and drag out the when ButtonRed.Click block.
3. Click on DrawingCanvas drawer. Drag out the set DrawingCanvas.PaintColor to block (you may have to scroll the list of blocks in the drawer to find it) and place it in the do section of when ButtonRed.Click .
4. Switch to the Built-In Column. Open the Colors drawer and drag out the block for the color Red and put it into set DrawingCanvas.PaintColor to .
5. Repeat steps 2-4 for the blue and green buttons.
6. The final button to set up is the Wipe button. Switch back to the My Blocks column. 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. Notice that the block has bubbles for you to mouse over and get blocks called X, Y, and touchedSprite.

The X and Y are the places on the canvas where you touch.

• 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 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 (how big it is). For x and y, you'll use values found inside the when DrawingCanvas.Touched bubbles.

1. Open the bubbles in DrawingCanvas.Touched. Find the blocks for get x and get y.
2. Drag out the get x and get y blocks and plug them into the same sockets in the when DrawingCanvas.Touched block.

1. You'll also need to specify the radius of the circle to draw. 5 (pixels) is a good value for this app. Click in a blank area of the screen and start typing a "5." You'll see a window pop up. If you click on your 5 then you'll be given a number block with the value of 5. Plug that into r.

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:

1. From the DrawingCanvas drawer, drag the when DrawingCanvas.Dragged block to the workspace.
2. Also from the DrawingCanvas drawer, drag the call DrawingCanvas.DrawLine block into the do slot of the when DrawingCanvas.Dragged block.
3. Click on the My Definitions drawer. You should see the blocks for the arguments you need. Drag the corresponding value blocks to the appropriate slots in when DrawingCanvas.Dragged: 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.

Challenge Stuff

Here are some hard things to try to do. If you don't want to try any of these, or are finished:

Regular Challenge: Add two more colors.

Super Hard Challenge: Allow users to make and set their own colors. Let users change the thickness of the lines they draw.

Developers Challenge: Turn the Day5 app into a make-up app. Add your picture to the canvas and turn the colors into make-up colors. Rename the app, add the ability to pick set the canvas picture to a user selected photos.

This tutorial was modified for middle school students from one of the original app inventor tutorials

Middle School Android App Inventor Tutorials by Richard Incorvia is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.