Basics: Project 107s
Project name: Building Paint Pot app with MIT App Inventor 2 Part1
Tags: MIT App Inventor 2, Android, PaintPot
We will learn how to build PaintPot app (Part1) with MIT App Inventor 2.
This project 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.
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 project introduces the following MIT App Inventor 2 concepts:
- The Canvas component for drawing.
- Controlling screen layout with Arrangement components.
- Event handlers that take arguments.
Step By Step instruction
1.Building the Android app with MIT App Inventor 2
1.Go to appinventor.mit.edu and click on Create Apps! orange button.
2.Click on Start new project and give your project a name. You can name it as PaintPot. Click on OK button. Your project will be saved.
3.Go to Designer editor tab. We need to design the appearance of our app first.
There are three names in MIT App Inventor 2, 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 pane in the Designer. You can’t change the name of the first Screen component in the current version of MIT App Inventor 2 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 mobile device’s title bar. Title is a property of the Screen component. The Title starts out being “Screen1“. 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.
- From User Interface Pallete, click and drag out Button component (Button1), drop it into the Viewer which is in the middle of the Designer;
- From User Interface Pallete, click and drag out Button component (Button2), drop it into the Viewer;
- From User Interface Pallete, click and drag out Button component (Button3), drop it into the Viewer;
- The next step is to make them line up horizontally. You do this using a HorizontalArrangement component. From Layout Pallete, click and drag out HorizontalArrangement component (HorizontalArrangement1), and place it under the buttons. 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 screen of your mobile device, although things might not look exactly as in the Designer. For example, the Arrangement’s outline shows in the Designer but not on the device. In general, you use Layout Arrangements to create simple vertical or horizontal layouts. You can create more complex layouts by nesting Screen Arrangement components. There is also a TableArrangement component;
- From the Drawing and Animation Pallete, drag out the Canvas component (Canvas1) into the Viewer;
- From the User Interface Palette, drag out Button (Button4) component and drop it in the Viewer under the DrawinCanvas component.
5. Adjust components properties. You will need to click on each component from Components pane and change the properties of component in the Properties pane:
- Click on Screen1 component, change AlignHorizontal to Center, AlignVertical to Center, Title to PaintPot;
- Click on Button1 component, change Text to Red, BackgroundColor to Red;
- Click on Button2 component, change Text to Blue, BackgroundColor to Blue;
- Click on Button3 component, change Text to Green, BackgroundColor to Green;
- Click on Button1 in the Components list in the Viewer to select it and use the Rename button to change its name from Button1 to ButtonRed;
- Change Button2, Button 3 names to ButtonBlue and ButtonGreen;
- Click on HorizontalArrangement1 and use the Rename button to change its name from HorizontalArrangement1 to ThreeButtons, In the Properties pane, change Width to Fill Parent… so that it fills the entire width of the screen;
- Drag the three buttons side by side into the ThreeButtons component. Hint: You’ll see a blue vertical line that shows where the piece you’re dragging will go;
- Click on Canvas1 component and use the Rename button to change its name from Canvas1 to DrawingCanvas. Change Width to Fill Parent, Height to 300 pixels;
- Click on Canvas1 component, to add a background image click on the BackgroundImage field containing None… next to in the DrawingCanvas‘s Properties pane. You can use kitty.png file, or you can use another image of your choosing. 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 device. Also, large images will take a long time to load, and might exceed the memory capacity of the device allocates for applications.
- Click on Button4 component and use the Rename button to change its name from Button4 to ButtonWipe. Change Text property to Wipe.
6. Go to Blocks editor tab. So far you have been arranging your app’s screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks editor. Click on Blocks button in the upper right of your screen to go to the Blocks Editor.
7. From ButtonRed component-specific drawer drag out the when ButtonRed,Click do block and drop it in the Blocks Viewer area (the open area on the right). Do the same for ButtonBlue, ButtonGreen,Wipe component-specific drawers.
8.From DrawingCanvas component-specific drawer drag out three 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 as shown below.
9.From Blocks Built-in Colors drawer drag out the red, blue, green color blocks and add them as shown below. (Clicking on a color block after it’s been placed will display a table of colors that you can select from)
10.From DrawingCanvas component-specific drawer drag out the call DrawingCanvas.Clear block and place it in the “do” section of the when ButtonWipe.Click do block.
11.The next step is drawing on the Canvas. You’ll add blocks 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.
12.From DrawingCanvas component-specific drawer drag out the when DrawingCanvas.Touched block to the Block Viewer area. As soon as you drag the block out, you may notice three argument names (highlighted in orange) 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 blocks found in the Blocks Built-in Variables drawer and then selecting the proper variable in the drop down menu. You can also access these variables by moving your cursor over to the highlighted name and selecting the variable you would like to use. Event handlers such as when … Touched do need information about the event. In MIT App Inventor 2, this information is expressed as the value of arguments associated with the event handler. For the when … Touched do event, the first two arguments stand for the x and y coordinates of where the touch happened. We’ll save touchedSprite for a later project.
13.For this touch event, make the Canvas draw a small circle at the point with coordinates (x, y). From DrawingCanvas component-specific drawer drag out the call DrawingCanvas.DrawCircle block and place it in the “do” section of when DrawingCanvas.Touched do block.
14.On the right side of the call DrawingCanvas.DrawCircle block are four sockets where you must specify values for the x and y coordinates where the circle should be drawn, radius, which is the radius of the circle, and fill, which is true to draw a filled circle, or false to draw an outlined circle. For x and y, you’ll use the values of the arguments that were supplied to the Touched handler – move your cursor over the x variable (highlighted in orange). Find the get x block and drag it into the corresponding x socket in the when DrawingCanvas.Touched block. Do the same for the y variable.
15.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. Please note that you can also use number block from Blocks Built-in Math drawer. From Blocks Built-in Logic drawer drag out a true block and plug it into the “fill” slot. This ensures the dots drawn will be filled in.
16.Let’s 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 project.
17.Now make the app draw a line between the previous position and the current position by creating a drag handler. From DrawingCanvas component-specific drawer drag out the when DrawingCanvas.Dragged block to the Blocks Viewer area.
18.From DrawingCanvas component-specific drawer drag out the call DrawingCanvas.DrawLine block into the “do” slot of the when DrawingCanvas.Dragged block.
19.Drag a get prevX block to the open x1 slot in when DrawingCanvas.DrawLine block. Do the same for the other spaces: y1 should be get prevY, x2 should be get currentX, and y2 should be get currentY.
20. The final Blocks diagram should be like that.
21. To have an app running without being connected to MIT App Inventor 2, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Select App (save to my computer) to download the app to your computer as an apk file.
22. Upload this package to your Android device (smartphone, tablet) and install. Open the PaintPot app.
23. You can also use Emulator to check the PaintPot app. You need to install MIT App Inventor 2 software, launch aiStarter. Go to Connect and select Emulator.
24.Test your work by trying it on the device: 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.
Do you have any questions? Leave a comment down below!
Thanks for reading. If you like this project probably you might like our next ones, so please support us by subscribing our blog and donating.
We have learnt how to build PaintPot app with MIT App Inventor 2. In PaintPot Part 2, you’ll see how to use global variables to create dots of different sizes.
Here are some of the ideas covered in this project:
- You can use Layout 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 argument blocks for these.
Attached on the beginning of this project description