스케치 변수 활용하기

웹이나 폰에서 입력하는 값을 ESP8266의 받거나, 스케치의 변수값을 웹이나 폰으로 전송하는 간단한 방법을 설명한다.

USBtoSerial 장치에 ESP01 Module을 연결하거나, NodeMCU 또는 WeMos등의 보드를 사용해도 된다. 중요한 것은 ESP8266에 직접 coding이 가능한 보드라면 상관없다.

사용된 보드는 아래 Fritzing회로를 참조하기 바란다.

위의 회로는 아두이노 스케치를 Program하는 동안 GPIO-0 Pin의 Button을 누르고 있어야 한다. 자동 프로그램을 지원하기 위해서는 USBtoSERIAL 장치에서 DTR, RTS 신호가 있어야 하고, 아래 그림과 같이 회로를 구셩해야 한다.

개인적인 의견으로는 위와같이 회로를 구성하고, 부품을 사서 납땜을 하는 것보다는 NodeMCU나 WeMos 같은 일체형 보드를 구매하는 것이 좋을 것 같다.
Thinger.io 클라우드에 접속해서 Device를 생성한다.

"Devices"탭을 클릭하고, "Add Device"버튼을 클릭한다.


  • Device ID와 Device credentials는 이후 스케치를 작성할때 필요한 사항이므로, 복사해 둔다.

"Add Device"버튼을 클릭하고, "Devices"탭에서 확인한다.


이제, 스케치를 작성해 보자!
  1. #include <ESP8266WiFi.h>
  2. #include <ThingerESP8266.h>
  3. #define USERNAME "*********" // Thinger.io User Name
  4. #define DEVICE_ID "*********" // Thinger.io Device ID
  5. #define DEVICE_CREDENTIAL "********" // Thinger.io Device Credential
  6. #define SSID "******" // WiFi Name
  7. #define SSID_PASSWORD "*********" // WiFi Password
  8. ThingerESP8266 thing(USERNAME, DEVICE_ID, DEVICE_CREDENTIAL);
  9. int currentSlider;
  10. bool previousFlag, currentFlag;
  11. void setup() {
  12. currentSlider = 0;
  13. previousFlag = currentFlag = 0;
  14. Serial.begin(9600);
  15. thing.add_wifi(SSID, SSID_PASSWORD);
  16. // digital pin control example (i.e. turning on/off a light, a relay, configuring a parameter, etc)
  17. thing["Flag"] << inputValue(currentFlag);
  18. thing["slider"] << inputValue(currentSlider, {
  19. Serial.print("Slider = "); Serial.println(currentSlider);
  20. });
  21. // resource output example (i.e. reading a sensor value)
  22. thing["Status"] >> outputValue(currentFlag);
  23. thing["Position"] >> outputValue(currentSlider);
  24. // more details at http://docs.thinger.io/arduino/
  25. }
  26. void loop() {
  27. thing.handle();
  28. }
  • 1번 라인은 ESP8266 WiFi Header를 include한다.
  • 2번 라인은 ESP8266 Thinger.io Header를 include한다.
  • 4번 라인은 Thinger.io 클라우드 서버의 사용자 ID를 입력한다.
  • 5번 라인은 Thinger.io 클라우드 서버에서 생성한 Device ID를 입력한다. 즉, 스케치를 작성하기 전에 Thinger.io 클라우드 서버에서 Device를 먼저 생성해야 한다.
  • 6번 라인은 Thinger.io 클라우드 서버에서 Device를 성성하면서 입력한 Credential을 입력한다.
  • 8번 라인은 당신이 사용하는 WiFi 공유기의 이름을 입력한다.
  • 9번 라인은 WiFi 공유기의 password를 입력한다.
  • 11번 라인은 Thinger.io 클라우드에 접속하는 thing class를 선언한다.
  • 13, 14번 라인은 Thinger.io 클라우드에서 입력된 값을 저장할 전역 변수를 선언한다.
  • thing.add_wifi(SSID, SSID_PASSWORD) 함수는 WiFi를 통해서 Thinger.io 클라우드 서버에 연결을 설정한다.
  • 17, 18번 라인은 전역 변수를 초기화한다.
  • 20번 라인은 스케치에서 시리얼 모니터를 초기화 한다.
  • 21번 라인은 thing class의 add_wifi()함수를 통해서 Thinger.io 클라우드 서버에 접속한다.
  • 23번 라인은 Thinger.io 클라우드 서버에 "Flag"라는 입력 Resource를 생성하고, currentFlag 전역변수에 연결한다.
  • 24번 라인은 Thinger.io 클라우드 서버에 "slider"라는 입력 Resource를 생성하고, currentSlider 전역변수에 연결하고, 입력 Resource에 대한 Sub함수는 currentSlider 전역변수를 시리얼 모니터로 출력한다.
  • 30번 라인은 Thinger.io 클라우드 서버에 "Status"라는 출력 Resource를 생성하고, currentFlag 전역변수에 연결한다. 즉, currentFlag변수는 "Flag"라는 입력 Resource와 "Status"라는 출력 Resource를 연결시킨다.
  • 31번 라인은 Thinger.io 클라우드 서버에 "Position"이라는 출력 Resource를 생성하고, currentSlider 변수에 연결한다.
  • 37번 라인은 Loop()함수에서 thing class의 handle()함수를 통해서 Thinger.io 클라우드 서버와 통신한다.
