selfie.jpg
selfie.jpg



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 you may want to refer to that one if you have forgotten how to do things.



This video gives an overview of the app.


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


SelfieAlternateImage.PNG

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



Phase 1: Cycle through the images. Take a picture to add to your images.



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

A) Add a canvas and buttons to control moving through the images.
B) Upload five images you will use for your slideshow
C) Add a Camera component

Blocks



2. Add the functionality to be able to display your images and take pictures.


3. Test your app



Phase 2: Adding circles


1. When the screen is touched, draw a circle at that point. Pick whatever size and whatever color you like. It this example, I've used the radius I pulled from the slider, but for now just use a fixed radius.


SelfieOpenCircle.PNG

2. In order to control the size of the circle. You need to add a slider bar. Test your app.


3 While the slider controls the size, the user has no idea what size he/she has selected. Let's give them a preview of the circle by using a small sample canvas (as shown in the overview video). Test your app.


SelfieSampleCircle.PNG


Phase 3: 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.


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

A) This is easiest if you copy your original list of photos to the ImageList..


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

A) To do this we will need to replace an item in the list. See if you can find this.
B) Then we will need clarify which list we are using, "ImageList"
C) We need to specific the Index number of the item we want to replace, "whichImage"
D) We need to know the name of the new image. This will be returned from the call.DrawingCanvas.save. N

If you need to see the code, click **here.


Notice how this block connects. Because the tab on the piece extends to the side, this tells you a value is being returned. Look at the examples below. The procedure on the left does something. The procedure on the right returns something. Notice the tabs on the calls to those procedures. If the tab (and blank) is at the bottom/top - you will use it differently than when the tab is to the left.

SelfieDoSomething.PNG


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.






Challenges


1. Allow the user to name each picture. Using list picker, allow the user to pick which slide s/he wants to see.2. Allow the user to automatically see all the slides in order, delaying a second after each one. Note you can enable and disable the clock timer by setting Timer.Enabled.


The original instructions for selfie slideshow can be found here:

Selfie Slideshow