Controlling a MINDSTORMS Robot with a Web Browser

Controlling a MINDSTORMS Robot with a Web Browser

Introduction

In this how-to we will show you how to connect to and control a robot from your web-browser.

There are three steps to connecting:

  1. Connect to the internet over a WIFI network,
  2. Establish a websocket connection, and then . . .
  3. Send and receive information.

In this tutorial we assume you have  already connected to the Internet and have an Internet connection (see our downloads section for examples for connecting your LEGO MINDSTORMS NXT to a WIFI network).  We used RobotC for the following example.


Introduction to Websockets

Websockets are an Internet protocol that establish two-way communications between a web-browser (such as Apple’s Safari, Internet Explorer or Google Chrome) and a server (such as the WIFI sensor for LEGO MINDSTORMS).  Unlike previous examples in HTTP, websockets can send information very quickly, allowing for rapid, real-time control and monitoring of sensors on the robot.  With HTTP protocol, there can be a noticeable lag between sending and receiving information; with websockets, that lag is almost eliminated.

Different Web Browsers

It is important to note that there are two types of websockets currently being used by different browsers.  We have RobotC examples for both.  You must match the code example with the browser type you are using.

The first type we will call Safari type.  The example code for Safari-type browsers are all labeled with the word “Safari”.  The Safari example will work for Safari, Mac iOS (iPad, iPhone, Touch), Opera, and Android’s browser.

The second type we call Chrome.  The example code for Chrome-type browsers are all labeled with the word “Chrome”.  The Chrome example will work for Google’s Chrome browser and Firefox/Mozilla browsers.

How it works

Connect to the Internet – For this example to work properly, you must be connected to the Internet: both the Dexter Industries dWiFi Sensor and your web browser must be connected before beginning.

Establishing a Connection – This is the most complicated step, but it is taken care of by the software library we wrote.  This section is to help you better understand what’s going on behind the scenes.

The first step in setting up a connection over websockets is to perform a handshake between the webpage and the Dexter Industries’ WIFI Module.  The handshake begins by the webpage sending a key, or a set of keys, to the LEGO MINDSTORMS NXT.  The NXT must calculate a response and return the exact response the webpage expects.  If it does not send the exact response the browser expects back, the webpage will drop the connection.

The calculation is far too complex for the LEGO MINDSTORMS NXT to calculate alone.  Dexter Industries has setup two PHP  pages that calculate and return the response (one for Apple’s Safari-type browser and one for Google’s Chrome –type browser).  The NXT receives the “keys” from the browser and sends the key to the Dexter Industries site to calculate a response.  The Dexter Industries site then returns the correctly calculated key, and the NXT passes this along back to the browser.

After the correct response has been sent to the browser, the handshake is complete and the browser and WIFI module are connected.

Sending and Receiving Information – After a successful handshake, the NXT and your browser can pass information back and forth freely.  Information is sent from the webpage to the NXT in an array that must be specifically encoded and decoded.  Again, this is done for you in our websockets library.

Sending Information:  In each example, you simply load the “text[]” array with the data you want to send.  After the data is loaded into this array, call the function TransmitWebsocket(), which sends the information in the text array out to the browser.

Receiving Information:  When you call ReceiveWebsocket() the webocketbuffer[] array is filled with the incoming information from the browser.

The Webpage

Dexter Industries has included an example webpage for websocket control in the websockets library.  This page can be run locally: save it to your hard drive and open it in your web browser.  The page can also be run through a server connected to the internet:  you can click on any of the links below to test out websockets from our site.

The example page uses HTML5 and Javascript to setup a connection and send and receive information to the LEGO MINDSTORMS NXT.  Our examples are setup to be just examples; you should feel free to try rewriting them yourself or writing your own!

There are two examples:

  • A simple test setup that demonstrates simple send and receive functions: /websocket/Websocket_Echo_WIFI_3.0.html
  • A more complex example that allows you to control your Robot:  commands coming in from the webpage are parsed by the NXT to command it to move the  motors or beep on command from the webpage:  /websocket/RoboCont.html
In each example, you should note the IP number of your robot when it connects.  You will need to input this into the webpage above to establish a websocket connection.

Some Final Thoughts

Controlling a robot is not the only application that websockets can be used for.  You can also use websockets to send and receive data from all of Dexter Industries Sensors over the web.

Important Links: