※ 본 게시물의 모든 이미지는 클릭하면 확대되어 선명하게 확인 가능합니다!
【 How to Display temperature& humidity of DHT11 on a smart phone! 】
# Blynk2.0 은 WiFi 컨트롤 기능을 App뿐 아니라, Blynk Cloud라 하여 웹에서도 제어할 수 있는 기능을 제공하고 있습니다.
또한, 복잡하고 어려운 코딩이나 함수 사용 없이 매우 쉽게 IoT 시스템을 구축해 주는 멋진 시스템입니다.
여기에서는 WiFi기능을 가진 나노 33 IoT 보드를 사용하고 있으며, ESP8266 보드류 혹은 ESP32 보드 등으로도 바로 적용 가능합니다.
이 강의는 시리즈로 제작되며, 전체 학습 내용은 아래와 같습니다.
======================================================
시리즈 전체 실습 내용(예정)
1. Nano33 ioT & Blynk2.0으로 LED On/Off 하기. (업로드 완료)
2. Nano33 ioT & Blynk2.0 으로 DHT11 센서 온도/습도 출력하기.(본 게시글)
3. ESP01 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기. (예정)
4. ESP8266 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기.(예정)
5. ESP32 & Blynk2.0 으로 LED와 LAMP(220V) 제어하기.(예정)
======================================================
【 실습을 위한 사전 학습 자료 】
① Nano33 IoT 처음 사용설명서 1편
- 유튜브 자료 : https://youtu.be/QwrgDjs4qBc
- 블로그 자료 : https://rasino.tistory.com/301
② Nano33 IoT 처음 사용설명서 2편
- 유튜브 자료 : https://youtu.be/IODHpewucU4
- 블로그 자료 : https://rasino.tistory.com/310
③ 【 Blynk 2.0 사용법 #1】 Nano33 ioT으로 LED On/Off 제어하기
- 유튜브 자료 : https://youtu.be/4GZox37rXwg
- 블로그 자료 : https://rasino.tistory.com/353
【 Blynk Cloud Off Line & "Invalid auth token" error 에러 해결방법 】
- https://rasino.tistory.com/350
【 블링크 2.0에서 기존 프로젝트(템플릿) 삭제하는 방법 /Delete Templates】
- https://rasino.tistory.com/352
【 주요 목차 】
① Blynk 2.0 서비스 소개 & 사용 이유
② 회로 연결 도면 및 실습 준비
③ 실습을 위한 아두이노 IDE 필수 라이브러리 설치(4가지)
④ 기존 템플릿(Templates) 삭제 방법
⑤ 데이터 스트림(Data Stream) 핀을 GPIO Pin으로 설정하기 설명
⑥ Blynk Cloud (blynk.cc) 설정 & 웹 대시보드 만들기(Dash Board)
⑦ 버추얼 핀(Virtual Pin) 개념 설명 & 온도/습도 가상 핀 설정하기
⑧ 웹 대시보드(Web Dashboard) 핀 설정하기 설명
⑨ 새 디바이스(New Device) 추가하기 설명
⑩ 실습을 위한 Nano33 & DHT11용 Blynk 예제 파일 만들기
⑪ Nano33 ioT 보드에 코드 업로드 하기 & 핫 스팟 연결하기
⑫ 동작 확인하기 (Arduino IDE Value & Web Dashboard)
⑬ Blynk IoT App에서 Dash Board(대시보드) 설정하기
【 ① Blynk 2.0 서비스 소개 & 사용 이유 】
최근 Blynk 서비스가 2.0으로 바뀜에 따라, 현재 가입하려는 분들은 반드시 2.0 시스템으로 사용법을 익히셔야 합니다.
기존에 사용하던 Blynk앱 시스템은 이용자의 폭주와 웹 연동 서비스를 제공하기 위해 Blynk 2.0 시스템을 오픈하였습니다.
물론 기존 Blynk 시스템도 유료 서비스를 이용하던 사용자가 있기 때문에 서비스가 유지되고 있지만, Blynk 신규 가입자는 반드시 Blynk2.0을 이용해야 합니다.
다만, Blynk2.0의 경우 국내 자료가 아직 부족하고 사용법이 기존과 달라 접근하기가 쉽지 않습니다.
그래서, 기본 사용법을 익히실 수 있도록 본 게시글을 준비했으니 차근차근 따라 해 보시기 바랍니다.
현재 Nano33 ioT 보드로 기본 실습들을 구성했지만, esp8266 보드나 esp32 보드 들도 이 글을 참고하면, 동일하게 활용 가능합니다.
Blynk 앱을 검색해 보면, 기존(legacy) 앱과 Blynk2.0인 Blynk IoT앱 두 가지를 볼 수 있습니다.
Blynk 2.0에서는 Blynk Cloud라 하여 웹에서도 아래처럼 컨트롤 버튼을 만들어 제어할 수 있고,
Blynk의 가장 큰 장점은 어려운 앱 개발 코딩이 필요 없다는 것과 쉬운 클라우드 서버 툴을 제공하기 때문에 웹코딩이 필요 없으며, 센서 및 회로 제어에 필요한 복잡한 아두이노 함수들을 자체적으로 처리해 주기 때문에 매우 쉽고 빠르게 IoT 응용 작품들을 구축할 수 있습니다. 다만, 동시에 2개의 프로젝트(템플릿)까지만 무료로 제공되며, 추가적인 프로젝트나 고급 위젯 Box를 이용하고자 한다면, 일정 비용을 지불해야 합니다.
( 단, 먼저 만들어진 프로젝트를 삭제하면 새 프로젝트를 계속 만들 수 있어요)
물론, 월 이용료 등의 일정 비용을 지불하면 상업용으로도 손색없는 IoT 시스템을 구축할 수 있을 것으로 생각됩니다.
【 ② 회로 연결 도면 및 실습 준비 】
먼저, 화면과 같은 부품을 준비하여 회로를 연결해 주세요.
[ 연결도면 다운로드 ]
Nano33 ioT는 핀 배열이 Nano 보드와 거의 동일한데요, Nano 보드처럼 사용하기 쉽고 WiFi 모듈까지 내장되어 있어 활용하기 좋은 보드입니다. Nano33 ioT 보드의 상세 설명과 사용법은 위에 링크해 드린, “처음 사용설명서 #1~#2”편을 참고해 보세요.
【 ③ 실습을 위한 아두이노 IDE 필수 라이브러리 설치(4가지) 】
그럼, 아두이노 IDE에 필요한 필수 라이브러리 3가지 및 DHT11 센서 사용을 위한 라이브러리 추가로 해서 4가지를 설치해 주세요.
1. ‘보드 매니저’에서 SAMD 또는 NANO 33으로 검색해서 보드 인식을 위한 라이브러리를 설치합니다.
nano 33으로 검색할 때는 중간에 공백을 주어야 합니다.
그리고, 라이브러리 매니저가 아니라 보드 매니저입니다. Nano 33 ioT는 SAMD21G18A 칩을 MCU로 사용하고 있는 보드입니다.
2. ‘라이브러리 매니저’에서 NINA 또는 WIFININA로 검색하여 WiFi 통신을 위한 라이브러리를 설치합니다.
3. ‘라이브러리 매니저’에서 blynk로 검색하여 BLYNK 라이브러리를 설치합니다.
4. ‘라이브러리 매니저’에서 'DHT'로 검색하여 Adafruit 사에서 제공하는 DHT 센서용 라이브러리를 설치합니다.
그럼, 이제 모든 준비 사항은 끝났으며, LED1과 2를 웹과 앱을 통해 직접 제어해 볼게요.
아래는 실제 연결된 회로 모습입니다. 점퍼선을 이용해도 좋지만, 이렇게 굵은 단선으로 길이에 맞추어 연결하면 훨씬 간결하고 튼튼하게 오랫동안 유지됩니다.
《 DHT11 센서 스펙 》
만약, 좀 더 정밀한 데이터를 원한다면, 아래 이미지와 같은 소수 첫 째 자리까지 출력되는 DHT22 센서를 사용하면 됩니다.
【 ④ 기존 템플릿(Templates) 삭제 방법 】
Blynk 서비스는 템플릿(프로젝트) 2개까지는 무료로 이용할 수 있습니다. 따라서, 여러 가지 다양한 프로젝트 연습을 위해서는 기존 만들었던 템플릿을 삭제하면서 진행하면 되는데요, 삭제하는 방법에 대해 간단히 설명드립니다.
만약 현재 만들어 놓은 템플릿이 없더라도, 추후에 삭제 과정이 필요하니 미리 봐 두면 도움 될 것입니다.
템플릿 삭제하는 내용은 아래 게시글에 별도로 올려놓았으니 참고해 보세요.
▶ 템플릿 삭제하는 방법 : https://rasino.tistory.com/352
【 ⑤ Blynk Cloud (blynk.cc) 설정 & 웹 대시보드 만들기(Dash Board) 】
먼저, 아래 이미지처럼 좌측의 템플릿 탭을 클릭하고 이미지 우측 상단에 보이는 + New Template를 클릭하세요.
이어서 나타나는 아래 이미지처럼 각각의 항목을 선택하고, DESCRIPTION에는 간단한 설명을 입력하면 되는데요, 제목과 디스크립션에는 특수 문자나 기호는 입력하면 에러가 나고 다음으로 넘어가지 않으니 특수문자 및 기호는 입력하지 마세요.
【 ⑥ 데이터 스트림(Data Stream) 핀을 GPIO Pin으로 설정하기 설명 】
이제, 데이터 스트림(DataStreams)과 웹 대시보드(Web Dashboard)만 설정해 주면 되는데요, 그전에 먼저, Digital 핀으로 로 사용 설정 시 선택해야 하는 핀 번호에 대해, 중요하니 짚고 넘어가 볼게요.
아래 이미지에 보이는 Digital Pin과 Analog Pin의 경우는 아두이노 보드의 물리적인 핀을 그대로 연결 사용한다는 의미를 가지는 데요,
직접 아두이노를 제어하듯 보드에 있는 핀 번호를 선택하면 블링크 서버(함수)를 통해 제어됩니다.
한 가지 주의해야 할 것은 DataStream의 Digital 핀 숫자는 보드 표면에 적힌 핀 번호가 아니라 GPIO 핀 번호와 일치되어 있습니다. 따라서 GPIO를 사용하는 nodeMCU와 같은 보드에서는 D0, D1, D2 등의 핀번호가 아니라, 입출력을 기준으로 매겨진 GPIO 핀 번호와 일치되어 있습니다.
즉, D1핀에 연결된 LED 같은 것을 제어하려 한다면, DataStream에서 숫자 1을 선택하는 것이 아니라, GPIO 핀 번호인 숫자 5(GPIO5)를 선택해야 제어가 되니 주의하세요.
( ※ 단, 우노와 나노 보드류는 GPIO 구분 없이 핀 번호 그대로 사용합니다 )
다음은 가상 핀(Virtual Pin)에 대한 설명입니다.
Virtual Pin의 경우 물리적 핀의 경우처럼 사용이 가능하지만, 주로 센서와 같은 값들을 WiFi를 통해 전달받아 앱 혹은 웹의 대시보드에서 쉽게 모니터링할 수 있도록 만든 가상 핀입니다.
마치 아두이노 IDE의 시리얼 모니터에서 센서 값을 확인하는 것처럼, WiFi 무선을 통해 확인하기 편하도록 한 것입니다.
또한, 가상 핀을 최대 256개까지(V0~V255) 사용할 수 있도록 되어 있어 확장성이 좋습니다. 따라서, 이번 실습에서는 이 가상핀을 이용해 DHT11의 온도와 습도 데이터를 전달받아, 앱과 웹의 대시보드에서 확인할 수 있도록 실습을 진행합니다.
【 ⑦ Blynk Cloud (blynk.cc) 설정 & 웹 대시보드 만들기(Dash Board) 】
아래 이미지를 따라, 각각의 내용을 입력해 주세요.
ALIAS는 NAME을 영문으로만 입력하면 자동으로 입력됩니다. 한글과 혼용 입력 시는, 직접 영문으로 Temp라고 입력해주면 됩니다.
가상 핀은 어떤 핀이든 사용하면 되고, Data type은 정수형(integer)을 선택하세요.
만약, DHT22와 같은 소수점 값 처리가 필요한 센서를 사용할 경우, Double을 선택하면 되고, 아두이노 코드에서는 Double 또는 float형을 사용하면 됩니다.
단위는 섭씨온도일 경우 Celsius(℃) , 화씨는 Fahrenheit(℉)를 검색하세요.
온도 값을 표시할 게이지의 전체 범위를 지정할 텐데요, 0℃ ~ 60℃의 범위로 지정해 볼게요.
마지막으로 Create를 클릭하면 온도 값 처리를 위한 DataStream이 하나 만들어집니다.
그럼, 습도에 대한 DataStream을 생성하기 위해 +New Datastream을 클릭하세요.
아래 이미지를 참고하여 역시 동일한 방법으로 습도에 대해 입력해 주세요.
습도는 퍼센트(Percentage, %)로 표시하므로 Per...로 검색해 보세요.
표시될 게이지의 범위는 0~100%로 합니다.
이렇게 해서 DataStream이 준비되었고, 아래처럼, 되어 있는지 보세요.
⑧ 웹 대시보드(Web Dashboard) 핀 설정하기 설명
그럼, 이제 웹 Dash Board를 만들어 볼게요.
웹 Dashboard는 웹에서 컨트롤할 수 있는 제어 보드를 의미하고, 추가적으로 앱에서도 연동하여 제어할 수 있는 대시보드를 폰에서 만들 수 있습니다. 그럼, DHT11 센서의 온도와 습도를 표시해 줄 Gauge를 각각 만들어 볼게요.
아래 이미지에서 1번, 2번, 3번 순서대로 클릭하여 진행합니다.
왼쪽 위젯 박스 메뉴에서 Guage를 끌어다 놓으세요.
Guage의 제목은 ‘온도 Temp.’로 입력합니다. 그리고, Data Stream에서 설정해 놓았던 온도 Temp(V0) 항목을 선택하세요.
그리고 같은 방법으로 Guage를 끌어다 놓고, 습도에 대한 Guage를 만들어 줍니다.
Guage의 제목은 ‘습도 Humi.’로 입력할게요. 그리고, Data Stream에서 설정해 놓았던 습도 Humi(V1) 항목을 선택하세요.
아래는 온도와 습도 게이지가 완성된 모습입니다.
그리고 위젯 박스에서 Label을 끌어다 놓고, 동일한 값을 Label로도 표시해 볼게요.
내용 입력과 선택은 Guage와 동일하게 해 볼게요(달라도 됨).
습도 Label도 아래처럼, 동일하게 만들어 주세요.
아래처럼 되어 있으면 Dash board 설정은 끝났으며, 최종 Save 버튼을 클릭하면, 완료됩니다.
그리고 언제든 화면 우측 상단에 있는, Edit를 눌러 Dash-Board나 Data-Stream을 다시 수정할 수 있습니다.
【 ⑨ 새 디바이스(New Device) 추가하기 설명 】
그럼, Search 탭을 눌러 +New Device를 추가해 볼게요.
화살표 순서에 따라 템플릿을 선택해 주세요. 이어서 나타나는 아래와 같은 창에서 위에서 만들어 놓은 'Nano33 ioT DHT11' 이름의 템플릿을 선택하고 Create를 클릭하세요.
그럼, 아래처럼, 템플릿 ID와 Auth Token 값들이 생성됩니다 (클릭해서 복사하세요).
그리고 아두이노 코드의 이 부분에 붙여 넣기 하면 됩니다.
코드의 이 세 가지 값이 blynk.cloud 값과 일치하지 않으면 에러가 나고 서버에 연결되지 않습니다.
여기서 주의할 것은 BLYNK_TEMPLATE_ID는 BLYNK 2.0 Cloud 서비스를 위해 생긴 것으로 <Blynk...> 라이브러리보다 상위에 배치되어야 합니다.
만약 그렇지 않을 경우 지금 보이는 것처럼 token 에러가 나며, Blynk2.0 서버로 접속되지 않아 제어할 수 없게 됩니다.
이 에러 관련된 추가적인 해결 방법은 더보기에 있는 링크를 참고해 주세요~!
'Invalid auth token' 에러 해결 링크: https://rasino.tistory.com350/
【 ⑩ 실습을 위한 Nano33 & DHT11용 Blynk 예제 파일 만들기 】
이 아두이노 코드는 Blynk 라이브러리에서 제공하는 코드를 기본으로 하여 수정한 것인데요.
코드의 위치는 ‘파일 》 예제 》 Blynk’ 메뉴에서 → ‘Boards_WiFi’ 항목으로 가서 Nano33 ioT의 경우 → ‘Arduino_MKR1010’ 예제를 열어 편집하여 사용하면 됩니다.
편집한 코드는 아래와 같습니다.
//*** 라즈이노 IoT Blynk2.0 + Nano IoT33 실습 2 , DHT11 센서로 온도/습도 출력하기***
// 실습 : Blynk 2.0 시스템에 DHT11 센서 연결하여 온도와 습도 값 디스플레이 하기!
#define BLYNK_PRINT Serial
// Blynk.Cloud 사이트에서 Nano33 IoT + DHT11에 대한 템플릿을 만든 후
// 나타나는 대시보드에서 아래 3줄의 내용을 복붙복 하세요 */
#define BLYNK_TEMPLATE_ID "TMPLMRt6yA8Z"
#define BLYNK_DEVICE_NAME "Nano33 ioT DHT11"
#define BLYNK_AUTH_TOKEN "ZM-i3ALE2fMFsUZ5V5kh2JZg_X4LDFVi"
#include <SPI.h>
#include <WiFiNINA.h> // 라이브러리 매니저창에서 WiFiNINA로 검색 후 설치할 것
#include <BlynkSimpleWiFiNINA.h> // 라이브러리 매니저창에서 blynk로 검색 후 설치할 것
#include <DHT.h> // 라이브러리 매니저창에서 DHT로 검색 후 설치할 것(by Adafruit 버전)
char auth[] = BLYNK_AUTH_TOKEN;
// 접속 가능한 WiFi ID와 패스워드를 입력하세요
char ssid[] = "myGalaxy";
char pass[] = "12345678";
BlynkTimer timer;
#define DHTPIN 13 // DHT11 센서가 연결 된 핀 번호
#define DHTTYPE DHT11 // DHT11 센서 사용 (DHT22 센서는 DHT22로 수정)
DHT dht(DHTPIN, DHTTYPE);
void sendSensor() {
int t = dht.readTemperature(); // 섭씨 온도, 화씨는 readTemperature(true), 만약 DHT22센서 사용시 float형으로 바꿀 것
int h = dht.readHumidity();
if (isnan(t) || isnan(h)) {
Serial.println("Failed to read from DHT sensor!");
return;
}
Serial.print("Temp:");
Serial.print(t);
Serial.print("\t");
Serial.print("Hum:");
Serial.print(h);
Serial.print("\n");
delay(300);
Blynk.virtualWrite(V0, t); // 온도값 전달을 위한 V1 가상포트 지정
Blynk.virtualWrite(V1, h); // 습도값 전달을 위한 V2 가상포트 지정
}
void setup()
{
Serial.begin(9600);
Blynk.begin(auth, ssid, pass);
dht.begin();
// 일반적으로 Blynk에서 ESP32 보드(혹은 아두이노와 같은 보드)에게 매 1초마다
// 데이터를 요구하는 방식이지만, 아래와 같은 타이머(timer) 코드를 사용하면
// ESP32 보드에서 Blynk로 일방적으로 데이터를 보낼 수 있음.
timer.setInterval(1000L, sendSensor);
}
void loop()
{
Blynk.run();
sendSensor();
timer.run();
}
편집된 코드는 여기를 클릭하여 다운로드하세요.
링크해 드리는 코드에서, 여러분의 ID, NAME, Token값과, WiFi 정보만 교체하면 됩니다.
【 ⑪ Nano33 ioT 보드에 코드 업로드 하기 & 핫 스팟 연결하기 】
코드가 준비되면, Nano33 ioT가 연결된 포트를 확인하고 업로드하세요.
그럼, 연결시킬 WiFi 핫스팟을 준비해 주세요. (주변 연결 가능한 WiFi 또는, 스마트폰 핫스팟 등등 가능)
핫스팟에 여러분의 Nano33 ioT 보드가 IP를 할당받고 연결 된 것을 볼 수 있으며, 만약 연결이 안 된다면, 리셋키를 한 두번 눌러주면, 이렇게 핫스팟에 연결되는 것을 볼 수 있습니다.
【 ⑫ 동작 확인하기 (Arduino IDE Value & Web Dashboard) 】
그리고 아래 이미지처럼 아두이노 IDE의 시리얼 모니터를 열어, 출력되는 데이터를 바로 확인할 수 있도록 하였습니다.
아래 이미지처럼, Blynk의 Search탭에 있는 Dash-Board에 가보면 동일한 데이터가 표시되는 것을 볼 수 있어요.
【 ⑬ Blynk IoT App에서 Dash Board(대시보드) 설정하기 】
그럼, Blynk ioT App에서도 Dash-Board를 만들어 볼게요.
먼저 스마트폰에서 다운로드하고 설치한 Blynk ioT를 실행시키고 로그인합니다.
웹에서 Nano33 DHT11이라는 이름으로 대시보드를 이미 만들었기 때문에, 앱에서도 Nano33 DHT11라는 이름의 템플릿이 생성되어 있을 거예요( 내용은 비어 있으며, 위젯 배치는 폰에서 새로 만들어야 함) 그럼, 그 템플릿을 선택하세요.
아래 공구 모양의 이미지(개발 모드 전환)를 터치해서 위젯들을 배치해 볼게요.
이어서 앱의 바닥 빈 곳을 터치하거나 화면 우측 상단에 있는 '+' 표시를 터치하면,
우측에 위젯 메뉴들이 나타나는데요, Guage 위젯을 찾아 선택해 주세요.
이번엔 습도용 게이지를 만들기 위해 Guange 위젯을 하나 더 선택하세요.
먼저, 왼쪽 위젯을 선택해서 설정을 해 볼게요. 아래 이미지들을 참고하여, 온도와 습도에 대해 설정해 보세요.
그럼, 아래와 같은 형태가 되며, 아래 화살표를 터치하여 화면을 빠져나오면, 데이터가 연동되는 실행 모드가 됩니다.
현재, Arduino IDE Serial Value = Web Cloud Value = App Value 값들이 모두 연동되어 일치되는 것을 볼 수 있습니다.
그럼, 주변 온도 및 습도 변화에 제대로 반응하는지 빠르게 확인해 보기 위해, 아이스팩과 히터를 이용해 볼게요.
아이스팩을 센서 주변에 붙여보니, 온도가 상온보다 빠르게 떨어지고, 습도 또한 냉각으로 인하여 낮아지는 것을 볼 수 있습니다.
이번엔, 아래 이미지처럼, 미니 히터를 대어 보았는데요, 히터의 경우 온도가 빠르게 올라가며, 습도 또한 건조해져 떨어지는 것을 볼 수 있었습니다.
네, 이렇게 아주 잘 작동하고 있습니다.
오늘 이렇게 DHT11이라는 온습도 센서를 WiFi 기능이 기본 지원되는 나노ioT33 보드에 연결하고, Blynk 2.0(블링크) 서비스를 이용해서 웹과 앱에서 데이터를 실시간으로 확인(출력) 해보는 실습을 진행해 보았습니다.
블링크 서비스의 장점은, 어렵고 복잡한 코딩 과정 없이 실생활에 바로 응용할 수 있는 ioT 작품들을 매우 쉽고 빠르게 구축해 주는 것이라 생각됩니다.
그럼, 본 게시글이나 아래 링크해드리는 유튜브 영상을 함께 참고하여, 직접 여러 형태로 재미있게 활용해 보세요~ ^^&
