PaintPot Hack This is an app with a background image of a cat that the user can draw on the image with different colors

Transcription

1 PaintPot Hack This is an app with a background image of a cat that the user can draw on the image with different colors Login to App Inventor Here are instructions on how to login to App Inventor and create a new project. 1. Go to 2. Login in using your Technovation Challenge gmail account and password. 3. Click on the My Projects tab, then click New. 4. Create a new project named PaintPot. Design the app interface Download the Assets Instructions where to find the files you need for the app. 1. Download the image file of the kitty from Change the Screen Title Instructions on how to change the name of the screen Title in the Screen component. 1. Click on the Screen component in the Designer. 2. In Properties panel change the Title field to PaintPot. You should see this change when you connect your phone, with the new title showing in the title bar. Add the Color Buttons Instructions on how to add the color buttons. 1. Drag a Button from the Basic Palette onto the screen. 2. Click Rename and change the name to "RedButton". 3. In Properties panel, change the BackgroundColor to Red. 4. In the Text field change the text to Red. 5. Make another button for green named GreenButton with green BackgroundColor and Green as the text. 6. Make another button for blue named BlueButton with blue BackgroundColor and Blue as the text. Add a Horizontal Arrangement Instructions on how to add a horizontal arrangement to line up the buttons in a horizontal row instead of on top of another. 1. From the Screen Arrangement Palette, drag a HorizontalArrangement component onto the Viewer area. 2. In the Properties panel click Width and change it to Fill parent. 3. Drag the RedButton, GreenButton and BlueButton into the HorizontalArrangement. Add a Canvas Instructions on how to add a canvas to draw on. 1. Drag a Canvas from the Basic Palette onto the screen. 2. Click Rename and change the name to "DrawingCanvas". 3. In the Properties panel click Width and change it to Fill parent and set its Height to 300 pixels 4. Set the BackgroundImage of the Canvas to the kitty.png that was downloaded earlier. Click the None field and choose Add to upload the image file. Add a Wipe Button Instructions on how to add a wipe button. 1. Drag a Button from the Basic Palette onto the screen underneath the Canvas. 2. Click Rename and change the name to "WipeButton". 3. In the Text field change the text to Wipe. 1

2 Program the app Open the Blocks Editor and connect the phone Instructions on how to open the Blocks Editor and connect a phone. 1. Open the Blocks Editor. Your computer will ask you to download a Java file. Click OK. 2. Connect the phone to the computer via the USB cable. 3. Click the Connect to Device and choose the phone from the pull down menu. Program the Color Buttons Instructions on how to change the drawing color when the color button is touched. 1. Click on the My Blocks column. 2. Open the drawer for RedButton and drag out the RedButton.Click block. 3. Open the DrawingCanvas drawer. Drag out the DrawingCanvas.PaintColor block and place it in the do section of the RedButton.Click block. 4. Click on the Built-In Column. Open the Colors drawer and drag out the block for the color Red and attach it to the DrawingCanvas.PaintColor to block. 5. Repeat steps 2-4 for the blue and green buttons. Program the Wipe Button Instructions on how to clear the canvas when the wipe button is touched. 1. Click on the My Blocks column. 2. Open the drawer for WipeButton and drag out the WipeButton.Click block. 3. Open the DrawingCanvas drawer. Drag out the DrawingCanvas.Clear block and place it in the do section of the WipeButton.Click block. Add a Touch Event Instructions for when the Canvas is touched a dot is drawn at the spot where you touch. 1. From the drawer for the DrawingCanvas, drag the DrawingCanvas.Touched block to the workspace. The first two arguments of the block stand for the x and y coordinates of where the touch happened. We'll save touchedsprite for a later tutorial. 2. From the drawer for the DrawingCanvas, drag out the DrawingCanvas.DrawCircle block and place it in the do section of DrawingCanvas.Touched. 3. On the right side of the when DrawingCanvas.DrawCircle are are three sockets where you must specify values for the x and y coordinates where the circle should be drawn, and r, which is the radius of the circle. For x and y, you'll use values of the arguments that were supplied to the Touched handler. Open the My Definitions drawer at the top of the column. Drag out the value x and value y blocks and plug them into the corresponding sockets in the when DrawingCanvas.Touched block. 4. You'll also need to specify the radius of the circle to draw. Five (pixels) is a good value for this app. Click in a blank area of the screen to bring up the hover menu and select math (green). Select 123 from the dropdown list, to create a number block. Change the 123 to 5 and plug that in for the radius slot. You can also just type 5 followed by return, to create a number block with a value of 5. 2

