VoiceGap

Filling the space between You and Your Apps

How to Build the VoiceGap Demo – Part 2

In the second part of the Capt. Expendable demo, you will see how to make it dynamic.   It will need an input field to capture the user input, a button to trigger the search, and a small amount of javascript to hold it all together.
  
Next, comes the a large image button of Capt. Expendable.   The idea being that you want it to be really easy to trigger the speech recognition.  Someday it would be great it you didn’t have to press anything.    The button triggers the javascript that will cal the function “work” below.

<input type="search" id="searchField" value="" width="40">
<input type="hidden" id="searchButton" value="Search">
<a href="#" onClick="work()" id="micButton"><img src="http://www.voicegap.com/demo/expendable.png" width="200" height="150" /></a>

Let’s take a closer look at what is being done at initialization time.   The ‘Init()’ function sets up an event listener for Ajax Errors.  In keeping with the theme of making this demonstration work without a device, let’s design the javascript to work with no PhoneGap installed.

<script type="text/javascript" language="javascript">
var appid = "<INSERT-YOUR-APPID>";


function init() {
  $.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {   
      alert(textStatus);
      alert(errorThrown);
      alert(XMLHttpRequest.responseText);
  }});
jQuery.support.cors = true;
}
 </script>

We are ready to look at the dynamic updating code. This is where we call Bing, format the results as html and insert that into the ‘Action’ tab.   Let’s look at it one piece at a time.   First we define the Capt. Expendable onClick function.

function work() {
		var s = $.trim($("#searchField").val());
		alert("going to search for "+s);

		$.getJSON("http://api.search.live.net/json.aspx?Appid="+appid+"&query="+escape(s)+"&sources=image&image.count=20", {}, function(res) {
alert("red");
			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/><a href='"+results[i].Url+"'>"+results[i].DisplayUrl+"</a></p>";				
			}
			$("#tab-3").html(s);
			$("#bar-3").click();
                             $("#foot").listview('refresh');
		});
}

Then we make the Bing Search request and wait for the response.

$.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;
			}
//---

The response looks something like this.  Which is a JSON string filled with results.

{"SearchResponse":
     {"Version":"2.2","Query":
         {"SearchTerms":"turtles"},
          "Image":{"Total":1350000,"Offset":0,"Results":
          [{"Title":"Big Turtles High Quality Wallpaper",
            "MediaUrl":"http:\/\/desktop.qkype.com\/wallpapers\/animals_343\/other_animals_355\/big_turtles_desktop_wallpaper_73307.jpg",
            "Url":"http:\/\/desktop.qkype.com\/big-turtles-high-quality-wallpaper-200\/",
            "DisplayUrl":"http:\/\/desktop.qkype.com\/big-turtles-high-quality-wallpaper-200\/",
            "Width":1600,"Height":1200,
            "FileSize":478444,"ContentType":"image\/jpeg",
            "Thumbnail": {"Url":"http:\/\/ts4.mm.bing.net\/images\/thumbnail.aspx?q=1533782926923&id=d8e9e9e9cacc52261a82452f945790e4","ContentType":"image\/jpeg","Width":160,"Height":120,"FileSize":3793}}]}}}

The results are then looked at one at a time and inserted into an html string using Javascript obects names. We are displaying the .Thumbnail, .DisplayUrl and using .Url in a link.

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>";				
 }

If we put all that together. You should get something that looks like this.

You can download the full code here.

Comments are currently closed.