Copyright 2014 Barbara Ann Walters All Rights Reserved Draw App We will now switch to the Blocks view by selecting the Blocks button Copyright 2014 Barbara Ann Walters All Rights Reserved ID: 270863
Download Presentation The PPT/PDF document "The Creative Art of Programming" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
The Creative Art of Programming
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide2
Draw AppWe will now switch to the Blocks view by selecting the Blocks button
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide3
Draw AppThe screen should look like this
There are two areas: Blocks and Viewer
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide4
Draw AppThe
DrawingCanvas
component is in the Blocks list at the left
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide5
Adding BlocksClick on
DrawingCanvas
and a list of blocks will appear
Click on the top block which is the Dragged block
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide6
Adding BlocksThe Viewer should look like this
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide7
Removing BlocksIf you want to remove a block, drag it to the trashcan in the bottom right in the Viewer
The lid will open and the block will disappear
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide8
Method BlockClick on the DrawingCanvas
component on the left
Then, click on the
DrawLine
method block to add it to the View area
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide9
Viewer
The Viewer now has two blocks
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide10
Add the Method to the EventClick on the method block and drag it inside the event block. They will connect and look like this
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide11
DrawLineDrawLine needs 4 values in order to run
It needs the starting and ending x and y coordinate values for the line segment it will draw
The Dragged event block has this information so hover over
prevX
and drag getPrevX to the first slot in the method block
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide12
Add the Method to the Event
This shows what appears when the mouse hovers over
prevX
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide13
Adding get prevX
Drag the get block and drop it on the first slot to connect it to the method block
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide14
Add All Four Getter Blocks
Now do that for
prevY
,
currentX
and
currentY
so the
DrawLine
method block has all 4 values filled in
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide15
AccelerometerSensor
Go back to the
Designer
View by selecting that button on the top right above
the
viewer
Go to the Palette and open the Sensors drawer by clicking on it
Select the
AccelerometerSensor
template and drag it to the Viewer
It is now in the component list and we can work with it
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide16
Using the AcclerometerSensorRename your component to be Accelerometer
Switch to the Blocks view by selecting the Blocks button above the Properties area
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide17
Shaking Event Block
Select the Accelerometer in the components list
Select the event Shaking
The event block appears in the viewer
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide18
Clear Method
Select the
DrawingCanvas
component in the components list
Select the method Clear
The method block appears in the viewer
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide19
Finish the Program!
Drag the Draw method block to the inside of the Shaking event block
Now
the program is complete!
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.Slide20
App Inventor 2 AttributionProvided 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
© Copyright 2014 Barbara Ann Walters. All Rights Reserved.