1. week # 03 Visual Programming Variables Canvas Screen Arrangement
Event Handler

2. Outline 1. APP development
2. Tutorial(Class Project) # 03: PaintPot Simple
3. Variables, Canvas
4. Tutorial(Class Project) # 04: PaintPot Advanced
5. Homework #02
VP Lecture Note by Dr. Hanh Pham

3. APP development

4. The PROBLEM (requirements):
Tutorial # 03: “Paint Pot”
The PROBLEM (requirements):
 have 3 color buttons, so that user can select the paint color
 display a picture, so that user can paint on it
 have 4 buttons to:
o Take Picture
o Wipe
o Set the brush size Small
o Set the brush size Big
VP Lecture Note by Dr. Hanh Pham

5. Tutorial # 03: “Paint Pot”
The DESIGN:
• User interface: 7 buttons and a picture on a
canvas, as shown in the picture
Event User Action APP response
1,2,3 Click on Red,Green, Set the paint COLOR to or Blue button Red,Green, or Blue
4 Click on Small Dots Set the size of the DOT to 3 button pixel
5 Click on Big Dots Set the size of the DOT to 7 button pixel
CLICK on the Display a DOT at that position
CANVAS (picture)
DRAG on the Display DOTs on the DRAG path
8 Click on Wipe Remove ALL dots on the button CANVAS
Click on Take Use phone CAMERA to take
Picture button picture & display it on CANVAS
VP Lecture Note by Dr. Hanh Pham

6. Tutorial # 03: “Paint Pot”
INSTRUCTIONS to Build:
1) Login to your account at:
2) Create a new project called “t3_PaintPot”
3) In DESIGN window, add components: 7 buttons, Canvas, a picture, and a Camera
4) Use “Screen Arrangement” to place the buttons
5) RENAME the buttons
VP Lecture Note by Dr. Hanh Pham

7. Tutorial # 03: “Paint Pot”
In DESIGN window add these components:
VP Lecture Note by Dr. Hanh Pham

8. Tutorial # 03: “Paint Pot” SIMPLE
INCREMENTAL: FIRST build a SMIPLIER version with LESS events:
The PROBLEM (for SIMPLE):
 have 3 color buttons, user can select RED for the paint color
 use a FIXED size for a DOT
 display a picture, so that user can paint on it (only CLICK not drag yet)
 have 4 buttons to:
o Take Picture
o Wipe
o Set the brush size Small
o Set the brush size Big
VP Lecture Note by Dr. Hanh Pham

9. INCREMENTAL: FIRST build a SMIPLIER version with LESS events:
Tutorial # 03: “Paint Pot” SIMPLE
INCREMENTAL: FIRST build a SMIPLIER version with LESS events:
Event User Action APP response
1,2, Click on Red,Green, or Set the paint COLOR to Red,Green, or Blue
Blue button
Click on Small Dots button Set the size of the DOT to 3 pixel
Click on Big Dots button Set the size of the DOT to 7 pixel
CLICK on the CANVAS Display a DOT at that position
(picture)
DRAG on the CANVAS Display DOTs on the DRAG path
Click on Wipe button Remove ALL dots on the CANVAS
Click on Take Picture Use phone CAMERA to take picture &
button display it on CANVAS
VP Lecture
Note by Dr. Hanh Pham 9

10. Tutorial # 03: “Paint Pot” SIMPLE
In Block EDITOR window make these connections:
VP Lecture Note by Dr. Hanh Pham

11. Tutorial # 03: “Paint Pot” SIMPLE
INCREMENTAL: NOW
+ do the same for GREEN and BLUE buttons
+ add the event handler(blocks) for WIPE button
The PROBLEM (for SIMPLE):
 have 3 color buttons, so that user can select the paint color
 display a picture, so that user can paint on it (only CLICK not drag yet)
 use a FIXED size for a DOT
 have 4 buttons to:
o Take Picture
o Wipe
o Set the brush size Small
o Set the brush size Big
VP Lecture Note by Dr. Hanh Pham

12. Tutorial # 03: “Paint Pot” SIMPLE
In Block EDITOR window ADD these blocks and connections:
VP Lecture Note by Dr. Hanh Pham

13. Tutorial # 03: “Paint Pot” ADVANCED
INCREMENTAL: NEXT
+ add the event handler(blocks) for painting LINE with a DRAG
The PROBLEM (for SIMPLE):
 have 3 color buttons, so that user can select the paint color
 use a FIXED size for a DOT
 display a picture, so that user can paint on it with a TOUCH/CLICK
 user can paint LINE with a DRAG
 have 4 buttons to:
