มอนิเตอร์อุณหภูมิออนไลน์ด้วย ESP8266 และ DHT11

4 ปีที่ผ่านมา

โดย เจ้าของร้าน

ESP8266 เป็นโมดูลรับ-ส่งข้อมูลไร้สายผ่าน WiFI ที่สามารถเขียนโปรแกรมสั่งงานลงไปได้ ในบทความนี้เราก็จะมาลองเขียนโปรแกรมสร้าง Web Server ง่ายๆ ที่ใช้สำหรับแสดงค่าอุณหภูมิบนเว็บกันครับ

การใช้งาน Arduino IDE เขียนโปรแกรมลง ESP8266

ขั้นตอนแรกเลย เปิดโปรแกรม Arduion IDE ขึ้นมา แนะนำให้ใช้เวอร์ชั้น 1.6.4 หรือสูงกว่า ซึ่งในบทความนี้ก็จะแสดงวิธีการติดตั้งโดยใช้เวอร์ชั้นนี้ครับ

กดที่เมนู File > Perferences

ในช่อง Additional Board Manager URLs กรอก http://arduino.esp8266.com/stable/package_esp8266com_index.json ลงไป แล้วกดปุ่ม OK

กดไปที่เมนู Tool > Board > Boards Manager...

รอโปรแกรมอัพเดทข้อมูลจากลิ้งที่ได้กรอกไว้ซักครู่ เมื่อเสร็จแล้วเลื่อนสกอร์บาร์ลงมาด้านล่าง แล้วกดตรง esp8266 กดปุ่ม Install ที่แสดงขึ้นมา จากนั้นรอโปรแกรมโหลดไลบารี่ และข้อมูลบอร์ดเข้ามาในโปรแกรม

เมื่อติดตั้งเสร็จแล้ว จะมีคำว่า INSTALLED เพิ่มขึ้นมาดังรูป เป็นอันจบการติดตั้ง สามารถกดปิดหน้าต่างไปได้เลย

เลือกบอร์ดให้ถูกต้อง (หากใช้เป็นโมดูล ESP8266 เลือก Generic ESP8266 Module)

เลือก COM Port ให้ถูกต้อง

ต่อมาก็สามารถเขียนโปรแกรม แล้วกด Upload ได้เลยแต่ต้องทำให้ ESP8266 อยู่ในโหมดของการโปรแกรมก่อนด้วย จึงจะสามารถโปรแกรมลงไปได้ สามารถอ่านได้จากบทความ ESP8266 ตอนที่ 2 การต่อวงจรเพื่อโปรแกรมและใช้งาน หลังจากกด Upload ก็จะแสดงสถานะการอัพโหลดแบบเดียวกับการโปรแกรมลงบอร์ด Arduino ซึ่งก็จะแสดงข้อความบอกว่าอัพโหลดสำเร็จหรือไม่ด้วย

โค้ดโปรแกรม

สิ่งที่ต้องแก้ในโค้ดโปรแกรมมีดังนี้

ตัวแปร ssid เป็นตัวแปรเก็บค่าตัวกระจาย WiFi ที่จะให้ ESP8266 ไปเชื่อมต่อด้วย
ตัวแปร password เป็นตัวแปรเก็บค่ารหัสผ่านของตัวกระจาย WiFi หากไม่มีรหัสผ่านอยู่แล้ว สามารถปล่อยว่างไว้ได้

/* IOXhop - www.ioxhop.com */

#include "DHT.h"
#include "ESP8266WiFi.h"
#include "WiFiClient.h"
#include "ESP8266WebServer.h"
#include "ESP8266mDNS.h"

#define DHTPIN D0
#define DHTTYPE DHT11
const char* ssid = "...";
const char* password = "...";

// HTML Page
String IndexPage =
"<!DOCTYPE HTML>\n"
"<html>\n"
"<head>\n"
"<meta charset=\"utf-8\">\n"
"<title>ESP-DHT By IOXhop</title>\n"
"<script>\n"
"function loadXMLDoc() {\n"
"  var xmlhttp;\n"
"  if (window.XMLHttpRequest) { \n"
"    xmlhttp=new XMLHttpRequest();\n"
"  } else { \n"
"    xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\");\n"
"  }\n"
"  \n"
"  xmlhttp.onreadystatechange = function() {\n"
"    if (xmlhttp.readyState==4 && xmlhttp.status==200) {\n"
"      var objJSON = JSON.parse(xmlhttp.responseText);\n"
"      var d = new Date();\n"
"      document.getElementById(\"update\").innerHTML = d.getHours() + \":\" + d.getMinutes() + \":\" + d.getSeconds();\n"
"      document.getElementsByTagName(\"output\")[0].innerHTML=objJSON.temp+\" *C\";\n"
"      setTimeout(function(){ loadXMLDoc() }, 1000);\n"
"    }\n"
"  }\n"
"  xmlhttp.open(\"GET\", \"./temperature\", true);\n"
"  xmlhttp.send();\n"
"}\n"
"\n"
"loadXMLDoc();\n"
"</script>\n"
"</head>\n"
"\n"
"<body style=\"font-family: Arial, Helvetica, sans-serif;\">\n"
"<h1 style=\"text-align: center;\">E-TECH Temp Node</h1>\n"
"<h2 style=\"text-align: center;\">Temperature</h2>\n"
"<output style=\"text-align: center; font-size: 220px; display: block;\">0</output>\n"
"<p style=\"text-align: center;\">Update: <span id=\"update\">00:00</span></p>\n"
"</body>\n"
"</html>\n"
;

ESP8266WebServer server(80);
DHT dht(DHTPIN, DHTTYPE, 15);

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  dht.begin();
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  
  if (!MDNS.begin("temp")) {
    Serial.println("Error setting up MDNS responder!");
    while(1) {
      delay(1000);
    }
  }
  Serial.println("mDNS responder started");

  server.on("/", [](){
    server.send(200, "text/html", IndexPage);
  });

  server.on("/temperature", [](){
    int t = dht.readTemperature();
    server.send(200, "text/html", "{\"temp\":" + (String)(t) + "}");
  });

  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();
}

วงจรต่อใช้งาน

การทดสอบ

เมื่อต่อวงจรครบเรียบร้อยแล้ว และกด Upload แล้ว กดปุ่มรูปแว่นขยาย (Serial Monitor) ขึ้นมา

* ในหัวข้อด้านบนไม่มีการต่อ USB TTL to UART ไว้เพื่อดีบัคด้วย หากต้องการทราบ IP และทำขั้นตอนทดสอบนี้ ต้องต่อเพิ่มเติมด้วย

ตั้งค่าดังรูป

ทำการรีเซ็ตตัวโมดูล 1 ครั้ง แล้วสังเกตุผลที่ได้ จะมี ... วิ้งซักพัก เมื่อสามารถเชื่อมต่อกับ AP ได้แล้ว จะแสดง IP ขึ้นมา

ใช้อุปกรณ์ที่อยู่ในวงแลนเดียวกัน เข้าไปที่ IP ที่แสดง แล้วรอซักครู่ ผลที่ได้คือหน้าเว็บจะมีการอัพเดทข้อมูลอุณหภูมิทุกๆ 1 วินาที และเมื่ออัพเดทเสร็จสิ้นจะแสดงเวลาที่อัพเดทไว้ด้านล่างด้วย