Explore MIT App Inventor - Drawing Canvas

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

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

Colored Dots

aaron — Fri, 14 Jun 2013 15:47:16 +0000

Colored Dots: Creating Apps with Multiple Screens

This tutorial shows how to create apps that have multiple screens. In App Inventor, you can have a screen open a second screen. Later, the second screen can return to the screen that opened it. You can have as many screens as you like, but each screen closes by returning to the screen that opened it. The screens can share information by passing and returning values when they open and close. The screens also share the same TinyDB data, which they can use to store and share values.

Building an app with multiple screens is a lot like creating several individual apps. Every screen that you create has its own components in the Designer window. In the Blocks Editor, you will be able to see only the components of the screen currently selected in the Designer. Similarly, the blocks of code related to a screen cannot refer to blocks of code in another screen.

This program, ColoredDots, has two screens. ColoredDots is similar to PaintPot, but it uses a second screen to let the user create new colors by providing numerical values for the red, green, and blue color composition (RGB). In the PaintPot app, a user can only paint with one of the three predefined colors. Adding more colors to Paintpot would have required new buttons on the screen, reducing the amount of space available for painting. In ColoredDots, the new color is chosen on a second screen called Brush_Picker. Once a new color has been created in this second screen, its value is passed back to the first screen. You can also save and name the colors you create in the second screen, then use the saved colors later when painting. By using ListPicker to store the colors you create, it eliminates the need for the user to remember the name of the color they saved and spell it correctly in accessing it again. This makes the database of stored colors more accessible, making it easier to share the app among a group of people.

Here are the two screens for the ColoredDots app:

Objectives

By the end of this tutorial, you should have a understanding of:

How to make an app with multiple screens.
How to pass values from one screen to another via TinyDB.
How to fill and use the ListPicker element.

Building the Main Screen (Screen1)

You start building a multiscreen app by creating a new project, just as with any other app. As usual, App Inventor automatically creates the main screen and names it Screen1 and you can add components. Here's the Designer and the Components panel when all the components for Screen1 have been added.

The components are:

Component Type	Palette Group	What you'll name it	Purpose of Component	Component Settings
Label	Basic	TitleLabel	Shows the title "Paint with Colored Dots"
Label	Basic	ColorLabel	Shows the text "Current Color"
Label	Basic	ColorSample	Blank label whose background color is the current color
Label	Basic	DotSizeLabel	Shows the text "Dot size"
Label	Basic	DotSizeValue	Shows the current dot size
Canvas	Basic	Canvas1	Shows dots at the places you touch
Button	Basic	EraseButton	Clears the canvas	Set text to "Erase"
Button	Basic	openBrushPicker	Launches the second screen	Shows the text "Customize Brush"
ListPicker	Basic	ListPicker1	Loads the list of colors from the data base	Shows the text "Stored Color"
TinyDB	Basic	TinyDB1	Stores color names and values

We'll look at the blocks for Screen1 below. But first let's add the other screen.

Adding a second screen

To add a new screen to your app, click the Add Screen button in the top toolbar of the Designer window. A dialog window will appear, in which you can provide a name for the new screen.

Note: You should make the name of the new screen something meaningful when you add it. Do that now, because once a screen has been added, its name cannot be changed -- the Rename button for the screen component itself is disabled -- it's good to have meaningful names for the parts of your program. One limitation here is that Screen1 cannot be renamed. Remember also that the screen's title (shown in the title bar when the app is running) is different from its name. You can change the screen title in the Properties pane.

When you create a new screen, the Designer window switches to display it. Initially there will be no components, just like with a new app, and you add new components by dragging them from the Palette, just as with any screen. Here's the Designer window for the second screen, named Brush_Picker, after the components have been added. Notice that Brush_Picker is a dark green color, meaning Brush_Picker is the current screen.

The components for the brush picker screen are:

Component Type	Palette Group	What you'll name it	Purpose of Component
Label	Basic	RedLabel	Shows the text "Red"
TextBox	Basic	Red	For entering the amount of red in the color (0-255)
Label	Basic	GreenLabel	Shows the text "Green"
TextBox	Basic	Green	For entering the amount of green in the color (0-255)
Label	Basic	BlueLabel	Shows the text "Blue"
TextBox	Basic	Blue	For entering the amount of blue in the color (0-255)
Label	Basic	DotRadius	Shows the text "Dot size"
TextBox	Basic	RadiusTextBox	Shows the current dot size
Button	Basic	TestColorButton	Press to create the new color and prompts the user to store this color
Label	Basic	LabelTestColorSample	Blank label whose background color is the new color
Canvas	Basic	Canvas1	Displays the size and color of the test color
Button	Basic	ResetColorButton	Resets all the values to the default color, black
Button	Basic	ReturnToPainting	Returns to the main screen with the new color and dot size
Notifier	Other stuff	Notifier1	Shows a dialog for saving the color and entering a color name
TinyDB	Basic	TinyDB1	Stores color names and values