o Take Picture
o Wipe
o Set the brush size Small
o Set the brush size Big
VP Lecture Note by Dr. Hanh Pham

14. Variables it right at (X,Y) position VARIABLEs:
 Variable X stores coordinate X of the TOUCHED position
 Variable Y stores coordinate Y of the TOUCHED position
In this case X and Y are created automatically and received the values WHEN the user TOUCHED the canvas (that’s why X,Y are plugged to DrawingCanvas.Touched)
THEN, when we draw the
DOT(circle) we should draw
it right at (X,Y) position
THAT MEANS we need to plug these VALUES and to DrawingCanvas.DrawC
VP Lecture Note by Dr. Hanh Pham

15. Variables VARIABLEs: Where to get the VALUE of a variable?
 Click on “Variables”
under “Built-in” you’ll see:
 Drag it to the working area
Difference between: and ?
 use it when you’d like to WRITE a value(let’s say 5) to X
 use it when you’d like to READ a value(let’s say 5) from X
VP Lecture Note by Dr. Hanh Pham

16. Canvas + buttons don’t care about where users click. Canvas DO care !
+ can detect user TOUCH, record the touched position(x,y)
+ can detect user DRAG, record the dragged positions:
(prevX,prevY) to (currentX,currentY)
VP Lecture Note by Dr. Hanh Pham

17. Tutorial # 03: “Paint Pot” ADVANCED
INCREMENTAL: LAST
+ declare a global VARIABLE “dotSize”
+ add the event handler(blocks) for BigDots button
+ add the event handler(blocks) for SmallDots button
The PROBLEM (for SIMPLE):
 have 3 color buttons, so that user can select the paint color
 use a FIXED size for a DOT
 display a picture, so that user can paint on it with a TOUCH/CLICK
 user can paint LINE with a DRAG
 have 4 buttons to:
o Take Picture
o Wipe
o Set the brush size Small
o Set the brush size Big
VP Lecture Note by Dr. Hanh Pham

18. Tutorial # 03: “Paint Pot” ADVANCED
In Block EDITOR window ADD blocks to let user SELECT the DOT SIZE:
VP Lecture Note by Dr. Hanh Pham

19. Tutorial # 03: “Paint Pot” ADVANCED
In Block EDITOR window ADD these blocks and connections:
P Lecture Note by Dr. Hanh Pham

20. Tutorial # 03: “Paint Pot” ADVANCED
INCREMENTAL: NEXT
+ add the event handler(blocks) for Taking Picture
The PROBLEM (for SIMPLE):
 have 3 color buttons, so that user can select the paint color
 use a FIXED size for a DOT
 display a picture, so that user can paint on it with a TOUCH/CLICK
 user can paint LINE with a DRAG
 have 4 buttons to:
o Take Picture
o Wipe
o Set the brush size Small
o Set the brush size Big
VP Lecture Note by Dr. Hanh Pham

21. Tutorial # 03: “Paint Pot” ADVANCED
In Block EDITOR window ADD these blocks for “Take Picture” button:
VP Lecture Note by Dr. Hanh Pham

22. The PROBLEM (requirements):
Homework # 02: “My Dots”
The PROBLEM (requirements):
 have 5 color buttons, so that user can select the paint color
 display a blank white picture(White Board), so that user can put dots (touch) on it
 have 3 buttons to let user to:
o Take Picture
o Wipe all dots
o Switch to White Board
 has a textbox so that the user can type a text in and a button to print that text on the canvas
VP Lecture Note by Dr. Hanh Pham

23. Homework # 02: “My Dots” In DESIGN window add these components:
VP Lecture Note by Dr. Hanh Pham

24. Homework # 02: “My Dots”
In Block EDITOR window ADD these blocks and connections:
VP Lecture Note by Dr. Hanh Pham

25. Homework # 02: “My Dots” EXTRA:
 Keep all features of Tutorial #3 (Drag, set Dot size)
 Try to find a way to set the font size for the printed text ?
 Let the user set the font size (create another textbox for users to enter a font size) ?
 Play some sound when user click on Wipe button
 …
VP Lecture Note by Dr. Hanh Pham

26. References
These slides contain materials from many sources including the following: •
“App Inventor: Create Your Own Android Apps” by David Wolber, Hal
Abelson, Ellen Spertus, Liz Looney, Publisher: O'Reilly
App Inventor for Android: Build Your Own Apps - No Experience Required, Jason Tyler •
VP Lecture Note by Dr. Hanh Pham 31