M5StackのLCDにYahooニュースと天気予報、スクロール時計を表示させてみた。

M5Stackに天気予報、スクロール時計、Yahooニュース、メッセージ表示させてみた

記事公開日:2018年6月14日


スポンサーリンク

使うもの

M5Stack

Espressif Systems社の ESP32 を搭載した、Wi-Fi & Bluetooth マイコンモジュールです。
更に、LCD ディスプレイ、micro SD カードスロット、スピーカー、簡易バッテリー、Groveコネクタ、USB-TypeC 等を搭載した、全部入りマイコンモジュールです。

Amazon.co.jp
M5Stack Gray(9軸IMU搭載)
スイッチサイエンス

micro SDHC カード

普通の micro SD や micro SDXC は動作不良が起こるかも知れません。
micro SDHC カードが安定動作すると思われます。
私が動作確認しているカードは以下の物です。

Amazon.co.jp

Wi-Fi環境

2.4GHz 帯のインターネットにつながった Wi-Fi ルーター環境が必要です。
予め、MACアドレスフィルタリングやファイアウォール設定は済ませておいてください。
M5Stack の MACアドレスを調べる方法は以下の記事を参照してください。

ESP-WROOM-32 ( ESP32 ) チップ・メモリ・MACアドレス情報取得方法

パソコン、USBケーブル等

開発環境 Arduino – ESP32 を設定しておく

プログラムは Arduino IDE を使います。
Arduino IDE はver 1.8.5 で動作確認しておりますので、それを予めインストールしておいてください。

また、Arduino IDE でESP32 のプログラミングが出来るように、Arduino core for the ESP32 をインストールしておいてください。
そのインストール方法は以下の記事を参照してください。

Arduino core for the ESP32 のインストール方法

東雲フォントをmicro SDHC で表示できる状態にしておく

古川泰之さん原作、/efont/ さん保守開発の日本語フリービットマップフォント、東雲フォントを micro SDHC に保存し、M5Stack で表示できる状態にしておいてください。
以下の記事を参照してください。

M5Stack ( ESP32搭載 )の LCD に日本語漢字フォントを表示したりスクロールしたり

なお、これでインストールしたライブラリは今回は使用しません。
あくまで表示できるかどうかテストするための前準備です。

カスタム自作フォントを東雲フォントに埋め込んでおく

デフォルトの東雲フォントでも表示できますが、先に紹介した動画では、16x16pixel 自作カスタムフォントを東雲フォントに埋め込んだものを使用しています。
カスタムフォントを表示させたい場合は以下の記事を参照して、カスタムフォントを作成しておいてください。

Excel で自作したカスタムフォントを M5Stack に表示してみる

ここでは、micro SDHC カード内の/font/フォルダに
MYshnmk16.bdf
というファイル名で保存しておいてください。

一新した自作ライブラリをインストールする

先の苦労話で紹介したように、今回は私の自作ライブラリを作り直し、一つのパッケージとしました。
GitHub の以下のページにあるので、ZIPファイルをダウンロードしていただき、Arduino IDEにインストールしてください。

今まで使っていただいた方には申し訳ございませんが、関数名は殆ど変更になりましたので、今までのライブラリと一切互換性はありません。
機能は同じですが、全く別物です。

ESP32_mgo_tec ライブラリ

https://github.com/mgo-tec/ESP32_mgo_tec

ZIP ファイルのままArduino IDE にインストールする方法は以下の記事を参照してください。

また、この自作ライブラリには、Arduino IDE 標準の Time ライブラリが必要です。
これは外部ライブラリになっているので、GitHub の以下のページから ZIPファイルをダウンロードしてインストールしてください。
https://github.com/PaulStoffregen/Time

※コンパイルエラー
display_bme280_i2c.h: fatal error: bme280.h: No such file or directory
が出る場合、インストールした私の自作ライブラリのSensorフォルダの中のファイルを削除してください。
Windows 10 の場合、以下のパスになります。

C:\Users\__user_name__\Documents\Arduino\libraries\ESP32_mgo_tec-master\src\ESP32_mgo_tec_bV1\Sensor

BME280ライブラリを使っている場合は、Sensorフォルダ内の以下の2つのファイルのみの削除でOKです。
display_bme680_i2c.h
display_bme680_i2c.cpp
また、BME680ライブラリを使っている場合は、以下の2つのファイル削除だけでOKです。
display_bme280_i2c.h
display_bme280_i2c.cpp
両方使わない場合は Sensor フォルダごと削除してからコンパイルしてください。
(2018/09/24)

 

GitHubにある ZIP形式ライブラリ のインストール方法 ( Arduino IDE )

天気予報用自作フォントをmicro SDHC にコピーしておく

前項でダウンロードした ESP32_mgo_tec ライブラリの ZIP ファイルを解凍してください。
その中の data/font/ フォルダの中の
MyFont.fnt
というファイルを、micro SDHC の /font/フォルダにコピーしておいてください。

これは、以下の記事にある方法で自作した天気予報用フォントです。

天気予報を自作フォントで表示してみた ( ESP32 , OLED SSD1331 )

ただ、その記事は古いので、こちらの記事のエクセルファイルで作成した方が良いです。
バイナリ形式ファイルを作成します。

Excel で自作したカスタムフォントを M5Stack に表示してみる

Timeライブラリのインストール

もう殆どの方はインストールされていると思いますが、念のため載せておきます。
Arduino 標準の Time ライブラリをインストールしておいてください。
GitHub の以下のページにあります。

https://github.com/PaulStoffregen/Time

スケッチの入力

