VoiceGap

Filling the space between You and Your Apps

Remote Speech Control – Part 1

It’s seemed like an eternity since I published some code.  That’s because I was off doing Robotic Controls; and it is finally time to discuss some results.

In this article I will present a Remote Speech Component for the Mircosoft Robotic Developmer Studio (M-RDS) which connects up to VoiceGap.  THe Rosie Roboto image replaces our traditional Capt. Expendable.  When you tap on Rosie you get the familiar speech input action.  She accepts “Drive Forward” “Drive Backwards” “Turn Right” “Turn Left” and “Stop”.   For convenience and user interface considerations we added those exact buttons on the VoiceGap screen.

There are three major pieces:  (1) Rosey the Robot for VoiceGap,  (2)  The RemoteSpeech Component for M-RDS,  and (3) a NoSQL like service for passing information between the live Robot and VoiceGap.

In Part 1 the focus will be on the VoiceGap module.  The thought was to keep it simple; so the one Rosey button and 4 simple control buttons:  Forward, Backwards, Left Turn, Right Turn.

Here is a rough layout using /codiqa/ on the jquerymobile.com website.

Here is the generated code: (plus a few javascript additions and the onClick calls)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
        </script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">
        </script>

<script type="text/javascript" language="javascript">

function work(say) {

$.getJSON("http://www.cpe.net/stocks/puttuple.php?rel=chat&appid=dev001|rosie&key=robot1&data="+say, {}, function(res) {} );

}

function init() {

  $.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {
      alert(textStatus);
      alert(errorThrown);
      alert(XMLHttpRequest.responseText);
  }});

jQuery.support.cors = true;
}
 </script>

    </head>
    <body onload="init()">
        <div id="page1" data-role="page">
            <div data-role="header" data-theme="a">
                <h3>
                    Rosie Roboto
                </h3>
            </div>
            <div data-role="content">
                <div style="margin-left: auto; margin-right: auto;">
<a href="#page1" onclick="work('Stop')">

                    <img style="width: 288px; height: 150px;" src="http://www.voicegap.com/demo/rosie.png" /></a>
                </div>
                <a href="#page1" onClick="work('Stop')" data-role="button" data-transition="fade">
                    Stop!
                </a>                <a href="#page1" onClick="work('Drive+Forwards')" data-role="button" data-transition="fade" data-iconpos="top" data-icon="arrow-u">
                    Drive Forwards
                </a>
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <a href="#page1" onclick="work('Turn Left')" data-role="button" data-transition="fade" data-iconpos="left" data-icon="arrow-l">
                            Left
                        </a>
                    </div>
                    <div class="ui-block-b">
                        <a href="#page1" onClick="work('Turn Right')" data-role="button" data-transition="fade" data-iconpos="right" data-icon="arrow-r">
                            Right
                        </a>
                    </div>
                </div>
                <a href="#page1" onclick="work('Drive Backwards')" data-role="button" data-transition="fade" data-iconpos="bottom" data-icon="arrow-d">
                    Drive Backwards
                </a>
            </div>
            <div data-role="footer" data-theme="a">
                <h3>
                    VoiceGap.Com
                </h3>
            </div>
        </div>
        <script>
            //App custom javascript
        </script>
    </body>
</html>

You can also find the code Here

Comments are currently closed.