M5Stack で、Wi-Fi 接続して、Yahoo! ニュースを４記事同時スクロールしてみた

SPIFFS用 Arduino IDE スケッチ入力

次に、SPIFFS 用スケッチを紹介します。

【ソースコード】 (※無保証　※PCの場合、ダブルクリックすればコード全体を選択できます)

#include "ESP32_LCD_ILI9341_SPI.h"
#include "ESP32_Button_Switch.h"
#include "ESP32_SPIFFS_ShinonomeFNT.h"
#include "ESP32_SPIFFS_UTF8toSJIS.h"
#include "ESP32_WebGet.h"
#include "TimeLib.h" //Use 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_LEDpin = 32;
 
const char* ssid = "xxxxxxxx"; //ご自分のルーターのSSIDに書き換えてください
const char* password = "xxxxxxxx"; //ご自分のルーターのパスワードに書き換えてください
 
const char* UTF8SJIS_file = "/font/Utf8Sjis.tbl"; //UTF8 Shift_JIS 変換テーブルファイル名を記載しておく
const char* Shino_Zen_Font_file = "/font/shnmk16.bdf"; //全角フォントファイル名を定義
const char* Shino_Half_Font_file = "/font/shnm8x16.bdf"; //半角フォントファイル名を定義
 
ESP32_LCD_ILI9341_SPI LCD(sck, miso, mosi, cs, dc, rst, LCD_LEDpin);
ESP32_SPIFFS_ShinonomeFNT SFR;
ESP32_Button_Switch BTN;
ESP32_WebGet _EWG;
 
//------文字表示系　引数初期化------------
const uint8_t MAX_TXT_NUM = 4; //ニュース表示最大数
uint8_t max_txt = 40; //1x1倍 最大文字表示数
uint8_t news_sj_txt[ MAX_TXT_NUM ][ 400 ] = {}; //Shift_JIS文字コード格納
uint16_t news_sj_length[ MAX_TXT_NUM ];
uint8_t news_font_buf[ MAX_TXT_NUM ][2][16] = {}; //16x16フォント全角１文字格納バッファ
uint8_t Scl_Buf[ MAX_TXT_NUM ][ 16 ][ 640 ] = {}; //文字列スクロールpixelバッファ
//red (0-31), green (0-63), blue (0-31)
uint8_t red = 31, green = 63, blue = 31;
uint8_t V_size = 3, H_size = 3; //V_size(垂直方向文字サイズ)、H_size(水平方向サイズ)
uint16_t X0 = 0, Y0 = 0;
int32_t scl_speed = 0; //スクロール速度（0が最速)
bool font_read_ok[ MAX_TXT_NUM ] = { false, false, false, false };
bool scl_pause = true;
//-----Yahoo記事取得　引数初期化------------
const char *yahoo_host = "news.yahoo.co.jp";
uint32_t NewsGetLastTime = 0;
bool News_first_get = true;
bool NewsGet = false;
int8_t Scl_Cnt[MAX_TXT_NUM] = {}; //文字スクロールカウント
uint16_t Fnt_Cnt[MAX_TXT_NUM] = {}; //フォント半角１文字スクロールカウント
uint8_t Zen_or_Han[MAX_TXT_NUM] = {}; //フォント読み取り時に関数から返ってきた全角または半角かの数値を格納
//-----ボタンスイッチ　引数初期化-----------
const uint8_t buttonA_GPIO = 39;
const uint8_t buttonB_GPIO = 38;
const uint8_t buttonC_GPIO = 37;
uint8_t btn_stateA = _Release;
uint8_t btn_stateB = _Release;
uint8_t btn_stateC = _Release;
boolean V_size_down = false;
 
