Overview
Things
Story

Step 1: Begin With NodeMcu
Step 2: Download Folder
Step 3: Understand Built in LED
Step 4: Upload Code Based on HTML
Step 5: See the IP
Step 6: Control Via Device
Step 7: Code Based on CSS
Step 8: See the IP Address
Step 9: Control Via Device
Step 10: Done

Published April 26, 2020

Nodemcu Mini D1 R1 || Beginners || Led toggle || Wemos D1 R1

This is the tutorial about, How to control LED via webpage

BeginnerFull instructions provided4,885

Nodemcu Mini D1 R1 || Beginners || Led toggle || Wemos D1 R1

Things used in this project

Hardware components

Espressif Wemos D1 Mini

Software apps and online services

Arduino IDE

Story

..............

In this tutorial We will control LED via Browser , So you can control any device after adding some Relays.

here We are using ESP8266 or MINI NodeMcu.

it will send some HTML and CSS script on client so you can see user interface in browser.

For more videos and tutorial Please Subscribe my youtube cahnnel.

..............

Step 1: Begin With NodeMcu

If You are New with Wemos D1 R1 or mini NodeMcu then Follow the tutorial, link given below.

Where you can learn How to install Driver for mini nodemcu.
How to Install board in Arduino IDE.
How to upload First blink Code in NodeMcu.

Instructable Link :- https://www.instructables.com/id/Nodemcu-Mini-D1-R...

Youtube link :-https://www.youtube.com/watch?v=IV25zd-hj7U

Step 2: Download Folder

Download the folder given below and extract it.

___________________

https://codeload.github.com/vishalsoniindia/Control-Led-Via-Browser-Nodemcu-Mini-D1-R1-HTML-CSS-Wemos-D1-R1/zip/master

__________________

DOWNLOAD

___________________

Step 3: Understand Built in LED

1 / 2

As you can see in image the built in LED is Connected to VCC with resistor and GND terminal is connected with ESP8266.

So it will work in reverse, whenever we turn pin to HIGH the led will be off.

Whenever We turn pin to LOW, led will ON.

Step 4: Upload Code Based on HTML

1 / 2

Go to the downloaded Folder.
find code "LED_toggle_HTML".
Open the code in arduino ide.
Select Correct board which is "Wemos D1 R1" and correct Port.
Now upload the code.

Step 5: See the IP

1 / 2

NOTE:- No need to see IP every time, it is only one time process.

Open Serial Monitor.
Press reset Button in NodeMcu.
You will see Connecting.........
After Stable connection it will show IP address.

Step 6: Control Via Device

1 / 3

Paste the IP address in Device Browser.
Hit Enter, you will see a ON, OFF interface.
Now you can Turn on LED via ON switch and turn off LED via OFF switch.

BUT you can the interface is less attractive and you have to Zoom in every time whenever you click the switch.

So in Next Step we will use CSS with HTML for attractive interface.

Step 7: Code Based on CSS

Find the code "LED_Toggle_CSS" in Downloaded folder.
Open the Code in Arduino IDE.
Select Correct Board "Wemos D1 R1"and Port.
Upload Code.

Step 8: See the IP Address

NOTE :- This is one time process to know IP address, No need to do it every time.

Open Serial Monitor.
Press reset button in NodeMcu.
Now you will see "Connecting......" till the connected.
Once connected you will see IP address.
Copy the IP address.

Step 9: Control Via Device

1 / 3

Enter the IP address in Mobile Browser.
you will see ON/OFF switch and Yellow circle which is LED.
When we press ON then LED will turn on the LED circle will turn Yellow.
When we press OFF then LED will turn off the LED circle will turn Black.

Step 10: Done

1 / 2

Congratulation.............

you have build a browser controlled LED.

if you new and want to begin with the NodMcu watch video or goto the tutorial link here.

Code

#include <ESP8266WiFi.h>

int state = LOW;
int LED = LED_BUILTIN;
char on = LOW;
char off = HIGH;

const char* ssid = "Vishal";
const char* password = "vvishal123";

WiFiServer server(80);

void setup()
{
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  digitalWrite(LED, off);

  Serial.print("Connecting");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi connected");  
  server.begin();  // Starts the Server
  Serial.println("Server started");

  Serial.print("IP Address of network: "); // Prints 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();

  
  if(request.indexOf("/LEDON") != -1)
  {
    digitalWrite(LED, on); // Turn ON LED
    state = on;
  }
  if(request.indexOf("/LEDOFF") != -1)
  {
    digitalWrite(LED, off); // Turn OFF LED
    state = off;
  }

/*------------------HTML Page Creation---------------------*/

  client.println("HTTP/1.1 200 OK"); // standalone web server with an ESP8266
  client.println("Content-Type: text/html");
  client.println("");
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");

  client.println("<head>");
  client.println("<title>LED TOGGLE</title>");
  client.println("</head>");
  client.print("<body>");
  client.println("<header id=\"main-header\">");
  client.println("<h1>LED TOGGLE</h1>");
  client.println("<h4>by Vishal Soni</h4>");
  client.println("</header>");
   
  if(state == on)
  {
    client.print("ON");
  }
  else
  {
    client.print("OFF");
  }
  client.print("<br>");
  client.print("<br>");
  client.println("<a href=\"/LEDON\"\"><button class=\"button\">ON</button></a>");
  client.println("<a href=\"/LEDOFF\"\"><button class=\"button\">OFF</button></a>");
  client.print("</body>");
  client.println("</html>");

  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");
}

