Web Browser interfacing to a microcontroller project.

Projects Interfacing w/ Software on the Computer
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