VoiceGap

Filling the space between You and Your Apps

How to Build the VoiceGap Demo – Part 4 – PlugIns

Congratulations!   You survived Part 3.

In order to take our browser-based example and make it work on the device we need to change where all those Javascript support files are stored.   The way VoiceGap uses the web page is much like that of a single page website that you downloaded from the internet (which is one way to grab all the files in IE btw).   But for demonstration purposes, let’s go one section at a time.  Starting with the HTML HEAD.

<!DOCTYPE html>
<html>
<head>
<title>No Voice Yet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

In this section, all those fully specified URLs need to become local URLs.   As you can see below.

<!DOCTYPE HTML>
<html>
<head>
<title>VoiceGap</title>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" charset="utf=8" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" charset="utf=8" src="js/jquery.mobile-1.0.1.min.js"></script>

That was easy.    The next bit of work as to do with cleaning up the CSS which we have ignored so far.    The buttons and images need centering and cosmetics.

<style type="text/css">
#micButton, #searchField {
	padding: 2px;
	align: center;
}
input[type=button] {
	width: 100%;
}
img {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
p {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width: 80%;
}
</style>

The start-up code could use a little clean up as well.   I am adding a few globals to help with debugging later on; whether we have a device or want error messages displayed.

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

function work() {
		var s = $.trim($("#searchField").val());

		$.getJSON("http://api.search.live.net/json.aspx?Appid="+appid+"&query="+escape(s)+"&sources=image&image.count=20", {}, function(res) {
			var results = res.SearchResponse.Image.Results;
			if(results.length == 0) {
				$("#tab-3").html("No results!");
				return;
			}
			var s = "<hr/><h3>Search Results</h3>";
for(var i=0; i<results.length; i++) {
     s+= "<p><img src='"+results[i].Thumbnail.Url+"'><br/>";
     s+= "<a href='"+results[i].Url+"'>";
     s+=  results[i].DisplayUrl+"</a></p>";				
			}
			$("#tab-3").html(s);
			$("#bar-3").click();
            $("#foot").listview('refresh');
		});
}

function init() {

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

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

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#container div').hide();
$('#container div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a:first').addClass('ui-btn-active');
$('#tabs ul li a').click(function(){ 
$('#tabs ul li').removeClass('active');
$('#tabs ul li a').removeClass('ui-btn-active');
$(this).parent().addClass('active');
$(this).addClass('ui-btn-active');
var currentTab = $(this).attr('href'); 
$('#container div').hide();
$(currentTab).show();
return false;
});
});
</script>

There really aren’t that many changes to go from Browser, to Simulator, to Actual Device.  The modified Body section is shown below.

<body onload="init()">

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="a" data-position="fixed">
		<h1>Capt. Expendable</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right 

jqm-home">Home</a>
	</div>

<input type="search" id="searchField" value="" width="40">
<input type="hidden" id="searchButton" value="Search">
<a href="#" id="micButton"><img src="Expendable.png" width="200" height="150" /></a>




<div id="container">

    <div id="tab-1">
      <h3>Please tap on Capt. Expendable and ask him to search for something</h3>
      <p> </p>
    </div>
    <div id="tab-2">
      <h3>Tab 2</h3>
      <p> </p>
    </div>
    <div id="tab-3">
      <h3>Search Results</h3>
    </div>
  </div>

<div data-role="footer" data-id="foo1" data-position="fixed">
			<div data-role="navbar" id="tabs">
				<ul id="foot">

					<li><a href="#tab-1" id="bar-1" >Think</a></li>
					<li><a href="#tab-2" id="bar-2">Say</a></li>
					<li><a href="#tab-3" id="bar-3" >Act</a></li>
				</ul>
			</div><!-- /navbar -->
		</div><!-- /footer -->


		</div><!-- /page -->

   </body>

Now, the real question:  Where did those Plug-Ins come from?     The VoiceGap Android project tree that you downloaded has the plugs-ins already installed at the source code level.  But you need to turn them ON, in Javascript, before you can use them.  

<!DOCTYPE HTML>
<html>
<head>
<title>VoiceGap</title>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/SpeechRecognizer.js"></script>
<script type="text/javascript" charset="utf=8" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" charset="utf=8" src="js/jquery.mobile-1.0.1.min.js"></script>

And they need to be activated. Here are the events and call backs, that will trigger the search.
Note: >> window.plugins.speechrecognizer.init(speechInitOk, speechInitFail); <<

<script type="text/javascript" language="javascript">
function init() {
	document.addEventListener("deviceready", deviceready, true);
}

function deviceready() {
	console.log(‘loaded’);
	
	window.plugins.speechrecognizer.init(speechInitOk, speechInitFail);
	
	function speechInitOk() {
		$("#micButton").removeAttr("disabled");
	}
	
	function speechInitFail(e) {
		//Since this isn’t critical, we don’t care…
	}
	
	$("#micButton").bind("touchstart", function() {		
		var requestCode = 4815162342;
		var maxMatches = 1;
		var promptString = "What do you want?";
		window.plugins.speechrecognizer.startRecognize(speechOk, speechFail, requestCode, maxMatches, promptString);
	});

	function speechOk(result) {
		var match, respObj;
		if (result) {
			respObj = JSON.parse(result);
			if (respObj) {
				var response = respObj.speechMatches.speechMatch[0];
				$("#searchField").val(response);
				work();
			}        
		}
	}

	function speechFail(m) {
		navigator.notification.alert("Sorry, I couldn’t recognize you.", function() {}, "Speech Fail");
	}

</script>

The last piece of the puzzle is making sure all these files are below the ‘www’ folder in the VoiceGap project.

Here is the MAIN HTML FILE for your records.

Comments are currently closed.