Wokwi와 시뮬레이션한 ESP32와 연결된 센서의 그래프를 웹페이지에 표시

 

 

Wokwi와 Arduino IoT Cloud 재생 영상 계속해서 Wokwi와 시뮬레이션한 ESP32와 연결된 센서의 그래프를 웹페이지에 표시하는 영상입니다 아두이노 IoT Cloud, Webhook 그리고 구글 시트

 

Arduino IoT Cloud, 웹훅 및 Google 시트로 4개 센서의 그래프를 표시하려면 어떻게 해야 하나요?

 

유튜부 영상 참고

 

2개 이상의 센서에 대한 그래프를 표시하려면 유료 요금제 기능에서만 사용할 수 있는 고급 차트 위젯이 필요합니다. 이 고급 차트의 대안으로 Google 시트를 사용하여 만든 그래프를 사용할 수 있습니다. 아두이노 IoT 클라우드를 구글 시트에 연결하려면 아두이노 IoT 클라우드에서 무료로 제공되는 웹훅 서비스를 사용할 수 있습니다. 웹후크란 무엇인가요? 웹후크는 어떤 일이 발생했을 때 앱에서 보내는 자동화된 메시지입니다. 이 웹후크 서비스를 사용하려면 Things 페이지에서 웹후크 링크를 입력하기만 하면 됩니다. 흥미로운 점은 이 웹후크 링크는 시트용 웹후크 애드온의 도움으로 쉽게 만들 수 있다는 것입니다(시트용 웹후크 애드온을 만든 분 덕분에).

 

단계는 다음과 같습니다:

 

1. 이 wokwi 프로젝트를 엽니다: 

 

2. 이 동영상에 따라 Arduino IoT Cloud에서 사물 및 대시보드 만들기를 반복합니다:

 

- 18 개의 릴레이를 제어하고 모니터링하는 방법 ...

 

3. 구글 시트를 열고, 시트용 웹훅 애드온을 설치합니다.

 

4. 웹후크 링크를 생성하고 Gmail 계정으로 인증합니다.

 

5. 웹후크 링크가 성공적으로 생성되면 Arduino IoT Cloud의 사물 페이지에 있는 웹후크 설정 열에 웹후크 링크를 입력합니다.

 

 

 

6. Wokwi 시뮬레이션을 실행합니다. 새로 추가한 장치의 ID 코드와 비밀 키를 변경하는 것을 잊지 마세요. 사물 페이지에서 클라우드 변수 중 하나의 값이 변경될 때마다 해당 변수 값을 Google 스프레드시트로 전송합니다.

 

참고: 변수 값을 너무 빨리 자주 변경하면 웹훅이 손상될 수 있으므로 변경하지 마세요. 한 변경 사항에서 다음 변경 사항으로 10초 이상의 간격을 두고 변경하세요. 이 설정은 센서 변경뿐만 아니라 릴레이 제어 변경에도 적용되는데, 웹후크 링크는 사물 페이지의 클라우드 변수(변수: 일정, select_1, select_2, 설정 및 텍스트 포함)에 대한 모든 변경을 Google 시트에 전송하기 때문입니다.

 

7. 변수 값 데이터가 Google 시트에 나타나면 불필요한 데이터를 삭제하여 메모리를 절약합니다. 센서 값을 쉼표로 구분하고 타임스탬프를 초 단위의 시간 값으로 변환하여 X축 값을 만듭니다.

 

참고: 메모리를 절약하려면 모든 열을 삭제하고 열 이름이 값_0_이름, 값_0_값, 값_0_updated_at인 3개의 열만 남긴 다음 이 세 열을 A, B, G 열에 순차적으로 배치합니다.

 

Sheet:1, Cell: C2 =arrayformula(if(B2:B="","",split(B2:B,","))) Sheet:1, Cell: H2 =arrayformula(if(G2:G="","",split(G2:G,"TZ")+7/24)) Note:+7/24 for Jakarta time zone Sheet:1, Cell: J2 =arrayformula(if(H2:H="","",value(H2:H)+value(I2:I))) Sheet:1, Cell: K2 =arrayformula(if(H2:H="","",(J2:J-$J$2)*100000)) Sheet:2, Cell: A1 =unique(Sheet1!A:K) Sheet:3, Cell: A1 =query(Sheet2!A:K,"select K,C,D,E,F where K is not null order by K asc")

 

8. 센서 값이 포함된 변수만 Google 스프레드시트에 표시되도록 하려면 값1 열에 데이터 유효성 검사를 만들면 데이터에 '텍스트'가 포함된 경우에만 유효하고 그렇지 않은 경우 거부됩니다.

 

9. 웹후크를 사용하면 동일한 값 중 일부가 여러 번 나타날 수 있습니다. 고유한 값만 표시하려면 시트 페이지를 추가하고 Google 시트의 고유 기능을 사용하여 고유한 값만 표시하도록 합니다.

 

10. 다른 시트 페이지를 추가하고 쿼리 기능을 사용하여 시간 데이터를 초 단위로 검색한 다음 NTC, LDR, 로터리 및 슬라이드 전위차계부터 네 가지 센서의 값을 하나씩 검색합니다. 시간 열과 4개의 센서 열을 선택한 다음 차트를 삽입하여 Google 스프레드시트에서 그래프를 만듭니다. 차트의 메뉴(세로점 3개)를 클릭하고 차트 게시를 선택하여 웹에 차트를 표시합니다.

 

자세한 정보는 블로그 참고

 

 

 

 

아두이노와 Wokwi 시뮬레이션 레슨 영상 시작 - Youtube 참고

 

LESSON 1:How To Easily Code LED By Using Arduino Simulator || FAST Tutorial || Wokwi