Control LEDs Through A Web Page With An Arduino

Control LEDs Through a Web Page with an Arduino
3 0
By Mohammed Aqib
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 LEDs 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 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 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("Leds Controlled by webpage");
ethernet_shield.println("
CONTROLLING LEDS THROUGH WEBPAGE

);
ethernet_shield.println(
);
Green LED
);
ethernet_shield.println( ON );
ethernet_shield.println( OFF
);
);
Red LED
);
);
);
White LED
);
);
);
Yellow LED
);
);
);
");
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("Leds Controlled by webpage");
ethernet_shield.println("
CONTROLLING LEDS THROUGH WEBPAGE

);
);
Green LED
);
);
);
Red LED
);
);
);
White LED
);
);
);
Yellow LED
);
);
);
");
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 LEDs.
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 GreenPAKs 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
Web
Tags: Arduino , Ethernet Module, Ethernet Shield, HTML, LEDs , Resistors, Shield, Page
R E C O M M E N D E D P O S T S
D I Y D A Q W I T H A N A R D U I N O : C A L I B R A T I N G T
A R D U I N O O L E D T E M P E R A T U R E D I S P L A Y W I T H
D I Y W E A T H E R S T A T I O N W I T H A N E M O M E T E R A N
D I Y D A Q : M A K E A N A R D U I N O D A T A A C Q U I S I
L E A V E A C O M M E N T
LEAVE YOUR COMMENT
Name (Required)
Email (Required)
Math Captcha
7+2=
P O S T C O M M E N T
F O L L O W U S

R E C E N T P O S T S
How to Use Telegram Instant Messaging on Raspberry Pi
DIY Motion-Activated Sink: How to Make an IR-Controlled Tap
Cleaning Things Up: Noisy Signals and Proper Practice
Build Your Own Z80 Computer Project, Part 1: The CPU
Do-It-Yourself Insect Detector with an Electret Microphone and PIC18F1220
C A T E G O R I E S
3D Designing
Advanced
Analog
Arduino projects
Beginners
Blog
Collaboration tools
Cyber Security
Drones
eBooks
Electronics hacks
ESP8266
Home Automation
Intel Edison
Intermediate
Raspberry pi projects
Resources
Robotics
Sensors
VR and AR

Control LEDs Through A Web Page With An Arduino

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Control LEDs Through A Web Page With An Arduino

Uploaded by

Copyright:

Available Formats

Control LEDs Through a Web Page with an Arduino

LED Control Web Page

CONTROLLING LEDS THROUGH WEBPAGE

EthernetClient ethernet_shield = server.available();

CONTROLLING LEDS THROUGH WEBPAGE

More Arduino LED Control Projects

Arduino LED Matrix Controlled by an Android App and GreenPAKs I2C

How to Make a POV Display Using LEDs and Arduino

LEAVE YOUR COMMENT

How to Use Telegram Instant Messaging on Raspberry Pi

DIY Motion-Activated Sink: How to Make an IR-Controlled Tap

Cleaning Things Up: Noisy Signals and Proper Practice

Build Your Own Z80 Computer Project, Part 1: The CPU

Do-It-Yourself Insect Detector with an Electret Microphone and PIC18F1220

You might also like