1. 개요
이번 글에서는 온습도센서(DHT11)를 사용하여 온도와 습도를 측정 후 값을 웹페이지에 띄워보는 작업을 할 것이다. 아주 간단한 작업이다. 웹클라이언트측에서 따로 데이터를 전송하는 것도 없으며 NodeMCU - 웹서버 웹페이지에서 LED 제어하기 글에서 현재 LED 의 상태를 웹페이지에 출력하는 작업을 해보았기 때문이다.
즉, 온도와 습도 값을 센서로부터 읽어와서 그 값을 띄워주기만하면 된다. 하지만 LED 상태표시와는 다르게 고려해야할 점이 하나 있다. LED 상태 표시에서는 ON/OFF 버튼을 누르는 시점에 하이퍼링크 태그로 홈페이지를 리프레쉬(Refresh)해서 보여주는 반면 온습도 센서는 그런 시점이 없기 때문이다. 당연히 F5 키나 새로고침을 계속 눌러주면 현재 값을 보여줄 수 있다. 하지만 그런 비효율적인 방법을 쓰려는 사람은 없을 거라 생각된다.
리프래쉬를 자동으로 해주는 방법은 HTML Meta 태그 속성을 이용하는 방법, JavaScript server timeout 를 사용하는 방법 등 여러가지가 있으나 이 글에서는 HTML Meta 태그 속성을 이용하여 1초마다 새로고침을 시켜줄 것이다. 물론 위와같은 방법은 트래픽이 적은 서버(예를 들어 홈서버, 테스트용)으로 적절하지 외부공용으로 사용하기에는 적절하지 않은 방법이다.
1.1 요약 정리
1. HTML 언어로 웹페이지 구성 (아두이노 IDE)
2. 구성한 웹페이지를 NodeMCU 보드에 업로드 (아두이노 IDE)
3. NodeMCU 보드를 Wi-Fi에 연결 (NodeMcu 보드)
4. NodeMCU 보드를 웹서버로 구동 (NodeMcu 보드)
5. 웹클라이언트로 NodeMCU 보드 웹서버에 웹페이지 요청 (크롬, 파이어폭스 등의 웹브라우저)
6. 웹클라이언트로 요청이 오면 온도와 습도 측정 (NodeMcu 보드)
7. 웹클라이언트로 요청받은 웹페이지 전송 (NodeMcu 보드)
1.2 준비물
- NodeMCU 개발보드(이 글에서는 NodeMCU v3)
- Micro 5pin USB
- 온습도 센서(DHT11)
2. 웹페이지 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="refresh" content="1">
</head>
<body>
<h2>DHT senrsor test Webpage</h2>
<br>
Temperature : (온도) °C
<br>
Humidity : (습도) %
</body>
</html>위 코드에서 가장 주의깊에 볼 부분입니다. meta 태그에 http-equiv="refresh" content="1" 를 사용하여 1초마다 새로고침를 해주는 속성을 추가해주었습니다. 그리고 아래 (온도), (습도) 부분은 아두이노 개발환경에서 온습도 센서로부터 읽어온 센서 값을 넣어줄 것입니다.
<meta charset="UTF-8" http-equiv="refresh" content="1">3. 하드웨어 구성
NodeMcu 보드에는 5 V 인 VU(V USB)핀과 3.3 V 핀이 있는데 DHT11 온습도 센서의 정격전압은 3.3 ~ 5.5 VDC 이기 때문에 아래 사진에서는 3.3 V 핀을 사용하였습니다. 다른 온습도 센서를 사용한다면 정격전압을 확인해야합니다.
4. 소스코드
4.1 전체 소스코드
이 소스코드에서는 DHT 라이브러리를 사용합니다. (DHT1, DHT2 라이브러리 받으러 가기)
#include <ESP8266WiFi.h>
#include <DHT.h>
#define PIN_DHT D4
const char* ssid = "Wi-Fi 아이디";
const char* password = "Wi-Fi 패스워드";
WiFiServer server(80);
WiFiClient client;
DHT DHTsensor(PIN_DHT, DHT11);
void setup() {
DHTsensor.begin();
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connecting to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
Serial.println("Server started");
}
void loop() {
client = server.available();
if(!client) return;
Serial.println("새로운 클라이언트");
client.setTimeout(5000);
String request = client.readStringUntil('\r');
Serial.println("request: ");
Serial.println(request);
while(client.available()) {
client.read();
}
float humidity = DHTsensor.readHumidity();
float temp = DHTsensor.readTemperature();
Serial.print("Humidity : ");
Serial.print(humidity);
Serial.print(" Temperature : ");
Serial.print(temp);
Serial.println(" ºC");
client.print("HTTP/1.1 200 OK");
client.print("Content-Type: text/html\r\n\r\n");
client.print("<!DOCTYPE HTML>");
client.print("<html>");
client.print("<head>");
client.print("<meta charset=\"UTF-8\" http-equiv=\"refresh\" content=\"1\">");
client.print("<title>DHT senrsor test Webpage</title>");
client.print("</head>");
client.print("<body>");
client.print("<h2>DHT senrsor test Webpage</h2>");
client.print("<br>");
client.print("Temperature : ");
client.print(temp);
client.print(" °C");
client.print("<br>");
client.print("Humidity : ");
client.print(humidity);
client.print(" %");
client.print("</body>");
client.print("</html>");
Serial.println("클라이언트 연결 해제");
}코드에 대한 제사한 설명은 NodeMCU - 웹서버 웹페이지에서 서보모터 제어하기, NodeMCU - 웹서버 웹페이지에서 NodeMCU LED 제어하기 글에서 확인하시길 바랍니다.
5. 동작 결과
온습도 센서와 연결이 양호하다면 아래와 같이 출력되는 것을 볼 수 있습니다. 사진이라 보이지 않지만 meta 태그의자동 리프레쉬 속성으로 인하여 1초마다 웹페이지를 새로고침 해줍니다. content 속성 값을 변경하여 원하는 시간마다 새로고침도 가능합니다.
4. 참조
-
'아두이노 관련 > NodeMCU' 카테고리의 다른 글
| NodeMCU - NodeMCU MySQL DB(데이터베이스) 연동하기(웹서버 PHP) (0) | 2020.02.20 |
|---|---|
| NodeMCU - NodeMCU 웹클라이언트 HTTP 접속하기 (0) | 2020.02.19 |
| NodeMCU - 웹서버 웹페이지에서 NodeMCU 서보모터 제어하기 (2) | 2020.02.18 |
| NodeMCU - 웹서버 웹페이지에서 NodeMCU LED 제어하기 (0) | 2020.02.07 |
| NodeMCU - 아두이노 개발환경에서 NodeMCU 보드 사용하기 (0) | 2020.02.05 |
댓글