Paint Pot - A

05

Paint Pot is a basic "finger painting" app. It simulates the process of dipping your finger in a pot of a paint and then drawing on a canvas. The app uses buttons to simulate dipping your finger in the paint and uses App Inventor’s touch event handlers to draw circles and lines on the canvas.

This tutorial also introduces the concept of a global variable.

Objectives

  • follow an instructor-led walk-through to create the PaintPot app on a mobile device

  • continue navigating the App Inventor programming platform

  • develop your understanding of what an App Inventor program is

  • deepen your understanding of event-driven programming

  • learn how to use a variable to make a program more general

Technical Terminology

  • cloud computing - comparable to grid computing, cloud computing relies on sharing resources rather than having local servers handle applications

  • megabyte - used to describe data storage, 1,048,576 bytes (abbreviated MB)

  • megapixel - one million pixels, used in reference to the resolution of a graphics device

  • modeling - process of representing a real-world object of phenomenon as a set of mathematical equations

  • pixel - short for a picture element, a single point in a graphic image

  • render - refers to the process of adding realism to a computer graphics by adding 3-D qualities, such as shadows and variations in color and shade

  • upload - to transmit data from a computer to a bulletin board service, mainframe, or network

  • analog - a device or system that represents changing values as continuously variable physical quantities

  • digital - any system based on discontinuous data or events. Computers are digital machines because at the basic level they can distinguish between just two values, 0 and 1

Getting Ready & Video Tutorials

Open App Inventor with the Paint Pot Template in a separate tab and follow along with the following tutorial.

  • Note, if you already started the app with the same name, use that one

User Interface

The UI for our PaintPot app will consist of two types of Components, Basic components: four Buttons and a drawing Canvas and a Screen Arrangement component: a HorizontalArrangement.

The Red, Blue, and Green buttons are arranged horizontally along the top of the screen. These are used to set the paint color.

The cat's image is contained on the canvas component.

And the "Wipe" button is below the canvas.

Here are the UI Components for this project. Drag in each component and set the properties to the values in the Properties column below. Rename the components following the directions in the next section.

Adding Red, Blue, and Green Buttons

By default, when you add components to the App Inventor viewer, they are laid out vertically. To arrange our color buttons horizontally, we need to put them inside a HorizontalArrangement component.

  1. Drag and drop a HorizontalArrangement component from the Palette's Layout category to the Viewer.

  2. Drag three button components out of the Basic category and place them into the HorizontalArrangement component.

  3. Select each Button in turn and change its Text and BackgroundColor properties, so that they match its function. So the red button should be red and should be labeled "Red" as shown in the screenshot.

Renaming Components with Descriptive Names

So far we've been using App Inventor's default names for our components. Our three buttons are named Button1, Button2, and Button3. But this will be confusing when we switch to the Blocks Editor where you can no longer see that Button1 is red. You'll want to give your buttons' names that are more descriptive of their function in the app.

You can give them any names that are meaningful to you. But if you give them names that begin with "Button", then they'll all be right next to each other and easier to find in the Blocks Editor's Toolbox, for example:

  • ButtonRed

  • ButtonBlue

  • ButtonGreen

To rename a component, just select the component by clicking on it in the Viewer or in the Components panel. Then click the Rename button in the components panel and type in an appropriate name in the New name textbox.

Fine Tuning the Horizontal Arrangement

You probably noticed that App Inventor puts the buttons right next to each other, from left to right, in the Horizontal Arrangement, and sets their width automatically depending on the size of their labels. So they look like what is on the right.

→

You can adjust the Width property of the Buttons as well as the HorizontalArrangement so that all buttons have the same size and fill up their container as shown.

To get this arrangement, set the Width property of all these components, including the HorizontalArrangement, to Fill parent.

Adding the Canvas

In App Inventor, all animations, drawing and painting takes place on a Canvas component, which is also used as a background for interactive games.

  1. Drag a Canvas component out of the Palette's Drawing and Animation drawer onto the Viewer, placing it just below the row of color buttons.

  2. Set the Canvas' BackgroundImage property to the kitty.png image.

  3. Set the Canvas' Width property to Fill Parent.

  4. Set the Canvas' PaintColor property to red, overriding its default color, which is black.

Coding the App's Behavior