스케치 작성이 완료되었다면, Target 보드에 올린다.

Target 보드가 정상적으로 동작한다면, Thinger.io 클라우드에 접속해서 연결을 확인하고, Device를 클릭해서 상태를 확인한다.
우측 하단에 있는 "View API"버튼을 클릭해서 스케치에서 기술한 Resource들을 확인한다.
각 Resource를 클릭하여 Resource의 동작을 확인할 수 있다.
즉, "Flag" 입력(input) Resource의 값을 수정하면, 자동으로 Target으로 전송되고, 이 값은 스케치의 "currentFlag"변수에 저장된다.
출력(output) Resource는 "Run"버튼을 클릭하면 Target에서 수신한다. 즉, "currentFlag"변수의 값을 읽어온다.

이제 "Thinger.io"클라우드에서 "Dashboards"를 생성해 보자!
"Dashboards"탭을 클릭하고, "Add Dashboard" 버튼을 클릭한다.
"Dashboard id"와 "name", "description"을 작성하고, "Add Dashboard"버튼을 클릭한다.
"Dashboard"가 정상적으로 생성되었다면, 다양한 위젯을 통해서 디자인해 보자!
디자인할 Dashboard를 클릭한다.
우측 상단에 있는 버튼을 클릭해야만 "위젯"을 추가할 수 있다.
"Add Widget"버튼을 클릭한다.
"Select widget type"을 클릭하면 다양한(???) 위젯을 선택할 수 있다. "Device Control"은 입력(input) Resource를 선택할때 사용된다.
아두이노 스케치에서 currentFlag변수는 bool이므로, "On/Off State"를 선택하고, "Device Resource"에서 "Flag" Resource를 선택한다.
출력(Output) Resource를 Dashboard에 추가하기 위해서 "Add Widget"을 클리하고, "Type"에서 "Time Series Chart"를 선택한다.
"Chart Input"을 "From Device"로 선택하고, "Device"와 "Resource", "Refresh Mode"를 설정하고, "Time Period"를 60분으로 설정한다.
Dashboard에 2개의 위젯을 추가하였다.
"Flag Title"의 버튼을 클릭하면, 이 값이 아두이노 스케치의 currentFlag 변수에 설정된다. "Status Title" 위젯은 Target에서 3초 간격으로 currentFlag변수의 값을 받아와서 Time Chart에 표시한다.

참고로, 핸드폰 어플에서 Target을 제어하는 방법을 설명한다.
"Thinger.io" 클라우드 서버의 "Devices"탭에서 Device를 선택한다.
화면 가운데 하단 "Device Tokens"에서 "Add" 버튼을 클릭한다.
"Token Name"을 입력하고, "OK"버튼을 클릭한다.
좌측 하단의 "Show QR Code"버튼을 클릭하여 QR code를 생성한다.
핸드폰에서 "Thinger.io"어플을 실행하고, "+" 버튼을 클릭하고, QR Code를 스캔한다.
캔된 Device를 클릭하면, 앞서 "Device"가 생성되었을 때의 화면과 비슷한 화면을 볼수 있다. "Thinger.io"의 Dashboard는 핸드폰에서 볼수 없다.
"Flag"의 버튼을 클릭하고, "Status"의 read버튼을 클릭하면 "Status"의 값이 바뀐다.

댓글

이 블로그의 인기 게시물

Endpoint 사용해 보기

Dashboard 만들기