[Week 5 FYP2] Development of Easy Parking Finder System


Activity Title :

- Modify the code to an automatic refresh for web-page.
- Study to transfer data and display into Web-page

Objective :

To give make an automatic web-page refresh. 
To transfer data and display it in the Web-page. 
·

Content :

From my previous code, i modify the code to get the better result. The previous code seems like dont have response or update when it received a data.

Code: 
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

const char* ssid = "abc"; // ssid
const char* password = "123456789";// password
//192.168.43.20
IPAddress ip(192, 168, 43, 23); //set static ip
IPAddress gateway(192, 168, 43, 1); //set getteway
IPAddress subnet(255, 255, 255, 0);//set subnet

String page = "";
double data;
ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200);
  delay(10);


  // Connection to wireless network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.config(ip, gateway, subnet);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");

  server.begin();
  Serial.println("Server started");

  // Print the IP address in serial monitor. It must be the same we entered above
  Serial.print("Type this address in URL to connect: ");
  Serial.print("http://");
  Serial.println(ip);
  Serial.println("/");
  server.on("/", [](){
    page = "<html>\
  <head>\
    <meta http-equiv='refresh' content='5'/>\
    <title>Parking Status:</title>\
    <style>\
      body { background-color: #ffe63b; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Sensor to Node MCU Web Server</h1>\
    <h3>Voltage output:</h3> \
    <h4>"+String(data)+"</h4>\
  </body>\
</html>";

    server.send(200, "text/html", page);
  });

}

void loop() {

   data = analogRead(A0);
  delay(1000);
  server.handleClient();

  delay(1);


}



Result and Analysis:

As a result, the web-page can be automatically refresh and update the latest status/data. The data display on Web-page is a random number because A0 dont have any connection. 

Conclusion:
As a conclusion, by adding this code (<meta http-equiv='refresh' content='5'/>\), the web-page will be refresh every 5 second. 

Comments

Popular posts from this blog

[Week 13 FYP2] Development of Easy Parking Finder System

[Week 7 FYP1] Development of Easy Parking Finder System

[Week 14 FYP1] Development of Easy Parking Finder System