If you recall from the I Have A Dream app, we had one button and we had one block for responding to its "click" events. How many different events will this app have to handle in the code editor view?

If you said "six" events, that is correct. There are three buttons, each of which will have its own Button.click event. Plus, we want to be able to draw dots and lines on the canvas. This means will need to respond to a Canvas_touch event and a Canvas_drag event. Let's see how this goes.

Setting A Property's Value

For this app we'll be using a new kind a block, a setter block, to set, or change, the value of the Canvas's PaintColor property whenever one of the color buttons is clicked.

Note that this block has a to slot that looks like a jig-saw piece. This is where you would plug in an appropriate value for the property. In this case we are plugging in the color red (which can be found in the Toolbox's Colors drawer).

Setter blocks are very important and we will be using them in almost our apps. One of the features of App Inventor is that each type of component has a single setter block, which is known as a mutator in Computer Science, that can be used to set any of that component's properties. This is done using the drop-down menu on the block.

In this case we are using the setter to set the value of the PaintColor property. But this same block can be changed (mutated) to set the value of the Width or Height and so on.


Handling the Button Clicks

We will need three when Button.Click blocks, one for each button. For the color buttons, when one of them is clicked we want to set the Canvas's paint color to that button's color. For example, for ButtonRed:

  1. Click on the ButtonRed component in the Toolbox . Drag its when ButtonRed.Click block into the Workspace.

  2. Click on the Canvas1 and drag its Set Canvas1.BackgroundColor block into the ButtonRed's do slot. Then select the PaintColor property from its pull-down menu.

  3. Click on the Colors in the Toolbox and drag out the color Red and plug it into the to-slot on the setter block.

You should repeat these same steps for each of the other button.click blocks.

As a shortcut, you could use the Copy (ctrl-c) and Paste (ctrl-v) shortcut keys to copy this block and change the names of the components involved. But be careful to name things correctly.

Responding to a Touch Event

While the various button events are important for the behavior of the app, it is the touch and drag events that give the app its ability to paint on the canvas. The Canvas component has two blocks that enable the app to respond to these kinds of events. The first is the Canvas1.Touched block

One difference between this event handler and the Button.click handler is the Canvas.Touched event handler has three pre-set properties, x, y, and, touchedAnySprite. The x and y properties represent the x- and y-coordinates of the touch event's location: i.e., on what pixel, given by its (x,y) coordinates, did the user touch the Canvas. (We won't worry about the touchedAnySprite property in this app.)

These properties are given values when the event occurs: that is, in this case, when the Canvas is touched. To access their values, we will use Getter Blocks, which are located in either of two places: 1) in the Toolbox's Variables drawer, or 2) by hovering your mouse pointer over the x and y on the event handler:

Here's how we use these the touch event's (x,y) values to draw a circle of radius 5 at that same location.

In this case we are using the Canvas's DrawCircle procedure to draw the circle. Note that the DrawCircle procedure has two slots for the circle's center location (x,y) and one for its radius. When we plug the get-x block into the DrawCircle's centerX-slot and the get-y block into the DrawCircle's centerY-slot, we are setting the circle's location.

Similarly, by plugging the math value 5 into the DrawCircle's radius-slot we are setting its radius.

Responding to a Drag Event

Now that you have added the Canvas1.Touched, add in a Canvas1.Dragged to make your app have more capabilities. The Canvas.Dragged event is very similar to the touch event except that it has more properties.

In this example we are using the Canvas.DrawLine procedure to draw a line from (x1,y1) to (x2,y2) and we are using the Canvas.Dragged block's prevX, prevY and currentX, currentY to supply the locations of the line's endpoints.

(Just a thought? If you think about this, when you draw an arc on the kitty’s face, this block is actually drawing many small lines to make up the larger arc. In order to do this, the event must fire many times each second. What do you suppose would happen if instead of prevX and prevY you put the getters for startX and startY in the x1-slot and y1-slot? Take a guess and then try it. You’ll see an interesting result.)

Canvas Drawing Methods

In addition to DrawCircle and DrawLine, the Canvas component has several other drawing procedures that you can experiment with in your app. Here are some of the others.

Testing

Test your app with the following inputs or actions. See if your app's actual output/performance match the expected outputs.