Hi, today we are going to build an app based on a very simple component called Text To Speech. Using this visible component our app will “say” a text we had written into a TextBox. Are you ready?
First create a new project called “TTS” (Text To Speech) and then design your screen a little bit: Let’s change the colour of the title bar by changing the “Title Bar” property of the screen on the right hand side or the title of the screen.
Filling the screen
Well, our screen is totally empty so we have to fill it up with some components.
Adding a Text Box:
A Text Box is a box for the user to enter a text and we need to add this visible component so the user can enter a piece of text to be speak out. After dragging a Text Box from the left side into the screen we can make some design such as resizing our Text Box, changing the text size or the colour, or the hint. More info
Adding a Button:
A Button is a visible component with the ability of detecting clicks and we need to add this component so our app will speak out the text entered in the Text Box after clicking this button. After dragging a Button from the left side into the screen we can change the Button’s property for example the size, the text, the colour, the font size etc. More info
Adding the TTS (Text To Speech) component:
The Text To Speech component speaks a given text aloud but this is a non-visible component meaning we don’t have a concrete thing to be shown on the screen, it will only speak a text. Let’s add this component as before. More info
After finishing our design the next step is to do some coding to bring our app alive. Our mission is: After clicking the button, the app has to read the text being in the Text Box. Change to Blocks view in the top right corner and let’s CODE!
First we need an event called “when Button1.Click do“: The blocks being in the event will run after clicking on our button.
So the event is ready, we need to fill it up with blocks to read out the text from the Text Box. Our Text To Speech component is capable of doing this job, let’s add the appropriate method.
This purple method can be found among the Text to Speech’s blocks, and speaks the given message, but there is one thing still missing: the message. We want our text being in our Text Box to be read out, so we need to get this text.
YOUR app is ready! Connect to the Companion and test it. Having any questions write a comment below! Did you like our tutorial? Share it!