Here and in general with multiple screen apps, only the components that belong to the current screen (in this case Brush_Picker) are shown in the Designer and the Components pane. You can switch between screens by pressing the Brush_Picker and the Screen1 buttons, and the view in the Designer will show the corresponding screen. The same is true for the Blocks Editor: When you're working on a screen you'll see only the blocks for that screen.

None of the components, variable definitions, and procedures that you define in one screen will be accessible from any other screen. We'll see below how to pass information between screens.

Warning: When you switch between screens, you are effectively telling the Blocks Editor to load a new project, and this takes a little time. Wait until the Blocks Editor is done loading the blocks for the new screen before changing things. Most especially, wait until the new screen has finished loading before clicking on blocks or links with the mouse. If you don't wait, you may get errors, or even lose blocks from your project.

Blocks for the main screen (Screen1)

The Screen1 is essentially a drawing program. When you touch the Canvas, the app draws a dot of the current radius and color. The color is specified by the background of the ColorSample label. The erase button clears the canvas. When the screen opens, it initializes the radius to 3 and the color to black. Here are the corresponding blocks:

It is worth noting that the Initialize block uses the procedure TinyDB1.StoreValue and sets the ListPicker to populateList using the set ListPicker1.Elements to block. Each of these actions will be discussed in more detail later. Basically, when the screen starts, it stores the default color, Black, and adds that to the list of colors that can be selected using the ListPicker.

Testing the behavior.Test to make sure the drawing behavior acts as you expect it to. You won't be able to add new colors yet, but see what happens when you try to draw dots of the page.

Communicating with the brush picker screen

The multiple screen aspect of the app involves getting the "new brush": the new color and the new dot radius. It's the job of Brush_Picker to create these values and return these to Screen1 as a list of three items: the color, the dotsize, and the total number of colors stored. The number of colors is necessary for creating the list that ListPicker will reference. We'll see how Brush_Picker does this below, but from the perspective of Screen1, all it needs to do is open Brush_Picker and get the result.

Here's how this happens: when the Customize Brush button is pressed, Screen1 uses open another screen with start value to open Brush_Picker. When the user finishes with Brush_Picker, it will signal the other screen closed event, which provides the name of the screen (here Brush_Picker) and the value returned (here the three-element list). The event handler for Screen1 extracts the three items from the list and sets the ColorSample background and the DotSizeValue text properties. It also calls the procedure populateList, which is defined below. Here are the blocks:

ColoredDots uses open another screen with value to open Brush_Picker with values passed to it from Screen1. The other screen then accesses these opening values using get start value blocks. In general, a screen opens another screen with open another screen and gets a result back though the when other screen closed event. In this case, the values are passed from Screen1 to Brush_Picker so the app can keep track of how many colors are stored and what the current values are.

Testing the behavior. If you want to make sure that your blocks for opening a new screen are working, you will have to package the app to your phone or emulator. App Inventor does not currently allow live development for multi-screen apps, so make sure you package the phone before trying to test the behavior.

Sharing data via TinyDB

Besides opening screens and returning values, the different screens in a multiple screen app can communicate through TinyDB. To do this, give every screen its individual TinyDB component. Even though these will be "different" TinyDB components, they will in fact all share the same keys and values: If one screen stores a value under a key, the other screen can get that value by using the same key.

ColoredDots uses TinyDB to let you name the colors you create and save them to later use. The saving and naming will be done in Brush_Picker, as shown in the blocks later. When you open ListPicker (labelled Stored Color) in Screen1, the app uses opens the list of colors that you have stored for you to choose one and then sets the drawing color to the result. The elements are added to this list by creating the procedure populateList. As shown in these blocks, populateList iterates through the all of the stored entries in the database up to the number of stored colors and adds them to the list tinyDBlist. It returns this list, which ListPicker1 points to.

When ListPicker is opened, you will see a list of all the colors you created. ListPicker1.AfterPicking sets the Color value stored for that name to be the current drawing color, as shown here.

Blocks for the Brush_Picker screen

The main job of Brush_Picker is to create a color from the red-green-blue values entered in the text boxes and provide that color to Screen1. When you click ReturnToPainting the new color, the new dot size (taken from the RadiusTextBox), and the total number of colors are returned to Screen1 as a three-item list.As mentioned above, when Brush_Picker is open, Screen1 passes it values of the current color, the number of colors, and the current dot radius size. Brush_Picker uses get start value when it is initialized to access these values.