#include <ESP8266WiFi.h>

int state = LOW;
int LED = LED_BUILTIN;
char on = LOW;
char off = HIGH;

const char* ssid = "Vishal";
const char* password = "vvishal123";

WiFiServer server(80);

void setup()
{
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  digitalWrite(LED, off);

  Serial.print("Connecting");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi connected");  
  server.begin();  // Starts the Server
  Serial.println("Server started");

  Serial.print("IP Address of network: "); // Prints 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();

  
  if(request.indexOf("/LEDON") != -1)
  {
    digitalWrite(LED, on); // Turn ON LED
    state = on;
  }
  if(request.indexOf("/LEDOFF") != -1)
  {
    digitalWrite(LED, off); // Turn OFF LED
    state = off;
  }

/*------------------HTML Page Creation---------------------*/

  client.println("HTTP/1.1 200 OK"); // standalone web server with an ESP8266
  client.println("Content-Type: text/html");
  client.println("");
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");

  client.println("<head>");
  client.println("<title>LED TOGGLE</title>");
  client.println("<style type=\"text/css\">");
  client.println("body{");
  client.println("background-color:#000000;");
  client.println("color:#ffffff;");
  client.println("font-family: Arial, Helvetica, sans-serif;");
  client.println("font-size:30px;");
  client.println("line-height:1.6em;");
  client.println("margin:0;");
  client.println("}");
  client.println(".container{");
  client.println("width:80%;");
  client.println("margin:auto;");
  client.println("overflow:hidden;");
  client.println("text-align:center;");
  client.println("}");
  client.println("#main-header {");
  client.println("background-color:coral;");
  client.println("color:#fff;");
  client.println("}");
  client.println(".button1{");
  client.println("border:1px #fff solid;");
  if(state == on){
  client.println("background-color:red;");
  }
  else{
  client.println("background-color:#F75D59;");
  }
  client.println("color:#fff;");
  client.println("padding:60px 60px;");
  client.println("margin-top:10px;");
  client.println("border-radius:50%;");
  client.println("font-size:50px;");
  client.println("}");
  client.println(".button2{");
  client.println("border:1px #fff solid;");
  if(state == off){
  client.println("background-color:red;");
  }
  else{
  client.println("background-color:#F75D59;");
  }
  client.println("color:#fff;");
  client.println("padding:60px 50px;");
  client.println("margin-top:10px;");
  client.println("border-radius:50%;");
  client.println("font-size:50px;");
  client.println("}");
  client.println(".LED{");
  client.println("border:1px #fff solid;");
  if(state == off){
  client.println("background-color:#000;");
  }
  else{
  client.println("background-color:#FDD017;");
  }
  client.println("color:#fff;");
  client.println("padding:80px 80px;");
  client.println("margin-top:10px;");
  client.println("border-radius:50%;");
  client.println("}");
  client.println("@media(max-width:600px){");
  client.println("#main-header{");
  client.println("width:100%;");
  client.println("}");
  client.println(".container{");
  client.println("width:auto;");
  client.println("}");
  client.println(".LED{");
  client.println("width:auto;");
  client.println("}");
  client.println("</style>");
  client.println("</head>");
  client.print("<body>");
  client.println("<header id=\"main-header\">");
  client.println("<div class=\"container\">");
  client.println("<h1>LED TOGGLE</h1>");
  client.println("<h4>by Vishal Soni</h4>");
  client.println("</div>");
  client.println("</header>");
  client.println("<div class=\"container\">");
  client.println("<button class=\"LED\"></button>");
  client.println("</div>");
  client.println("<div class=\"container\">");
  client.println("<a href=\"/LEDON\"\"><button class=\"button1\">ON</button></a>");
  client.println("<a href=\"/LEDOFF\"\"><button class=\"button2\">OFF</button></a>");
  client.println("</div>");
  client.print("</body>");
  client.println("</html>");

  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");
}

Credits

Vishalsoniindia

30 projects • 40 followers

I am an electrical engineer⚡🔌 Checkout my Youtube channel

Nodemcu Mini D1 R1 || Beginners || Led toggle || Wemos D1 R1

Things used in this project

Hardware components

Software apps and online services

Story

Step 1: Begin With NodeMcu

Step 2: Download Folder

Step 3: Understand Built in LED

Step 4: Upload Code Based on HTML

Step 5: See the IP

Step 6: Control Via Device

Step 7: Code Based on CSS

Step 8: See the IP Address

Step 9: Control Via Device

Step 10: Done

Schematics

wemos D1 R1 pinout

Code

LED_toggle_with_HTML

LED_toggle_with_CSS

Credits

Vishalsoniindia

Comments

Embed the widget on your own site

Nodemcu Mini D1 R1 || Beginners || Led toggle || Wemos D1 R1

Nodemcu Mini D1 R1 || Beginners || Led toggle || Wemos D1 R1

Things used in this project

Hardware components

Software apps and online services

Story

Step 1: Begin With NodeMcu

Step 2: Download Folder

Step 3: Understand Built in LED

Step 4: Upload Code Based on HTML

Step 5: See the IP

Step 6: Control Via Device

Step 7: Code Based on CSS

Step 8: See the IP Address

Step 9: Control Via Device

Step 10: Done

Schematics

wemos D1 R1 pinout

Code

LED_toggle_with_HTML

LED_toggle_with_CSS

Credits

Vishalsoniindia

Comments

Related channels and tags