ではいよいよ、メインプログラムをArduino IDE に入力します。
Include が少なくて良い感じです。
TimeライブラリはInclude しなくても他で Include しているので良いのですが、インストールを忘れない様に明示的にしています。

Yahoo! Japan RSS ニュースについては、トップニューストピックスを取得しています。
その他のニュースは以下のサイトから選んで、下記のソースコードの 24行目を変えてください。
※ただし、トピックス以外のニュースは文字列が多いので、45行目の配列要素数を400以上にしないと正常に動作しません。
場合によっては半角 2000文字くらいないと受信しないかもしれません。
その場合、メモリ容量オーバーでコンパイルエラーになる場合があります。

https://headlines.yahoo.co.jp/rss/list

また、天気予報は以下のリンクから自分の地域のURLを選んで、26行目を変更してください。
https://weather.yahoo.co.jp/weather/rss/

※WiFiClientSecureを使って SSLサイトから記事を取得し、その間、WiFi.mode( WIFI_OFF )と WiFi.begin の使用を繰り返すと、heap memory が減り続け、接続できなくなる現象が出ています。
以下の記事も合わせて参照してください。
WIFI_OFF にした場合、Arduino IDE 「ツール」「Core Debug Level “なし”」にする必要があります
ESP32 および M5Stack で数時間後に Web 記事取得失敗する問題について
(2018/09/25時点)

 

#include "mgo_tec_esp32_ili9341_sd.h"
#include <TimeLib.h> //Arduino time library ver1.5-

const int8_t sck = 18; // SPI clock pin
const int8_t miso = -1; // MISO(master input slave output) don't using
const int8_t mosi = 23; // MOSI(master output slave input) pin
const int8_t cs = 14; // Chip Select pin
const int8_t dc = 27; // Data/Command pin
const int8_t rst = 33; // Reset pin
const int8_t lcd_led_pin = 32;

const uint8_t cs_sd = 4; //SD card CS ( Chip Select )

const char* ssid = "xxxxxxxx"; //ご自分のルーターのSSIDに書き換えてください
const char* password = "xxxxxxxx"; //ご自分のルーターのパスワードに書き換えてください

const char* utf8sjis_file = "/font/Utf8Sjis.tbl"; //UTF8 Shift_JIS 変換テーブルファイル名を記載しておく
//const char* shino_full_font_file = "/font/shnmk16.bdf"; //オリジナル東雲全角フォントファイル
const char* shino_half_font_file = "/font/shnm8x16.bdf"; //半角フォントファイル名を定義
const char* shino_full_font_file = "/font/MYshnmk16.bdf"; //自作改変全角東雲フォントファイル
const char* myfont_file = "/font/MyFont.fnt"; //自作フォントファイル名を定義(天気予報用)

const char* yahoo_news_host = "news.yahoo.co.jp";
const char* yahoo_news_target_url = "/pickup/rss.xml"; //ニューストピックス主要
const char* yahoo_weather_host = "rss-weather.yahoo.co.jp";
const char* yahoo_weather_target_url = "/rss/days/4410.xml"; //地域:東京

//using namespace mgo_tec_esp32_bv1; //これを使うと簡単になるが、逆に衝突する危険があるので、極力使わない
mgo_tec_esp32_bv1::SdShinonomeFont SFR(cs_sd, 40000000);
mgo_tec_esp32_bv1::ILI9341Spi LCD;

//------時刻文字表示系 引数初期化-----
mgo_tec_esp32_bv1::ILI9341Watch wtc;
uint8_t num = 0; //文字列番号
uint8_t colon1_buf[ 2 ][ 16 ] = {}, colon2_buf[ 2 ][ 16 ] = {};
uint16_t colon1_sj_len = 0, colon2_sj_len = 0;
//--------NTP関連定義---------------
int timezone = 9; //Tokyo
const char *ntp_server_name = "time.windows.com";

//-----Yahooニュース記事関連定義------
mgo_tec_esp32_bv1::YahooJrssGet yrg;
mgo_tec_esp32_bv1::FontParameter news_font;
mgo_tec_esp32_bv1::ScrolleParameter news_scl_set;
uint8_t news_sj_txt[ 400 ] = {}; //Shift_JIS文字コード格納
uint8_t news_font_buf[2][16] = {}; //16x16フォント全角1文字格納バッファ

//------天気予報関連定義-------------
mgo_tec_esp32_bv1::FontParameter weather_fnt;
File MyF; //天気予報自作フォント用

//-----Webデータ取得変数-------------
uint32_t web_get_last_time = 0;
bool isWeb_get_first_time = true;

//-----メッセージウィンドウ関連定義----
mgo_tec_esp32_bv1::MessageWindow wifi_msg, 
              ntp_msg, 
              news_msg, 
              weather_msg;

//-----ボタンスイッチ 引数初期化-----------
mgo_tec_esp32_bv1::ButtonSwitch btnA, btnB, btnC;
const uint8_t buttonA_GPIO = 39;
const uint8_t buttonB_GPIO = 38;
const uint8_t buttonC_GPIO = 37;

