How to Control LEDs Through a Webpage With Arduino

In this article, we are going to control LEDs from a web page using an Arduino Ethernet module. The Ethernet module will create a server using the router and we will set a webpage for this server. We will use the HTML commands to print the data and to make the buttons on the webpage. When the button on the webpage is pressed, we will get some data on the serial monitor. We will save this data in the string and will use this data to turn the LEDs ON or OFF.

Circuit Diagram

The circuit diagram is very simple. Connect the positive pin on each of LEDs to pins 7, 6, 5 and 4. Then connect the other end of the LEDs to the ground on the Arduino through the 220-ohm resistors.

How to Run It

Before uploading the code, change the LAN IP with your LAN IP and gateway IP with your gateway IP. Then Upload the code and open the serial monitor. It will show you the IP address, enter this IP address into your browser and a web page like below one will get open.

LED Control Webpage

Now the LEDs will turn ON or OFF upon pressing the buttons.

Code

Please note that the buttons for the web page are displaying in HTML. Copying and pasting the code below will not work on your Arduino. Please download the Arduino Web Page LED Control Zip file?linked here.

#include 
#include 
int greenled = 4;
int redled = 5;
int whiteled = 6;
int yellowled = 7;
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //mac address
byte ip[] = { 192, 168, 0, 13 };                      // Lan IP
byte gateway[] = { 192, 168, 0, 1 };                   // gateway IP
byte subnet[] = { 255, 255, 255, 0 };                  
EthernetServer server(80);                             
String buffer;

void setup() {
Serial.begin(9600);
pinMode(greenled, OUTPUT);
pinMode(redled, OUTPUT);
pinMode(whiteled, OUTPUT);
pinMode(yellowled, OUTPUT);
Ethernet.begin(mac, ip, gateway, subnet);
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}

