DIGITAL DOODLE

Digital Doodle: Drawing App Using MIT App Inventor


Digital Doodle

  • This tutorial will show you how to create an app using MIT App Inventor.

  • The app draws a line on the screen as the user drags a finger around.




START A NEW PROJECT



  • Go to Projects > Start new Project


Start a New Project


NAME THE PROJECT



  • Give a suitable name for your Project


Name the Project


SET THE SCREEN SO THAT IT DOES NOT SCROLL



  • Select Screen1 under Components pane.

  • From the Properties pane of Screen1, uncheck the box next to "Scrollable" setting.


Screen Properties


ADD A CANVAS



  • From the Drawing and Animation Palette, drag out a Canvas component on to Screen1.


Add Canvas


CHANGE THE HEIGHT AND WIDTH OF THE CANVAS



  • Under Components pane, select Canvas1.

  • Under Properties of Canvas1, set both Height and Width properties to Fill parent.


Canvas Properties


THAT'S ALL FOR THE DESIGNER



  • This basic app only needs a Canvas.


Design


SWITCH TO BLOCKS EDITOR



  • Switch to Blocks editor to program the app.


Blocks


GET A Canvas.Dragged EVENT BLOCK



  • from the Blocks, click on Canvas1.

  • From the drawer, pull out when Canvas1.Dragged event.


When Canvas Dragged


GET A Canvas.DrawLine CALL BLOCK



  • In the Canvas1 drawer, pull out call Canvas1.DrawLine method block.


Call Canvas


USE THE GET AND SET BLOCKS FROM THE DRAGGED BLOCK TO FILL IN THE VALUES FOR THE DRAW LINE BLOCK



  • Mouse over the parameters of the Canvas1.Dragged block to pull out the get blocks (prevX, prevY) and (currentX, currentY)that you need.

  • (Mouse over them, don't click on them.)


Call Canvas


TEST THE APP



  • Under Connect, click on AI Companion.

  • Scan/Enter the code to live test the app.


App Testing


EXTEND THE APP


Here are some ideas for extending this app. You can think of many more!



  • Change the color of the ink (and let the user pick from a selection of colors).

  • Add a button to clear the screen.

  • Clear the Screen when phone is shaking.

  • Change the background to a photograph or picture. Let the user draw dots as well as lines (hint: Use DrawCircle block).

  • Add a button that turns on the camera and lets the user take a picture and then doodle on it.



Comments

Popular posts from this blog

IMPACT OF DIGITAL REVOLUTION