Android Programming‎ > ‎AppInventor‎ > ‎

Topic 3

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’

Layout
 

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:

solution

Modified and additional parts for extension activities

Extension Part

Subpages (4): Video 1 Video 2 Video 3 Video 4
Ċ
T. Chan,
Oct 11, 2012, 1:21 AM
Comments