the creative art of programming © copyright 2014 barbara ann walters. all rights reserved

© Copyright 2014 Barbara Ann Walters. All Rights Reserved.

The Creative Art of Programming


Canvas View

• Open the Layout drawer and drag a VerticalArrangement component to the screen

• Rename it VerticalCanvas• Set Height and Width to Fill parent• Open the Drawing and Animation Drawer and

drag a Canvas to the VerticalCanvas• Rename it DrawingCanvas


Canvas View

• Open the User Interface Drawer and drag a Button underneath the canvas, but inside VerticalCanvas– In the component tree (or hierarchy) DrawingCanvas and the

button should be indented under VerticalCanvas• Rename the button CanvasToControlsButton• Set Height and Width of DrawingCanvas to Fill parent• For CanvasToControlsButton, set Height to automatic and

Width to Fill parent• Set its Text property to “Controls”• This view is finished, so set VerticalCanvas’s visible property

to hidden


Controls View

• Open the Layout Drawer and drag a VerticalArrangement to the screen and rename it VerticalControls

• Set the height and width to Fill parent• Drag a HorizontalArrangement to

VerticalControls and name it Row1• Set Width to Fill parent


Row1

• Drag two buttons to Row1• Name the first SaveButton and the second

LoadButton• For each of them, set width to Fill Parent and

Height to Automatic• Set SaveButton’s Text property to “Save Image”• Set LoadButton’s Text property to “Load Image”


Row2

• Drag a HorizontalArrangement and place it under Row1

• Set Width to Fill parent• Drag 2 buttons to Row2• Name the first ClearButton and the second

ShareButton• For each of them, set width to Fill Parent and Height to

Automatic• Set ClearButton’s Text property to “Clear Image”• Set ShareButton’s Text property to “Save Image”


Row3• Drag a HorizontalArrangement and place it

under Row2• For Row3, set Width to Fill parent• Drag 3 buttons to Row3• After they are all dropped inside Row3, for

each of them, set width to Fill Parent and Height to Automatic


Row3 Buttons

• Name the buttons black, blue, red• For each of them, set the background color to

match their names• Erase the text in the Text property• The buttons will look squished, but they will

look fine on your device• Set Row3’s Height to Fill parent


Row4• Drag a HorizontalArrangement and place it

under Row3• Set width to Fill Parent and Height to

Automatic• This row will be filled in for the Silver level


Row5

• Add another HorizontalArrangement under Row4 and name it Row5

• Set Width to Fill parent• From the User Interface drawer, drag a Label to

Row5 and name it SelectedColor• Set its Width to Fill parent and its height to

Automatic• Set its Text property to “Selected Color”• Set Row5’s Height to Automatic


Row5

• Drag another label to Row5 and name it PreviewColor

• Set its Width to Fill Parent and Height to Automatic• Set its background to black and erase the text in

the Text property• Drag a Checkbox to Row5 and name it Dot• Set its Text property to “Dot”• Set its Width to Fill parent and Height to Automatic


Row6

• This is the LAST Row! Drag another HorizontalArrangement under Row5 and name it Row6

• Set its Width to Fill Parent• Drag a Label to Row6 and name it ThicknessLabel• Set its Text property to “Line Thickness”• Set its Height and Width to Automatic• Drag a Slider (UI drawer) to Row6 and name it

Thickness


Row6

• Set Thickness’s Width to Fill parent• Set MaxValue to 50• Set MinValue to 1• Set ThumbPosition to 25• Set Row6’s Height to Fill Parent


PreviewLine Button

• Drag a button under Row6 and name it PreviewLineButton

• Set its Text property to “Preview Line”• Set Height and Width to Automatic• Drag a Canvas under PreviewLineButton and

name it ExampleCanvas• Set its Width to Fill Parent and Height to 100

Pixels


Last UI Component!

• Drag a button under ExampleCanvas and name it ControlsToCanvasButton

• Set its Width to Fill parent and Height to Automatic

• Set its Text property to “Canvas”

• Go back and set VerticalControls’s visible property to hidden

• Set VerticalCanvas’s visible property to showing


Other Components

• From the Sensors drawer, add an AccelerometerSensor

• From the Storage drawer, add a TinyDB component and name it MyValues

• From the Social Media drawer, add a Sharing component


Components Are Complete!

• We know that was a lot!

• Next we’ll program the blocks. This won’t be nearly as complicated as the user interface


DrawingCanvas Blocks

• First we’ll set up the canvas like our previous app• Here are the blocks to draw lines on the canvas


Accelerometer Blocks

• Next catch the Shaking event and clear the canvas


Switching to the Controls View

• When the CanvasToControls button is clicked, set VerticalCanvas’s visible property to false (means hidden) and VerticalControls to true

• The false and true blocks are in the Logic Built-in


Switching Back to the Canvas

• When the ControlsToCanvas button is clicked, set VerticalControls visible property to false and VerticalCanvas to true

• The false and true blocks are in the Logic Built-in


Changing Line Thickness

• When the position is changed on the Slider, it generates the PositionChanged event

• You can use the value on the ThumbPosition to set the LineWidth on the two canvases


Changing Paint Color

• When a color button is clicked, the PaintColor is changed on both canvases

• Also, the background color on the PreviewColor label has to change

• Color blocks are found in the Colors Built-in


Changing Paint Color

• The previous set of blocks for the black button have to be repeated for each color (black, blue, red), but you can copy these blocks and then just select the correct button name. You will need to replace the color blocks too


Variable Filename

• Go to the Variables Built-in and create a new variable named filename

• Go to the Text Built-in and get a textfield block• Leave it empty• It will get filled in when the DrawingCanvas is saved


Saving the Canvas• DrawingCanvas’s SaveAs method is called when SaveButton is

clicked• Notice the canvas’s SaveAs block• It has a connector on the left side• That’s because it returns a value which is the full path to the

image file it created• We pass in just the name of the file, but get a full path as a

return value• We will save that value in the variable “filename” we just created• Don’t create this set of blocks, it’s just an example


SaveButton• Here are the blocks to run when SaveButton is clicked • SaveAs saves what is drawn on the canvas as an image file• We want the name to be “mypicture.jpeg”• The setter and getter for filename is in the Variables Built-in• The text block for mypicture.jpeg is from the Text Built-in


MyValues TinyDB• MyValues StoreValue method will save an

application Property and its value• Our property is named picture• The value is the filename returned from SaveAs• The getter and setter for filename is found in the

Variables Built-in


LoadButton

• LoadButton retrieves the “picture” value from MyValues (TinyDB) and sets filename with that value

• The getter and setter for filename is in the Variables Built-in• We’ll also set the Background image on DrawingCanvas to

the image we saved on the device


ClearButton

• If the background image was set on the DrawingCanvas, we clear it by setting the background image to “None”

• The text block is found in the Text Built-in


ShareButton

• This button saves the DrawingCanvas as an image, just like the SaveButton

• It stores the full filename in MyValues• Then it shows all apps that can use an image file


Bronze Badge

• The bronze version of the app is complete!

• This is a complex app and you should feel very accomplished when you are finished!


App Inventor 2 Attribution

• Provided by MIT • http://appinventor.mit.edu/• App Inventor was originally developed by

Google• Licensed under the Creative Commons

Attribution 3.0 Unported license • http://creativecommons.org/licenses/by/

3.0/deed.en_US

the creative art of programming © copyright 2014 barbara ann walters. all rights reserved

Documents