Project 107u Building Paint Pot app with MIT App Inventor 2 Part3

Basics: Project 107u

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

Tags: MIT App Inventor 2, Android, PaintPot Part3, camera

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

General

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

This part extends Project 107t Building Paint Pot app with MIT App Inventor 2 Part2. This project allows you to draw circles and lines on a picture you take with your camera. We will add the slider to change the dot size too.

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 PaintPotV2 project. Click on My Projects and select Save project as…. Give your project a new name – PaintPotV3. Click on OK button. Your project will be saved.

PAINT POT 3
PAINT POT 3

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

4.Select components:

  1. From Media Pallete, click and drag out Camera component (Camera1), drop it into the Viewer which is in the middle of the Designer. It will be located in the Non-visible components area;
  2. From User Interface Pallete, click and drag out Button component (Button1) into the HorizontalArrangement1 component, placing it before to ButtonWipe component.
PAINT POT 3
paint pot 3

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 AppName to PaintPotV3, Title to PaintPotV3;
  2. Click on Button1 and use the Rename button to change its name from Button1 to TakePictureButton, Text property to TakePicture.
paint pot 3
paint pot 3
paint pot 3

6.Go to Blocks editor tab. From TakePictureButton component-specific drawer drag out the when TakePictureButton.Click do event handler block and drop it in the Blocks Viewer area.

paint pot 3

7.From Camera1 component-specific drawer drag out the call Camera1.TakePicture block and add to the when TakePictureButton.Click do block.

paint pot 3

8.From Camera1 component-specific drawer drag out the when Camera1.AfterPicture do event handler block and drop it in the Blocks Viewer area.

paint pot 3

9.From DrawingCanvas component-specific drawer drag out the set DrawingCanvas.BackgroundImage to block and add it to “do” section of the when Camera1.AfterPicture do block.

paint pot 3

10.From Blocks Built-in Variables drawer drag out the get block and add to the set DrawingCanvas.BackgroundImage to block. Select image. Please note that you can also get image block from local image variable of the when Camera1.AfterPicture do block.

paint pot 3

11. Go to Designer editor tab. We need to modify the design of our app to add Button, Slider, Label components.

12.Select components:

  1. From User Interface Pallete, click and drag out Button component (Button1) into the ThreeButtons component, placing it after ButtonGreen component;
  2. Delete the ButtonSmall and ButtonBig components. You just need to select component and click on Delete button in the Components pane;
  3. From User Interface Pallete, click and drag out Label component (Label1) into the BottomButtons component, placing it after the ButtonWipe component;
  4. From User Interface Pallete, click and drag out Slider component (Slider1) into the BottomButtons component, placing it after the Label1 component.
paint pot 3

13. 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 Button1 and use the Rename button to change its name from Button1 to ButtonDefault, Text property to Default;
  2. Click on Label1 and use the Rename button to change its name from Label1 to dotSize, Text property to Dot size;
  3. Click on Slider1 and use the Rename button to change its name from Slider1 to DotSizeSlider, ColorLeft to Black, ThumbPosition to 10, MaxValue to 20, MinValue to 2, Width to Fill Parent..;
paint pot 3
paint pot 3
paint pot 3

14. Go to Blocks editor tab. From ButtonDefault component-specific drawer drag out the when ButtonDefault.Click do event handler block and drop it in the Blocks Viewer area.

paint pot 3

15.From DrawingCanvas component -specific drawer drag out the set DrawingCanvas.PaintColor to block and add to the “do” section of the when ButtonDefault.Click do block. From Blocks Built-in Colors drawer drag out the black color and add to the set DrawingCanvas.PaintColor to block.

paint pot 3

16.Change initialize global dotSize to block initial value from 2 to 10. From DotSizeSlider component-specific drawer drag out the when DotSizeSlider.PositionChanged do event handler block in the Blocks Viewer area.

paint pot 3

17.Drag out the set global dotSize to block from dotSize and add to the “do” section of the when DotSizeSlider.PositionChanged do block. You can also do this other way if from Blocks Built-in Variables drawer drag out the set to block and select global dotSize.

paint pot 3

18. Drag out the get ThumbPosition block from ThumbPosition and add to the set global dotSize to block. You can also do this other way if from Blocks Built-in Variables drawer drag out the get block and select ThumbPosition.

paint pot 3

19. This is the final blocks diagram:

paint pot 3

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

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

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

paint pot 3

23.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 use the Slider to change the size of dots.

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 PaintPotV3 app with MIT App Inventor 2.

We fixed the slight bug in the program. It was an issue before that 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. We added the new button Default , when you click on it you will go back to black color.

Project files

Attached on the beginning of this project description

AcoptexCom

Leave a Reply

Your email address will not be published.