MIT AI2

1.1.2 DEMO

• Start New Program• Name “My First Program”

Drag these 3 Components into your blank area.

Component Designer Drawer Purpose

Button User Interface Respond to being clicked

Canvas Drawing and Animation

Provide a touch-sensitive surface where you can draw and animate

Camera Media Access the device's camera

Rename Each ComponentsUse Component_Purpose names

“Take a Picture!”

Designer View

Block View

Block Locations Drag one of each to the blank area.

Block Blocks Drawer Purpose

Camera drawer Lets the user take a picture

Camera drawer Event handler!

This script will execute after the user takes a picture.

Button drawer Event handler!

The script inside this block will be executed when the user releases a

button.

Canvas drawer Sets the background image of the canvas.

mouse over on the camera's

"After picture" `block

Refers to the picture just taken. Only available locally, within the

"After picture" event handler.

Arrange the times to look like this

Snip Designer and Block Screens

• Paste them into a word document.• Document header – Name– Date– Class Period

• Save document 112SBurgess1.. Use your name• Submit doc to LMS 1.1.2 First Code

Finish up

• You program automatically saves.

Open My First Program

• When you first open a program it is automatically in Designer view.

Designer ViewPull 1 of each of these components

Component Designer Drawer Purpose

Label User Interface Display text

Slider User Interface Change a value as the user slides a control back and forth

Horizontal Arrangement Layout Center a component or place components side by side

Place the Label and Slider in the Arrangement Box

Block View

The Drawers are color coded. Look at the Block color to see what drawer it comes from.

Add buttons to change the color of the pen.

• Here we've add three buttons, placed them inside a Horizontal Arrangement, and set the Shape and Background Color property of each button. In the Components list of the Designer view, we've also renamed each button to a name like "ButtonBlue." That helps the programmer keep track of the components.

Designer View

Block View

• You need a block set for each color.• Look at the block color to find the drawer it is

located in.

Designer View

• Clear the canvas when you shake the tablet.• Add an accelerometer sensor component.

Component Designer Drawer Purpose

Accelerometer Sensor Sensors Detect when the tablet is shaken. Also detects when the tablet is tilted forward or left/right.

Block View

• Remember to look at the color of the blocks to find their location in the drawers.