2018年6月8日 星期五

Read temperature and humidity from nodemcu ESP12E with DHT11 and show it on HTML webpage(Local)-part2

Read temperature and humidity from nodemcu ESP12E with DHT11 and show it on HTML webpage(Local)-part2

Introduction

Read temperature and humidity from nodemcu ESP12E with DHT11 and show it on HTML webpage that will be made from scratch, and I will show you step by step procedure to create the webpage.
If you are seeing this tutorial directly, then please start from beginning here:
Or you can continue with the following steps.
  1. Create a folder named "IoT_Read_Data" and download and place the below two images inside that folder. Rename the first image as "humidity" and second image as "temperature" respectively.
     
    It doesn't matter where you are placing the folder. The only thing is that the above two images should be placed inside the folder carefully. And rename them as specified above.
2. Now create a new file in notepad++ and copy and paste the following code. Starting with the title and head section.
3. Now we will copy the css code just below it in the <style> tag. This is just to make sure that our html page looks more "presentable".
4. Now copy the body section where we will be showing the icons of temperature and humidity along with paragraph where we will display the value coming from esp12e nodemcu in json format. And a textbox where we will be pasting the local IP address of esp12e nodemcu to get the data.
5. Now finally the script section which is reloading the page every 5 seconds. This will automatically refresh and send the get request to our esp12e nodemcu module.


Please watch the below video for full instructions on using the html page.
And you can download the full source code here : Download Source Code.
I hope that you enjoyed my tutorial. Please subscribe to my youtube channel to stay updated with more cool and awesome tutorials.

Read temperature and humidity from nodemcu ESP12E (WeMos D1 R2 )with DHT11 and show it on HTML webpage

Read temperature and humidity from nodemcu ESP12E (WeMos D1 R2 )with DHT11 and show it on HTML webpage(Local)-part1








//======================================
//server ex: http://192.168.1.104/data
//======================================
#include <ESP8266WiFi.h>
#include "DHT.h"
#define DHTPIN D1
#define DHTTYPE DHT11

const char* ssid = "PTS-2F";  //"your SSID or hotspot or wifi name";
const char* password = "";    //"password of hotspot or wifi or ssid";

// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);
DHT dht(DHTPIN, DHTTYPE);

void setup() {
  Serial.begin(115200);
  delay(10);
  dht.begin();
  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
 
  // Start the server
  server.begin();
  Serial.println("Server started");

  // Print the IP address
  Serial.println(WiFi.localIP());
  // Read the first line of the request
  float h = dht.readHumidity();
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();
  Serial.print("Humidity : ");
  Serial.print(h,2);
  Serial.print("%  Temperature: ");
  Serial.print(t,2);
  Serial.println("C");
 
 }

void loop() {

  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Wait until the client sends some data
  Serial.println("new client");
  while(!client.available()){
    delay(1);
  }
 
  // Read the first line of the request
  float h = dht.readHumidity();
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();


  // Check if any reads failed and exit early (to try again).
  if (isnan(h) || isnan(t)) {
    Serial.println("Failed to read from DHT sensor!");
    return;
  }

  String req = client.readStringUntil('\r');
  Serial.println(req);
  client.flush();
 
  if (req.indexOf("/data") != -1){
    client.flush();
    client.println("HTTP/1.1 200 OK");           // This tells the browser that the request to provide data was accepted
    client.println("Access-Control-Allow-Origin: *");  //Tells the browser it has accepted its request for data from a different domain (origin).
    client.println("Content-Type: application/json;charset=utf-8");  //Lets the browser know that the data will be in a JSON format
    client.println("Server: Arduino");           // The data is coming from an Arduino Web Server (this line can be omitted)
    client.println("Connection: close");         // Will close the connection at the end of data transmission.
    client.println();                            // You need to include this blank line - it tells the browser that it has reached the end of the Server reponse header.
                               // This is tha starting bracket of the JSON data
    client.print("{\"temperature\": \"");
    client.print(t);                         
    client.print("\", \"Humidity\": \"");
    client.print(h);             
    client.print("\"}");                     
                     
  }
  else {
    client.flush();
    client.println("HTTP/1.1 200 OK");           // This tells the browser that the request to provide data was accepted
    client.println("Access-Control-Allow-Origin: *");  //Tells the browser it has accepted its request for data from a different domain (origin).
    client.println("Content-Type: application/json;charset=utf-8");  //Lets the browser know that the data will be in a JSON format
    client.println("Server: Arduino");           // The data is coming from an Arduino Web Server (this line can be omitted)
    client.println("Connection: close");         // Will close the connection at the end of data transmission.
    client.println();                            // You need to include this blank line - it tells the browser that it has reached the end of the Server reponse header.
                          // This is tha starting bracket of the JSON data
    client.print("{\"Response\": ");
    client.print("Invalid");                         
    client.print("}");                   
                       // This is the final bracket of the JSON data
  }

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

}

Node-Red --> MQTT --> Fuxa

Node-Red --> MQTT --> Fuxa      FUXA(一個開源的 Web HMI / SCADA 自動化監控軟體)的專案設定檔 。 這份設定檔完整定義了 HMI 監控畫面的 後端通訊(MQTT 連線、點位標籤) 與 前端網頁圖形介面(SVG 畫布...