//***********セットアップ****************************
void setup() {
  delay(1000);
  Serial.begin(115200);
  pinMode(buttonA_GPIO, INPUT); //GPIO #39 は内部プルアップ無し
  pinMode(buttonB_GPIO, INPUT); //GPIO #38 は内部プルアップ無し
  pinMode(buttonC_GPIO, INPUT); //GPIO #37 は内部プルアップ無し

  //ライブラリ初期化。3ファイル同時に開く
  SFR.init3File(utf8sjis_file, shino_half_font_file, shino_full_font_file);

  MyF = SD.open(myfont_file, FILE_READ);
  if (!MyF) {
    Serial.print(myfont_file);
    Serial.println(" File not found");
    return;
  }else{
    Serial.print(myfont_file);
    Serial.println(" File read OK!");
  }

  LCD.ILI9341init(sck, miso, mosi, cs, dc, rst, lcd_led_pin, 40000000, false); //microSDを使う場合、必ず false にする
  LCD.displayClear();
  LCD.brightness(255); //LCD LED Full brightness

  num = 0; //時、十の位の文字列をフォント変換
  wtc.watchStrFontConv( num, " 123456789" );
  for( num = 1; num < 6; num++ ){
    wtc.watchStrFontConv( num, "0123456789" );
  }

  setupWatchFont(); //時計表示フォントセットアップ
  setupYmdFont(); //年月日表示フォントセットアップ
  setupWeatherFont(); //天気予報フォントセットアップ
  setupNewsFont(); //ニュース記事文字列のセットアップ
  setupMessageWindow(); //メッセージウィンドウ表示セットアップ
  wifi_msg.dispMsgWindow( 0, "WiFi Connecting..." );

  getWeb();
  wtc.watchDispReset(); //時計表示が崩れる為に一旦リセット

  TaskHandle_t th; //マルチタスクハンドル定義
  xTaskCreatePinnedToCore(Task1, "Task1", 8192, NULL, 5, &th, 0); //マルチタスク起動
}
//***********メインループ****************************
void loop(){
  //Statusメッセージウィンドウ表示
  wifi_msg.dispWifiStatusMsg();
  ntp_msg.dispWebGetStatusMsgShort( wtc.ntp_msg_status, "NTP" );
  weather_msg.dispWebGetStatusMsgShort( yrg.weather_msg_status, "天気" );
  news_msg.dispWebGetStatusMsgShort( yrg.news_msg_status, "News" ); 

  wtc.scrolleWatch(); //時計スクロール
  wtc.displayColon2(); //時計コロン表示
  wtc.displayYMDW(); //年月日、曜日表示

  //Yahoo! Japan RSS 天気予報表示
  yrg.dispYahooJweatherMyFont( MyF ,weather_fnt );
  //Yahoo! Japan RSS ニューススクロール
  yrg.scrolleYahooJnews( news_font, news_scl_set, news_sj_txt, news_font_buf );

  button_action(); //ボタン操作
}
//************ マルチタスクループ ******************
void Task1(void *pvParameters) {
  while(1){
    getWeb(); //Web記事およびNTP時刻取得
    delay(1); //マルチタスクの場合、これ絶対必要!
  }
}
//******時計表示フォント設定****************************
void setupWatchFont(){
  for( num = 0; num < 4; num++ ){ //時、分のフォント色設定
    wtc.font[num].red = 31, wtc.font[num].green = 0, wtc.font[num].blue = 31;
    LCD.scrolleFontColorSet( wtc.font[num] );
  }
  for( num = 4; num < 6; num++ ){ //秒のフォント色設定
    wtc.font[num].red = 0, wtc.font[num].green = 63, wtc.font[num].blue = 31;
    LCD.scrolleFontColorSet( wtc.font[num] );
  }

  //コロンフォント色設定 red(0-31), green(0-63), blue(0-31)
  wtc.colon1_font.red = 31, wtc.colon1_font.green = 63, wtc.colon1_font.blue = 0;
  wtc.colon1_font.bg_red = 0, wtc.colon1_font.bg_green = 0, wtc.colon1_font.bg_blue = 0;
  wtc.colon2_font.red = 0, wtc.colon2_font.green = 0, wtc.colon2_font.blue = 31;
  wtc.colon2_font.bg_red = 0, wtc.colon2_font.bg_green = 0, wtc.colon2_font.bg_blue = 0;

  wtc.watchFontSetup(0, 52, 3, 4); //時計フォントセット
}
//******年月日表示フォント設定**************************
void setupYmdFont(){
  //red(0-31), green(0-63), blue(0-31)
  wtc.ymd_font.y0 = 120;
  wtc.ymd_font.Xsize = 2, wtc.ymd_font.Ysize = 2;
  wtc.ymd_font.red = 31, wtc.ymd_font.green = 63, wtc.ymd_font.blue = 31;
  wtc.ymd_font.bg_red = 0, wtc.ymd_font.bg_green = 0, wtc.ymd_font.bg_blue = 0;
}
//******Yahooニュース天気予報フォント設定****************
void setupWeatherFont(){
  weather_fnt.Xsize = 2, weather_fnt.Ysize = 2;
  weather_fnt.y0 = 156;
}
//******Yahooニュース記事フォント設定********************
void setupNewsFont(){
  uint8_t txt_max = 13; //半角40文字最大配列サイズにしておく

  news_font.x0 = 0;
  news_font.y0 = 192;
  news_font.Xsize = 3, news_font.Ysize = 3;
  // red(0-31), green(0-63), blue(0-31)
  news_font.red = 31, news_font.green = 63, news_font.blue = 0;
  news_font.bg_red = 0, news_font.bg_green = 0, news_font.bg_blue = 25;
  //ヒープ領域配列確保。※不要な時は必ずdeleteしておく。
  LCD.XscrolleFontArrayInit( news_font, news_scl_set, txt_max, news_font.Xsize, news_font.Ysize);
  LCD.scrolleFontSetUp( news_font, news_scl_set );
  Serial.printf("Free Heap Size = %d\r\n", esp_get_free_heap_size());
}
//*****メッセージウィンドウ設定**************************
void setupMessageWindow(){
  wifi_msg.m_x0 = 0;
  wifi_msg.m_y0 = 0;
  wifi_msg.m_size = 2;
  wifi_msg.m_padding = 4; //pixel単位
  wifi_msg.m_txt_length = 39; //文字表示数(半角相当)
  //背景色のみ設定 red(0-31), green(0-63), blue(0-31)
  wifi_msg.m_bg_red = 0;
  wifi_msg.m_bg_green = 0;
  wifi_msg.m_bg_blue = 0;

  ntp_msg.m_x0 = 0;
  ntp_msg.m_y0 = 0;
  ntp_msg.m_size = 2;
  ntp_msg.m_padding = 4; //pixel単位
  ntp_msg.m_txt_length = 6; //文字表示数(半角相当)
  //背景色のみ設定 red(0-31), green(0-63), blue(0-31)
  ntp_msg.m_bg_red = 10;
  ntp_msg.m_bg_green = 10;
  ntp_msg.m_bg_blue = 15;

  weather_msg.m_x0 = 96;
  weather_msg.m_y0 = 0;
  weather_msg.m_size = 2;
  weather_msg.m_padding = 4; //pixel単位
  weather_msg.m_txt_length = 7; //文字表示数(半角相当)
  //背景色のみ設定 red(0-31), green(0-63), blue(0-31)
  weather_msg.m_bg_red = 10;
  weather_msg.m_bg_green = 10;
  weather_msg.m_bg_blue = 15;

  news_msg.m_x0 = 208;
  news_msg.m_y0 = 0;
  news_msg.m_size = 2;
  news_msg.m_padding = 4; //pixel単位
  news_msg.m_txt_length = 7; //文字表示数(半角相当)
  //背景色のみ設定 red(0-31), green(0-63), blue(0-31)
  news_msg.m_bg_red = 10;
  news_msg.m_bg_green = 10;
  news_msg.m_bg_blue = 15;
}
//*******NTPサーバー、Yahoo! Japan RSS 記事取得*******
void getWeb(){
  if( (isWeb_get_first_time == true) || (millis() - web_get_last_time > 180000) ){ //3分毎に記事取得
    WiFi_AP_Connect(); //WiFi起動、アクセスポイント接続

    wtc.getNTPserverSel( timezone, ntp_server_name );
    yrg.getYahooJweather( yahoo_weather_host, yahoo_weather_target_url );
    yrg.getYahooJnews( yahoo_news_host, yahoo_news_target_url );

    Serial.println("-------WiFi OFF");
    //WiFi.disconnect(true); //これを入れると消費電力大きくなる。
    WiFi.softAPdisconnect(true);
    WiFi.mode(WIFI_OFF); //こちらの方が消費電力少ない。但し、なぜかアクセスポイントが無い場合は消費電力抑えられない。

    isWeb_get_first_time = false;
    web_get_last_time = millis();
  }
}
//*******WiFiアクセスポイント接続*************
void WiFi_AP_Connect(){
  wifi_msg.WifiStatus = wifi_msg.WifiConnecting; //WiFiメッセージウィンドウ設定
  Serial.println();
  Serial.println(F("Connecting Wifi..."));
  Serial.println(ssid);

  WiFi.disconnect(true); //WiFiが急に接続できなくなった場合の応急処置
  delay(1000);
  WiFiMulti wifiMulti;
  wifiMulti.addAP(ssid, password);

  if(wifiMulti.run() == WL_CONNECTED) {
    Serial.println("");
    Serial.println(F("WiFi connected"));
    Serial.println(F("IP address: "));
    Serial.println(WiFi.localIP());
  }

  if( WiFi.status() <= WL_CONNECTED ){
    wifi_msg.WifiStatus = wifi_msg.WifiConnected; //WiFiメッセージウィンドウ設定
  }else{
    wifi_msg.WifiStatus = wifi_msg.WifiFailed; //WiFiメッセージウィンドウ設定
    Serial.println("WiFi AP Not Found");
  }
}
//******フォント設定パターン例1**********************************
void Font_Pattern1(){
  LCD.drawRectangleFill(0, 40, 319, 116, 0, 0, 25); //時計表示消去(赤で塗りつぶし)

  for( num = 0; num < 6; num++ ){
    wtc.font[num].red = 31, wtc.font[num].green = 63, wtc.font[num].blue = 0;
    wtc.font[num].bg_red = 0, wtc.font[num].bg_green = 0, wtc.font[num].bg_blue = 25;
    LCD.scrolleFontColorSet( wtc.font[num] );
  }

  wtc.colon1_font.red = 31, wtc.colon1_font.green = 0, wtc.colon1_font.blue = 31;
  wtc.colon1_font.bg_red = 0, wtc.colon1_font.bg_green = 0, wtc.colon1_font.bg_blue = 25;
  wtc.colon2_font.red = 31, wtc.colon2_font.green = 0, wtc.colon2_font.blue = 31;
  wtc.colon2_font.bg_red = 0, wtc.colon2_font.bg_green = 0, wtc.colon2_font.bg_blue = 25;

  news_font.red = 0, news_font.green = 0, news_font.blue = 0;
  news_font.bg_red = 31, news_font.bg_green = 0, news_font.bg_blue = 0;

  LCD.scrolleFontColorSet( news_font );
}
//******フォント設定パターン例2**********************************
void Font_Pattern2(){
  LCD.drawRectangleFill(0, 40, 319, 116, 31, 63, 31); //時計表示消去(白で塗りつぶし)

  for( num = 0; num < 6; num++ ){
    wtc.font[num].red = 0, wtc.font[num].green = 0, wtc.font[num].blue = 0;
    wtc.font[num].bg_red = 31, wtc.font[num].bg_green = 63, wtc.font[num].bg_blue = 31;
    LCD.scrolleFontColorSet( wtc.font[num] );
  }

  wtc.colon1_font.red = 0, wtc.colon1_font.green = 0, wtc.colon1_font.blue = 0;
  wtc.colon1_font.bg_red = 31, wtc.colon1_font.bg_green = 63, wtc.colon1_font.bg_blue = 31;
  wtc.colon2_font.red = 0, wtc.colon2_font.green = 0, wtc.colon2_font.blue = 0;
  wtc.colon2_font.bg_red = 31, wtc.colon2_font.bg_green = 63, wtc.colon2_font.bg_blue = 31;

  wtc.ymd_font.red = 0, wtc.ymd_font.green = 0, wtc.ymd_font.blue = 0;
  wtc.ymd_font.bg_red = 31, wtc.ymd_font.bg_green = 63, wtc.ymd_font.bg_blue = 31;

  news_font.red = 0, news_font.green = 0, news_font.blue = 0;
  news_font.bg_red = 31, news_font.bg_green = 63, news_font.bg_blue = 31;

  LCD.scrolleFontColorSet( news_font );
}
//******フォント設定パターン例3**********************************
void Font_Pattern3(){
  LCD.drawRectangleFill(0, 40, 319, 116, 0, 0, 0); //時計表示消去(黒で塗りつぶし)

  for( num = 0; num < 6; num++ ){
    wtc.font[num].red = 31, wtc.font[num].green = 0, wtc.font[num].blue = 0;
    wtc.font[num].bg_red = 0, wtc.font[num].bg_green = 0, wtc.font[num].bg_blue = 0;
    LCD.scrolleFontColorSet( wtc.font[num] );
  }

  wtc.colon1_font.red = 31, wtc.colon1_font.green = 0, wtc.colon1_font.blue = 0;
  wtc.colon1_font.bg_red = 0, wtc.colon1_font.bg_green = 0, wtc.colon1_font.bg_blue = 0;
  wtc.colon2_font.red = 31, wtc.colon2_font.green = 0, wtc.colon2_font.blue = 0;
  wtc.colon2_font.bg_red = 0, wtc.colon2_font.bg_green = 0, wtc.colon2_font.bg_blue = 0;

  wtc.ymd_font.red = 31, wtc.ymd_font.green = 0, wtc.ymd_font.blue = 0;
  wtc.ymd_font.bg_red = 0, wtc.ymd_font.bg_green = 0, wtc.ymd_font.bg_blue = 0;

  news_font.red = 31, news_font.green = 0, news_font.blue = 0;
  news_font.bg_red = 0, news_font.bg_green = 0, news_font.bg_blue = 0;

  LCD.scrolleFontColorSet( news_font );
}
//******フォント設定パターン例4**********************************
void Font_Pattern4(){
  LCD.drawRectangleFill(0, 40, 319, 116, 0, 0, 25); //時計表示消去(赤で塗りつぶし)

  for( num = 0; num < 6; num++ ){
    wtc.font[num].red = 31, wtc.font[num].green = 63, wtc.font[num].blue = 0;
    wtc.font[num].bg_red = 0, wtc.font[num].bg_green = 0, wtc.font[num].bg_blue = 25;
    LCD.scrolleFontColorSet( wtc.font[num] );
  }

  wtc.colon1_font.red = 31, wtc.colon1_font.green = 0, wtc.colon1_font.blue = 31;
  wtc.colon1_font.bg_red = 0, wtc.colon1_font.bg_green = 0, wtc.colon1_font.bg_blue = 25;
  wtc.colon2_font.red = 31, wtc.colon2_font.green = 0, wtc.colon2_font.blue = 31;
  wtc.colon2_font.bg_red = 0, wtc.colon2_font.bg_green = 0, wtc.colon2_font.bg_blue = 25;

  wtc.ymd_font.red = 31, wtc.ymd_font.green = 63, wtc.ymd_font.blue = 0;
  wtc.ymd_font.bg_red = 0, wtc.ymd_font.bg_green = 0, wtc.ymd_font.bg_blue = 25;

  news_font.red = 31, news_font.green = 63, news_font.blue = 0;
  news_font.bg_red = 0, news_font.bg_green = 0, news_font.bg_blue = 25;

  LCD.scrolleFontColorSet( news_font );
}
//****************************************
void button_action(){
  btnA.buttonAction( buttonA_GPIO, true, 30, 300 ); //チャタリング対策 30ms, 長押し300ms
  switch( btnA.ButtonStatus ){
    case btnA.MomentPress:
      Serial.println("Button A Moment Press");
      Font_Pattern1();
      wtc.watchDispReset();
      break;
    case btnA.ContPress:
      Serial.println("-------------Button A Cont Press");
      Font_Pattern2();
      wtc.watchDispReset();
      break;
    default:
      break;
  }

  btnB.buttonAction(buttonB_GPIO, true, 30, 300); //チャタリング対策 30ms, 長押し300ms
  switch( btnB.ButtonStatus ){
    case btnB.MomentPress:
      Serial.println("Button B Moment Press");
      Font_Pattern3();
      wtc.watchDispReset();
      break;
    case btnB.ContPress:
      Serial.println("-------------Button B Cont Press");
      Font_Pattern4();
      wtc.watchDispReset();
      break;
    default:
      break;
  }

  btnC.buttonAction(buttonC_GPIO, true, 30, 300); //チャタリング対策 30ms, 長押し300ms
  switch( btnC.ButtonStatus ){
    case btnC.MomentPress:
      Serial.println("Button C Moment Press");
      num = 0;
      news_scl_set.interval++;
      if( news_scl_set.interval> 200 ) news_scl_set.interval = 200;
      break;
    case btnC.ContPress:
      Serial.println("-------------Button C Cont Press");
      num = 0;
      news_scl_set.interval--;
      if( news_scl_set.interval < 0 ) news_scl_set.interval = 0;
      break;
    default:
      break;
  }
}

