Digital Doodle, MIT App Inventor Tutorial #4

♩♫♪♬

Hey, welcome back. It's Shay and Emily and we are here with the third tutorial of the App Inventor Hour of Code.

- Hey Emily, I challenge you to a quick draw!
- You're on!

Okay, that was childish but surprisingly fun.

Yeah. It's time for our next step and we just gave you a preview.

It's going to be a great app. For this app we are going to make a drawing canvas on the board where you can use your finger as a pen.

We call it "Digital Doodle".

Okay, back to the drawing board. Haha, get it? Drawing board... hum. Great. Here we go.

Once again, log on to App Inventor if you're not already there.

Start a new project. Name this one "DigitalDoodle".

Just like in the "Ball Bounce" app, you'll need a canvas to start.

But before we do that - do you remember the trick we learned for keeping the app from scrolling?

Right. Go into the properties for "Screen1" and uncheck "Scrollable".

Now add a canvas which you can find under "Drawing and Animation".

Go to the properties pane of the canvas and change the settings for both width and height to "Fill parent".

That opens up our canvas quite a bit.

Also, even tough we are not going to use it just yet, drag out an accelerometer component from the sensor drawer and drop that into your app.

Time to program the blocks!

Okay. So, the event that will detect someone's finger dragging on the canvas is pretty easy to guess.

Click on the canvas components' blocks and look around in the drawer. Can you figure out which block you need?

Right, you want the event handler for when "Canvas1" is dragged.

This event handler has a whole bunch of parameters. Don't worry - they're pretty easy to understand.

And, you can get on-screen help anytime just by mousing over a block. Like this.

Okay, great! So, we want to draw a line from wherever the finger drag was last to where it is now.

We'll essentially make the canvas draw hundreds of tiny lines between the points of the finger drag.

This will look just like drawing on the phone's screen.

But first we need that block that will draw a line. Go to "Canvas1" again and this time get the block that says to "call Canvas1.DrawLine".

Now, we need the X and Y coordinates of the beginning of the line draw to the end.

The "when Dragged" event will call "DrawLine" over and over while the finger is dragging on the screen.

We just need to provide the XY coordinates for these lines.

Go ahead and use previous X and previous Y.

You'll also need current X and current Y.

Now, go try out your app.

It should let you draw on the screen.

This app is great but wouldn't it be cool if you could shake to erase the screen rather than press a button?

Yeah, like Etch A Sketch.

Okay, It's Etch A Sketch time. Remember, we put in an accelerometer sensor into the components' list.

So now, we can program that.

Go to the accelerometer drawer and pull out "when Shaking".

The block we need to erase the screen is really simple to get.

Go to canvas and choose "call Canvas1.Clear". Plug that purple block right into the event handler for shaking.

Great! Test your app again.

Does your drawing erase when you shake it?

All right! So once again we've built a very simple app which can be extended in lots of fun ways.

The app that we demonstrated at the beginning of this tutorial lets you take a picture first and then put the picture on the canvas where you can draw on it.

You could also set up buttons to change the color of the ink used in the drawing.

All of these extensions are explained in the "PaintPot" tutorial on our website.

As you can see, there are endless possibilities of what you can build with App Inventor. It tabs into almost all of your phones capabilities.

You can even send and receive text and phone calls if you have a fully functional phone.

Even on a tablet over Wifi you can do some pretty cool things.

Thanks for joining us. If you're interested in learning more about App Inventor, go to the App Inventor website.

Happy Inventing!

♩♫♪♬