LoginSignup
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@sola127

M5Stackを使って時刻表示

Last updated at Posted at 2019-09-28

概要

M5Stackを使用して時刻を表示＆その時の電気料金を表示する。

環境

OS：macOS High Sierra ver10.13.6
ハード：M5Stack
ソフト：Arduino IDE

環境構築

ArduinoIDEはインストール済み
以下のURLを参考にM5Stackドライバーをインストールし、ArduinoIDEにライブラリをインストール。HelloWorldまで動作することを確認。
※注意事項※
・ボードをM5Stack-Core-ESP32に変更すること
・ツール > シリアルポート で/dev/cu.SLAB_USBtoUART を選択します。
・シリアルモニタで文字化けするが、シリアルモニタのボーレートを115200に変更すること

M5StackをMacのArduino IDEで使うための環境構築

時刻表示

今回はネットワーク環境がある状況を想定しているため、NTPサーバーから時刻を取得して表示する。下記サンプルプログラムを参考にして時刻を取得した。

NTPサーバから時刻を取得してM5Stackに表示する

日本語表示

M5STACKで日本語（漢字含め）を表示するためにフォントライブラリをSDカードに保存する必要がある。
以下のURLの通り行えば簡単に日本語を表示することができる。
M5Stackで日本語表示

動作結果

IMG_2794.JPG

プログラム説明

github

M5_japanese.ino
void setup() {
  Serial.begin(115200); //115200でないと動作しない
  M5.begin();
  M5.Lcd.setBrightness(100);
  M5.Lcd.fillScreen(TFT_BLACK); 
  //SDカードのフォントを使用する
  SDfonts.init(SD_PN);
  Serial.println(F("sdfonts liblary"));
  //WiFiに接続する
  M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
  M5.Lcd.drawString("Connecting...", 0, 0, 4); 
  Serial.printf("Connecting to %s ", ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  M5.Lcd.clear();
  Serial.println("CONNECTED");
  
  //init and get the time
  configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
  
  struct tm timeinfo;
  if (!getLocalTime(&timeinfo)) {
    Serial.println("Failed to obtain time");
    return;
  }
  Serial.println("checkcost");
  YY = timeinfo.tm_year + 1900; MM = timeinfo.tm_mon+1;
  dd = timeinfo.tm_mday;        hh = timeinfo.tm_hour;
  mm = timeinfo.tm_min;         ss = timeinfo.tm_sec;
  checkCost();

}
M5_japanese.ino
void loop() {
  
  struct tm timeinfo;
  //時刻を取得する
  if (!getLocalTime(&timeinfo)) {
    Serial.println("Failed to obtain time");
    return;
  }
  
  /*
  // 年（YY）月（MM）日（dd）時間（hh）分（mm）秒（ss）
  // 各値をセットする
  */
  
  YY = timeinfo.tm_year + 1900; MM = timeinfo.tm_mon+1;
  dd = timeinfo.tm_mday;        hh = timeinfo.tm_hour;
  mm = timeinfo.tm_min;         ss = timeinfo.tm_sec;

  /*
  // M5Stackに時間・金額を描画する
  */

  if(mm==0 && ss == 0){
    M5.Lcd.clear();
    delay(1000);
    checkCost();
  }
  
}
drawcost.ino

/*
よりそう+シーズン&タイムに合わせて電気料金を表示する
*/
void drawNextCost_summer(){

  //次の時刻帯のコストを表示
  M5.Lcd.setTextSize(1);
  Serial.println("summer");
  if(hh<8){
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
    fontDump(20, 150, "8時から", 24,TFT_YELLOW);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_YELLOW);     
  }else if(hh<10){
    M5.Lcd.setTextColor(TFT_RED, TFT_BLACK);
    fontDump(20, 150, "10時から", 24,TFT_RED);
    M5.Lcd.drawString("42.36", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_RED);
   }else if(hh<17){
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
    fontDump(20, 150, "17時から", 24,TFT_YELLOW);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_YELLOW);
   }else if(hh<22){
    M5.Lcd.setTextColor(TFT_GREEN, TFT_BLACK);
    fontDump(20, 150, "22時から", 24,TFT_GREEN);
    M5.Lcd.drawString("11.22", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_GREEN);
   }else{
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
    fontDump(20, 150, "8時から", 24,TFT_YELLOW);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_YELLOW);     
   }
}


