Topic 3

Events and properties of different components

Build in blocks

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:

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

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.

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.

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.

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.

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