When you click the TestColorButton, the color is created for you as the background of LabelTestColorSample and the Canvas shows a circle of the appropriate size and color. To return the list to Screen1, Brush_Picker uses close screen with value, which takes as an argument the value to be returned (in this case, the list). When a screen closes, the app returns to the screen that opened it.

Here are the blocks that do this. Brush_Picker uses the procedures CheckColor and LimitRange to ensure that the values entered in the text boxes are valid numbers for colors and dot size. We'll examine these procedure below."

When TestColorButton is clicked, is displays the created color. Notifier1 is then used to give you a choice to save the color or cancel using the Notifier1.ShowChooseDialog block. The response from this will trigger further Notifier events so that you can save the color.

The next blocks show how Brush_Picker associates a name with a color for use by Screen1. The Notifier1.ShowChooseDialog block triggers a Notifier1.AfterChoosing event. In these blocks, the ifelse block checks the response to whether or not the color should be saved. If the response is "OK," Notifier1.AfterChoosing calls Notifier1.ShowTextDialog which prompts you to store a name for this color.

Once you make your entry, the color is stored with two tags two ways in TinyDB1. First, it stores the name with the current number of colors as the key. This is used when iterating through the list of colors for ListPicker in Screen1 so that the names will be displayed for the user. Secondly, the color is stored in TinyDB, using the name you entered as a key. Screen1 can then retrieve the color using its own TinyDB component and access it via the stored name as chosen in ListPicker.

The Reset button allows the user to clear all of the entries in the red, green, and blue fields so they can start over easily. The blocks for this are shown here:

Limiting numbers to a range

The only thing left is to show how Brush_Picker checks that it's using good values for colors and dot size. Each of the red, green, blue values should be a number between 0 and 255. But you could have entered anything in those text boxes. The checkColor procedure takes a value and limits its range to between 0 and 255: If it's less than 0 (or not a number at all) the result will be 0. It it's greater than 255, the result will be 255:

The final bit is LimitRange. This is a general procedure that takes an input, a lower limit, and an upper limit, and restricts the input to lie within that range (and it returns the lower limit if the input is not a number). The procedure is simple, but tricky: To restrict the range, take the maximum of the input and the lower limit, then take the minimum of the result and the upper limit. This programming "trick" has little to do with multiple screens or App Inventor. You might want to take a few moments to convince yourself that it really works.

Comments on multiple screens

You can have many screens in an App Inventor app, but a screen always returns to the screen that opened it. On the other hand, you can get the effect of screens switching to arbitrary other screen by setting up a "manager screen" that is used for opening all the other screens. When a screen wants to switch, it returns to the manager with a value saying which screen to open next.

Testing the behavior. In the current version of App Inventor, it is not yet possible to test a multiple-screen app in live development mode. You can test each screen separately, but you cannot test the communication between two screens. When try to switch between screens, you'll get an error message. To test whether the screens are properly communicating, you'll need to Package for Phone and open the installed app.

Further exploration

Now that you are able to create your own colors and access them for drawing, try some variations!

Make Brush_Picker warn the user if they are trying to store a color with the same name as something that has already been stored (e.g. don't let them make two colors named "red").
Have the starting color be the last one that the user was using in the app instead of always starting with black.

Summary

In this tutorial you have learned:

How to make an app with multiple screens
How to share data between those two screens using TinyBD
How to use a counter to add all of the values in TinyDB to add to a list.
How to use ListPicker to select from a list of items

This tutorial is based on work by Eni Mustafaraj of Wellesley College.

Done with Colored Dots? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

PaintPot (Part 1)

aaron — Fri, 14 Jun 2013 15:43:28 +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. 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

Screen title

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 Screen component in the current version of App Inventor.
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.

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.

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.

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

The Blocks Editor should already be open. First 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:

Switch to the My Blocks column.
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 (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 .
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 .
Repeat steps 2-4 for the blue and green buttons.
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

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, the three plugs on the right automatically fill in with name blocks called x, y, and touchedSprite.

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.

Open the My Definitions drawer at the top of the column. Find the blocks for value x and value y. The blocks were automatically created when you dragged out the touch event handler block.
Drag out the value x and value y blocks and plug them into the corresponding sockets in the when DrawingCanvas.Touched block. Make sure to drag the value blocks, not the corresponding name blocks; they look very similar.
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 to bring up the hover menu and select math (green). Select "123" from the dropdown list, to create a number block. Change the "123" to "5" and plug that in for the radius slot.

You can also just type 5 followed by return, to create a number block with a value of 5. This is an example of typeblocking: if you start typing, the Blocks Editor shows a list of blocks whose names match what you are typing; if you type a number it creates a number block.

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.

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

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.

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 1

Tutorial Difficulty:

Basic

Tutorial Type:

Drawing Canvas