docs/api/app/Tts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: Tts</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Class: Tts</h1>

    
<section>

<header>
    
        <h2><span class="attribs"><span class="type-signature"></span></span>Tts<span class="signature">()</span><span class="type-signature"> &rarr; {JSX.Element}</span></h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        
    <h4 class="name" id="Tts"><span class="type-signature"></span>new Tts<span class="signature">()</span><span class="type-signature"> &rarr; {JSX.Element}</span></h4>
    

<div class="description">
    <p>Tts stands for Text-To-Speech. It contains an icon and the text to be spoken.</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>props.text:</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>The displayed and spoken text</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>props.color:</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>The color of the icon and the text, in hexadecimal format  (examples in ./constants/Colors.js)</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>props.align:</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>The parameter to change the text alignment ('left', 'right', 'center', 'justify')</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="components_Tts.js.html">components/Tts.js</a>, <a href="components_Tts.js.html#line24">line 24</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">JSX.Element</span>


    </dd>
</dl>

    
    </div>

    
        <h3 class="subsection-title">Methods</h3>

        
    <h4 class="name" id="~speak"><span class="type-signature">(async, inner) </span>speak<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Starts speaking props.text. At startup it calls the function startSpeak() and at the end its calls stopSpeak()</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="components_Tts.js.html">components/Tts.js</a>, <a href="components_Tts.js.html#line34">line 34</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~startSpeak"><span class="type-signature">(inner) </span>startSpeak<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Changes the color of the icon to green and sets CurrentlyPlaying to true, at the start</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="components_Tts.js.html">components/Tts.js</a>, <a href="components_Tts.js.html#line64">line 64</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~stopSpeak"><span class="type-signature">(inner) </span>stopSpeak<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Stops expo-speech and changes the color back to props.color and sets CurrentlyPlaying to false</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="components_Tts.js.html">components/Tts.js</a>, <a href="components_Tts.js.html#line55">line 55</a>
    </li></ul></dd>
    

</dl>


</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="RegistrationScreen.html">RegistrationScreen</a></li><li><a href="TermsAndConditionsScreen.html">TermsAndConditionsScreen</a></li><li><a href="Tts.html">Tts</a></li><li><a href="WelcomeScreen.html">WelcomeScreen</a></li></ul><h3>Global</h3><ul><li><a href="global.html#WizardNavigator">WizardNavigator</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.7</a> on Wed Aug 11 2021 11:45:48 GMT+0200 (Central European Summer Time)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>