Pa4 - Paint Pot - Adjust your Paint Brush and Take a Picture

Change the size of your paint brush and take a picture with your phone.

Pa4.1 Add a Slider

A slider will allow your user to change the size of their paint brush by moving a bar from left to right.

A. In the Designer page, find the slider component in the Palette panel and drag it into the Viewer panel.

B. Notice the MaxValue, MinValue, and ThumbPosition properties of the slider. Adjust these numbers to see how they affect your slider.

Your slider allows your user to adjust a number by moving the slider from left to right. In this case the number is associated with the size of our paint brush width. So a 1 is equal to 1pixel wide and a 5 is equal to 5 pixels wide.

You can set the MinValue and MaxValue to control how small or how big the number can get. You can also set the ThumbPosition to set what the initial number is.

C. Now in the blocks page you will need to find the set.LineWidth statement.

D. Add the set.LineWidth statement to the when.Dragged block.

Notice: The set.LineWidth statement is looking for a number argument. This needs to be filled with a block from from the slider component that tells the app where the slider bar is positioned.

E. Find the slider.ThumbPosition argument.

F. Now add the slider.ThumbPosition argument to the set.LineWidth statement.

G. Test your app.

a. See how changing the slider changes the width of your line when you draw.

Pa4.2 Take a picture with the app

A. First, in the Designer page add a button with the text 'Take a Picture' or 'Say Cheese.'

a. Rename your button with a meaningful name.

b. You may want to add a horizontal arrangement block to put your 'ClearButton' and your 'Take a Picture' button together.

B. In the Designer page, add a camera component to the Viewer panel.

Notice: The Camera component is not visible in the Viewer panel, but you can see it under the Viewer panel.

C. In the Blocks page, find the when.Click block in the camera tab and drag it into the Viewer panel. Then add the call.TakePicture statement, which can also be found in the camera tab.

Now that we can take a picture, we must be able to tell the app where to put the picture. For this app we will put the picture into the Canvas.

D. Find the when.AfterPicture block in the camera tab and drag it into the Viewer panel.

E. In the Canvas tab find the set.BackgroundImage statement and add it to the when.AfterPicture.

F. Grab the 'get image' argument from the when.AfterPicture block and add it to the set.Backgroundimage statement.

Pa4.3 Test your app!

A. Take a picture with your app and draw on it.