Surveyor Robotics Journal
   



email:
support@surveyor.com

web:
Surveyor Corporation

rss:
Subscribe

Archives
August 2010
July 2010
June 2010
May 2010
April 2010
March 2010
February 2010
January 2010
December 2009
November 2009
October 2009
September 2009
August 2009
July 2009
June 2009
May 2009
April 2009
March 2009
February 2009
January 2009
December 2008
November 2008
October 2008
September 2008
August 2008
September 2008
August 2008
July 2008
June 2008
May 2008
April 2008
March 2008
February 2008
January 2008
December 2007
November 2007
October 2007
September 2007
August 2007
July 2007
June 2007
May 2007
April 2007
March 2007
February 2007
January 2007
December 2006
November 2006
October 2006
September 2006
August 2006
July 2006
June 2006
May 2006
April 2006
March 2006
Februray 2006
January 2006

       
Tue, 08 Sep 2009

HTTPD experiment - a web app approach to smart phone (e.g. iPhone) robot control

We have been experimenting with a different approach to SRV-1 interface with smart phones and browsers, building a very basic HTTPD capability into the SRV-1 firmware. It employs just HTML and javascript, using image mapping for the robot controls, so no special application is installed - it just uses the built-in web browser. This is NOT robust (put your robot up on blocks, not on a table top, if you plan to test this), and performance will be lower that what will be achieved with native apps for iphone, android, etc, but it is simple and stability will likely improve.



Basically, there is now a minimal HTTPD function in the SRV-1 firmware that parses the HTTP GET command, and there is minimal knowledge of filenames, specifically '/', '/index.html', '/00.html' (same as /),'/01.html' ... '09.html'. These files correspond to flash sectors, where 00.html is stored in sectors 10-11, 01.html is stored in sectors 12-13, etc. An HTML file in this system can occupy up to 2 sectors (128kB), and a couple of console commands have been added to read ('zAxx') and write ('zBxx') these double sectors. The HTTPD parser recognizes two other special names - '/robot.cgi?' which is used to send robot commands for motion and laser on/off, and $$camera$$ which signals the insertion of a live captured JPEG frame. Perhaps the most important line of code in the following html is -
   <img src="data:image/jpeg;base64,$$camera$$" width=320 height=240 usemap="#map1" />
which shows how the jpeg frame from the robot is embedded in the web page.

Assuming you have a new version of httpd.c and /index.html shown below is stored in sectors 10-11, you would point your browser to http://robot-ip:10001/ and the robot should start to serve live frames (approx 3fps). If you click on different areas of the image, different robot commands should be executed.

===============================================
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<script language="JavaScript">
<!--
var time = null
function refresh() {
window.location.reload();
}
setTimeout('refresh()', 333)
//-->
</script>
<title>SRV-1 Robot</title>
</head>
<body>
<map name="map1">
<area href="/robot.cgi?l" alt="laser on" shape=rect coords="1, 1, 25, 120">
<area href="/robot.cgi?L" alt="laser off" shape=rect coords="296, 1, 320, 120">
<area href="/robot.cgi?+" alt="faster" shape=rect coords="1, 121, 25, 240">
<area href="/robot.cgi?-" alt="slower" shape=rect coords="296, 121, 320, 240">
<area href="/robot.cgi?4" alt="left" shape=rect coords="26, 1, 100, 80">
<area href="/robot.cgi?8" alt="forward" shape=rect coords="101, 1, 220, 80">
<area href="/robot.cgi?6" alt="right" shape=rect coords="221, 1, 295, 80">
<area href="/robot.cgi?0" alt="spin left" shape=rect coords="26, 81, 100, 160">
<area href="/robot.cgi?5" alt="stop" shape=rect coords="101, 81, 220, 160">
<area href="/robot.cgi?." alt="spin right" shape=rect coords="221, 81, 295, 160">
<area href="/robot.cgi?1" alt="back left" shape=rect coords="26, 161, 100, 240">
<area href="/robot.cgi?2" alt="back" shape=rect coords="101, 161, 220, 240">
<area href="/robot.cgi?3" alt="back right" shape=rect coords="221, 161, 295, 240">
</map>
<img src="data:image/jpeg;base64,$$camera$$" width=320 height=240 usemap="#map1" />
<br>
<a href="/index.html">reload</a>
<br>
</body>
</html>

===============================================

This is approximately how the image map is configured based on the above HTML code -



Note that there are issues - the javascript seems to be very sensitive to timing so links break pretty easily and you have to refresh to get things restarted. The frame rate is low, and I don't know how much it can be improved. Also, Android G1 support for embedded JPEGs is broken, though we have reported the problem. In any case, this DOES work on an iPhone.

This code has been posted to code.google.com/p/surveyor-srv1-firmware/. There is not yet a zip download version. You can track progress on this project on the Surveyor Robotics Forum.

Posted Tue, 08 Sep 2009 14:12 | HTML Link | see additional stories ...