0

ESP8266 Web Server Example On/Off Led

sorry we are not native speakers, so the content may not be clear. We just want to share with you!
5 sao

sorry we are not native speakers, so the content may not be clear. We just want to share with you!

This article guides you through the steps to build ESP8266 into a Web Server that can control 1 LED outputs. The ESP8266 Web Server can be accessed from any device that has a browser available, on a local Wifi network.

How to build esp8266 web server

See more:

ESP8266 feature

ESP8266 hardware
ESP8266 hardware
  • Chip: ESP8266EX
  • WiFi: 2.4 GHz supports 802.11 b/g/n . standard
  • Operating voltage: 3.3V
  • Input voltage: 5V via USB port
  • Number of I/O pins: 11 (all I/O pins have Interrupt/PWM/I2C/One-wire, except D0)
  • Number of Analog Input pins: 1 (maximum input voltage 3.3V)
  • Flash Memory: 4MB
  • Interface: Micro USB Cable
  • Security support: WPA/WPA2
  • Built-in TCP/IP protocol
  • Programming on languages: C/C++, Micropython, NodeMCU – Lua

Install the ESP8266 programming environment on the Arduino IDE

first, if you not yet installed ESP8266 environment on the Arduino IDE, let follow this post to install it before start.

  1. Download and install the Arduino IDE on your machine.
  1. Install ESP8266 add-on on Arduino IDE, File > Preferences
  2. Enter the string http://arduino.esp8266.com/stable/package_esp8266com_index.json in the “Additional Board Manager URLs” field and then select “OK”.
Install ESP8266 add-on on Arduino IDE
Install ESP8266 add-on on Arduino IDE
  1. Choose Tools > Board > Boards Manager
Go to Board manager
Go to Board manager
  1. Search ESP8266 -> “esp8266 by ESP8266 Community”.
esp8266 by ESP8266 Community
esp8266 by ESP8266 Community
  1. Tools > Board, choose board ESP8266 and re-open Arduino IDE.
ESP8266 installed on Arduino IDE
ESP8266 installed on Arduino IDE

Source code and programing ESP8266

Copy the following code to your Arduino IDE, but don’t upload it yet. You need to make some changes to make it work for you. Go to some note below.

#include <ESP8266WiFi.h>

const char* ssid = "your wifi name";
const char* password = "your wifi password";

int LED = 16; // GPIO16 (D0)
WiFiServer server(80);

void setup(){
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  digitalWrite(LED, HIGH);
  Serial.print("Connecting to the Newtork");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi connected"); 
  server.begin();
  Serial.println("Server started");
  Serial.print("IP Address of network: "); // will IP address on Serial Monitor
  Serial.println(WiFi.localIP());
  Serial.print("Copy and paste the following URL: https://");
  Serial.print(WiFi.localIP());
  Serial.println("/");
}

void loop(){
  WiFiClient client = server.available();
  if (!client){
    return;}
    
  Serial.println("Waiting for new client");
  while(!client.available())
  {
    delay(1);
  }
  String request = client.readStringUntil('\r');
  Serial.println(request);
  client.flush();
  
  int value = HIGH;
  if(request.indexOf("/LED=ON") != -1){
    
    digitalWrite(LED, LOW); // Turn LED ON
    value = LOW;
  }

  if(request.indexOf("/LED=OFF") != -1){

    digitalWrite(LED, HIGH); // Turn LED OFF
    value = HIGH;
  } 
  
//*------------------HTML Page Code---------------------*//

  client.println("HTTP/1.1 200 OK"); //
  client.println("Content-Type: text/html");
  client.println("");
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.print(" CONTROL LED: ");
  if(value == HIGH){
    client.print("OFF");
  }
  else
  {
    client.print("ON");
  }
  client.println("<br><br>");
  client.println("<a href=\"/LED=ON\"\"><button>ON</button></a>");
  client.println("<a href=\"/LED=OFF\"\"><button>OFF</button></a><br />");
  client.println("</html>");
  
  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");
}

Input your wifi infomation here, this will help esp8266 connect to your wifi

const char* ssid = “Your wifi name”;

const char* password = “Your password”;

Choose COM Port

COM PORT

Principle of test circuit ESP8266 Web Server

  • ESP8266 12-E
  • 1x LEDs
  • 1x Resistors (220 or 330 ohms)
  • Breadboard
  • Jumper
  • Connect the circuit as shown below – connect GPIO5 (D1) pins to the LEDs.
Circuit ESP8266 and led

Upload

After upload code to ESP8266 board, let open monitor and select baud rate 115200

Get IP on monitor screen: This is IP use to control 2 led

Get IP

Open broswer, input the IP get from monitor and access web server make by ESP8266

ESP8266 web server control led
ESP8266 web server control led

Output on monitor

Output when control on/off esp8266 browser
Output when control on/off esp8266 browser

NOTE: This document we are refer from: https://randomnerdtutorials.com/,if the author see this post, please we are want to share your known to our student country

Leave a Reply

Your email address will not be published. Required fields are marked *