えらい行数が多くなっていますが、内容はフォントの色やサイズを設定しているだけなので、シンプルだと思います。
難しい計算式はできるだけライブラリに詰め込みました。

20行目で時計表示の自作カスタムフォントを指定しています。

28-30行目のところで、私のライブラリの名前空間を使っています。
mgo_tec_esp32_bv1::
という名前を入力することが面倒なときに、28行目のコメントを外して、
mgo_tec_esp32_bv1::
を全て消去すれば良いです。
ただし、そうすると他のライブラリと共に使う場合に名前の重複が起きる可能性が高まるので、using namespace は極力使わない方が良いと思います。

あとは、フォント色やサイズなどのパラメーター専用クラスで代入するだけなので、意味が分かる値代入ができると思います。

その他、天気予報フォント色や、メッセージウィンドウフォント色はライブラリクラス内で設定していますので、変更したい方はそちらを変更してください。
まだ試行錯誤中なので、そこまで細かい設定がユーザーで可能なようには作り込んでいません。
この辺で勘弁してください。

コンパイル書き込み実行

では、コンパイル書き込み実行させてみてください。
WIFI_OFF にした場合、Arduino IDE 「ツール」「Core Debug Level “なし”」にしてください

※コンパイルエラー
display_bme280_i2c.h: fatal error: bme280.h: No such file or directory
が出る場合、インストールした私の自作ライブラリのSensorフォルダの中のファイルを削除してください。
Windows 10 の場合、以下のパスになります。

