3.
4 App Write Up [235] Period: Name:
Overview & Purpose ( [10] screen cap, [5] App Title, [10] Describe)
Paint Pot Project
The app helps the user create drawings on a given campus. The
user can also take a picture with their phone to put onto the
canvas that allows them to draw on the image.
Viewer [10] & Components [10]
Complete Code
Repeat the sections for each task.
No procedures.
[10 + 10] Variables
This initializes 2 different variables named dotSize and dot, both set to the value 5. The variable dotSize is
the variable meant to be changed throughout the code when user wants the dot size to be changed, while
the global dot variable is meant to keep the original value throughout the whole app.
1. [10 + 10] Add a custom image to the app instead of using the cat image that is provided.
The custom image here is another cat that was downloaded and uploaded to MIT app inventor to replace
the provided cat image.
2. [10 + 10] Add a button to support a 4th color option for the app.
When the yellow button is clicked in the app, it will change the paint color in the canvas to yellow. If the
user were to draw a line or put a dot on the screen, it will be yellow instead of any other color provided.
[10 + 30]
3. Implement an algorithm for ButtonMinus that will subtract 1 from dotsize.
4. What happens when dotsize < 1?
5. Put an If-then block in ButtonMinus so they dotsize cannot be less than 1.
When the buttonMinus button is clicked, it will first set the global dotSize variable to what it was
previously, minus 1. If the variable was 6 before, it would now be 5. If the user were to keep pressing minus
before, the dotsize would be below 1 and it wouldn’t draw anything. The if-then block in this code prevents
that by checking after the dotSize variable is less than 1. If it is less than 1, then the dotSize will be reset
back to 1 so that the user is still able to draw something on the canvas because if the dotSize were 0,
nothing would be drawn. The last part of this sets the label to whatever the global dotSize variable
currently is, allowing for the user to know how large the dot will be.
6. [10 + 10] Put an If-then block in ButtonPlus so they dotsize cannot be greater than 25.
When buttonPlus is clicked, it sets the global variable dotSize to whatever it was before plus 1. If the
variable had the value 6 stored, it would then become 7. Then an If-then statement is ran to check if the
dotSize is greater than 25 since 25 is the max dotSize that is allowed here. If it is greater than 25, then the
variable dotSize would be reset back to 25. Then the label would change so it shows what the variable
dotSize is currently at.
7. [10 + 10] Add a button that resets the dot size back to its original value.
(Use a different variable to remember the original value of the dot size.)
This code runs when the Reset button is clicked. The global variable dotSize is set to the global variable dot,
which holds our original dot size that we wanted to keep. The label then changes to show the dot size is
now at its original size.
8. [10 + 20] Take a photo with the camera and use that as the Canvas background image!
(You will need to use a new Button, the Camera component, and the Camera’s AfterPicture event.)
There is a camera button that the user clicks in order for the app to use the camera and take a picture to
put on the canvas. When the camera button is clicked, it calls the camera component to run and allow for
the user to take a picture. Then the camera after picture is used to set the canvas background image to that
image that the user has just taken.
(The 2nd image is a picture that was taken of my computer at home.)
9. [10 + 10] 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.
When the share button has been clicked in the user interface, it calls the sharing component to pull a file
from the app, in this code it first calls the canvas to save itself before sharing that saved file of the canvas. If
a person were to use the save button here, it would save the canvas and whatever is drawn on it before
sending a png to whoever the recipient is.
10. [10 + 10] Use a slider to change the line width.
(Set the min to 1, and max to 10 in the slider.)
The slider here checks if the slider’s position has changed. Then it sets the canvas’s linewidth to where the
slider is, a number between 1 and 10. The left side is the minimum which is one, and the right side is the
maximum which is 10.