//***********セットアップ****************************
void setup() {
  Serial.begin(115200);
  delay(1000);
  pinMode(buttonA_GPIO, INPUT); //GPIO #39 は内部プルアップ無し
  pinMode(buttonB_GPIO, INPUT); //GPIO #38 は内部プルアップ無し
  pinMode(buttonC_GPIO, INPUT); //GPIO #37 は内部プルアップ無し
 
  SFR.SPIFFS_Shinonome_Init3F(UTF8SJIS_file, Shino_Half_Font_file, Shino_Zen_Font_file); //ライブラリ初期化。3ファイル同時に開く
 
  LCD.ILI9341_Init(true, 40000000);
  LCD.Display_Clear();
  LCD.Brightness(255); //LCD LED Full brightness
  //++++++++++++++++++++++++++++++++++++++++++
  String test_str[ MAX_TXT_NUM ] ;
  test_str[0] = "Ｍ５ｓｔａｃｋ";
  test_str[1] = "やふ～にゅ～す";
  test_str[2] = "電光掲示板";
  test_str[3] = "by SPIFFSフラッシュ";
 
  uint8_t test_buf[ MAX_TXT_NUM ][ 20 ][ 16 ] = {};
  uint16_t test_sj_len[ MAX_TXT_NUM ] = {};
  uint8_t num = 0; //文字列番号
 
  for( num = 0; num < MAX_TXT_NUM; num++ ){
    test_sj_len[ num ] = SFR.StrDirect_ShinoFNT_readALL(test_str[ num ], test_buf[ num ]);
    Serial.printf("test_sj_len = %d\r\n", test_sj_len[ num ]);
  }
  num = 0, X0 = 48;
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 3, test_sj_len[ num ], X0, num * 48, red, green, blue, test_buf[ num ]);
  num = 1, X0 = 48;
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 3, test_sj_len[ num ], X0, num * 48, red, green, blue, test_buf[ num ]);
  num = 2, X0 = 80;
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 3, test_sj_len[ num ], X0, num * 48, red, green, blue, test_buf[ num ]);
  num = 3, X0 = 8;
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 3, test_sj_len[ num ], X0, num * 48, red, green, blue, test_buf[ num ]);
  X0 = 0;
  for( int i = 0; i < 256; i++){
    LCD.Brightness(i);
    delay(10);
  }
  //--------メッセージウィンドウ表示---------
  red = 31, green = 63, blue = 31;
  LCD.Display_Clear(0, 4 * 48, 319, 239);
  LCD.Draw_Rectangle_Line(0, 4 * 48, 319, 239, red, green, blue);
  red = 31, green = 0, blue = 0;
  Message(" WiFi Connecting...");
  //--------Wi-Fiアクセスポイント接続---------
  _EWG.EWG_AP_Connect(ssid, password); //Wi-Fi ルーターと接続
  delay(1000);
  _EWG.EWG_NTP_TimeLib_init(9, "time.windows.com"); //NTPサーバー取得初期化
  _EWG.NTP_OtherServerSelect(9); //NTPサーバーと接続できなかった場合、他のNTPサーバーと接続できるか試す関数
 
  red = 31, green = 63, blue = 31;
  LCD.Display_Clear(0, 4 * 48, 319, 239);
  LCD.Draw_Rectangle_Line(0, 4 * 48, 319, 239, red, green, blue);
 
  //ニュース記事文字列のセットアップ
  num = 0, red = 31, green = 63, blue = 31;
  LCD.Scrolle_Font_SetUp(num, max_txt, red, green, blue);
  num = 1, red = 0, green = 63, blue = 0;
  LCD.Scrolle_Font_SetUp(num, max_txt, red, green, blue);
  num = 2, red = 31, green = 0, blue = 31;
  LCD.Scrolle_Font_SetUp(num, max_txt, red, green, blue);
  num = 3, red = 31, green = 63, blue = 0;
  LCD.Scrolle_Font_SetUp(num, max_txt, red, green, blue);
 
  Serial.printf("Free Heap Size = %d\r\n", esp_get_free_heap_size());
 
  TaskHandle_t th; //マルチタスクハンドル定義
  xTaskCreatePinnedToCore(Task1, "Task1", 8192, NULL, 5, &th, 0); //マルチタスク起動
}
//***********メインループ****************************
void loop() {
  Blink_Wait_Message(); //News記事取得中、待機メッセージ表示
  uint8_t num = 0; //文字列番号
  for(num = 0; num < MAX_TXT_NUM; num++){
    X0 = 0, Y0 = num * 48;
    if( scl_pause == false ){
      if( LCD.Scrolle_Inc_HVsizeUp_8x16_Font_DisplayOut(num, Zen_or_Han[num], scl_speed, H_size, V_size, &Scl_Cnt[num], news_sj_length[num], X0, Y0, news_font_buf[num], Scl_Buf[num]) ){
        font_read_ok[ num ] = true;
      }
    }
  }
  if( V_size_down == true ) {
    LCD.Display_Clear( 0, 0, 319, 4 * 48 - 1);
    V_size_down = false;
  }
}
//************ マルチタスクループ ****************************
void Task1(void *pvParameters) {
  while(1){
    uint8_t num = 0; //文字列番号
    YahooNewsGET(60000); //60秒毎に記事取得
 
    for( num = 0; num < MAX_TXT_NUM; num++ ){
      if( font_read_ok[num] == true ){
        Zen_or_Han[num] = SFR.Sjis_inc_FntRead(news_sj_txt[num], news_sj_length[num], &Fnt_Cnt[num], news_font_buf[num]);
        font_read_ok[num] = false;
      }
    }
    button_action();
    delay(1); //most important
  }
}
//******** ニュース記事取得中、待機メッセージ表示*******
void Message(String str){
  uint8_t f_buf[ 40 ][ 16 ] = {};
  uint16_t len = SFR.StrDirect_ShinoFNT_readALL(str, f_buf);
  X0 = 1, Y0 = 4 * 48 + 1;
  LCD.Display_Clear(1, Y0 + 1, 318, 238);
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 2, len, X0, Y0 + 10, red, green, blue, f_buf);
}
//******** ニュース記事取得中、待機メッセージ表示*******
void Blink_Wait_Message(){
  if( scl_pause == true ){
    uint8_t f_buf[ 40 ][ 16 ] = {};
    uint16_t len = SFR.StrDirect_ShinoFNT_readALL(" News Getting Wait", f_buf);
    X0 = 1, Y0 = 4 * 48 + 1;
    red = 31, green = 0, blue = 0;
    while(1){
      if( scl_pause == false ){
        char web_get_time[6];
        sprintf(web_get_time, "%02d:%02d", hour(), minute()); //ゼロを空白で埋める場合は%2dとする
        String str = " Get OK! " + String( web_get_time );
        len = SFR.StrDirect_ShinoFNT_readALL(str, f_buf);
        red = 0, green = 63, blue = 0;
        LCD.HVsizeUp_8x16_Font_DisplayOut(2, 2, len, X0, Y0 + 10, red, green, blue, f_buf);
        break;
      }
      red = 31, green = 0, blue = 0;
      LCD.HVsizeUp_8x16_Font_DisplayOut(2, 2, len, X0, Y0 + 10, red, green, blue, f_buf);
      delay(300);
      LCD.Display_Clear(1, Y0 + 1, 318, 238);
      delay(300);
    }
  }
}
//************** Yahoo RSS ニュースガジェット ************************
void YahooNewsGET(uint32_t get_interval){
  if( (News_first_get == true) || ((millis() - NewsGetLastTime) > get_interval) ){
    scl_pause = true;
    String news_str;
    uint8_t num = 0; //文字列番号
    num = 0;
    news_str = WebGet(yahoo_host, "/rss/topics/top-picks.xml");
    NewsStrFontConv( num, news_str );
    num = 1;
    news_str = WebGet(yahoo_host, "/rss/topics/sports.xml");
    NewsStrFontConv( num, news_str );
    num = 2;
    news_str = WebGet(yahoo_host, "/rss/topics/it.xml");
    NewsStrFontConv( num, news_str );
    num = 3;
    news_str = WebGet(yahoo_host, "/rss/topics/entertainment.xml");
    NewsStrFontConv( num, news_str );
 
    News_first_get = false;
    NewsGet = true;
    scl_pause = false;
    NewsGetLastTime = millis();
  }
}
//**************************************
void NewsStrFontConv(uint8_t num, String news_str){
  Fnt_Cnt[num] = 0;
  news_sj_length[num] = SFR.UTF8toSJIS_convert(news_str, news_sj_txt[num]);
  Serial.printf("news_sj_length[%d] = %d\r\n", num, news_sj_length[num]);
  Zen_or_Han[num] = SFR.Sjis_inc_FntRead(news_sj_txt[num], news_sj_length[num], &Fnt_Cnt[num], news_font_buf[num]);
  font_read_ok[num] = false;
  Scl_Cnt[num] = 0;
}
//**************************************
String WebGet(const char *host, String target_url){
  char web_get_time[6];
  sprintf(web_get_time, "%02d:%02d", hour(), minute()); //ゼロを空白で埋める場合は%2dとする
  String news_str = "◆ " + String(web_get_time) + " ";
  news_str += _EWG.EWG_https_Web_Get(host, target_url, '\n', "</rss>", "<title>", "</title>", "◆ ");
  Serial.printf("News Get = %s\r\n", news_str.c_str());
  return news_str;
}
//****************************************
void button_action(){
  btn_stateA = BTN.Button(0, buttonA_GPIO, true, 10, 300);
  switch( btn_stateA ){
    case _MomentPress:
      Serial.println("Button A Moment Press");
      V_size--;
      if(V_size < 1) V_size = 1;
      Serial.printf("V_size =%d\r\n", V_size);
      V_size_down = true;
      break;
    case _ContPress:
      Serial.println("-------------Button A Cont Press");
      V_size++;
      if(V_size > 3) V_size = 3;
      Serial.printf("V_size =%d\r\n", V_size);
      break;
    default:
      break;
  }
 
  btn_stateB = BTN.Button(1, buttonB_GPIO, true, 10, 300);
  switch( btn_stateB ){
    case _MomentPress:
      Serial.println("Button B Moment Press");
      H_size--;
      if(H_size < 1) H_size = 1;
      Serial.printf("H_size =%d\r\n", H_size);
      break;
    case _ContPress:
      Serial.println("-------------Button B Cont Press");
      H_size++;
      if(H_size > 15) H_size = 15;
      Serial.printf("H_size =%d\r\n", H_size);
      break;
    default:
      break;
  }
 
  btn_stateC = BTN.Button(2, buttonC_GPIO, true, 10, 300);
  switch( btn_stateC ){
    case _MomentPress:
      Serial.println("Button C Moment Press");
      scl_speed++;
      if(scl_speed > 100) scl_speed = 100;
      Serial.printf("scl_speed =%d\r\n", scl_speed);
      break;
    case _ContPress:
      Serial.println("-------------Button C Cont Press");
      scl_speed--;
      if(scl_speed < 0) scl_speed = 0;
      Serial.printf("scl_speed =%d\r\n", scl_speed);
      break;
    default:
      break;
  }
}

