The Creative Art of Programming © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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” © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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” © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

DrawingCanvas Blocks © Copyright 2014 Barbara Ann Walters. All Rights Reserved. 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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

Switching to the Controls View © Copyright 2014 Barbara Ann Walters. All Rights Reserved. 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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved. 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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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 © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

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! © Copyright 2014 Barbara Ann Walters. All Rights Reserved.

App Inventor 2 Attribution Provided by MIT App Inventor was originally developed by Google Licensed under the Creative Commons Attribution 3.0 Unported license deed.en_US © Copyright 2014 Barbara Ann Walters. All Rights Reserved.