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.edu/ and log in with your Google Account if necessary. 2. Select “My Projects -> Start new project”

3. Name the Project “AssistSpeech”

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

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

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.

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.zip 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.

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.

12. Click on one of the images and click ‘Open’

13. Click ‘OK’

14. Now the image is mapped to Button1.

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.

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. 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.

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.

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. 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.

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.html 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”.

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.

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

11. Click the ‘Bathroom’ button and the phone should speak:

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.

I have to go to the bathroom.

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.