LEGO NXT Beach Buggy Controlled via Web Browser
Download PDF formatThis LEGO Mindstorms NXT Beach Buggy is controlled via an Internet Browser Interface using a LEGO Mindstorms NXT NXT2WiFi Miniature Web Server Module. This is my first project using one of Daniele Benedettelli's NXT2WiFi Miniature Web Server Module. Any Internet Browser capable device can control it. The NXT2WIFI is a miniature Webserver Module featuring a fully integrated 802.11 b/g/n Wi-Fi interface, giving your LEGO® MINDSTORMS® creations access to any Wi-Fi network.
The main code for interpreting the commands relayed from the NXT2WiFi Miniature Web Server Module is held in the WebEvents.nxc file. Each Button area of the Remote Control HTML file has a 'ctrlID Number' which corresponds to a behaviour control listed in the WebEvents.nxc file:
Move Forward: ctrlID = 1Move Backwards: ctrlID = 7Turn Left: ctrlID = 5Turn Right: ctrlID = 3Stop: ctrlID = 4
To change the ctrlID Numbers, you will need to edit the buttonEvents.js file found in the Webserver 'Scripts Folder'. You can also add extra ctrlID Numbers if required for your project.
NXC Source Code: WebEvents.nxc
#ifndef ___WEB_EVENTS_NXC
#define ___WEB_EVENTS_NXC
#define WEB_CTRL_BTN 0 /*!< Webpage Widget Button */
#define WEB_CTRL_SLD 1 /*!< Webpage Widget Slider */
#define WEB_CTRL_CHK 2 /*!< Webpage widget Checkbox */
byte sensorType[] = {1, 0, 2}; //Touch, none, ultrasonic
// custom webserver stuff
long oldTachoValue[3];
byte sensorField[] = {0, 1, 2}; // id of webserver field where to show sensor data
byte motorField[] = {3, 4, 5}; // id of webserver field where to show motor data
byte batteryField = 6;
int batteryCount = 0;
bool left, right;
int position = 0;
// detect special "Webpage event" Direct Command
// 0x00 0x80 0x14 <id> <event> <value>
// <id> = 0...2 type of widget that generated the event
// <event> = 0...255 event
// <value> = 0...255 value of the widget
// here you implement the behavior of the robot, for your custom webserver page
void ManageWebEvent(byte ctrlType, byte ctrlID, byte event, byte value) {
TextOut(0,LCD_LINE3,"Web Event ");
TextOut(0,LCD_LINE4, FormatNum("type: %d ",ctrlType));
TextOut(0,LCD_LINE6, FormatNum("ID: %d ",ctrlID));
TextOut(0,LCD_LINE7, FormatNum("val: %d ",event));
int power[9] = {80,80,80,80,0,80,-80,-80,-80};
int turnRatio[9] = {-25,0,25,100,0,-100,25,0,-25};
if (ctrlType !=WEB_CTRL_BTN) return;
if(ctrlID>=0 && ctrlID< =8) {
if(ctrlID==1) { // Move Forward
if (event==0) {}
else {OnFwdReg(OUT_AC, -90, OUT_REGMODE_SPEED);}
}
if(ctrlID==7) { // Move Backwards
if (event==0) {}
else {OnFwdReg(OUT_AC, 90, OUT_REGMODE_SPEED);}
}
if(ctrlID==5 && position !=1) { // Turn left
if (event==0) {Off(OUT_B);}
else {RotateMotor(OUT_B, 30, 35); position = position + 1;}
}
if(ctrlID==3 && position!=-1) { // Turn Right
if (event==0) {Off(OUT_B);}
else {RotateMotor(OUT_B, 30, -35); position = position + -1;}
}
if(ctrlID==4) {Off(OUT_ABC); ResetTachoCount(OUT_B);}
}
}
#endif
</value></event></id></value></event></id>
When using Daniele Benedettelli's NXC library, for the NXT2WiFi Miniature Web Server Module, the only file you need to edit for most projects is the WebEvents.nxc file. For most requirements, the other files can be left unchanged.
Download the NXT2WiFi Remote Control HTML File
When using Daniele Benedettelli's Default Webserver source code, for the NXT2WiFi Miniature Web Server Module, the only files you need to edit for most projects are the index.htm and buttonEvents.js files. For most requirements, the other files can be left unchanged. You will need to rebuild the webserver compressed image. The custom webserver compressed image I have used for this project, BeachBuggy.bin, is uploaded to the NXT2WiFi Miniature Web Server Module using Daniele Benedettelli's NXT2WiFi Webtool.
HTML Source Code: index.htm
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<title>LEGO Mindstorms NXT Beach Buggy Remote Control - NXT2WIFI Webserver</title>
</meta><meta name="viewport" content="width=device-width, initial-scale=1">
<script src="scripts/mchp.js" type="text/javascript"></script>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/jquery.mobile-1.0.1.min.js"></script>
<script src="scripts/buttonEvents.js"></script>
<script type="text/javascript">
<!--
// Parses the xmlResponse from status.xml and updates the status box
function updateStatus(xmlData) {
var mainstat = document.getElementById('display').style.display;
var loadstat = document.getElementById('loading').style.display;
// Check if a timeout occurred
if(!xmlData)
{
mainstat = 'none';
loadstat = 'inline';
return;
}
// Make sure we're displaying the status display
mainstat = 'inline';
loadstat = 'none';
// Update the value
for(i = 1; i < 7; i++) {
if (xmlData.getElementsByTagName('label'+i)[0]!=null)
document.getElementById('label'+i).innerHTML = getXMLValue(xmlData, 'label'+i);
}
// update touch sensor image
if (xmlData.getElementsByTagName('label0')[0]!=null) {
var btnread = parseInt(getXMLValue(xmlData, 'label0'));
if (btnread==1) {
document.getElementById('touchSensor').innerHTML = 'pressed';
} else {
document.getElementById('touchSensor').innerHTML = 'released';
}
}
}
setTimeout("newAJAXCommand('status.xml', updateStatus, true)",1000);
//-->
</script>
</meta></head>
<body>
<div align="center">
<table width="280" border="0">
<tr>
<td>
<div align="center" style="width: 260; background-color: #FFCC99; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; border: 2px solid; border-color: orange;">
<table width="250" height="297" border="0" cellpadding="0" bgcolor="#F2F2F2" id="table4" style="-moz-border-radius: 15px; border-radius: 15px; border-collapse: collapse;">
<tr>
<td> </td>
<td><p align="center" style="margin-top: 0; margin-bottom: 0; color: red;"><br /><font face="Trebuchet MS" size="5">NXT Beach Buggy</font><br /> </p></td>
<td> </td>
</tr>
<tr>
<td></td>
<td><p align="center" style="margin-top: 0; margin-bottom: 0"> <font face="Trebuchet MS" size="5"><b>CONTROLS</b></font></p></td>
<td></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="202" colspan="3" align="center" bordercolor="#FF0000"><table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td><div id="Ubtn" style="border-bottom: 60px solid #f36f05;border-left: 30px solid transparent;border-right: 30px solid transparent;font-size: 0px; line-height: 0%; width: 0px;"></div></td>
<td></td>
</tr>
<tr>
<td><div id="Lbtn" style="border-top: 30px solid transparent;border-right: 60px solid #f36f05;border-bottom: 30px solid transparent;font-size: 0px; line-height: 0%; width: 0px;"></div></td>
<td width="60px" height="60px"><div id="Sbtn" style="-moz-border-radius: 50px;
border-radius: 50px;
margin-left: auto ;
margin-right: auto ;
padding: 6px;
background-color: red;
width: 40px;
height: 40px;"></div></td>
<td><div id="Rbtn" style="border-top: 30px solid transparent;border-left: 60px solid #f36f05;border-bottom: 30px solid transparent;font-size: 0px; line-height: 0%; width: 0px;"></div></td>
</tr>
<tr>
<td></td>
<td><div id="Dbtn" style="border-top: 60px solid #f36f05;border-left: 30px solid transparent;border-right: 30px solid transparent;font-size: 0px; line-height: 0%; width: 0px;"></div></td>
<td></td>
</tr>
</tbody>
</table></td>
</tr>
</table></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body></html>
The BeachBuggy.bin, image is great for use with Mobile Devices such as Mobile Phones due to it's very small footprint.
Of the NXT2WiFi Miniature Web Server Module Wi-Fi connection profiles, I just use the the default one which is adhoc. Using this is very convenient as you have no need to set-up the security for each device you wish to access the the NXT2WiFi Miniature Web Server Module with. To access the NXT2WiFi Miniature Web Server Module, just type 'http://nxt2wifi/' into your browsers' address bar. Alternatively you can use http://192.168.0.18/.
If you are having issues getting the NXT2WiFi Miniature Web Server Module to start, I suggest you use a Terminal Program such as Termite, to reset and start the NXT2WiFi Miniature Web Server Module. This is done by entering te following into the Terminals Command Line: $RST, $DBG1, followed by $WFC0. If all goes well, you should see the following screen:
I have also put together a LEGO Digital Designer CAD file of my Beach Buggy. You will need a number of parts not available in the LEGO Mindstorms NXT Kits to build the Robot. Extra parts can be purchased from BrickLink.
Download the Instructions in LDD CAD File or as an Adode PDF Document
The NXT2WiFi Miniature Web Server Module is far more powerful than the example I have shown here. Not only can the NXT2WiFi Miniature Web Server Module control a Robot, but it is capable of relaying Sensor Data as well. With this capabilities you can log your Data, and even automatically post the Data to Twitter and post real time graphs on @thingspeak!
The NXT2WiFi Miniature Web Server Module is not an add-on for the absolute beginner to the LEGO Mindstorms NXT system. You will need a grasp of Webpage HTML and Java Script Programming, plus your preferred NXT Programming Language of your choice. But, with some perseverance and by going through the provided examples, you should soon have a Remote Controlled Robot up and running in a few hours. Reading Sensors and Posting Data will take you some more patience and learning.
loading...
loading...
[...] Beach Buggy is the same as used in my previous post: LEGO NXT Beach Buggy Controlled via Web Browser. The primary difference being that the Beach Buggy is programmed with [robotr] using Xander [...]
Greetings!
Thank you for the tutorials, the NXC tutorial helped me confirm that I was able to set up, connect to, receive data from, and actually control motors. So, in order to try out your Robotc tutorials I downloaded the building instructions for the Beach Buggy. When I get to step 133 the pages are blank. I think I can figure out the finial steps, but wanted to let you know this.
Are you planning some tutorials to show how to connect the sensor to an access point so that the robot can be controlled from any where on the Internet? I would also be interested in how to connect multiple robots (I have the Dexter Industries WiFi and Humarobotic wifi sensors) to together using the WiFi sensor?
Mike
loading...
loading...
Hi Michael,
Thank you for the feedback. I will look into the instructions a.s.a.p.
I’m slowly finding my way around the NXT2WiFi Sensor and will post updates and tutorials as I go along.
I have my NXT2WiFi connected via my router using WPA2 Security Protocol which works well. Not having used public wifi access points, I assume they would be no different to connecting to a wireless router. For ease of use, you would most probably need to acquire a fixed IP address from your service provider to allow remote connection to the NXT2WiFi.
Provided each Robot’s WiFi Module is on a separate IP Address, multiple control should be fairly straight forward.
Down the road, I’m considering getting an IP Camera to use in-conjunction with NXT2WiFi enabled Robots. Remote Control and Remote Vision.
loading...
loading...