June 18, 2021

SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs

SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs

, SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs

How to Create ESP8266 Web Server | Complete Beginner’s Tutorial

Share This :
, SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs
, SEO, Wordpress Support & Insurance, Mortgage, Loans, Legal, Etc Blogs

Now comes the button styling part of the code. The next few lines are CSS styling for buttons and the overall web page like font, font size, color of the button etc. This part is not necessary but it makes the web page more appealing.

client.println("<style>");
client.println("html { font-family: Courier New; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button {border: none; color: white; padding: 10px 20px; text-align: center;");
client.println("text-decoration: none; font-size: 25px; margin: 2px; cursor: pointer;}");
client.println(".button1 {background-color: #13B3F0;}");
client.println(".button2 {background-color: #3342FF;}");
client.println("</style>");

Next is the code for actual body of the web page. First, it contains a simple header saying “ESP8266 Web Server”. This is followed by a text indicating the status of LED connected to GPIO4. Following this is the button for GPIO4 with an interactive text on it.

The LED status text and the button is also repeated for GPIO5 as well.

client.println("<body>");
client.println("<h2>ESP8266 Web Server</h2>");
if(gpio4Value == LOW)
{
client.println("<p>GPIO4 LED Status: OFF</p>");
client.print("<p><a href=\"/GPIO4ON\"><button class=\"button button1\">Click to turn ON</button></a>  </p>");
}
else
{
client.println("<p>GPIO4 LED Status: ON</p>");
client.print("<p><a href=\"/GPIO4OFF\"><button class=\"button button2\">Click to turn OFF</button></a></p>");
}
if(gpio5Value == LOW)
{
client.println("<p>GPIO5 LED Status: OFF</p>");
client.print("<p><a href=\"/GPIO5ON\"><button class=\"button button1\">Click to turn ON</button></a></p>");
}
else
{
client.println("<p>GPIO5 LED Status: ON</p>");
client.print("<p><a href=\"/GPIO5OFF\"><button class=\"button button2\">Click to turn OFF</button></a></p>");
}
client.println("</body>");

Finally, close the connection with the client using the following line of code.

client.stop();

Modifying the Code for ESP8266 AP Mode Web Server

If you want to create a web server in which the ESP8266 is acting as an Access Point (Soft AP), then you can still use the previous code but with slight modifications.

The first important thing to modify is the SSID and Password. In STA Mode (station mode), we enter the SSID and Password of the Router. But in AP mode, we have to create a Wi-Fi Network using ESP8266 with its own SSID and Password so that clients can connect to this network.

For example, you can put the SSID as “ESP8266-WIFI” and password as “12345678”. This SSID will be visible to clients and in order to connect to this network, use the above password.

const char* ssid = " ESP8266-WIFI ";
const char* password = "12345678";

Next is the IP address, gateway and subnet. This information is necessary for ESP8266 in AP Mode in order to create a Wi-Fi Network.

IPAddress ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

Now, we can initialize the ESP8266 in AP Mode and also configure its IP address using the following two lines.

WiFi.softAP(ssid, password);
WiFi.softAPConfig(ip, gateway, subnet);

Conclusion

A complete step-by-step tutorial on how to create a Web Server using ESP8266 NodeMCU Board. You learned some important basics about web servers, different modes of operation of ESP8266, how to build ESP8266 Web Server and how to access this server from different clients.

Share This :