void drawNextCost_winter(){

  //次の時刻帯のコストを表示
  M5.Lcd.setTextSize(1);
  if(hh<8){
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
    fontDump(20, 150, "8時から", 24,TFT_YELLOW);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_YELLOW);     
  }else if(hh<16){
    M5.Lcd.setTextColor(TFT_RED, TFT_BLACK);
    fontDump(20, 150, "16時から", 24,TFT_RED);
    M5.Lcd.drawString("42.36", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_RED);
   }else if(hh<18){
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
    fontDump(20, 150, "18時から", 24,TFT_YELLOW);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_YELLOW);
   }else if(hh<22){
    M5.Lcd.setTextColor(TFT_GREEN, TFT_BLACK);
    fontDump(20, 150, "22時から", 24,TFT_GREEN);
    M5.Lcd.drawString("11.22", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_GREEN);
   }else{
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
    fontDump(20, 150, "8時から", 24,TFT_YELLOW);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_YELLOW);     
   }
}



void drawNextCost_other(){

  //次の時刻帯のコストを表示
  M5.Lcd.setTextSize(1);
  if(hh<8){
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
    fontDump(20, 150, "8時から", 24,TFT_YELLOW);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_YELLOW);     
  }else if(hh<10){
    M5.Lcd.setTextColor(TFT_RED, TFT_BLACK);
    fontDump(20, 150, "10時から", 24,TFT_RED);
    M5.Lcd.drawString("38.50", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_RED);
   }else if(hh<17){
    M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
    fontDump(20, 150, "17時から", 24,TFT_YELLOW);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_YELLOW);
   }else if(hh<22){
    M5.Lcd.setTextColor(TFT_GREEN, TFT_BLACK);
    fontDump(20, 150, "22時から", 24,TFT_GREEN);
    M5.Lcd.drawString("11.22", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_GREEN);
   }else{
    M5.Lcd.setTextColor(TFT_RED, TFT_BLACK);
    fontDump(20, 150, "8時から", 24,TFT_RED);
    M5.Lcd.drawString("26.24", 130, 180, 6); 
    fontDump(280, 200, "円", 24,TFT_RED);     
   }
}


void drawCost_winter(){

  //現在時刻のコストを表示
  if(hh<8 || hh>=22){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_GREEN, TFT_BLACK);
      M5.Lcd.drawString("11", 0, 10, 6); 
      M5.Lcd.drawString(".22", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_GREEN);
      
  }else if((hh>=8 && hh<16) || (hh>=18 && hh<22)){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
      M5.Lcd.drawString("26", 0, 10, 6); 
      M5.Lcd.drawString(".24", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_YELLOW);
   }else if(hh>=16 && hh<18){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_RED, TFT_BLACK);
      M5.Lcd.drawString("42", 0, 10, 6); 
      M5.Lcd.drawString(".36", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_RED);
   }
}

void drawCost_summer(){

  //現在時刻のコストを表示
  if(hh<8 || hh>=22){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_GREEN, TFT_BLACK);
      M5.Lcd.drawString("11", 0, 10, 6); 
      M5.Lcd.drawString(".22", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_GREEN);
      
  }else if((hh>=8 && hh<10) || (hh>=17 && hh<22)){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
      M5.Lcd.drawString("26", 0, 10, 6); 
      M5.Lcd.drawString(".24", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_YELLOW);
   }else if(hh>=10 && hh<17){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_RED, TFT_BLACK);
      M5.Lcd.drawString("42", 0, 10, 6); 
      M5.Lcd.drawString(".36", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_RED);
   }
}


void drawCost_other(){

  //現在時刻のコストを表示
  if(hh<8 || hh>=22){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_GREEN, TFT_BLACK);
      M5.Lcd.drawString("11", 0, 10, 6); 
      M5.Lcd.drawString(".22", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_GREEN);
      
  }else if((hh>=8 && hh<10) || (hh>=17 && hh<22)){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_YELLOW, TFT_BLACK);
      M5.Lcd.drawString("26", 0, 10, 6); 
      M5.Lcd.drawString(".24", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_YELLOW);
   }else if(hh>=10 && hh<17){
      M5.Lcd.setTextSize(3);
      M5.Lcd.setTextColor(TFT_RED, TFT_BLACK);
      M5.Lcd.drawString("38", 0, 10, 6); 
      M5.Lcd.drawString(".50", 160, 60, 4);
      fontDump(280, 120, "円", 24,TFT_RED);
   }

}
4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?