Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 73 - 2629_Devagiri_C-6
P. 73

    CANVAS RESPONSIVENESS WITH UI COMPONENTS  Step  5   Click on the User Interface component.

     In MIT App Inventor, the Canvas can work with buttons, labels and text boxes to create interactive   Step  6   Drag and drop Button1 into the HorizontalArrangement.
     apps that respond to user actions in real time.
                     Step   7     Click on Button1 to edit its properties on the right-side panel: Text to Red, FontBold,
     Examples:
                                 BackgroundColor to Red, FontSize to 20, Shape to Rounded and TextColor to Black.
       Buttons: Change something on the Canvas, like colour or position, when clicked.
                                   Similarly, add Button2 and Button3 into the same HorizontalArrangement and set
       Labels: Display messages based on Canvas events, like a touch in a specific area.  Text: Blue  and Green,  BackgroundColor: Blue  and Green,  FontSize: 20 or larger,
       Text Boxes: Enables inserting text typed by the user.  FontBold to Checked, Shape: Rounded, TextColor: Black.

                     Step  8     Add Button4 from the User Interface drawer below the HorizontalArrangement.
     RAPID RECALL  Tick ( ) if you know this.
                     Step  9      Click on Button4 and set: Text to Reset, BackgroundColor to Orange, FontSize to 20

     1.  The Click event is triggered when the user taps on an element.   or larger, FontBold to Checked, Shape to Rounded and TextColor to Black.

     2.  Buttons are used to change something on the Canvas.

     CREATING AN APP USING TOUCH EVENTS

     The Magic_Pad app lets you draw with your finger, change colours and reset the screen like a
     digital drawing book. It helps young learners practice drawing, handwriting and creativity while
     improving hand control in a safe, educational way.

     To create the Magic_Pad app, follow these steps:

     Step  1   Create new project in the MIT App Inventor.   Step  10   Click on the Drawing and Animation component from the Palette.

     Step  2     Change  the  name  of the  screen to  Magic_Pad in the  Title textbox,  adjust   Step  11   Drag and drop a Canvas onto the Viewer below the Reset button.
     AlignHorizontal to Center:3 and AlignVertical to Top:1 in the Properties pane.  Step  12   Click on the Canvas and set the Width and Height to Fill Parent.

     Step  3   Click on the Layout component.
     Step  4   Drag and drop HorizontalArrangement into the phone screen.

                                                                                                                      71
                                                                                               Touch to Motion with MIT

| 68 69 70 71 72 73 74 75 76 77 78 |