ESP32でNTPで取得した時間をOLEDディスプレイ「SSD1306」に表示してみた

Pocket

ESP32でNTPで取得した時間をOLEDディスプレイ「SSD1306」に表示してみた

動いている様子

前提となる記事

ソフトウェア関連

  • windows10 home
  • Arduino 1.8.5
  • ESP32 core for arduino 1.0.0

使用部品

ESP32のピン配置

回路


ソースコード(コピペで動く)

#include <Wire.h>
#include "SSD1306.h" 
#include <HTTPClient.h>
#include <ArduinoJson.h>
#include <stdio.h>

const char* ssid = "YOURSSID";
const char* password =  "YOURPASSWORD";
 
//NTP関連
struct tm timeInfo;
char date[20],hour_minute[20];

SSD1306  display(0x3c, 21, 22);
 
void setup() {
  Serial.begin(115200);
  
  display.init();//SSD1306を初期化
  
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
  Serial.println("Connected to the WiFi network");
  
  configTime(9 * 3600L, 0, "ntp.nict.jp", "time.google.com", "ntp.jst.mfeed.ad.jp");//NTPの設定

}


void show_time(){
  getLocalTime(&timeInfo);//tmオブジェクトのtimeInfoに現在時刻を入れ込む
  sprintf(date, " %04d/%02d/%02d",timeInfo.tm_year + 1900, timeInfo.tm_mon + 1, timeInfo.tm_mday);//日付に変換
  sprintf(hour_minute, "%02d:%02d",timeInfo.tm_hour, timeInfo.tm_min);//時間に変換
  
  display.clear();
  //日付を上の方に表示
  display.setFont(ArialMT_Plain_16);
  display.drawString(0, 0, date);
  //時間を中央に大きく表示
  display.setFont(ArialMT_Plain_24);
  display.drawString(20, 20, hour_minute);
  display.display();
}
 
void loop() {
  if ((WiFi.status() == WL_CONNECTED)) {
    show_time();
    delay(15000);
  }
}

解説

ESP32でネットワーク上から現在時刻を取得する(NTP)ではgetLocalTime()で時間をtimeInfoに入れ込み、成形してシリアル通信で送信しました。
今回はその続きで、そのデータをディスプレイに表示しています。
ディスプレイに表示する部分はすべてshow_time()関数にまとめましたので、今回はその部分を解説します。

文字列データを格納する

sprintf()で日付データをdateに、時間と分をhour_minuteに入れ込んでいます。

sprintf(date, " %04d/%02d/%02d",timeInfo.tm_year + 1900, timeInfo.tm_mon + 1, timeInfo.tm_mday);//日付に変換
sprintf(hour_minute, "%02d:%02d",timeInfo.tm_hour, timeInfo.tm_min);//時間に変換

ディスプレイに表示する

ここからは殆どESP32でOLEDディスプレイ「SSD1306」にHello-world表示してみたと同じです。

まずdisplay.clear()で画面を消します。
次にフォントサイズ16を設定。
そしてdateの情報をx=0,y=0のところに表示します。

    display.clear();
    //日付を上の方に表示
    display.setFont(ArialMT_Plain_16);
    display.drawString(0, 0, date);

次が時計のメインとなる時間と分です。時計がメインなのでフォントサイズを24と大きくしてみました。
(20,20)の位置にhour_minuteの内容を表示すればOKです。
この時点ではバッファにデータが入っているだけなので、display.display()で表示する必要があります。

  //時間を中央に大きく表示
  display.setFont(ArialMT_Plain_24);
  display.drawString(20, 20, hour_minute);
  display.display();

まとめ

今回はNTPサーバーから取得した正確な時刻をディスプレイに表示し、正確な時計を作りました。
delayの時間を1秒にして秒まで表示することも簡単にできますね!

次はこの時計と以前投稿した「ESP32で天気APIから天気情報を取得し、OLEDディスプレイに表示させてみた」を組み合わせて、時間と天気、そして天気予報が見れるお天気ステーションを作ります。お楽しみに。

twitterアカウントの方で最新記事のお知らせや記事にならないような小さな情報を小出ししています。もしよろしければフォローお願いいたしますm(__)m

ご覧いただきありがとうございました!

Pocket

関連記事   ESP32でAPIを使って現在の天気を取得してみた

1件のコメント

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です