概要

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で日本語表示

動作結果

プログラム説明

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);
   }

}