C:\Users\__user_name__\Documents\Arduino\libraries\ESP32_mgo_tec-master\src\ESP32_mgo_tec_bV1\Sensor

BME280ライブラリを使っている場合は、Sensorフォルダ内の以下の2つのファイルのみの削除でOKです。
display_bme680_i2c.h
display_bme680_i2c.cpp
また、BME680ライブラリを使っている場合は、以下の2つのファイル削除だけでOKです。
display_bme280_i2c.h
display_bme280_i2c.cpp
両方使わない場合は Sensor フォルダごと削除してからコンパイルしてください。
(2018/09/24)

 

ご自分のルーター(アクセスポイント)の電源を切ったり入れたりしてみてください。
最初に紹介した動画のように動作すればOKです。

因みに、動画では1分毎に記事を取得していますが、前項のスケッチでは3分毎にしています。

ボタン操作は以下の通りです。

●ボタンA
瞬時押し:フォント色変更
長押し:フォント色変更

●ボタンB
瞬時押し:フォント色変更
長押し:フォント色変更

●ボタンC
瞬時押し:スクロール減速
長押し:スクロールスピードアップ

編集後記

いかがでしょうか。
上手く動きましたでしょうか。

前回に引き続き、今回もプログラミングについてかなり沢山吸収できました。
自分の思った通りのプログラムがだんだん組めるようになってきました。
新たな勉強したおかげで、プログラムの自由度が増しましたね。
やっぱり先人技術者や現職プログラマの方々が言っていることは本当だったんですね。

