week # 03 Visual Programming Variables Canvas Screen Arrangement Event Handler

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 2

APP development

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 4

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 6 CLICK on the Display a DOT at that position CANVAS (picture) 7 DRAG on the Display DOTs on the DRAG path 8 Click on Wipe Remove ALL dots on the button CANVAS 9 Click on Take Use phone CAMERA to take Picture button picture & display it on CANVAS 5 VP Lecture Note by Dr. Hanh Pham

Tutorial # 03: “Paint Pot” INSTRUCTIONS to Build: http://appinventor.mit.edu/explore/ai2/paintpot-part1.html 1) Login to your account at: http://ai2.appinventor.mit.edu 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 6

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

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 8

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,3 Click on Red,Green, or Set the paint COLOR to Red,Green, or Blue Blue button 4 Click on Small Dots button Set the size of the DOT to 3 pixel 5 Click on Big Dots button Set the size of the DOT to 7 pixel 6 CLICK on the CANVAS Display a DOT at that position (picture) 7 DRAG on the CANVAS Display DOTs on the DRAG path 8 Click on Wipe button Remove ALL dots on the CANVAS 9 Click on Take Picture Use phone CAMERA to take picture & button display it on CANVAS VP Lecture Note by Dr. Hanh Pham 9

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

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 11

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

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 13

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 14

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 15

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 16

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 20

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 21

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

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 18

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

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 25

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

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

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 28

References These slides contain materials from many sources including the following: • http://www.appinventor.org http://appinventor.mit.edu “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