3 Test your Work Try out what you have so far on the phone. 1. Touch a color button. 2. Now touch the canvas, and your finger should leave a spot at each place you touch. 3. Touching the Wipe button should clear your drawing. Add Drag Events Instructions how to a draw line when your finger is dragged across the phone. 1. From the DrawingCanvas drawer, drag the DrawingCanvas.Dragged block to the workspace. 2. Also from the DrawingCanvas drawer, drag the DrawingCanvas.DrawLine block into the do slot of the when DrawingCanvas.Dragged block. A drag event comes with 7 arguments. These are three pairs of x and y coordinates that show the position of your finger back where the drag started, the current position of your finger and the immediately previous position of your finger. There's also a sprite, which we'll ignore for this tutorial. 3. Click on the My Definitions drawer. You should see the blocks for the arguments you need. Drag the corresponding value blocks to the appropriate slots in when DrawingCanvas.Dragged: x1 and y1 should be prevx and prevy; x2 and y2 should be currentx and currenty. Test your Work Try out what you have on the phone. 1. Drag your finger around on the screen to draw lines and curves. Touch the screen to make spots. Use the Wipe button to clear the screen. Creating variables 3

4 Instructions on how to make variables to change the size of the dots drawn on the canvas. 1. In the Built-In column, open the Definitions drawer. Drag out a def variable block. Change the text that says variable to small. 2. Plugged into the def block is a block with a question mark. This means the value is unassigned, in other words, it doesn't have a value yet. You need to change it to 2. Move the cursor next to the question mark and a small downward arrow appears. Click on the arrow and select 123 to indicate that you want to fill in a number. The question block changes to a number block. Change the 123 to 2 and press return. 3. Similar to small, define a global variable big, whose value is 8 and define a global variable dotsize and give it an initial value of 2. Using the variables Instructions on how to change DrawCircle in the touch event so that it uses the value of dotsize rather than always using In the Blocks Editor, switch to the My Blocks column, and open the My Definitions drawer. You should see six new blocks, two for each of the three variables defined - a global block that produces the value of the variable and a set global block that sets the variable to a new value. 2. Go to the DrawingCanvas.Touched event handler and replace the number 5 block in call DrawCircle with the global dotsize block from the MyDefinitions drawer. Changing the values of variables Instructions on how to set up a way to change dotsize to be small (2) or big (8) with buttons. 1. In the Designer, drag a HorizontalArrangement component into the Viewer pane below the DrawingCanvas component. Rename the component BottomButtons 2. Drag the existing WipeButton into BottomButtons. 3. Drag two more button components from the Palette into BottomButtons, placing them next to the WipeButton. 4. Rename the buttons ButtonBig and ButtonSmall and set their Text to read "Big dots" and "Small dots", respectively. 5. In the Blocks Editor under My Blocks, create a when... Clicked event handler for ButtonSmall that changes dotsize to be the value of small. To change dotsize use the set global dotsize block from the MyDefinitions drawer and plug in the global small block. 4

5 6. Make a similar event handler for ButtonBig. Save and run your application 1. Save your application. 2. Back in the Component Designer, choose Package for Phone. 3. On your phone the PaintPot app will appear. 4. Test the app by drawing on the kitty image by using all the buttons. Hack your app! Now that you ve completed the tutorial it s your turn to make it your own. 1. Change the image file associated with the canvas. 2. Add a sound file when the WipeButton is touched. 3. Use the camera function on your phone to take a photo to use as the image background on the canvas. Hint: You ll need to use the Camera component from the Media Palette in the Designer. 5