확인됩니다! ? M5Stack으로 집의 온도 데이터를 WEB 공개

목적



기사( M5Stack에 온도 센서 DS18B20을 연결하여 기온(℃ 및 F)을 획득 )의 계속으로 취득한 온도 데이터를 Ambient 라고 하는 IoT 데이터 시각화 서비스에 던져, WEB 공개해 보았습니다. 그 비망록으로서 이쪽에 투고해 둡니다.

준비



  • Ambient 에 유저 등록해 아래와 같이 2점 취득합니다.
  • 채널 ID
  • 라이트 키

  • M5Stack 에 대해서 Windows 시작 M5Stack 등을 참고로 Hello World 의 샘플을 동작 확인합니다.

  • 여기 을 참고하여 Ambient 라이브러리를 설치합니다.
  • 이전 기사( M5Stack에 온도 센서 DS18B20을 연결하여 기온(℃ 및 F)을 획득 )를 실시했다고 합니다.

  • 아래의 도구를 준비합니다.
  • PC(Windows 10 Pro)

  • M5Stack BASIC
  • USB-C 케이블(M5Stack BASIC에 포함됨)
  • 점퍼 와이어 오스메스 3개(M5Stack BASIC에 포함됨)

  • DS18B20
  • 2.2kΩ 탄소 저항
  • 브레드보드

  • 절차



    1. M5Stack에 프로그램 쓰기



    M5Stack을 USB-C 케이블로 PC에 연결하고 PC 측에서 Arduino IDE를 시작하고 아래 코드를 복사하여 M5Stack에 프로그램을 씁니다.
    #include <WiFi.h>
    #include <M5Stack.h>
    #include <OneWire.h>
    #include <DallasTemperature.h>
    #include "Ambient.h" 
    
    #define ONE_WIRE_BUS 2 // DS18B20 on arduino pin2 corresponds to D4 on physical board
    #define PERIOD 60
    
    OneWire oneWire(ONE_WIRE_BUS);
    DallasTemperature DS18B20(&oneWire);
    
    Ambient ambient; // Define Ambient Object
    unsigned int channelId = 10536; // Channel ID of Ambient
    const char* writeKey = "0badcad8f0f1af5c"; // Write Key of Ambient
    
    WiFiClient client;
    const char* ssid = "********";
    const char* password = "********";
    
    void setup() {
      M5.begin();
      M5.Lcd.setTextColor(TFT_WHITE, TFT_BLACK);
      M5.Lcd.setTextSize(2);
    
      WiFi.begin(ssid, password);
      while (WiFi.status() != WL_CONNECTED) {
        delay(100);
        M5.Lcd.print(".");
      }
      M5.Lcd.print("\n");
      M5.Lcd.print(WiFi.localIP());
    
      ambient.begin(channelId, writeKey, &client);
    }
    
    void loop() {
      int t = millis();
      float celsius;
      float fahrenheit;
    
      DS18B20.begin();
      int count = DS18B20.getDS18Count();
    
      //M5.Lcd.clear();
      M5.Lcd.setCursor(0, 0);
      M5.Lcd.print("Devices found: ");
      M5.Lcd.println(count);
    
      if (count > 0) {
    
        DS18B20.requestTemperatures();
    
        celsius = DS18B20.getTempCByIndex(0);
        fahrenheit = celsius * 1.8 + 32.0;
    
        ambient.set(1, String(celsius).c_str());
        ambient.send();
    
        celsius = round(celsius);
        fahrenheit = round(fahrenheit);
    
        M5.Lcd.print("Device ");
        M5.Lcd.print(0);
        M5.Lcd.print(": ");
        M5.Lcd.print(celsius, 0);
        M5.Lcd.print( "C / ");
        M5.Lcd.print(fahrenheit, 0);
        M5.Lcd.println("F");
      }
    
      t = millis() - t;
      t = (t < PERIOD * 1000) ? (PERIOD * 1000 - t) : 1;
      delay(t);
    }
    

    2. Ambient에서 내 페이지 확인



    Ambient에 로그인하여 방금 만든 채널에 차트를 추가합니다 (아래 화면의 [+] 버튼을 누릅니다).



    아래와 같이 차트 설정을 합니다. 이번 data1에 온도 데이터를 던지고 있기 때문에 그쪽을 표시하는 그래프의 설정입니다.



    제대로 데이터가 던져지면 My 채널에서 아래와 같이 시계열 그래프를 확인할 수 있습니다.



    채널 설정 화면에서 공개 채널? 라는 확인란을 ☑합니다.



    공개된 WEB 페이지는 아래와 같습니다(아래 이미지)
    htps : // 아메다였다. 이오 / ch / 찬 l. HTML? 예d=10536



    참고


  • htps : // 아무도였다. 이오/사 mp㎇s/m5s한 ck/m5s한 ck-r 즈이의/
  • 좋은 웹페이지 즐겨찾기