Hello everyone!! Welcome to this post on Arduino Projects!!
Need a short introduction to what the Arduino is then click on LINK
Check out the breadboard intro right HERE
So this project is supperrr exciting!! My very first IOT project (Getting into IOT is kind of the entire reason why I started learning Arduino). I basically built a web server here. So you can turn two LEDS on/off from your browser!
Demo:
Things Required:
- Jumper Wires
- NODEMCU ESP8266
- LEDS
- 330 ohm resistors
- Micro USB Cable
- Arduino IDE on computer
Reference Material:
So to set up your NODEMCU board follow along the linked tutorial: (LINK)
So just follow along this (LINK). It has a crystal clear explanation of the code and project.
Code:
View on/ Download from Github: (LINK)
#include<ESP8266WiFi.h>
const char* ssid = "(put your ssid here)\0";
const char* password = "(put your password here)\0";
WiFiServer server(80);
String header;
String output5State="off";
String output4State="off";
const int output5=5;
const int output4=4;
unsigned long currentTime= millis();
unsigned long previousTime=0;
const long timeoutTime= 2000;
void setup() {
// put your setup code here, to run once:
Serial.begin(115200);
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while(WiFi.status()!=WL_CONNECTED){
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected ");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
// put your main code here, to run repeatedly:
WiFiClient client = server.available();
if(client){
Serial.println("New Client");
String currentLine="";
currentTime= millis();
previousTime= currentTime;
while(client.connected() && currentTime - previousTime <=timeoutTime){
currentTime=millis();
if(client.available()){
char c= client.read();
Serial.write(c);
header +=c;
if(c=='\n'){
if(currentLine.length()==0){
client.println("HTTP/1.1 200 OK");
client.println("Content-type: text/html");
client.println("Connection: close");
client.println();
if(header.indexOf("GET /5/on")>=0){
Serial.println("GPIO 5 on");
output5State= "on";
digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /5/off")>=0){
Serial.println("GPIO 5 off");
output5State= "off";
digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on")>=0){
Serial.println("GPIO 4 on");
output4State="on";
digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off")>=0){
Serial.println("GPIO 4 off");
output4State="off";
digitalWrite(output4, LOW);
}
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #77878A;}</style></head>");
client.println("<body><h1>ESP8266 Web Server</h1>");
client.println("<p>GPIO 5 - State " + output5State + "</p>");
if(output5State=="off"){
client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
}else {
client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("<p>GPIO 4 - State " + output4State + "</p>");
if (output4State=="off") {
client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
client.println();
break;
} else {
currentLine="";
}
} else if (c!='\r') {
currentLine +=c;
}
}
}
header = "";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}Stay Tuned for upcoming posts on Arduino Projects! Want to be the first to know when a new and amazing post comes up?? Then feel free to subscribe!
Happy Learning!!
