Paintpot

PaintPot: (Part 1)

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.

What You’re Building
Screenshot of finished paint pot app.

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.

Poke 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. It 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, and browse to the App Inventor Web site at appinventor. googlelabs. com. 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. This will also be the name of the application if you package it for the phone.
The name “Screen1”, which you’ll see in the panel that lists the application’s components. You can’t change this name in the

current version of App Inventor.
The Title of the screen, which is what you’ll see in the phone’s title bar. This starts out being “Screen1”, which is what you used in HelloPurr. But you can change it, as you’re doing for Paintpot.

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 the 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.
Screenshot with 3 vertical buttons.

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