ESP8266 Arduino WiFi Web Server LED on off control

February 5, 2018ESP8266ESP8266, led, NodeMCU, web server

In this tutorial, I am going to tell you about controlling LED using web server over WiFiusing ESP8266 module or NodeMCU. So let’s start. In this tutorial we are using onboard LED of NodeMCU. If you are using different hardware you can connect led to GPIO2 or make changes in code as per your connection.

There are many ways to control LED over WiFi. We will go from basic to advance method of controlling LED using WiFi.

Method 1: ESP8266 NodeMCU as LED Web Server

In this method we create ESP8266 as WebServer to control on board LED through a web page. Read More on Creating Web Server with HTML in ESP8266.

In this we use two HTML link tags to turn on LED and Turn Off LED. For this we need three web locations on ESP i.e. we create server on three locations using serveron command.

First is to display the user interface, second and third to turn LED on and Off.

Arduino IDE code for ESP8266 WiFi LED on off

Make changes in WiFi configuration. Enter your WiFi router ssid and password. Program is well commented copy and paste it in Arduino IDE. To install ESP8266 NodeMCU board read this.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

/*

 * ESP8266 NodeMCU LED Control over WiFi Demo

 *

 * https://circuits4you.com

 */

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

//ESP Web Server Library to host a web page

#include <ESP8266WebServer.h>

//---------------------------------------------------------------

//Our HTML webpage contents in program memory

const char MAIN_page[] PROGMEM = R"=====(

<!DOCTYPE html>

<html>

<body>

<center>

<h1>WiFi LED on off demo: 1</h1><br>

Ciclk to turn <a href="ledOn">LED ON</a><br>

Ciclk to turn <a href="ledOff">LED OFF</a><br>

<hr>

<a href="https://circuits4you.com">circuits4you.com</a>

</center>

</body>

</html>

)=====";

//---------------------------------------------------------------

//On board LED Connected to GPIO2

#define LED 2  

//SSID and Password of your WiFi router

const char* ssid = "circuits4you.com";

const char* password = "123456789";

//Declare a global object variable from the ESP8266WebServer class.

ESP8266WebServer server(80); //Server on port 80

//===============================================================

// This routine is executed when you open its IP in browser

//===============================================================

void handleRoot() {

 Serial.println("You called root page");

 String s = MAIN_page; //Read HTML contents

 server.send(200, "text/html", s); //Send web page

}

void handleLEDon() { 

 Serial.println("LED on page");

 digitalWrite(LED,LOW); //LED is connected in reverse

 server.send(200, "text/html", "LED is ON"); //Send ADC value only to client ajax request

}

void handleLEDoff() { 

 Serial.println("LED off page");

 digitalWrite(LED,HIGH); //LED off

 server.send(200, "text/html", "LED is OFF"); //Send ADC value only to client ajax request

}

//==============================================================

//                  SETUP

//==============================================================

void setup(void){

  Serial.begin(115200);

  WiFi.begin(ssid, password);     //Connect to your WiFi router

  Serial.println("");

  //Onboard LED port Direction output

  pinMode(LED,OUTPUT); 

  //Power on LED state off

  digitalWrite(LED,HIGH);

  // Wait for connection

  while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print(".");

  }

  //If connection successful show IP address in serial monitor

  Serial.println("");

  Serial.print("Connected to ");

  Serial.println(ssid);

  Serial.print("IP address: ");

  Serial.println(WiFi.localIP());  //IP address assigned to your ESP

  server.on("/", handleRoot);      //Which routine to handle at root location. This is display page

  server.on("/ledOn", handleLEDon); //as Per  <a href="ledOn">, Subroutine to be called

  server.on("/ledOff", handleLEDoff);

  server.begin();                  //Start server

  Serial.println("HTTP server started");

}

//==============================================================

//                     LOOP

//==============================================================

void loop(void){

  server.handleClient();          //Handle client requests

}

Testing

Once the code is uploaded. open serial monitor and note down the IP address. Enter the same ip address in web browser to open web page. In this demo you will find that, you need to press back button. This can be avoided using iframe to open the link.

ESP8266 LED control without page leaving and get status

In this code we use Iframe. that will open the led status page in a frame. without leaving main page.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

/*

 * ESP8266 NodeMCU LED Control over WiFi Demo

 *

 * https://circuits4you.com

 */

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

//ESP Web Server Library to host a web page

#include <ESP8266WebServer.h>

//---------------------------------------------------------------

//Our HTML webpage contents in program memory

const char MAIN_page[] PROGMEM = R"=====(

<!DOCTYPE html>

<html>

<body>

<center>

<h1>WiFi LED on off demo: 1</h1><br>

Ciclk to turn <a href="ledOn" target="myIframe">LED ON</a><br>

Ciclk to turn <a href="ledOff" target="myIframe">LED OFF</a><br>

LED State:<iframe name="myIframe" width="100" height="25" frameBorder="0"><br>

<hr>

<a href="https://circuits4you.com">circuits4you.com</a>

</center>

</body>

</html>

)=====";

//---------------------------------------------------------------

//On board LED Connected to GPIO2

#define LED 2  

//SSID and Password of your WiFi router

const char* ssid = "circuits4you.com";

const char* password = "123456789";

//Declare a global object variable from the ESP8266WebServer class.

ESP8266WebServer server(80); //Server on port 80

//===============================================================

// This routine is executed when you open its IP in browser

//===============================================================

void handleRoot() {

 Serial.println("You called root page");

 String s = MAIN_page; //Read HTML contents

 server.send(200, "text/html", s); //Send web page

}

void handleLEDon() { 

 Serial.println("LED on page");

 digitalWrite(LED,LOW); //LED is connected in reverse

 server.send(200, "text/html", "ON"); //Send ADC value only to client ajax request

}

void handleLEDoff() { 

 Serial.println("LED off page");

 digitalWrite(LED,HIGH); //LED off

 server.send(200, "text/html", "OFF"); //Send ADC value only to client ajax request

}

//==============================================================

//                  SETUP

//==============================================================

void setup(void){

  Serial.begin(115200);

  WiFi.begin(ssid, password);     //Connect to your WiFi router

  Serial.println("");

  //Onboard LED port Direction output

  pinMode(LED,OUTPUT); 

  //Power on LED state off

  digitalWrite(LED,HIGH);

  // Wait for connection

  while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print(".");

  }

  //If connection successful show IP address in serial monitor

  Serial.println("");

  Serial.print("Connected to ");

  Serial.println(ssid);

  Serial.print("IP address: ");

  Serial.println(WiFi.localIP());  //IP address assigned to your ESP

  server.on("/", handleRoot);      //Which routine to handle at root location. This is display page

  server.on("/ledOn", handleLEDon); //as Per  <a href="ledOn">, Subroutine to be called

  server.on("/ledOff", handleLEDoff);

  server.begin();                  //Start server

  Serial.println("HTTP server started");

}

//==============================================================

//                     LOOP

//==============================================================

void loop(void){

  server.handleClient();          //Handle client requests

}

alex9ufo 聰明人求知心切

2018年4月22日星期日