Basics project 107t Building Paint Pot app with MIT App Inventor 2 Part2

Basics: Project 107t

Project name: Building Paint Pot app with MIT App Inventor 2 Part2

Tags: MIT App Inventor 2, Android, PaintPot Part2

Attachments: PaintPot2.apk, PaintPot2.aia, kitty.png

General

We will learn how to build PaintPot app (Part2) with MIT App Inventor 2.

This part extends Project 107s Building Paint Pot app with MIT App Inventor 2 Part1. We will create both large and small dots, as a demonstration of how to use global variables.

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.

create apps

2.Open the PaintPot project. Click on My Projects and select Save project as…. Give your project a new name – PaintPotV2. Click on OK button. Your project will be saved.

3. Go to Designer editor tab. We need to modify the design of our app first.

4.Select components:

  1. From Layout Pallete, click and drag out HorizontalArrangement component (HorizontalArrangement1), drop it into the Viewer which is in the middle of the Designer below the DrawingCanvas component;
  2. Drag the existing ButtonWipe component into  HorizontalArrangement1 component;
  3. From User Interface Pallete, click and drag out Button component (Button1) into the HorizontalArrangement1 component, placing it next to ButtonWipe component;
  4. From User Interface Pallete, click and drag out Button component (Button2) into the HorizontalArrangement1 component, placing it next to Button1 component.
paint pot 2
paint pot 2

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:

  1. Click on Screen1 component, change AlignHorizontal to Center, AlignVertical to Center, AppName to PaintPotV2, Title to PaintPotV2;
  2. Click on ThreeButtons component, change AlignHorizontal to Center, AlignVertical to Center;
  3. Click on HorizontalArrangement1 and use the Rename button to change its name from HorizontalArrangement1 to BottomButtons, In the Properties pane, change Width to Fill Parent… so that it fills the entire width of the screen, AlignHorizontal to Center, AlignVertical to Center;
  4. Click on Button1 and use the Rename button to change its name from Button1 to ButtonBig, Text property to Big dots;
  5. Click on Button1 and use the Rename button to change its name from Button1 to ButtonSmall, Text property to Small dots.
paint pot 2
paint pot 2
paint pot 2
paint pot 2
paint pot 2
paint pot 2
paint pot 2

6.Go to Blocks editor tab.

7. The size of the dots drawn on the DrawingCanvas is determined in the when DrawingCanvas.Touched event handler where call DrawingCanvas.DrawCircle is called with radius, the radius of the circle, equal to 5. To change the size, all we need to do is use different values for radius. Use radius = 2 for small dots and radius = 8 for large dots.

8.From Blocks Built-In 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.

paint pot 2

9.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, in the white space of the Blocks Viewer area, type the number 2, then press Enter. A number block with the value 2 should appear. Snap that to the initialize global small to block. The yellow warning mark will disappear, because the empty socket has been filled. Please note that number block you can also get from the Blocks Built-in Math drawer too.

paint pot 2

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

paint pot 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 MIT App Inventor 2, you can’t make assumptions about the order in which different initialize 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.

11. Go to when DrawingCanvas.Touched do event handler block and change the call DrawingCanvas.DrawCircle block so that it uses the value of dotsize rather than always using 5. From Blocks Built-in Variables drawer drag 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 previous project. “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.

paint pot 2

12.Now we need to set up a way to change dotsize to be small (2) or big (8). From ButtonBig component-specific drawer drag out the when ButtonBig.Click do event handler block and drop it in the Block Viewer area. From ButtonSmall component-specific drawer drag out the when ButtonSmall.Click do event handler block and drop it in the Block Viewer area.

paint pot 2
paint pot 2

13.To change dotsize to big we will use the set global dotsize to block from Blocks Built-in Variables drawer and plug in the get global big block.

paint pot 2

14.To change dotsize to small we will use the set global dotsize to block from Blocks Built-in Variables drawer and plug in the get global small block.

paint pot 2

15. This is the final blocks diagram:

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

paint pot 2

17. Upload this package to your Android device (smartphone, tablet) and install. Open the PaintPotV2 app.

18. You can also use Emulator to check the PaintPotV2 app. You need to install MIT App Inventor 2 software, launch aiStarter. Go to Connect and select Emulator.

paint pot 2

19.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.You can also 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.

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.

Summary

We have learnt how to build PaintPot app with MIT App Inventor 2. In PaintPot Part 2, we showed how to use global variables to create dots of different sizes.

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.

Project files

Attached on the beginning of this project description

AcoptexCom

Leave a Reply

Your email address will not be published.