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. What's an event handler you ask? By the end of today's activity you will hopefully know the answer. We are going to make a simple painting program that involves clicks, touches and sweeps on the screen - which are called "events" in your app.

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

Connect Your Emulator

    1. Select Connect from the menu bar at the top of the page and click on Emulator to launch it

    2. Once the Emulator is running go on to the next step

Let's Start

    1. Drag a Button component onto the Viewer and in the Properties area change the button's Text to "Red," make the TextColor White, and make its BackgroundColor Red.

    2. 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".

    3. Similarly, make two more buttons for blue and green, named "ButtonBlue" and "ButtonGreen", placing them vertically under the red button.

    4. Your Designer screen should look like the image below. Check your Emulator to see if it looks the same:

Note: Using meaningful names makes your projects more readable to yourself and others.

Screen Arrangement

You now have three buttons, one above the other. We want to make them line up horizontally. You do this using a HorizontalArrangement component.

    1. Click on the Palette's Layout category and 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 from "Automatic" 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.

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 and should look like this:

Canvas and Wipe

    1. From the Palette's Drawing 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's User Interface, drag the final Button onto the screen, placing it under the canvas. Rename it to "ButtonWipe" and change its Text property to "Wipe".

    3. What does your Emulator look like? It should look like the Designer screen's Viewer:

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 do block.

    3. From DrawingCanvas drag out the set DrawingCanvas.PaintColor to block (you may have to scroll the list of blocks in the drawer to find it) and snap it into the block when ButtonRed.Click do .

    4. From Colors 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. Click on ButtonWipe and drag out a when ButtonWipe.Click do block.Click on DrawingCanvas and drag a call DrawingCanvas.Clear block and snap it into the when ButtonWipe.Click do block.

The blocks for the buttons should look like this:

Add Touch Event Handlers

The next step is to draw on the DrawingCanvas. 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.

  1. Click on DrawingCanvas in the Blocks section and drag out the when DrawingCanvas.Touched do block. You see that this block is more complicated than a when Button.Click block. Clicks are simple, because there's nothing to know about the click other than that it happened. Other event handlers, such as the when DrawingCanvas.Touched do block, need information about the event such as where on the DrawingCanvas the touch occurred. Look at the block's image below. There are 3 variables that are defined by this block, x, y, and touchedSprite. We will not consider the touchedSprite variable now since we are not going to use this variable, but we will use the x and y. They refer to the x/y coordinates of where on the DrawingCanvas the touch occurred. You can think of the canvas like a graph with x and y values.

  1. The touch event will draw a small circle at the point with coordinates (x, y). Drag out a call DrawingCanvas.DrawCircle command from the canvas drawer and snap it in place.

  2. This block needs the variables x and y. Hover on the x and select the get x block and snap it in place. Do the same for y. Your blocks should look like this:

    1. There is something missing called "r" - which stands for "radius." The call DrawingCanvas.DrawCircle block needs to know how big a circle you want to draw at the point x,y. The radius of a circle is a number so click on Math in the Blocks section and drag the zero block and snap it into the "r." Change the 0 to 5.

    1. What happens on your Emulator when you touch (click with your mouse on) the screen? Can you make the dot that appears different colors? Change the radius and see what happens.

Add Drag Event Handlers

  1. Drag out a when DrawingCanvas.Dragged do block. You see that this block is even more complicated than a when DrawingCanvas.Touched do block. 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 it without lifting your finger. So the Drag block needs information about a series of x and y positions which are called the previous x and y and the current x and y. Look at the block's image below. There are 7 variables that are defined by this block, startX, startY, prevX, prevY, currentX, currentY and draggedSprite. We will not consider the draggedSprite variable now since we are not going to use this variable.

  1. Drag out the DrawingCanvas.DrawLine block and snap it into the when DrawingCanvas.Dragged do block.This block needs variables for two x and y positions: (x1, y1) and (x2, y2). Hover over prevX, select the get prevX block, snap in into the x1 space. Do the same for y1. For x2, hover over current X, select get currentX, and put it in place. Do the same for y2. The way this block works is to draw many short straight lines from the previous to the current (x,y) coordinates over and over again until you lift your finger from the screen. Your blocks should look like this.

    1. What happens on your Emulator when you click and drag your mouse on the screen? What happens when you click on the screen?

Challenge Stuff

Here are some hard things to try.

Regular Challenge: Add two more colors.

Super Hard Challenge: Let users change the thickness of the lines they draw.

Developer's 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 set the canvas picture to a user selected photo.