Blink from a webpage

In the previous tutorial we set up a simple web server and responded to incoming HTTP requests with a static web page, this time we're going to have some interaction between the web page and the device. We'll set up a simple web page with a button and when you click that button we'll toggle the LED on the ESP8266.

In the setup function we're going to add some additional handlers for incoming URIs.

	// Create a simple homepage
	webServer.on("/", servePage);
	// Handle any incomming arguments
	webServer.on("/args", handleArgs);
	// Redirect all unknown traffic back to the homepage
	webServer.onNotFound([](){
	webServer.sendHeader("Location","/");
	webServer.send(303);
	});

view raw WifiWebServerPages.c hosted with ❤ by GitHub

Instead of serving up a simple 'Hello World' text response, this time we're pointing the root URI towards the servePage function, in which we'll create a more detailed HTML response.

We've added a second handler for the /args URI and pointed it towards the handleArgs function, this will be used to process the incoming data.

Finally we've added an onNotFound handler, this should respond to all other URIs and direct the browser back towards the root homepage.

	void servePage() {
	// Create a basic webpage
	String htmlPage;
	htmlPage += "<a href='/args?led=toggle'><button>Toggle LED</button></a>\r\n";
	// Serve the webpage when requested
	webServer.send(200, "text/html", htmlPage);
	}

view raw WifiWebServerServePage.c hosted with ❤ by GitHub

The servePage function still only creates a simple response for the client, but this time is is written in HTML. The sample creates a button and wraps it with a link to change the location of the browser when the user clicks the button. The new URI contains some arguments that tell the ESP8266 what is required. In this case we would like the LED to be toggled. This additional data will be sent from the browser to the web server on our device and the web server can interpret it accordingly.

	void handleArgs() {
	// Create a string containing all the arguments, send them out to the serial port
	String message = "#Args:" + String(webServer.args()) + "\n";
	for (int i = 0; i < webServer.args(); i++)
	message += webServer.argName(i) + ": "+ webServer.arg(i) + "\n";
	Serial.print(message);
	// Look for a specific argument and toggle the LED is required
	for (int i = 0; i < webServer.args(); i++)
	if((webServer.argName(i) == "led") && (webServer.arg(i) == "toggle"))
	digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));
	//redirect back to the main page
	webServer.sendHeader("Location","/");
	webServer.send(303);
	}

view raw WifiWebServerHandleArgs.c hosted with ❤ by GitHub

The handleArgs function looks a bit more involved but the actual core is still pretty simple. The first four lines are just included to aid debugging, they create a string of data that lists all of the incoming arguments to the web server and they send that string to the serial port. This makes it very easy to see what was actually sent by the browser.

The middle of the function contains a for loop which iterates through all of the incoming arguments. There may be multiple arguments coming from the browser and they could be in any order so we loop through them all comparing the argument name against the value we're looking for, in this case 'led'. Once we have identified the argument we look at the value of the argument to decide what to do with it, in our case the value is 'toggle' but it could easily be 'on' or 'off'. If both the argument and it's value match then we toggle the state of the built in LED (don't forget to set up the LED pin as an output at the beginning of the program).

Upload the code and connect to the wifi network created by the device, point the browser towards http://192.168.4.1/ and you should see a simple page with a single button load. When you click that button the LED on the ESP8266 should toggle between the on and off state.

	#include <ESP8266WiFi.h>
	#include <ESP8266WebServer.h>
	ESP8266WebServer webServer(80);
	void setup() {
	// put your setup code here, to run once:
	Serial.begin(115200);
	pinMode(LED_BUILTIN, OUTPUT);
	//The SSID must be >8 characters and <64 characters
	//I'm adding the chip ID onto the end to get a unique (ish) name
	String ssid = "ESP8266 " + String(ESP.getChipId(), HEX);
	//The password must be <64 characters and can be left blank for no password
	String pass = "password";
	Serial.printf("WiFiSSID: '%s'\n", ssid.c_str());
	Serial.printf("Password: '%s'\n", pass.c_str());
	WiFi.mode(WIFI_AP);
	WiFi.softAP(ssid.c_str(), pass.c_str());
	// Create a simple homepage
	webServer.on("/", servePage);
	// Handle any incomming arguments
	webServer.on("/args", handleArgs);
	// Redirect all unknown traffic back to the homepage
	webServer.onNotFound([](){
	webServer.sendHeader("Location","/");
	webServer.send(303);
	});
	webServer.begin();
	}
	void loop() {
	// put your main code here, to run repeatedly:
	webServer.handleClient();
	}
	void servePage() {
	// Create a basic webpage
	String htmlPage;
	htmlPage += "<a href='/args?led=toggle'><button>Toggle LED</button></a>\r\n";
	// Serve the webpage when requested
	webServer.send(200, "text/html", htmlPage);
	}
	void handleArgs() {
	// Create a string containing all the arguments, send them out to the serial port
	String message = "#Args:" + String(webServer.args()) + "\n";
	for (int i = 0; i < webServer.args(); i++)
	message += webServer.argName(i) + ": "+ webServer.arg(i) + "\n";
	Serial.print(message);
	// Look for a specific argument and toggle the LED is required
	for (int i = 0; i < webServer.args(); i++)
	if((webServer.argName(i) == "led") && (webServer.arg(i) == "toggle"))
	digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));
	//redirect back to the main page
	webServer.sendHeader("Location","/");
	webServer.send(303);
	}

view raw WifiWebServerBlink.c hosted with ❤ by GitHub