Control LEDs Through a Web Page with an 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 web page for this server. We will use the HTML commands to print the data and to make the buttons on the web page.

When the button on the web page 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 LED’s ON or OFF.

Required Materials

The required components for this project are as follows

Arduino Uno
Arduino Ethernet Shield
Four LEDs
4X 220 ohm resistors
Breadboard
Connecting wires

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 LED’s 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 Web Page

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(““);
ethernet_shield.println(““);
ethernet_shield.println(”“);
ethernet_shield.println(”“);

Red LED

ethernet_shield.println(““);
ethernet_shield.println(““);
ethernet_shield.println(”“);
ethernet_shield.println(”“);

White LED

ethernet_shield.println(““);
ethernet_shield.println(““);
ethernet_shield.println(”“);
ethernet_shield.println(”“);

Yellow LED

ethernet_shield.println(““);
ethernet_shield.println(““);
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 web page.

#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(““);
ethernet_shield.println(““);
ethernet_shield.println(”“);
ethernet_shield.println(”“);

Red LED

ethernet_shield.println(““);
ethernet_shield.println(““);
ethernet_shield.println(”“);
ethernet_shield.println(”“);

White LED

ethernet_shield.println(““);
ethernet_shield.println(““);
ethernet_shield.println(”“);
ethernet_shield.println(”“);

Yellow LED

ethernet_shield.println(““);
ethernet_shield.println(““);
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="";

Electron Nic Project

Search This Blog