Picture Talk App Directions (Version 2 of App Inventor) Description:

Size: px

Start display at page:

Download "Picture Talk App Directions (Version 2 of App Inventor) Description:"

Lily Austin
6 years ago
Views:

Picture Talk App Directions (Version 2 of App Inventor) Description: This App combines images and the TextToSpeech object in Android and App Inventor to create an icon based speech program.

1 Picture Talk App Directions (Version 2 of App Inventor) Description: This App combines images and the TextToSpeech object in Android and App Inventor to create an icon based speech program. Like the Dynavox products this App features images on buttons that a user can select to create speech. The App is event driven, meaning that the clicks of the buttons call the TextToSpeech object to say the different phrases. Part 1: User Interface Design

Process: 1. Go to http://ai2.appinventor.mit.

2 Process: 1. Go to and log in with your Google Account if necessary. 2. Select My Projects -> Start new project 3. Name the Project AssistSpeech

3 4. You will be presented with a blank App Inventor Project.

4 5. We will now design the User Interface. First, click on Layout and drag a TableArrangement object to the screen area. Set the following properties: a. Columns: 3 b. Rows: 4 c. Width: Fill parent

5 6. Now we will add some buttons to the User Interface. Click on User Interface in the Palette and drag 12 buttons to the TableArrangement1.

6 7. We want the buttons to be more square in shape. On the Properties for each button set the width and height for each button to be 100 pixels.

8. We need to download the images for the App. Click on the link: http://nebomusic.net/appinventorlessons/assist_pictures.

7 8. We need to download the images for the App. Click on the link: and download the zip files for the images. For this example, I am going to save the zip file to the desktop. 9. Extract the pictures so the assist_pictures directory is on the desktop.

8 10. We will now map the images to the buttons. Click on Button1 and then select image from the Properties window. Click Upload File 11. Click Choose File and Navigate to the assist_images directory.

9 12. Click on one of the images and click Open 13. Click OK

10 14. Now the image is mapped to Button1.

11 15. The text Text for Button 1 is still showing. Go to Properties and delete the text Text for Button 1 in the text property. 16. Repeat the Image import process for the remaining buttons.

The names Button1, Button2,... are not very descriptive.

12 17. Naming is very important for programming because it gives the programmer and reader of the program a sense of the purpose of the objects. The names Button1, Button2,... are not very descriptive. We are going to rename each button based on its picture. Go to Button1 and click the Rename button. 18. Name the button buttonbathroom. Click OK

19. Rename the remaining buttons based on their image. buttoncold, buttonhappy... 20. We need to add another Object to the App.

13 19. Rename the remaining buttons based on their image. buttoncold, buttonhappy We need to add another Object to the App. Click on Media on the Palette and drag a TextToSpeech object to the phone screen. (Notice that it shows up as a Non-visible component.

14 21. Rename the TextToSpeech1 object to texttospeech. 22. Done! The User Interface design is complete. Move on to the next section to program the App.

15 Part 2: Programming the AssistSpeech App Process: 1. Click on the Blocks button to go to the block programmer.

2. The alogorithm for this App can be summarized as When buttonbathroom Clicked -> speak Bathroom. Click on buttonbathroom and drag a when buttonbathroom.click block to the progamming area. 3.

16 2. The alogorithm for this App can be summarized as When buttonbathroom Clicked -> speak Bathroom. Click on buttonbathroom and drag a when buttonbathroom.click block to the progamming area. 3. The When block is an event listener. The block waits until the user touches or Clicks the button before running the code inside the block. We want the App to say Bathroom or I have to go to the bathroom. Click on the texttospeech object and drag a call texttospeech.speak block into the.click block.

17 4. Now select Text from the Blocks palette and drag a text block into the message socket of the.speak block. 5. Inside the text block, type I have to go to the Bathroom (The desired phrase).

6. We are ready to test part of the App! See http://appinventor.mit.edu/explore/ai2/setup.

For this tutorial, I will describe how to connect to an emulator.

18 6. We are ready to test part of the App! See for detailed instructions on connecting to an emulator or a phone. For this tutorial, I will describe how to connect to an emulator. Make sure you have aistarter running on your computer. On Windows you will see a screen that looks like: 7. Click on Connect and Select Emulator.

19 8. You will see some messages as the Emulator Starts: Be patient, it will take the Emulator a few minutes to start on the first try. 9. You will now see messages informing you that the emulator (or phone) is loading AiCompanion.

20 10. When the Emulator (or device) loads the App it should look like:

21 11. Click the Bathroom button and the phone should speak: I have to go to the bathroom. 12. To program the rest of the buttons, drag the corresponding when button.click events to the programming area and use the texttospeech object to say the phrase. 13. Try the buttons on the emulator to test the sounds.

22 14. Other ideas: a. Research how to change the Pitch of the voice how can the user select a voice? b. You can also record and upload sounds using a sound editing program like Audacity. Experiment how to customize the voice. c. Look up different pictures and phrases for daily and special situations.

TalkToMe: Your first App Inventor app

TalkToMe: Your first App Inventor app This step-by-step picture tutorial will guide you through making a talking app. To get started, go to App Inventor on the web. Go directly to ai2.appinventor.mit.edu,