Goal: For this selfie app, you will input several pictures and allow the user to put circles around people of interest.

***This builds off of the rainbow app, so make sure you've done that one first.

This video gives an overview of the app.

Allow the user to take picture and add it to the list of pictures.


This App has parts that are similar to all of our previous Apps so it will be a great review.


1. Let's first get all of the components that we need on to our screen and then we can start coding.

A) We need a Canvas placed in VerticalArrangment layout. We can call this canvas DrawingCanvas, because we will draw on this one.
B) Under the Canvas we should place a TableArrangement that is 3 columns by 2 rows ( you can change this in the property column).
C) In the TableArrangment we will place a second canvas which will display our line. We can call this the ShowLineCanvas. We will also want to place 4 sliders: 3 sliders to control the colors and 1 slider to control the width of the line.
D) Thus far we have added 2 canvases and 4 sliders, these will all be similar to what you did in the Color me a Rainbow App.

2. Under the sliders and second canvas we will need to place a second TableArrangement to place five button with the following labels: Clear Current Image, Next, Reset All, Save, Take Picture.

A) The 'Clear current Image' button will be used to clear any painting that you do on an image.
B) The 'Next' button will be used to go to the next image.
C) The 'Reset All' button will be used to return the App to it's original form.
D) The 'Save' Button will allow you to save all of the painting that you have done.
E) The 'Take Picture' button will allow you to take a picture and save it into your phone.
***It is important to review what each button is supposed to do, this will help you when you are adding blocks for each button.

3. Invisible Components: You need to add a camera component.


Phase 1: Draw on the Canvas

1. To draw on the canvas we will do many of the same things that we did in PaintPot and in Color me a Rainbow.

A) You will need to create a procedure for your line color and width

B) Use When blocks to grab the values from your sliders

C) Add other when blocks that activate when you touch or drag your finger across the canvas.

2. Procedure. You will need a procedure called setLine. This procedure will be placed in your when.PositionChanged block to control your sliders.

A) The procedure will need two set.LineWidth blocks for both of your Canvases (DrawingCanvas and ShowLineCanvas).
B) The procedure will also need two set.PaintColor blocks to adjust the color for your lines in both canvases.
C) Attached to your set.Paintcolor blocks you'll need to add a makeColor block which will allow you to attach your Slider blocks to control the color that you want.
D) Finally, you will need a call.Clear block and a call.DrawLine block to clear and display a line on your ShowLineCanvas.
*Remember your ShowLineCanvas will display what your line looks like before you actually use it. Because you will be adjusting it several times you'll want to clear it each time you make an adjustment.
**AFTER you have tried to make your own blocks check your answer.

3. Next you will need to do is to add a when.PositionChanged block for each of your sliders.

A) Inside each when.PositionChanged block you should add a call.setLine procedure block.

4. The last thing you will need to do is to add the blocks when.Touched and when.Dragged to allow your user to draw on the DrawingCanvas.

A) In your when.Touched block, you will need to add a call.DrawCircle block. This will be used to draw a circle around yourself in the image.
***Be sure to set Fill to false...otherwise your circle will be filled with color and you won't be able to see your face!
B) In your when.Dragged block you will need to add a call.DrawLine block.

5. Test your App, you should be able to draw on your DrawingCanvas and change your line on your ShowLineCanvas.

Phase 2: Add Images to your Canvas

1. To add images to your canvas first you will need to upload 5 images to your AppInventor page.

A) Be sure to name the images with something easy to remember. I usually do something like school1.jpg, school2.jpg or Selfie1.jpg, Selfie2.jpg. This is important because you'll need to write the file name in your App.

2. Create a variable with a make a list block attached to it.

A) In your list file add a textArgument.
B) Use your textArgument to attach the images. Remember you'll have to type out the image name with .jpg or .png ending.
      • For example your text argument will look like this:

3. Once your list of images is created you'll need a way to toggle between them, we will use the "Next" button to do this, but first we need to create a variable called "whichItem."

A)The variable whichItem should be give a numberArgument with a value of 1. This variable will be used as our index.

4. Now we will need a when.Click button for our "Next" Button. Inside the when.Click, we need the following blocks:

A) A set.BackgroundImage block that will select an image from our list (based on our index number) and set it to our DrawingCanvas background.
B) We will also need a block that will set our variable whichImage to our original whichImage value plus 1. In other words we need to increment our whichImage variable.
C) Finally, we need an if.then (note the link is not the same as the one you will need for this App, it is only an example) block that says, if the wichImage variable is greater than the length of the ImageList, then set the whichImage variable back to 1.

5. Test your App, you should be able to toggle between all of your images.

Phase 3: Take Pictures that add to your Image List

1. Remember using the camera you will need two when blocks, one to tell the camera to take the picture and one to tell the App where to store the picture.

A) The when.Click block can be used to hold a call.TakePicture block.
B) The when.AfterPicture block can be used to tell the App where to store the picture.

2. For this App we will want the picture to be stored in our ImageList list.

A) To do this we will need to add a list block that adds items to a list to our when.AfterPicture block. See if you can find this block in the lists drawer.
B) You will need to clarify which list you want to add to, and the item that you want to add. We will want to add the image from the camera to the list.

3. Test your App, you should be able to take a picture and your pictures should show up when you toggle through your canvas pics using the "next" button.

Phase 4: Save, Clear, and Reset your images.

1. We are almost done, now we just need to add functionality to three more buttons: "Save Image", "Reset", and "Clear".

2. For the "Clear" button we will need to add a when.Click button and then a procedure call.Clear to clear the canvas after we are done editing.

3. For the "Reset" button we will want to return our ImageList list back to it's original form.

A) So we will need go to our original variable and a set.ImageList variable

B) and then attach our original list to the set.ImageList block.

C) See here for an example.

4. Finally, our "Save Image" button will be used to replace the current image with the image that you have edited.

A) To do this we will need a block from the image drawer that allows us to replace an item in the list. See if you can find this.
B) Then we will need clarify which list we are using, which "ImageList"
C) The Index number that we are using which is "whichImage"
D) And the image that we are using to replace the item in the list with, this will be declared using a call.Save block from the DrawingCanvas.

5. Now Test your App, your buttons should allow you to save your edits, clear your edits on your image, or reset all of your images back to the original five images that you uploaded.