PaintPot: Build, Conceptualize, Customize


Build It

  1. Open a browser and navigate to http://beta.appinventor.mit.edu. Login with your Google account.
  2. Now build the PaintPot painting app. Follow the instructions in App Inventor chapter 2 using either the paperback version, the pdf version, or the step-by-step video lesson.

Conceptualize It

After completing the PaintPot tutorial, discuss these questions with a partner or small group, jotting down notes while you discuss. Later, create a portfolio page with answers to the questions in your own words. Topics: Canvases and drawing, event parameters

  1. The Canvas.Touched and Canvas.Dragged events have event parameters. For the Dragged event, what does each parameter represent (e.g., what is startx?)
  2. You can unplug and rename event parameters, but you don't need to and should not. In which drawer can you grab a reference to an event parameter, e.g, a 'value startx' block?
  3. Event parameters are different than function call parameters such as the x,y, and r of DrawCircle. Who specifies function parameters? Who specifies event parameters?
  4. What variable is defined in the PaintPot version on the right?
  5. Why do you need to define a variable for 'dotsize' but not for 'PaintColor' (the color that circles and lines are drawn)?
  6. Define the term variable. How is a variable similar to a property? How is a variable different than a property?
  7. One customization of PaintPot involves using a Textbox for the dotsize. How is a textbox different from a variable? How is a textbox different from a label?



Customize It

Note: these variations are slightly modified from the book version.

  1. The user interface does not display the current chosen color-- the user can only tell what color is chosen by drawing. Add immediate feedback for the user so that when he clicks to change color, the UI changes to make it clear which color is chosen(e.g., change the text of the button to bold, and unbold others)
  2. The dot size used for circle drawing can only be 2 or 8 in the version to the right. Change this so that the user can enter the dot size within a TextBox component and thus change it to other values besides 2 and 8. For more information on input forms and the TextBox component, see the No Texting While Driving app of Chapter 4
Solution for Customization Exercises. Download this zip file, then open App Inventor and choose More Actions | Upload Source.