そして、Arduino ライブラリの作り方Now How もだいぶ蓄積されてきました。
この方法で正しいのかどうかは良く分からないのですが、おそらくこうだ! という方向性が自分なりに見えてきました。
いつか、ライブラリの作り方の記事も書いてみようと考えています。

継続すると何かと見えてくるもんですね。

ということで、今回はここまでです。

ではまた・・・。

最新のこちらの記事では、さらに機能アップして、ボタンでニュース記事をセレクトできるようにしました。
合わせてご覧ください。
(2018/10/08)

M5Stack と ESP32 のボタンで記事を選択できる Yahoo News 電光掲示板 天気予報 Watch

 


スポンサーリンク


 

mgo-tec電子工作ブログ管理人おすすめ
Amazon.co.jp
M5Stack Basic
スイッチサイエンス
Amazon.co.jp
ESPr Developer 32
スイッチサイエンス(Switch Science)
Amazon.co.jp
Amazon.co.jp

「M5Stackに天気予報、スクロール時計、Yahooニュース、メッセージ表示させてみた」への18件のフィードバック

  1. こんにちわ

    動作確認させていただきました。
    記事にもあるように仕様が簡素化されてちょっと困りました。
    LCD.Disp_Rotationが無くなってました。
    M5スタックのなんちゃってを作りましたが、LCDの向きが90度違いまして
    回転させて表示させてました。
    簡素化と高機能化は相反しますよねw

    ご活躍を応援しています。

    1. マッキーさん

      ゴメンナサイ!
      m(_ _)m

      ただ、以前の関数はそのまま名前や引数代入方法を変えただけなので、そのまま使えると思います。
      LCD.Disp_Rotation

      LCD.dispRotation(uint8_t rot);
      です。
      例えば、サインスマート販売のILI9341の場合、
      LCD.dispRotation(250);
      とすれば、正常表示されます。
      ローテーション番号は、ライブラリ関数ソースコードを見ていただいて、正しく表示される番号を試してみて下さい。
      ※必ず、LCD.ILI9341init のすぐ後に記述してください。

      【例】

        LCD.ILI9341init(sck, miso, mosi, cs, dc, rst, lcd_led_pin, 40000000, false); //microSDを使う場合、必ず false にする
        LCD.dispRotation(250);
        LCD.displayClear();
      ........
      

      また、M5stack のボタンスイッチ GPIO番号は他の ESP-WROOM-32 ボードでは使えませんので、適宜変えるか、ボタンスイッチ関数をコメントアウトして下さい。

      今回は自分のライブラリが名前重複の恐れがあった為、全面的に見直してしまいました。
      今これをやらないと、今後多くのトラブルが予想され、発展することが不可能になった為、仕方なかったのです。
      これも私が素人であるがゆえに、今頃になって分かったことで、やはり迷惑をかけてしまうことになってしまいました。
      今までの関数名は使えず、本当に申し訳ございません。

      ただ、私自身、日々学習しているため、確実にトラブルが少ないプログラミングに進んでいると思っております。
      今後多々変更があると思いますが、従来のライブラリはそのまま残しておきますので、どうかご容赦くださいませ。
      m(_ _)m

  2. mgo-techさん、H.Wです。
    新作発表に昨夜気付き、早速模写させて頂きました。
    これまでの習作(秀作)の集大成といった感じで、素晴らしい作品に改めて敬意を表します。

    新作ライブラリーの’ESP32_mgo_tec_master’を導入後、フォントファイル指定行を適宜コメントイン&アウト、yahoo天気地域コード等を変更して、問題なく動作致しました。
    (上部に各接続状況が表示されるのはいいですね…)

    但し一点、’WiFi Connecting….’が成功した後の表示が、’WiFi Conneced!’となっており、’t’が抜けていることに気付きました。
    最初、スケッチを隈なく一覧したものの、不具合の場所が見つからなかったので、新作ライブラリー内のソースを確認したところ、
    ’message_window.cpp’の#51行に該当箇所を見つけましたので、取りあえず一報致します。
    (修正コンパイル後は、正常に’WiFi Connected!’と表示されています。)

    尚、当方でも電源アダプタ経由で消費電流を測定してみましたが、5.16Vにて0.13〜0.19Aでした。やはり、WiFiコネクトの時に消費電流が一瞬上がりますね?
    (内蔵のLipo電池駆動では15分位しか持ちません…)

    因みに、ハンドスピナー缶に組込んだ、ESP32dev kit+SSD1331&1306の組合せでは、0.06〜0.09Aでしたので、約倍ぐらいの消費電流になりますね。。。

    1. H.Wさん

      いつもご報告ありがとうございます。
      早速修正しました。
      英語だとスペルミスがなかなか気づかないもんですね。
      助かりました。
      m(_ _)m

      M5stack デフォルトのバッテリー使用はそんなもんですね。
      まぁ、このプログラムはバッテリー使用は想定しておらず、CPUフル稼働ですから仕方ありません。

      SSD1331 ってそんなに消費電流少なかったでしたっけ?
      やっぱり、ILI9341 のバックライトLED が電力消費が大きいっていうことですね。
      OLED はやっぱり省電力でイイですね。
      でも、OLEDは経年劣化の耐久性に問題があるらしいので、将来的に高寿命、省電力、低価格のものが出たらM5stackに搭載してほしいですね。
      いろいろ情報ありがとうございます。

  3. こちらこそ、脱字を指摘しておきながら、ハンドルネームの最後に余計な’h’を付けてしまい誠に申し訳ありません…

    消費電流は、やはりTFT液晶のバックライトが大半なのでしょうね?
    現在、両方並べて表示させたりしていますが、消費電流の他、視野角等の課題も含めて、早くOLED版m5stackが出てくれるといいなと私も思いました。
    (そうすれば、薄くなる分、標準搭載Lipo電池の容量も増やせて好都合ではないでしょうか?)

    確かに寿命が気になる所ですが、大画面のOLEDテレビも各社からかなり出て来ており、製品寿命も十分許容範囲には入って来てるかと思います。
    (超薄型OLEDテレビを一度見てしまうと、もう液晶には戻れませんね…)

    因みに、当方では目下、860mAhのLipo電池で駆動していますが、BME280付きでも5時間半以上の連続動作ができています。

    1. お!
      ‘h’は気付きませんでした。
      おおざっぱな性格なので・・・。

      地震、大変なことになってますね。
      ご無事で何よりです。

      OLED SSD1306 はFacebook ESP8266/ESP32環境向上委員会で報告挙がっていましたが、1年くらい稼働し続けると色あせてしまったようです。
      やはり、電子工作用途の格安 OLED では寿命が短いですね。

      私のプログラムでは電力消費が激しく、地震に弱いですね。
      災害にも強い M5stack が欲しいと思いました。
      私は電子ペーパー版の M5stack が欲しいですね。
      できれば3色のものが良いです。

      860mAh で5時間はスバラシイですね。
      スマホ並みに24時間稼働できたら最高です。
      省電力で良い情報がありましたら、お知らせいただけると有難いです。
      いつもご報告感謝感謝です。
      m(_ _)m

  4. すごい。感動致しました。傑作。
    パクらせてもらって、ウオッチバンド付けて、
    会社(中小)のwifiでつなぎました。
    正確には不明ですがバッテリー4.5時間?ぐらいでした。
    若いおねーちゃん達に欲しいと言われました。(私はおじさんです)
    節電ができれば本格的なウェアラブルになるかも。

    1. tsukapsさん

      当ブログにお越しくださり、ありがとうございます。

      ワーイ (^^)/

      とーってもウレシイお声です。
      苦労して作った甲斐がありました。

      4.5時間とは、別途バッテリーオプション追加されたみたいですね。
      デフォルトバッテリーだと15分程しか持ちません。
      このプログラムではバッテリー節約は無理で、時計表示とか、ニュース表示をスクロールしなければもうちょっと長持ちするかもしれませんね。
      今後の課題とさせていただきます。

      私自身も元気を頂きましたので、感謝感謝です。
      m(_ _)m

  5. 腕時計として使う場合、常時見ているわけではないので、スマホみたいに一定の時間で消灯、ボタン押して点灯、液晶の輝度を可変してみてはどうでしょうか?あとスリープモード?というか、お願いするわけにもいかないので、休日に自分で実験してみます。ちなみに温度関係も記事期待しています。工場内では市販の温度コントローラーってPID機能が邪魔して意外と融通効かないのです。

    1. そうですね。
      そうすればバッテリー長持ちできますね。
      ただ、自分の場合は常時点灯させておきたいので、その機能はやはり読者の方々に委ねたいと思います。
      本当は電子ペーパーに表示させたいなと思っていますが、M5Stackには無いので、省電力関連は今後の私の課題とさせていただきます。
      センサーと同時表示はもうちょっとしたら記事アップする予定です。
      いろいろご意見ありがとうございます。

  6. mgo-tecさんこんばんは。
    バックライトON/OFFでウオッチバンド付属860mAhのバッテリーで
    職場の人にモニターしてもらい実用9時間でした。
    ところで、バグかも?らしきものが、
    天気◎のところ、失敗すると×になるのだけれども、
    その後、次の更新で天気◎は表示されなくなり、
    conectedのonectが残った状態になります。
    処理が飛んじゃってる感じでありました。
    電源入れなおすと元に戻ります。
    自分で調べてなくてすいません。
    とりあえずのご連絡です。

    1. tsukapsさん

      再び動作チェックありがとうございます。

      9時間はスバラシイです。
      これで、Brightness を暗くするなり、ボタンで消灯すればもっと伸びそうですね。

      さて、バグの件ですが、まず、お聞きしたいのは、Arduino-ESP32 のバージョンはいつのものでしょうか?
      Commits on Jun 27, 2018版以降の最新版は、動作不安定です。

      私は、現時点最新版、Commits on Jul 1, 2018 で試した結果は以下の通りでした。
      1).1回目アクセスポイント(AP)接続成功後、ルーターの電源をOFFにすると、AP接続失敗メッセージは正常に出る。
      2).その後、ルーターの電源をONにすると、AP接続成功し、NTP接続成功するが、天気予報接続×のまま、Newsメッセージが出ない。
      その状態が延々と続いて、2度とニュースGetできない。

      それで、Arduino-ESP32 を Commits on Jun 24, 2018版に戻しました。
      すると、今まで通り正常に接続成功しました。
      旧バージョンの Arduino-ESP32 に戻す方法は以下の記事を参照してください。
      旧バージョン Arduino – ESP32 のインストール方法

      2018/6/28~7/1版のArduino-ESP32は大幅に内容が更新され、過去のスケッチでエラーがでることが多く、動作が安定していません。
      I2Cインターフェイス等もいろいろ問題ありで、安定するまでしばらくインストールしない方が良いです。

      以上、ご確認ください。
      tsukapsさんのコメントが無ければ、Wi-Fiの不具合までは気付きませんでした。
      ありがとうございます。
      m(_ _)m

  7. そういうことでしたか。
    心当たりあります。更新したばかりでした。
    旧バージョンでやってみます。
    ありがとうございました。

  8. mgo-techさんのアドバイス通り上手くいきました。
    ちょっとだけ注意事項があるのですが。
    ライブラリを旧バージョンに戻してコンパイルしても、
    全体をリビルドさせないと戻らない事です。
    Arduino IDEが何か変更しないとコンパイル済オブジェクトの変更を省略する仕様みたい?だから
    mgo-techさんレベルでは既知ではあると思いますが一応コメントしました。

    1. tsukapsさん

      スミマセン。
      説明が足りませんでした。
      全体ビルドのことでした。
      当ブログでは、Arduino-ESP32 に関して最新版にしたり、旧バージョンに戻す場合には、Arduino-ESP32 の ZIPファイルごとダウンロードして、再インストールするように説明しているつもりです。
      ライブラリだけだとうまく更新されないためです。
      分かりにくくて申し訳ありませんでした。

      最新版のトラブル原因がようやく突き止められつつあります。
      もうしばらくしたら安定して動作しそうな気がします。

  9. mgo-tec 様

    新作発表をいつも楽しみにしております。
    今回の記事は、こんな事までできるのかと、素晴らしい作品に改めて感動しています。
    そこで提案があります。
    Yahoo! ニュースをもう一行追加していただけませんでしょうか。
    トピックス主要は固定とし、スポーツ・IT・エンタメを選択とする。
    4記事同時スクロールと合体したようなさらに素晴らしい作品になると思うのですが…。
    ご検討の程よろしくお願いいたします。

    1. juchangさん

      いつも本当にありがとうございます。
      m(_ _)m
      確かに、もう一行欲しいところですね。
      私もそう思いました。
      今、進行中の作業の合間を縫って作っています。
      もう、殆ど出来上がっておりますが、自分で作ったプログラムが意外と面倒くさくて、他人が修正するのは難しいかも知れないと改めて思いました。
      もっと簡単なプログラムにしたいなと思っている次第ですが、今は手を入れる暇が無く、なかなか難しいです。
      ということで、もうちょっとお待ちください。
      できましたら、このコメントでお知らせします。

      1. juchangさん

        お待たせしましたが、ついにできました。
        以下の記事を参照してください。
        M5Stack ( ESP32 ) のボタンで記事を選択できる Yahoo News 電光掲示板 天気予報 Watch
        Yahoo ニュースをもう一行追加して、しかも、ボタンでセレクトボックスを表示して、ニュース記事を自由に選択できるようにしました。
        今回の件で、ライブラリを大幅変更し、かなり使いやすくなったかと思います。
        私自身もとても勉強になりました。
        ぜひ使ってみて下さい。(^^)

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください