Web Browser interfacing to a microcontroller project.

Projects Interfacing w/ Software on the Computer
1

Hi all!

This is my first post and mods if it's in the wrong spot my apologies.

I am a "Laboratory Equipment Designer" at the University here and I help students design and build all kinds of projects that are controlled with a microcontroller.

For the past 20 years I have been using Motorola 68HC11 "EVBU" boards with great success.

For projects that need interaction with the user, I have either used an LCD display with prompts and toggle switches for "UP/DOWN" and "ENTER/BACK" which works nicely but can get tedious.

Or, I've used the serial port on the EVBU which requires the user to have a terminal program installed and then all they get is a lousy DOS-like text menu screen.

I recently discovered the Arduino boards (and the Ethernet shield) and WOW what a difference! This will be the ticket to making less expensive and more functional controllers that can be controlled by a web browser that EVERYONE has on their machine.

So now down to my question: I don't want to "reinvent the wheel", so I'm looking for a good method to send data back and forth between the browser and the Arduino board.

My typical usage would be a menu page with some input fields and some output (display) fields as well as some Javascript behind the scenes.

I plan to use the JS to dynamically update display fields on the web page (like maybe "Time delay setting" or "Motor RPM" or something like that in the running project).

What I want to know is how to dynamically update the web browser from the Arduino board WITHOUT having to do the "META refresh" thing.

For example, I want to (maybe) send data to the browser in the form of "192.168.1.200?rpm=1200&torque=32.5&voltage=13.8", then have Javascript parse the URL line for the parameters and plug them into the proper fields.

I know how to do ALL the stuff on the client side (i.e. browser), but I don't know how to send the new URL strings to the browser and have them be "seen" without doing a meta refresh.

So, any help you can provide or links to look at - I will greatly appreciate it.

Thank you!

-- Roger

2

What I want to know is how to dynamically update the web browser from the Arduino board WITHOUT having to do the "META refresh" thing.

I don't think you can. The browser is a client. It makes a GET request. The Arduino as server responds to that request.

The returned page can contain data that causes the browser to make another GET request on a regular basis.

But, the server has no way to push more data to disconnected clients. Or even any way to keep track of who those clients were.

3

PaulS:

What I want to know is how to dynamically update the web browser from the Arduino board WITHOUT having to do the "META refresh" thing.

I don't think you can. The browser is a client. It makes a GET request. The Arduino as server responds to that request.

The returned page can contain data that causes the browser to make another GET request on a regular basis.

But, the server has no way to push more data to disconnected clients. Or even any way to keep track of who those clients were.

Well, for what it's worth, I made some headway. I was able to figure out how to control an LED via my web browser and in the process of sending the data, the browser is also updated.

This code is probably laughable trivial, but it's my first attempt at Arduino programming:

/***
 *  Control LED via web browser test
 *  Works on UNO and MEGA
 *  Free software
 **/

#include <SPI.h>
#include <Ethernet.h>

#define MAX 512 // http buffer size max
#define LED 8 // test LED on pin 8

byte mac[] = { 0x90, 0xA2, 0xDA, 0x00, 0xC1, 0x2F };
byte ip[] = { 192, 168, 1, 200 };
byte gateway[] = { 192, 168, 1, 1 };
byte subnet[] = { 255, 255, 255, 0 };

EthernetServer server(80);

void setup()
{
	// start the Ethernet connection and the server:
	Ethernet.begin(mac, ip, gateway, subnet);
	server.begin();
	pinMode(LED, OUTPUT); // led output
}


void loop()
{
	char buffer[MAX]; // http buffer
	char *param;
	int n = 0;

	// listen for incoming clients
	EthernetClient client = server.available();

	if (client) {

		boolean currentLineIsBlank = true;

		while (client.connected()) {
			if (client.available()) {
				char c = client.read();

				if (c < 'A' || c > 'Z') { // lowercase everything
					/* nothing */
				} else {
					c = (c | 0x20);
				}

				buffer[n++] = c; // copy chars into buffer

				if (n == MAX) { n--; } // prevent buffer overrun

				if (c == '\n' && currentLineIsBlank) {
					// send a standard http response header
					client.println("HTTP/1.1 200 OK");
					client.println("Content-Type: text/html");
					client.println("Connnection: close");
					client.println("");
					client.println("<!DOCTYPE HTML>");
					client.println("<html>");
					client.println("<head>");
					client.println("<title>LED Control Test</title>");
					client.println("</head>");
					client.println("<body>");

				//	client.println("<p>Buffer content: </p>"); // debug
				//	client.println("<p style=\"font-family:monospace;\">");
				//	client.println(buffer);
				//	client.println("</p>");

					client.println("<form method=\"get\">");
					client.println("<input type=\"submit\" name=\"led\" value=\"On\" />");
					client.println("<input type=\"submit\" name=\"led\" value=\"Off\" />");
					client.println("</form>");

					param = buffer; // param == buffer pointer
					param = strstr(buffer, "led="); // find string in buffer
					param += 4; // move past "led="

					if (strncmp(param, "on", 2) == 0) {
						digitalWrite(LED, HIGH);
						client.println("<p>The LED is: ON</p>");
					}

					if (strncmp(param, "off", 3) == 0) {
						digitalWrite(LED, LOW);
						client.println("<p>The LED is: OFF</p>");
					}

					client.println("</body>");
					client.println("</html>");

					for(n = 0; n < MAX; n++) {
						buffer[n] = 0; // clear the buffer
					}

					break;
				}

				if (c == '\n') {
					currentLineIsBlank = true;

				} else if (c != '\r') {
					currentLineIsBlank = false;
				}
			}
		}
		delay(1);
		client.stop();
	}
}

Now that I can do this and have the status updated, I suppose anything else will be easy....... I hope! :slight_smile:

--- Roger