Blynk 활용 3- Blynk에서 라즈베리파이/ESP32에 연결된 센서의 측정값을 그래프로 표시하기

Blynk 활용 3- Blynk에서 라즈베리파이/ESP32에 연결된 센서의 측정값을 그래프로 표시하기

Blynk에 원격 센서 값 표시 방법

앞선 글을 통해, 라즈베리파이 피코 보드나, ESP32에 연결된 센서의 값들을 Blynk IOT 플랫폼에 연결하여, PC나 스마트폰을 통해 멀리 떨어진 곳의 센서 값을 실시간으로 모니터링하는 방법을 소개한 바 있었다. 특히, 해당 글에서는 상대적으로 어려운 C언어 대신 쉬운 마이크로 파이썬을 이용하여 원격 장치를 Blynk IOT 플랫폼에 연결하는 예를 소개했었다. (https://blog.naver.com/mythee1/223442964919)

그런데, 이번 글에서는 다음과 같이 숫자 또는 게이지의 형태로 표시했던 센서 데이터를 그래프의 형태로 표시하는 방법을 소개하려고 한다.

센서 값의 Trend 그래프 표시

Blynk에서는 일단 입력된 센서 값들을 다음과 같은 그래프 형태로 표시하는 기능을 제공한다. 일반적으로 이런 기능을 데이터 trend 표시 기능이라고 하는데, Blynk의 무료 버전은 1주까지의 센서 입력 데이터를 내부적으로 기록하고, 이러한 그래프의 형태로 표시하는 것을 지원하는데, 유료 버전의 경우, 요금제에 따라 1개월 또는 6개월까지 과거 데이터를 기록해서 그래프화하는 것을 지원한다.

이처럼 센서 입력 데이터가 그래프 형태로 표시되면, 우선 시각적으로 경향성을 파악하는데 좋으며, 긴 시간에 대한 데이터 검토가 훨씬 용이해지는 측면이 있다. 또한 장시간에 걸친 데이터를 상호 비교할 수도 있어 특이점이 발생한 순간을 찾아내 문제를 해결하는 데 도 도움이 된다.

이렇게 Blynk로 입력된 센서 데이터를 그래 포로 표시하는 방법은 ……

먼저 Blynk의 대시보드 편집 화면에 들어가서, 다음과 같이 Chart 위젯을 선택해 대시보드로 드래그해준다.

(대시보드의 편집 기능에 들어가는 부분에 대한 자세한 내용이 생소한 경우, https://blog.naver.com/mythee1/223442964919 글을 먼저 참조하면 도움이 됩니다.)

그리고, 대시보드에 반영된 Chart 위젯의 설정 아이콘을 선택하면,

데이터 입력 채널을 선택할 수가 있다.

“Add Stream..” 부분을 선택하면 다음과 같이, 현재 사용 중인 입력 채널들이 나타나는데, 여기서 그래프에 연결해 줄 채널을 선택해 주면 된다.

대체로 다음 표시된 부분들의 정보를 지정해 주면 되는데

내 경우에는 기존에 온도 측정용 센서로 사용하던 채널이므로 여기에 맞추어 다음과 같이 지정해 주었다.

위의 화면에서 필요한 사항들의 입력을 마치고, Save 버튼을 눌러주면, 다음과 같이 대시보드에 그래프 모양의 차트가 생성되고, 지정해 준 정보들도 반영된 것을 볼 수 있다.

이렇게 함으로써 하나의 입력신호에 대한 지정을 마친 것인데, 만일 추가의 그래프가 필요한 경우,

필요한 채널만큼 동일한 과정을 반복해 주면 된다. 다음의 예는 습도 센서용으로 하나의 채널을 더 추가 생성한 경우이다.

대시보드에서 그래프 생성 및 편집이 끝나면 다음과 같이 Save and Apply 버튼으로 해당사항을 저장해 주면,

모든 작업이 완료되고, 다음과 같이 센서 측정값의 trend를 그래프로 볼 수 있게 된다.

한편, 만일 그래프의 크기 조절이 필요하면 대시보드의 편집 시 다음처럼 차트 우측 하단부를 드래그하면 크기를 조절할 수 있다.

생성된 그래프는 상단부의 시간 간격 선택 부분을 지정함으로써 그래프의 timespan을 조절해 trend를 볼 수 있다. 각자가 필요한 timespan으로 선택해서 사용하면 된다.

본 글에서 소개한 그래프를 생성하고 조절하는 과정에 대한 동영상은 다음과 같다.