The Temperature Converter



CSCE 101 Lab 5 PaintPot and the Canvas: Academic HonestyThe work you turn in is to be your work, not copied from someone else, from the web, or generated by a program.Never allow anyone access to your files.Never give anyone your password.Never share your USB memory or email your files to anyone else.Never give anyone a printed copy of your file or an electronic copy.Never allow anyone to copy your work.Problem Statement In this lab you will be creating an app with only one screen. The screen will contain the work completed in the pre-lab, along with the additional interfaces and controls added in this lab document.Part 1: Changing the PictureThis part is not required to be completed during your lab time. You will not have to take and submit any screenshots for this lab. The completed Lab 5 will be due on the date posted on your lab instructor’s webpage.In this lab, you’ll be working in the project you’ve already created to complete your pre-lab.You’ll be adding the functionality to be able to change the background image of your canvas to something other than the cat (which was assigned as the background image in the pre-lab). To do this, use Google to find and download three or more images.The Layout:Within your Lab 5 project, add the images (from step 2) to the Media pane of the Designer by clicking “Upload File...”210629540830500In order to change the image, we’ll use a component called a ListPicker. Grab a ListPicker from the User Interface palette and drop it beside the “Wipe” button within a horizontal arrangement (see the screenshot below for reference).Rename the ListPicker, so the name is more descriptive of its purpose.1666875000The ListPicker we’ve added will allow us to select from a list of image sources for the Canvas’s background. In order to have your ListPicker show a list of possible files as sources for the background image, you will modify the ElementsFromString property.Add a comma-separated list to the ElementsFromString property, using the image names (making sure to include extensions like “.jpg”, “.png”) of the images you added in step 3.The Coding:Make sure to start the emulator in order to test your project. (Connect->Emulator)Open the Blocks view.We will now program the ListPicker to change the background image of the Canvas. To do this, we will need the event handler for the ListPicker’s .AfterPicking event. This block allows us to determine what will happen after a user has made a selection from the list provided by the ListPicker.Within the ListPicker’s .AfterPicking block (in the “do” portion), use blocks to change the .BackgroundImage property of the Canvas.You will set this property to be the .Selection property of the ListPicker.Your code will look something likewhen ListPicker.AfterPickingdoset DrawingCanvas.BackgroundImage to ListPicker.SelectionPart 2: Different Drawing ToolsWe will now add additional functionality to our app by providing different drawing tools for our user. We already have a pencil—this draws a continuous line wherever we drag our cursor/finger over the Canvas. We also have a dot tool, which draws a large dot on the screen when the Canvas is touched.We would like to be able to add a tool that allows a user to draw straight lines on the Canvas.The Layout, continued:Add buttons for Pencil and Line within the horizontal arrangement you added in Part 1, Layout step 4.1838325206311500Change the Text properties of the buttons in order to make it clear what each button does (“Pencil” and “Line” are okay).The Coding, continued:Make sure to start the emulator in order to test your project. (Connect->Emulator)Open the Blocks view.Use Built-In -> Variables -> initialize global name to to define a global variable.This global variable will be used to determine which tool is active. Depending on what the value of this global variable is, the Canvas will respond differently (either by allowing the user to draw using a free-draw pencil or with straight lines).Set the name of the variable to something more descriptive, such as tool.At the “to” opening in your variable initialization block, attach a text (“ “) block and set the initial value of the variable to “pencil”Program the Pencil and Line buttons to change the value of the tool variable when they are clicked.Your code will look something likewhen PencilButton.Clickdoset global tool to “pencil”From proper completion of the pre-lab, you should already have code which can free-draw lines across your canvas. Since we now have an additional tool and we don’t want their two uses to overlap, we need to create some boundaries.The code already found in your when DrawingCanvas.Dragged do block should only execute when the tool variable has a value of “pencil.” This naturally calls for an if (Built-In -> Control)Move all the code inside the when DrawingCanvas.Dragged do area inside the then area of an if-then block. Then move this if-then block back into the do portion of when DrawingCanvas.Dragged.Use an equality test ( =, found under Built-In -> Logic) for the test condition.In the condition, we are comparing the value of the tool variable with the text “pencil”Test it! Make sure you can only free-draw on your Canvas when the Pencil tool is selected.In order to program your Line tool, you will need two different event handlers. In this app, the line tool will allow a user to draw a straight line between two points on the Canvas. Those two points are defined by two events:The user initially touching the screen, before they have removed their finger from the screen (or, if using the emulator, before they release the mouse button) andThe user removing their finger from the screen (or, if using the emulator, releasing their finger from the mouse button so they are no longer clicking).The two events listed above correspond to the .TouchDown and .TouchUp events of the Canvas.In order to use variables between two event handlers in your code, you will have to use two additional global variables. These variables will store the x and y coordinates of the starting point of the line to be drawn by the Line tool.So initialize two more global variables (one for the x coordinate and the other for y) to have some number value at initialization (0 is fine).Drag out a when DrawingCanvas.TouchDown do block.Note that there are two local variables available for use in this block—they are located at the top left corner of the block (below “when” and above “do”). The variables are named x and y and correspond to the x and y coordinates that indicate where the user first started pressing on the Canvas.In the “do” portion, add blocks that can change the values of the global variables to be the values of the local variables in the .TouchDown block. Now drag out a when DrawingCanvas.TouchUp do block.You can see that this block also has x and y variables. You’ll be using these to determine the finishing point for drawing your line!In the “do” portion, use a call DrawingCanvas.DrawLine block to draw the line.The x1 and y1 parameters are the starting point of your line—you should use the values you’ve stored in your global x and y variables for these parameters.The x2 and y2 parameters are the ending point of your line—you should use the local variables provided by the .TouchUp block for these parameters.We want to make sure the straight line is only being drawn between TouchDown and TouchUp points when the selected tool is Line. In order to ensure this, use an if-then block to surround your call DrawingCanvas.DrawLine.Use an equality test to compare the value of the global variable tool against the text “line”Test it! Make sure your line tool draws a straight line on the canvas (between the points at which you “TouchDown” and “TouchUp”) only if the line tool is selected.Submitting Your FileOpen "My Projects" in upper right of the App Inventor WebpagePut a check next to the project you want to download (you can only download one at a time). Download the modified version of your app, if you have multiple copies.Project->"Export selected project (.aia) to my computer"The file will download so go, in Chrome, to the download location by clicking the?arrow next to the file name?at the bottom of the screen and selecting "Show in folder".Move the _______________.aia file to your X:\101Labs directory for grading (or upload). ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download