Skip to main content

Section 1.14 App Inventor Paint Pot Tutorial (Optional)

90 minutes
The first mobile app that you will create is called Paint Pot which is a "finger painting" app that simulates dipping your finger in a pot of paint then drawing with it on a canvas. The app uses buttons to change the paint colors and MIT App Inventor’s touch and drag event handlers to draw circles and lines on the canvas. Watch the intro video below (TeacherTube)
In this tutorial, you will learn to:
  • follow a tutorial to create the PaintPot app
  • deepen your understanding of event-driven programming
  • learn how to use a variable to make a program more general
Language Objectives: you will be able to:
  • explain the result of programming statements that include variables and assignments
  • describe how a global variable is an abstraction
  • use target vocabulary, such as variable, assignment, expression, operator, and pseudocode while describing app features and User Interface with the support of concept definitions and vocabulary notes from this lesson

Subsection 1.14.1 Paint Pot Tutorial Part 1

To get started, open MIT App Inventor with the Paint Pot Template and follow along with the following video (TeacherTube) or your teacher or the long handout or short handout section part 1.

Subsection 1.14.2 Paint Pot Tutorial Part 2

Watch the video tutorial below (TeacherTube version) or the the text version of the tutorial or the short handout section part 2.

Subsection 1.14.3 Paint Pot Enhancements

Now that you have a working version of the Paint Pot app, you can try out some enhancements to make it your own! Here are some ideas to get you started but feel free to come up with your own enhancements as well.
  1. Add a button to support a 4th color option for the app.
  2. Add an image of your choice to draw on instead of the cat image. Scroll down to the bottom of the properties window of the Designer View to find the Media section wher you can click on Upload File. Use the image as the Canvas background image.
  3. The app currently has a ButtonPlus and ButtonMinus. But, we only completed the code for ButtonPlus. Now that you understand how to increment variables by 1, implement an algorithm for ButtonMinus that will subtract 1 from dotsize. Make sure you test your code! We will learn how to do "if blocks" in the next unit and can add tests to make sure the dot size doesn’t go below 0 or above a maximum value.
  4. Currently, if a user wants to use a larger dot and then use a smaller dot (or vice versus), they have to continually press the ButtonMinus (or ButtonPlus). If the current value of dotsize is 25, getting to a size of 4 would be pain. For easier use, add a button that resets the size of the dot (circle) back to its original value. (HINT: You’ll need a second variable here to remember the original value of the dotsize.)
  5. Optional: Instead of using an existing image, take a photo with the camera and use that as the Canvas background image! (Hint: For this you’ll need to use a new Button, the Camera component from the Media drawer, and the Camera’s TakePicture command and the AfterPicture event handler where you can set the image returned by the camera as Canvas’ background image.)
  6. Optional: Add a Social/Sharing component and a share button to email what is drawn on the canvas using the Sharing. ShareFile block with the Canvas.Save block. You will have to set up an email account on your tablet to use the share component. (This may not work yet on iOS devices).
  7. Share your app with the class or a friend!

Subsection 1.14.4 Paint Pot Reflection

After you have completed the Paint Pot tutorial and enhancements, reflect on your experience by answering the following questions:

Activity 1.14.1. Project Reflection 1.

Describe the purpose of your app and the input and output of the app. What were the variables used in your app?

Activity 1.14.2. Project Reflection 2.

Describe an error that you encountered while you were creating the app, and how you fixed your code to remove the bug. How did you test the app to make sure it was working correctly?
You have attempted of activities on this page.
PrevTopNext