Step 1: Arduino IDE Setup and Config for ESP8266 board
Step 2
Step 3
Step 4
Step 5
Note:

Published April 18, 2018

How to Control LED from Simple Web Page Wirelessly

In this IoT project, an LED light can be controlled wirelessly from a simple html page. This project is for all students, doers or makers.

BeginnerFull instructions provided3 hours10,530

How to Control LED from Simple Web Page Wirelessly

Things used in this project

Hardware components

Espressif Wemos D1 Mini

LED (generic)

Software apps and online services

Arduino IDE

Hand tools and fabrication machines

Soldering iron (generic)

Hot glue gun (generic)

Story

Let's get started by live demo to get you all motivated :-)

Live Demo

Step 1: Arduino IDE Setup and Config for ESP8266 board

https://randomnerdtutorials.com/how-to-install-esp...

Recommend to install version 1.8.3 or higher Arduino IDE

Note: After completing above step you should be able to see "Wemos D1 R & mini".

Refer attached images.

Step 2:

Connect the 10mm LED +ve to D3 of board and LED -ve to Boards Gnd pin. You can either use 1.5v x 2 AA baterry to power the board in non debug mode/production or use type 'c' USB data cable to connect to computer/laptop USB cable to debug or re-program.

Connections

AA battery +ve and -ve source is connected to Boards 3.3v and Gnd respectively.

Step 3:

Compile and Upload the code.

Step 4:

Go to WiFi in task bar -> connect to hot spot name: esphotspot. Password is embedded in code.

Hot spot to connect to before opening index.html

Step 5:

Open index.html

index.html

Note:

1. In case you want to update SSID, then need to refer to this WiFi Manager library examples how to go about as the board stores this details in EEPROM and merry change in Arduino code won't allow the board to update previously successfully connected hot spot SSID details. SO for beginners dont expect to change SSID or password to start with.

2. When operating from external power source here 2 AA baterry might not last very long as wifi connectivity drains the battery quite fast. Better option would be use mobile power bank say 10 or 20000 MAH and connect to boards 'c' type USB.

3. In case board is not detected there could be chances you are not running or logged in as Administrator account in OS and/or may not have USB port enabled.

Code

 //This example will set up a static IP - in this case 192.168.1.99
 
#include <ESP8266WiFi.h>

//////////////////////
// WiFi Definitions //
//////////////////////
const char WiFiAPPSK[] = "12345678";
 
int ledPin = D3;
const int ANALOG_PIN = A0; // The only analog pin on the Thing
const int DIGITAL_PIN = D3; // Digital pin to be read -> Just for testing

WiFiServer server(80);

IPAddress apIP(192, 168, 1, 99); // where xx is the desired IP Address
//IPAddress gateway(192, 168, 1, 1); // set gateway to match your network

void setup() {
  Serial.begin(115200);
  delay(10);
 
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
 
  Serial.print(F("Setting static ip to : "));
  Serial.println(apIP);

  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));   // subnet FF FF FF 00
  WiFi.softAP("espHotSpot", WiFiAPPSK); //- See more at: http://www.esp8266.com/viewtopic.php?f=29&t=12124#sthash.bE1emnEw.dpuf
  
  // Connect to WiFi network
  Serial.println();
 
//  // Start the server
  server.begin();
  Serial.println("Server started");
}
 
void loop() {
 
 // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }

  // Read the first line of the request
  String req = client.readStringUntil('\r');
  Serial.println(req);
  client.flush();

  // Match the request
  int val = -1; // We'll use 'val' to keep track of both the
                // request type (read/set) and value if set.

  Serial.print("For 0: ");
  Serial.println(req.indexOf("/0"));
  Serial.print("For 1: ");
  Serial.println(req.indexOf("/1"));
                
  if (req.indexOf("/status1=0") != -1 || req.indexOf("/gpio/0") != -1)
    val = 1; // Will write LED High
  else if (req.indexOf("/status1=1") != -1 || req.indexOf("/gpio/1") != -1)
    val = 0; // Will write LED Low
  else if (req.indexOf("/read") != -1)
    val = -2; // Will print pin reads
  // Otherwise request will be invalid. We'll say as much in HTML

  // Set GPIO5 according to the request
  if (val >= 0)
    digitalWrite(ledPin, val);

  

  // Prepare the response. Start with the common header:
  String s = "HTTP/1.1 200 OK\r\n";
  s += "Content-Type: text/html\r\n\r\n";
  s += "<!DOCTYPE HTML>\r\n<html>\r\n";
  // If we're setting the LED, print out a message saying we did
  if (val >= 0)
  {
    s += "LED is now ";
    s += (val)?"on":"off";
  }
  else if (val == -2)
  { // If we're reading pins, print out those values:
    s += "Analog Pin = ";
    s += String(analogRead(ANALOG_PIN));
    s += "<br>"; // Go to the next line.
    s += "Digital Pin 12 = ";
    s += String(digitalRead(DIGITAL_PIN));
  }
  else
  {
    s += "Invalid Request.<br> Try /led/1, /led/0, or /read.";
  }
  s += "</html>\n";

  // Send the response to the client
  client.print(s);
  delay(100);
  Serial.println("Client disonnected");
client.flush();
  // The client will actually be disconnected 
  // when the function returns and 'client' object is detroyed
 
}

Credits

TechGuru

8 projects • 13 followers

We provide Science,School and Technology projects(Working Real Time Models) for your requirements. YOU HAVE A BUDGET, WE HAVE A PROJECT !

How to Control LED from Simple Web Page Wirelessly