PaintPot.png



Goal:Learn how to make our apps interactive by letting our users paint on the screen.

Check out this video to see a preview of the app.


Phase 1




1. Start a new project! and name it first intial last name PaintPot. For example: CWattsPaintPot. We want to make an app where we can draw on the screen using different colors. Remember we start out on the Design Window as that is where we design the look of our app.


2.design button.png Create three buttons for the colors you want to use in your drawing. Make sure to:

A) **rename each button to be something meaningful such as "BlueButton" for the blue button (remember, no spaces in your button name!),

B) **change the color of the button to match your color, (color Blue!)

C) change the text on the button to name the color you will use (text "Blue").


3. Place the buttons in a horizontal **arrangement across the top of the screen. You'll need to drag all of your buttons into the grey horizontal arrangement box


4.You will need an area to draw in. We call this area a canvas. Add a **Canvas to your screen below the buttons. Make sure the Canvas fills the rest of the screen (hint: change the height and width to "fill parent").


5.Add a button at the bottom of your screen with the text "Clear All".


6. Take a look at your device. Do you have a row of buttons across the top for your colors and a button on the bottom to "Clear" ? Is there a canvas between these buttons? I colored my canvas pink but yours is probably white.


PaintPotPhase1.PNG



7.Screen Shot 2016-04-28 at 4.53.36 PM.png While we know what we intend to do with the buttons, they don't do anything yet. We have "designed them," but we haven't programmed them. Switch to the blocks screen

A) When we click a button, we want the button to do something. Find the when.click associated with your green button

B) We want the button to set the paint color on the canvas to the color we chose for our button. We need the **set.Paintcolor block from *Canvas inside our when.click block.

C) Now we need to pick the **color argument block that matches our button.

D) Each button needs its own when.click, set.Paintcolor, and color argument. Make sure to set this for each of your three color buttons!

E) Now let's actually draw something on our Canvas. We'll start with writing text wherever we touch the screen. Choose the when.Touched block from Canvas and put the call.DrawText inside. Add a textArgument for words like "App Camp" or "Hello World".


Key Terms
1. The kind of value is called its type. When the value is any string of characters it is known as a string type.
2. When a value is a whole number (without any decimal point), it is called an integer type.** The type of a value determines what you can do with it. You can add 1 to an integer, but that doesn't make sense for a string. You can speak either type. Types are an important concept in computer science.

8. Let's take a look at your device! What happens when you tap the screen? Does clicking your buttons change the color of your text?

Screenshot_20160429-193438.png

9. Now that you have a screen full of words, wouldn't it be nice to clear it all off easily? Let's set up that "Clear All" button.

A) We want to clear the Canvas when the button is clicked. Try finding the two blocks you need. They should be in the Canvas component in the Blocks page.


10. Try it out! Can you clear the screen with your "Clear All" button?



Phase 2



1.Screen Shot 2016-04-28 at 4.53.36 PM.pngLet's make it so we can draw anything we want on the app now.

A) To draw a line we need to be able to drag our finger across the *Canvas. Find the when.Dragged block and add a call.DrawLine inside.



2. Try it out! Can you draw swirls on the screen? Do your different colors still work?

Screenshot_20160429-200432.png

3.Screen Shot 2016-04-28 at 4.53.36 PM.png Ok, now we are going to draw circles using the call.DrawCircle statement.

A) You will need to change what happens in the when.Touched block. You can't have two different when.touched blocks for the same button as the device is confused which you intended.
B) Then you should find the call.DrawCircle statement in the Canvas component.

4.design button.png

Upload an **Image to your Canvas, so that you can draw on the image.



Phase 3



1. Add an option to your App that allows the user to adjust the line width.

A) design button.png Add a slider on the designer page. Don't forget to set the width to fill parent and change the min and max values!
B) Screen Shot 2016-04-28 at 4.53.36 PM.pngAdd a block from the slider component into the set.LineWidth argument.

2. Add an option that allows your user to take a photo and set their photo as the background image.

A)design button.pngIn the designer page, add a button with the text "Take a Picture" or "Say Cheese" or something similar.
B) design button.pngIn the designer page, add a camera component.
C) Screen Shot 2016-04-28 at 4.53.36 PM.pngThe way you grab a picture is a bit odd. There are two steps. (1)Take a picture and (2) grab the picture.
Go to the blocks page and see if you can find a statement that tells your App to take a picture when you click the button. *You'll need a when.Click block for this.
D) Screen Shot 2016-04-28 at 4.53.36 PM.pngNow you should use the **when.AfterPicture block to place the picture taken on the Canvas image.

Test it out! You now have an App that your users can interact with!



Challenges:

1 (*) Use the "when long click" feature to draw a circle which is not filled in.
2. (*) Each time the long click is executed, increase the size of the radius by five pixels. Note, you will need a variable to store the current radius to use. How can you change the value of a variable?


Useful Terminology:
Canvas -- A canvas is a component that we attach to our App to make our screen interactive. It allows the App to recognize when we touch the screen. It will also allow for animations which we will see later.
string type -- Any sequence of characters enclosed in quotations, for example "Hello World" is a string.
integer type** -- Any whole number without a decimal, for example 1 and 27 are integers.