【解説】

殆ど micro SD 用と同じですが、SPIFFS の場合は多少マルチタスクが有効になるので、LCD 画面表示はメインループで制御し、フォント読み込みは Task1 で動作させています。
これによって、読み取りの遅い SPIFFS でもある程度スムースにスクロールさせることができます。

また、133行目のメッセージ点滅関数では、173-196行にあるように別途 while ループで動かしているのに、その間、別タスクの Task1 でニュース記事をGET できて、フォント変換も行うことができています。

ただし、文字スクロール最中に記事の一括フォント変換をやろうとすると、どうしてもうまくいきませんでした。

ですから、先でも述べたように、SPIFFS でも記事を取得している間はスクロールを停止するようにしました。

コンパイル書き込み実行

では、ご自分の Wi-Fi ルーターを起動し、しばらく経ってから、Arduino IDE でそれぞれコンパイル書き込み実行してみてください。
シリアルモニタも 115200 bps で起動しておくと、細かいログが確認できます。

あとは、最初に紹介した動画のように表示されればＯＫです。

ボタン操作は前回の記事と同様です。
長押しは0.3秒以上です。

【A button】
長押し → 垂直方向サイズアップ
瞬時押し→垂直方向サイズダウン

【B button】
長押し → 水平方向サイズアップ
瞬時押し→水平方向サイズダウン

【C button】
長押し →スクロール速度アップ
瞬時押し→スクロール速度ダウン

編集後記

えらい疲れ果てました・・・。

一旦プログラムを組み始めると、あれこれ修正する点が出てきて、止め処が無くなります。

今回、M5Stack の LCD が VSPI 接続されていたのは残念だったのですが、それを割り切って使えばあまり気にせずに使えることが分かりました。
その分、GPIO が節約できるので、利点もあるということです。

でも、この情報量の多いディスプレイの画面一杯に４列の文字スクロールは、以前ならば無理だと思っていましたが、今回は更に倍角でもスクロールできるようになったことは収穫です。
多少なりともプログラミング力が上がったのかな？　と思い込んでみました。

今回も素人ゆえの過ちや無駄が多いかもしれません。
もし、何かありましたらコメント投稿等でご連絡いただけると助かります。

今回はここまでです。

ではまた・・・。