In PaintPot, you'll create an app in which the user can draw circles and lines, change the color of drawings, and use the camera to change the background of the drawing. To get you ready, check out the following:
Take a look at the picture of the PaintPot app. What components do you think you will you need to complete this app?
You'll need a Canvas, some Buttons and Labels, a couple of HorizontalArrangements, and a Slider.
Take a look at the following blocks and answer the questions:
What does it do?
Draws a point at the given coordinates on the Canvas.
What should go in the empty parameter slots?
X-
The X position on the Canvas where a point should be drawn.
Y-
The Y position on the Canvas where the point should be drawn.
What does it do?
Draws the specified text at the specified coordinates.
What should go in the empty parameter slots?
Text-
The text that should be displayed.
X-
The X position on the Canvas where the text should be written.
Y-
The Y position on the Canvas where the text should be written.
What does it do?
Draws a circle at the given coordinates on the Canvas, with the given radius and filled in.
What should go in the empty parameter slots?
X-
The X position on the Canvas where the center of the circle should be drawn.
Y-
The Y position on the Canvas where the center of the circle should be drawn.
Radius-
The size of the circle, in pixels, from the center to the edge of the circle.
What does it do?
Draws a line between the given coordinates on the Canvas.
What should go in the empty parameter slots?
X1-
The X position of the start of the line.
Y1-
The Y position of the start of the line
X2-
The X position of the endpoint of the line
Y2-
The Y position of the endpoint of the sline
Take a look at the following event (when) blocks:
Which Event Handler do you think should trigger drawing a line?
Which Event Handler do you think should be trigger drawing a circle?
You can change the color of lines and circles painted on a Canvas with the "set Canvas1.PaintColor" block.
In the PaintPot app, you'll change the PaintColor when a user clicks on a color button. Colors can be found in the colors drawer in Built-in section of the blocks editor on the left hand side
In the PaintPot app, the user can take a picture and use it as the Canvas background.
You need to think of two behaviors 1) “When (and how) will the camera be turned on, and 2) what to do when the user is done taking the picture.
In the app, you'll use a button, TakePictureButton, to trigger the camera staring up.
Once the picture has been taken and saved, the Camera component’s AfterPicture event handler is triggered. In that event, you can set the Canvas.BackgroundImage to the image that was taken by the camera.
One customization for PaintPot involves allowing the user to change the size of the lines that are drawn. You'll need a visual component that will allow the user to control line size. This could be a Textbox, Slider, + and - buttons, or some other user interface components..
Internally, you change the size of lines being drawn using the Canvas.LineWidth property:
The following is an example of how a TextBox and Button could be used to change the LineWidth:
You should always provide some type of feedback to the user when they do something. When they click a color button to change the color of circles and lines, the user interface should change to show which color is now "chosen". This feedback could be given in a number of ways:
Here is an example of the first possibility:
