Finger Painting

Create The User Interface

We are going to create a simple drawing app. Your teacher will show the class the screencast video for creating the user interface. You can watch this again yourself at any time:

Create a similar screen for your own FingerPaint app.

Create The Program Blocks

An algorithm is a design for a program. Algorithms show the steps taken by the program as it runs. For the apps we create with App Inventor we will need to write short algorithms for each event that can happen when the app is run.

Here are the events and algorithms for the FingerPaint app:

When a colour button is clicked

1. set the canvas paint colour to the appropriate colour

When canvas is touched

1. draw a circle at that location

When wipe button is clicked

1. clear canvas

When small button is clicked

1. set line width to 5 pixels

When large button is clicked

1. set line width to 15 pixels

When canvas is dragged over

1. draw a line from the start point to the end point of the drag

Your teacher will show the class the screencast video for creating the program. You can watch this again yourself at any time:

Now make your own FingerPaint app. Your code should look similar to the picture below:

Testing

Using either the Android emulator or live testing using a mobile phone, try out your app. Does it work the way you expect it to?

There are two bugs that you should have noticed when you were testing the FingerPaint app:

• The starting colour of the “paint” is black. Once you select another colour, there is no way to get back to black.
• The starting width of the line is 1 pixel wide. Once you select the big or small brushes (5 or 15 pixels), there is no way to get back to 1 pixel.

Extension Task 1

A variable is a space in a computer’s memory where we can hold information used by our program. It’s just like storing something in a box.

To create a variable, we need to give it variable a sensible name that indicates the kind of information that’s been stored there…just like putting a label on the box to tell us what’s inside. In App Inventor, the built-in initialize block can be used to create a variable.

We could use a variable to keep track of the brush size.

Now alter your app so that every time the user clicks on ButtonBigBrush or ButtonSmallBrush, the size of the brush is increased or decreased by 1 pixel. The code for making the brush size bigger is below, but you will have to work out the code for making the brush size smaller yourself:

Extension Task 2

Add another horizontal row of colour buttons below the current ones. Hint: by setting width to Fill parent…, you can also fit more colour buttons in a row – especially if you remove the Text property in the button.

Extension Task 3

Let’s add another feature: a camera button.

This will take the user to the camera app on the phone. After taking a photo, it will become the background of the drawing canvas. The user can then paint on the photo!

Hint: Add a camera button to the bottom row on the screen (a camera icon is provided with this lesson’s graphics). You will also need a camera component (Media→Camera).

Let’s consider the events and algorithms that we would use to make this happen:

when camera button is clicked

1. take a picture

after picture is taken

1. set background image of canvas to the camera photo

The code to implement this is below:

Extension Task 4

Okay – one last feature: a save button.

This will let users save their masterpieces to the image gallery on their phone!

Hint: add a save button to the bottom row on the screen (located with the other downloads on the I Heart My Smartphone page). You will also need a TinyDB component – this is used to store data permanently on the phone (Storage→TinyDB).

Note that this feature only works when the app is downloaded to the phone. It will not work under live testing or on an emulator.

The event and algorithm for the code you will need is below

when Save button is clicked

1. store drawing canvas image as file