Paint Pot - C

For this lesson you will take the app you developed earlier and you will complete several small programming projects that add enhancements to the Paint Pot app. Hints and suggestions are provided.

Objectives

continue learning how to navigate the App Inventor online programming platform
deepen your understanding of event-driven programming
program additional events into an existing mobile app
learn to solve
simple programming problems

Procedural Abstraction

When using the same lines of code over and over again, it is best to create a procedure in App Inventor in order to simplify your code (reduce complexity). Procedural Abstraction, the ability to name a block of code in a procedure and call it whenever needed, is a very important concept in programming. We are abstracting away from the details of that block of code and just using its name to do its job. This serves to organize our code by function and reduce its complexity and the repetition of code. In addition, it helps with debugging and maintenance since changes to that block of code only need to happen in one place.

Make sure when you create (define) a procedure that you give it a name that represents its purpose. That way when you call the procedure it will make sense to anyone who is reading your code.

In the College Board AP exam and create project, you will be asked to identify and use procedural abstraction. The following AP pseudocode is used for procedures compared to App Inventor code:

Getting Ready

Open MIT App Inventor and select your Paint Pot project. In order to differentiate the different instances of your program, it is best to rename the new one so that you can keep a copy of what you completed already. Select the menu drop-down "Projects" from the top, and select "Save project as..", and enter a new name: "PaintPotC".

Your first task is to create a procedure to display the dotSize value in the correct label. It should be named displayDotSize. Then, wherever you modify the dotSize variable you will add a call to displayDotSize immediately below the math blocks.

Changing the code by adding this procedure does not change the behavior of the app. This process is called refactoring and programmers do this to improve the quality of their code in various ways; e.g., to simplify its design, make it easier to read and easier to maintain.

Your second task is to add all 6 features listed below. You are encouraged to discuss your ideas for how to solve the problems with the instructor and your classmates.

Features to Add (complete all 8)

1. Add a button to support a 4th color option for the app, or more than 4. (From start of Paint Pot B: make color block)

2. Create a displayDotSize procedure, which will set label text for the dotsize using the String join block. Don't forget to remove your old set text labels and replace them with call displayDotSize.

3. Pick your own custom image instead of using the cat image that is provided. You can upload images to your project from either the Designer View or Blocks Editor view. Use the image as the Canvas BackgroundImage property.

- Make sure the image doesn't have any copyright restrictions.

4. As well as using an existing image, allow users to take a photo with the camera and use that as the Canvas background image.

- Hint: For this you'll need to use a Button, the Camera, and the Camera's AfterPicture event.
- See the Camera Component tutorial for assistance.
- Make sure the Canvas Height property is set to a percentage, ~60%, so that the new pictures don't mess up your interface.

5. The app currently has a ButtonPlus and ButtonMinus. But, we only completed the code for ButtonPlus. Now that you understand how to increment variables by 1, implement an algorithm for ButtonMinus that will subtract 1 from dotSize.

- Make sure you update the dotSize label after you change it.

6. Currently, if a user wants to use a larger dot and then use a smaller dot (or vice versus), they have to continually press the ButtonMinus (or ButtonPlus). If the current value of dotSize is 25, getting to 4 would be pain.

- Also, add a button that resets the size of the dot (circle) back to 5.
- HINT: You'll need another variable here to remember the original value of the dotSize.

7. If/Else Exercise: In computer programming, a bug is an error or defect, that prevents the app from working the way it is supposed to. In this app, if the user continues to press ButtonMinus, the value of dotSize will eventually become negative. If dotSize is negative, what will be drawn when the user touches the screen? Try fixing this bug by adding an if/then algorithm to the ButtonMinus block, that makes sure dotSize will not be zero.

- Hint: The If/Then block is found under Control in the Toolbox.

8. Add a Social/Sharing component and a share button to email what is drawn on the canvas using the Sharing.ShareFile block with the Canvas.Save block.

- Do not log in with your personal account. Simply share or email using the tablet account: chs.cs@gusd-stu.org

Make sure you get TClark to check your app to get credit for it.

Still Curious?

This Wikipedia article on refactoring talks about code smell as one motivation for engaging in refactoring. In the form below respond:

What is code smell? Describe two examples of 'code smell' and how refactoring would eliminate them.

Report abuse