Events and properties of different components

Component	Event / Properties /procedure	Description
Canvas		When the user does a drag from (PrevX1,PrevX2) to another (currentX, currentY)
		When the user touch a canvas providing the (x,y) position of the touch.
		When the user performs a quick swipe on the screen
		Clear anything drawn on this Canvas
		Draw a circle at the given coordinates on the given coordinates (x, y), with the given radius (r)
		Draw a line between the given coordinates.
		Set the name of the file containing the background image for the canvas.
		Set the color in which lines are drawn
Camera		Take a picture, then raises the AfterPicture Events
		Indicates that a photo was taken with the camera and provided the path to the stored picture

 

Build in blocks

Define

Define a global variable with an initial value. After a global variable is defined, you can set its value by a block in ‘My Building Block’ – ‘My Definition’ Define a procedure that returns a result Define a procedure that does not returns a result

 

Practical 3: Paint Pot

Program Requirements:

1.          Create a Canvas with a background Image. The image can be changed by taking photo with a camera.

2.          It will ‘DrawLine’ when you ‘Dragged’ on the Canvas.

3.          It will ‘DrawCircle’ when you ‘Touched’ the Canvas.

4.          Create 3 buttons to change the PaintColor of Canvas to ‘Green’, ‘Blue’ and ‘Yellow’

5.          Create buttons to change the radius of DrawCircle.

6.          Create a button to clear the drawing on the Canvas

 

Instructions:

A.      Login the web based platform http://appinventor.mit.edu and create a project called PaintPot. (Old Server: http://beta.appinventor.mit.edu )

B.      Design the layout of your apps in App Designer

Ø   Add a HorizontalArrangement with 3 buttons. Rename the 3 buttons as ‘GreenButton’, ‘RedButton’, ‘BlueButton’.

Ø   Add a Canvas and rename it as ‘DrawingCanvas’.

Ø   Add a HorizontalArrangement with 4 buttons. Rename the four buttons as ‘TakePictureButton’, ‘WipeButton’, ‘BigButton’, ‘SmallButton’

Ø   Add a camera.

Ø   Download the file http://examples.oreilly.com/0636920016632/CH02_PaintPot/kitty.png and uploaded to your project. (Click ‘Add’ button and selected the file kitty.png)

Ø   Change the properties of the component as follows:

Component.properties	Value
GreenButton.BackgroundColor GreenButton.Text	Green Green

Change the properties of ‘RedButton’ and ‘BlueButton’ similar to ‘GreenButton’

Component.properties	Value
DrawingCanvas.BackgroundImage DrawingCanvas.PaintColor DrawingCanvas.Width DrawingCanvas.Height	kitty.png Red Fill parent 300 pixels
TakePictureButton.Text	Take Picture

Change the properties of ‘WipeButton’, ‘BigButton’ and ‘SmallButton’ similar to ‘TakePictureButton’

 

C.      Build your program with Block Builder

Ø   Change the PaintColor of Canvas (DrawingCanvas.PaintColor) by clicking the Color Buttons.

e.g. When the BlueButton.Clicked, Set the DrawingCanvas.PaintColor to Color Blue. 

Ø   Define a global variable dotsize to 5 (Build-in Block – Definition)

Ø   Adding the Touch Event of Canvas (DrawingCanvas.Touched) to draw a dot (circle) with the following blocks.

DrawingCanvas
My Definitions

Set the Coordinates of the Dot (x, y) and radius (r) as value x, value y and dotsize.

Ø   Adding the Drag Event of Canvas (DrawingCanvas.Dragged) to draw a line with the following blocks.

DrawingCanvas
My Definitions

 

When DrawingCanvas.Dragged happened, call DrawingCanvas.DrawLine to draw a line from (prevX, prevY) to (currentX, currentY)

Ø   Change the dot size with the following blocks.

Buttons
My Definitions
Build in – Math

When BigButton is Clicked (BigButton.Clicked), set the dotsize to 8. When SmallButton is Clicked (SmallButton.Clicked), set the dotsize to 2.

Ø   Clear the drawing with the WipeButton using the following blocks. When WipeButton is Clicked (Event WipeButton.Clicked), call DrawingCanvas.Clear to clear the drawing.

Ø   Letting the user take a picture as the background with the following blocks.

Camera1  TakePictureButton DrawingCanvas
My Definitions

When the TakePictureButton is clicked (Event TakePictureButton.Clicked), call Camera1.TakePicture to take a photo. After taking the photo (Event Camera1.AfterPicture), Set the Background of DrawingCanvas (DrawingCanvas.BackgroundImage) to the path of the photo (image)

D.     Test your apps with emulator.

Ø   Start the emulator and unlock the emulated phone.

Ø   Click ‘Connect to device’

E.      Package the phone apps for submission.

Ø   Click ‘Package for phone’ and ‘Downloads to this computer’.

Ø   Submit the Downloaded file in eclass.

 

Extension Activities

1.          Add labels to show the dotsize.

2.          Add two buttons to increase and decrease the line width.

3.          The Line width must be between 1 and 15.

4.          Disable the corresponding button when the Line width is 1 or 15.

 

 

 

Acknowledge: The above Practical was modified based on http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch2PaintPot.pdf

 

Solution to Practical:

Modified and additional parts for extension activities