Hardware components | ||||||
 |
| × | 1 | |||
Here to make an automatic Coronavirus COVID 19 Live Data Tracker using ESP8266 Web Server with widget. Data reporting in the webpage from WHO Coronavirus Disease (COVID-19) statics in world wide and countrywise data by editing setting in the Local webpage (widget).
ESP8266 based boards are by far the most popular platform, among makers and hobbyist, for building WiFi based projects due to their low cost and general ease of use. For today’s tutorial, we will continue our exploration of the most popular of the ESP8266 based boards; the NodeMCU development board and we will explore how to build a web server using it. Through the web server, we will be able to control anything connected to the GPIO pins of the board. But here no component and GPIO pins used in this project except ESP8266 12E v3 development board.
In this tutorial we are making ESP8266 web server with HTML web page. ESP8266 connects to WiFi Network and we get web page in our phone and PC which is connected to same WiFi network.
A Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files that form Web pages to users, in response to their requests, which are forwarded by their computers’ HTTP clients. To implement web server on ESP, there are two ways to make your first web server first connect to your WiFi router or make ESP as access point.
We need these libraries to make web server.
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
In order to setup the webserver, we will need ESPAsyncWebServer, which we will use in our code.This library allows setting an asynchronous HTTP (and Websocket) server, once we set the server callback functions, we don’t need to periodically call any client handling function on the main loop, like we had to do on the ESP8266 HTTP webserver original implementation.
Define your SSID and Password of your WiFi router, where the ESP connects
//SSID and Password of your WiFi router
const char* ssid = "your_ssid";
const char* password = "password";
To finalize, we will declare a variable of class AsyncWebServer, which we will use to set up our asynchronous ESP8266 HTTP server.
As input of the constructor, we will pass the port where the server will be listening. We will use port 80, which is the default HTTP port.
AsyncWebServer server(80);
As we know that all web servers have a web page to be served. First make a web page using HTML code.
<!DOCTYPE HTML><html>
</head>
<body>
<h2>ESP8266 Web Server for A Live COVID-19 Tracker</h2>
<body>
Inserting Widget HTML code:
In addition to adding a covid statics widgets from elfsight in the web page.
create account and get HTML code for the Widgets,
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-c8a11305-bbc2-46e8-aa5c-69d64833c204"></div>
With this done, we move to the void setup() function.
We start by initializing the serial monitor.
Serial.begin(115200);
Next, we connect to the access point using the credentials as arguments to the WiFi.begin() function and we use the WiFi.status() function to check if connection was successful.
WiFi.begin(ssid, password);
Serial.print("Connecting to ");
Serial.println(ssid);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
If the connection is successful, a text is printed on the serial monitor to indicate that, and the IP address of the web server is also displayed. This IP address becomes the web address for server and it is what will be entered on any web browser on the same network to access the server.
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());// this will display the Ip address of the Pi which should be entered into your browser
With that done, we start the server using the server.begin() function and proceed to the void loop( ) function.
server.begin();
void loop(){
}
Complete Arduino code here below:#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "SSID"; // your SSID
const char* password = "password"; // your wifi password
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
</head>
<body>
<h2>ESP8266 Web Server for A Live COVID-19 Tracker</h2>
<p>
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-c8a11305-bbc2-46e8-aa5c-69d64833c204"></div>
</P>
<p>
<i class="fab fa-youtube" style="font-size:1.0rem;color:red;"></i>
<span style="font-size:1.0rem;">Subscribe to </span>
<a href="https://www.youtube.com/channel/UCnIld2cZ8iAvoYZlMHWZrtA" target="_blank" style="font-size:1.0rem;">Dofbot YouTube Channel</a>
</P>
</body>
</script>
</html>)rawliteral";
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(".");
}
// Print ESP8266 Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
// Start server
server.begin();
}
void loop(){
// nothing here
}
Comments
Please log in or sign up to comment.