void loop() {
EthernetClient ethernet_shield = server.available();
if (ethernet_shield) {
while (ethernet_shield.connected()) {   
if (ethernet_shield.available()) {
char c = ethernet_shield.read();
if (buffer.length() < 100) {
buffer += c;
}

if (c == 'n') {          
Serial.println(buffer); 
ethernet_shield.println("HTTP/1.1 200 OK"); 
ethernet_shield.println("Content-Type: text/html");
ethernet_shield.println();     
ethernet_shield.println("");
ethernet_shield.println("");
ethernet_shield.println("Leds Controlled by webpage");
ethernet_shield.println("");
ethernet_shield.println(""); 
ethernet_shield.println("

Controlling LEDs Through Webpage

"); ethernet_shield.println(" "); ethernet_shield.println(" Green LED "); ethernet_shield.println("ON"); ethernet_shield.println("OFF "); ethernet_shield.println(" "); ethernet_shield.println(" Red LED "); ethernet_shield.println("ON"); ethernet_shield.println("OFF "); ethernet_shield.println(" "); ethernet_shield.println(" White LED "); ethernet_shield.println("ON"); ethernet_shield.println("OFF "); ethernet_shield.println(" "); ethernet_shield.println(" Yellow LED "); ethernet_shield.println("ON"); ethernet_shield.println("OFF "); ethernet_shield.println(" "); ethernet_shield.println("

");
ethernet_shield.println("");

delay(1);
ethernet_shield.stop();

if (buffer.indexOf("?greenledon") >0){
digitalWrite(greenled, HIGH);
}
if (buffer.indexOf("?greenledoff") >0){
digitalWrite(greenled, LOW);
}
if (buffer.indexOf("?redledon") >0){
digitalWrite(redled, HIGH);
}
if (buffer.indexOf("?redledoff") >0){
digitalWrite(redled, LOW);
}
if (buffer.indexOf("?whiteledon") >0){
digitalWrite(whiteled, HIGH);
}
if (buffer.indexOf("?whiteledoff") >0){
digitalWrite(whiteled, LOW);
}
if (buffer.indexOf("?yellowledon") >0){
digitalWrite(yellowled, HIGH);
}
if (buffer.indexOf("?yellowledoff") >0){
digitalWrite(yellowled, LOW);
}
//clearing string for next read
buffer="";  

}
}
}
}
}

Code Explanation

First, we included the libraries for the Ethernet shield and then initialized the pins for the LEDs. Then we added the physical mac address for the Ethernet shield (No need to change it.) Next, we give the Lan IP at which we will create the server and then we give the gateway IP and subnet mask. Next, we selected the port ‘80’ and initialized a string for storing the data from the webpage.

#include 
#include 
int greenled = 4;
int redled = 5;
int whiteled = 6;
int yellowled = 7;
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //mac address
byte ip[] = { 192, 168, 0, 13 };                      // Lan IP
byte gateway[] = { 192, 168, 0, 1 };                   // gateway IP
byte subnet[] = { 255, 255, 255, 0 };                  
EthernetServer server(80);                             
String buffer;

In the setup function, we declared the LED pins as the output pins and started the server at the IP we give in the above lines of code.

EthernetClient ethernet_shield = server.available();
if (ethernet_shield) {
while (ethernet_shield.connected()) {   
if (ethernet_shield.available()) {
char c = ethernet_shield.read();
if (buffer.length() < 100) {
buffer += c;
}

In the following part of code, we send the HTML commands to create the button and to print the data on the webpage.

if (c == 'n') {          
Serial.println(buffer); 
ethernet_shield.println("HTTP/1.1 200 OK"); 
ethernet_shield.println("Content-Type: text/html");
ethernet_shield.println();     
ethernet_shield.println("");
ethernet_shield.println("");
ethernet_shield.println("Leds Controlled by webpage");
ethernet_shield.println("");
ethernet_shield.println(""); 
ethernet_shield.println("

Controlling LEDs Through Webpage "); ethernet_shield.println(" "); ethernet_shield.println(" Green LED "); ethernet_shield.println("ON"); ethernet_shield.println("OFF "); ethernet_shield.println(" "); ethernet_shield.println(" Red LED "); ethernet_shield.println("ON"); ethernet_shield.println("OFF "); ethernet_shield.println(" "); ethernet_shield.println(" White LED "); ethernet_shield.println("ON"); ethernet_shield.println("OFF "); ethernet_shield.println(" "); ethernet_shield.println(" Yellow LED "); ethernet_shield.println("ON"); ethernet_shield.println("OFF "); ethernet_shield.println(" "); ethernet_shield.println("

");
ethernet_shield.println("");

We stop the connection to the server and get the data from the webpage. Next we compare the data and turned ON or OFF the LED’s.
ethernet_shield.stop();

if (buffer.indexOf("?greenledon") >0){
digitalWrite(greenled, HIGH);
}
if (buffer.indexOf("?greenledoff") >0){
digitalWrite(greenled, LOW);
}
if (buffer.indexOf("?redledon") >0){
digitalWrite(redled, HIGH);
}
if (buffer.indexOf("?redledoff") >0){
digitalWrite(redled, LOW);
}
if (buffer.indexOf("?whiteledon") >0){
digitalWrite(whiteled, HIGH);
}
if (buffer.indexOf("?whiteledoff") >0){
digitalWrite(whiteled, LOW);
}
if (buffer.indexOf("?yellowledon") >0){
digitalWrite(yellowled, HIGH);
}
if (buffer.indexOf("?yellowledoff") >0){
digitalWrite(yellowled, LOW);
}
//clearing string for next read
buffer="";

More Arduino LED Control Projects

• How to Recreate the Connect Four Game Using Arduino and an LED Matrix
• Arduino LED Matrix Controlled by an Android App and GreenPAK’s I2C
• How to Make a POV Display Using LEDs and Arduino

More Arduino Ethernet Shield Projects

• Log Temperature, Humidity, and Heat Data with Arduino to an SD Card