M5Stack に４か国の Twitter トレンドを切り替えて表示させてみた

Twitter APIs のキーを入手しておく

Twitter APIs にアクセスし、以下の鍵を取得しておきます。

Consumer Key ( API Key )
Consumer Secret ( API Secret )
Access Token
Access Token Secret

このキーの入手方法は以下の記事を参照してください。

Twitter API から Arduino – ESP32 を使ってトレンドツイートを取得してみた

M5Stack ( ESP32 ) で日本語フォントをディスプレイに表示できるように準備しておく

以下の記事を参照して、事前に M5Stack の TFT LCD ( 液晶ディスプレイ)に、日本語漢字の東雲フォントを表示できるようにしておいてください。
記事の後半の micro SD カード用のものをインストールしておいてください。

ただし、ESP32_LCD_ILI9341_SPI ライブラリは、beta ver 1.23 に更新しました。
M5Stack を縦置きにしても文字表示できる関数を追加しています。
古いライブラリでは使えないので、フォルダごと削除してから再インストールしてください。

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

使用するライブラリ

以下の自作ライブラリのインストールをチェックしてください。

自作ライブラリ ESP32_TwitterAPI も今回バージョンアップしました。
その他、以前の記事と重複しているところもあります。

なお、自作ライブラリは基本的に素人コードですから、誤りや無駄が多いかもしれません。
基本的に無保証ですが、何か不具合があればコメント投稿等でご連絡いただけると助かります。

GitHub からダウンロードした、ZIP ファイルの Arduino IDE のインストール方法は以下の記事を参照してください。
※古いライブラリは必ずフォルダごと削除してから再インストールしてください。
GitHubにある ZIP形式ライブラリ のインストール方法 ( Arduino IDE )

ESP32_TwitterAPI ライブラリ

2018/05/05現在で、beta ver 1.1 になっていますので、これを使って下さい。
ルートCA 証明書無しでもアクセスできるように修正しました。

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

このライブラリを使った記事はこちらにもありますので参照してみてください。

SP32_LCD_ILI9341_SPI

先ほど述べたように、beta ver 1.23 を使って下さい。
M5Stack の LCD ILI9341 を SPI で制御する自作ライブラリです。

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

ESP32_SD_UTF8toSJIS

beta ver 1.22

文字コードUTF-8 を Shift_JIS に変換する自作ライブラリで、変換テーブルをmicro SD から読み込みます。
Utf8Sjis.tbl ファイルが必要です。

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

（UTF-8 から Shift_JIS 変換についてはこちらの記事参照）

ESP32_SD_ShinonomeFNT

beta ver 1.22

フリーの日本語16×16 pixel 東雲フォントをmicro SD から取得する自作ライブラリです。

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

ESP32_WebGet

beta ver 1.12

NTPサーバーから時刻を取得したりするライブラリです。

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

Time ライブラリ

Arduino IDE 標準の Time ライブラリです。

https://github.com/PaulStoffregen/Time

ESP32_Button_Switch

beta ver 1.0

ボタンスイッチの自作ライブラリです。

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

スケッチの入力

では、Arduino IDE にスケッチを入力していきます。

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

/* Copyright (c) 2018 Mgo-tec. All rights reserved.
 * The MIT License (MIT)
 * https://opensource.org/licenses/mit-license.php
*/
#include "ESP32_LCD_ILI9341_SPI.h" //beta ver 1.23-
#include "ESP32_Button_Switch.h"
#include "ESP32_SD_ShinonomeFNT.h" //beta ver 1.22-
#include "ESP32_SD_UTF8toSJIS.h" //beta ver 1.22-
#include "ESP32_WebGet.h" //beta ver 1.12-
#include "TimeLib.h" //Use Arduino time library ver1.5-
#include "ESP32_TwitterAPI.h" //beta ver 1.1-

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 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_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_SD_ShinonomeFNT SFR(CS_SD, 40000000); //SPI 24MHz
ESP32_Button_Switch BTN;
ESP32_WebGet _EWG;
ESP32_TwitterAPI ETwit;

//---------- Twitter APIs 関連初期化 --------------------------
const char consumer_key[]    = "xxxxxxxx";
const char consumer_secret[] = "xxxxxxxxxxxxxxxxxxxx";
const char access_token[]    = "xxxxxxxxxxxxxxxxxxxx";
const char access_secret[]   = "xxxxxxxxxxxx";
 
//Twitter api root CA
const char* root_ca = "";

const char *twit_host = "api.twitter.com";
const char *twit_URL = "https://api.twitter.com/1.1/trends/place.json";
const char *twit_URI = "/1.1/trends/place.json";
const int httpsPort = 443;

const uint8_t WoeID_Num_Max = 4;
String woeid[ WoeID_Num_Max ] = { "23424856", "1", "23424977" , "23424975" }; //WOEID ( Japan )
uint8_t woeid_num = 0;
String country_str[ WoeID_Num_Max ] = { "日本", "地球", "USA", "England" };

//----------- 文字表示関連初期化　------------------------------
const uint8_t MAX_TXT_NUM = 10; //ディスプレイに表示する最大文字列数
const uint8_t Get_MaxData = 10; //Twitter APIs から取得するデータ数
const uint8_t MaxTxt = 100; //トレンドツイートテキストの半角文字最大数
String utf8_str[ MAX_TXT_NUM ];
uint8_t font_buf[ MAX_TXT_NUM ][ MaxTxt ][ 16 ] = {}; //東雲フォント格納
uint8_t sj_txt[ MAX_TXT_NUM ][ MaxTxt ] = {}; //Shift_JISコード格納
uint16_t sj_length[ MAX_TXT_NUM ] = {}; //Shift_JISコードの長さ
uint32_t LastTime = 0;
uint8_t disp_color[ MAX_TXT_NUM ][ 3 ] = {}; //トレンドデータ毎の文字色
uint8_t H_size = 2, V_size = 2; //V_size(垂直方向文字サイズ)、H_size(水平方向サイズ)
uint16_t X0 = 0, Y0 = 0;

//-----ボタンスイッチ　引数初期化-----------
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;
uint8_t btn_c_cnt = 0;

//**********セットアップ関数************************
void setup(){
  LCD.Brightness(0); //LCD LED Full brightness
  Serial.begin(115200);
  delay(1000);

  pinMode(buttonA_GPIO, INPUT); //GPIO #39 は内部プルアップ無し
  pinMode(buttonB_GPIO, INPUT); //GPIO #38 は内部プルアップ無し
  pinMode(buttonC_GPIO, INPUT); //GPIO #37 は内部プルアップ無し

  SFR.SD_Shinonome_Init3F(UTF8SJIS_file, Shino_Half_Font_file, Shino_Zen_Font_file); //ライブラリ初期化。3ファイル同時に開く

  LCD.ILI9341_Init(false, 40000000); //microSDを使う場合、必ず false にする
  LCD.Display_Clear();
  LCD.Disp_Rotation( 1 ); //0: normal, 1=縦置き

  //-------------オープニング画面--------------------------------
  String test_str[ MAX_TXT_NUM ] ;
  test_str[0] = "Ｍ５ｓｔａｃｋ";
  test_str[1] = "Twitter Trend";
  test_str[2] = "Best １０";
  test_str[3] = "by microSD";

  uint8_t test_buf[ 4 ][ 14 ][ 16 ] = {};
  uint16_t test_sj_len[ 4 ] = {};
  uint8_t num = 0; //文字列番号
  uint8_t red = 31, green = 63, blue = 5;

  for( num = 0; num < 4; 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 = 0;
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 5, test_sj_len[ num ], X0, num * 80, red, green, blue, test_buf[ num ]);
  num = 1, X0 = 8;
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 5, test_sj_len[ num ], X0, num * 80, red, green, blue, test_buf[ num ]);
  num = 2, X0 = 48;
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 5, test_sj_len[ num ], X0, num * 80, red, green, blue, test_buf[ num ]);
  num = 3, X0 = 40;
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 5, test_sj_len[ num ], X0, num * 80, red, green, blue, test_buf[ num ]);
  X0 = 0;
  for( int i = 0; i < 256; i++){
    LCD.Brightness(i);
    delay(10);
  }

  //--------Wi-Fiアクセスポイント接続---------
  Message("Wi-Fi Connect..", 31, 0, 0);
  Serial.println();
  Serial.print(F("Connecting to "));
  Serial.println(ssid);

  _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サーバーと接続できるか試す関数
  delay(1000);

  //-------Twitter 取得--------------------
  Message("Getting Tweet...", 31, 0, 0);

  ETwit.TwitterAPI_begin(twit_host);
  ETwit.TwitterAPI_Key_Set(consumer_key, consumer_secret, access_token, access_secret);

  Gradu_Color_Set( "blue" );
  Trend_Tweet_Get();

  LastTime = millis();
}
//**********メインループ**********************
void loop(){
  if(millis() - LastTime > 60000){
    Message("Getting Tweet...", 31, 0, 0);
    Trend_Tweet_Get();
  }
  button_action();
}
//*******************************************
void Trend_Tweet_Get(){
  if( ETwit.TrendTweet_Get(root_ca, twit_URL, twit_URI, woeid[ woeid_num ], Get_MaxData, utf8_str) == false ){ //ツイート取得
    Display_Failed();
  }else{
    uint8_t num = 0; //文字列番号
    LCD.Display_Clear();

    for( num = 0; num < MAX_TXT_NUM; num++ ){
      sj_length[ num ] = SFR.SjisShinonomeFNTread_ALL(utf8_str[ num ], sj_txt[ num ], font_buf[ num ]);

      if(sj_length[ num ] > 15 ){
        H_size = 1;
      }else{
        H_size = 2;
      }

      X0 = 0, Y0 = num * 32;
      LCD.HVsizeUp_8x16_Font_DisplayOut(H_size, V_size, sj_length[ num ], X0, Y0, disp_color[ num ][ 0 ], disp_color[ num ][ 1 ], disp_color[ num ][ 2 ], font_buf[ num ]);
    }
  }

  LastTime = millis();
}
//*****************************************
void Gradu_Color_Set( String col_str ){
  uint8_t sel_col_0 = 0, sel_col_1 = 0, sel_col_2 = 0;
  uint8_t col_max0 = 31, col_max1 = 63,col_max2 = 31;
  uint8_t num;
  double deg = 0, col_deg1 = 0, col_deg2 = 0;

  if( col_str == "red" ) {
    sel_col_0 = 0, sel_col_1 = 1, sel_col_2 = 2;
    col_max0 = 31, col_max1 = 63, col_max2 = 31;
  }else if( col_str == "green" ) {
    sel_col_0 = 1, sel_col_1 = 0, sel_col_2 = 2;
    col_max0 = 63, col_max1 = 31, col_max2 = 31;
  }else if( col_str == "blue" ) {
    sel_col_0 = 2, sel_col_1 = 1, sel_col_2 = 0;
    col_max0 = 31, col_max1 = 63, col_max2 = 31;
  }

  col_deg1 = (double)col_max1 / 10.0;
  col_deg2 = (double)col_max2 / 10.0;

  for( num = 0; num < MAX_TXT_NUM; num++ ){
    disp_color[ num ][ sel_col_0 ] = col_max0;
    deg = round( pow( 1.3, (double)num ) - 1.0 );
    //if( deg < 1.0 ) deg = 1.0;
    disp_color[ num ][ sel_col_1 ] = col_max1 - round( col_deg1 * deg );
    disp_color[ num ][ sel_col_2 ] = col_max2 - round( col_deg2 * deg );
  }
}
//******** ニュース記事取得中、待機メッセージ表示*******
void Message( String str , uint8_t red, uint8_t green, uint8_t blue){
  uint8_t f_buf[ str.length() + 1 ][ 16 ] = {};
  uint16_t len = SFR.StrDirect_ShinoFNT_readALL(str, f_buf);
  if( len >14 ) len = 14;
  X0 = 0, Y0 = 136;
  LCD.Display_Clear(X0, Y0, 239, Y0 + 32 * 2);
  LCD.HVsizeUp_8x16_Font_DisplayOut(2, 2, len, X0 + 8, Y0 + 15, red, green, blue, f_buf);
  LCD.Draw_Rectangle_Line(X0, Y0, 239, Y0 + 32 * 2, 31, 63, 31);
}
//******************************************
void Display_Failed(){
  uint8_t num = 0; //文字列番号
  for( num = 0; num < MAX_TXT_NUM; num++ ){
    sj_length[ num ] = 0;
  }
  sj_length[0] = SFR.SjisShinonomeFNTread_ALL(utf8_str[0], sj_txt[0], font_buf[0]);
  LCD.Display_Clear();
}
//****************************************
void button_action(){
  btn_stateA = BTN.Button(0, buttonA_GPIO, true, 10, 500);
  if( btn_stateA == _MomentPress ){
    Serial.println("Button A Moment Press");
    Message( country_str[ woeid_num ] + " Get", 31, 0, 0);
    Trend_Tweet_Get();
  }

  btn_stateB = BTN.Button(1, buttonB_GPIO, true, 10, 500);
  if( btn_stateB == _MomentPress ){
    Serial.println("Button B Moment Press");
    woeid_num++;
    if( woeid_num >= WoeID_Num_Max ) woeid_num = 0;
    Message( country_str[ woeid_num ] + " Get", 31, 0, 0);
    Trend_Tweet_Get();
  }

  btn_stateC = BTN.Button(2, buttonC_GPIO, true, 10, 500);
  if( btn_stateC == _MomentPress ){
    Serial.println("Button C Press");
    btn_c_cnt++;
    if(btn_c_cnt > 2) btn_c_cnt = 0;
    String col_str = "";
    uint8_t red = 31, green = 63, blue = 31;
    switch( btn_c_cnt ){
      case 0:
        col_str = "blue";
        red = 0, green = 31, blue = 31;
        break;
      case 1:
        col_str = "red";
        red = 31, green = 0, blue = 0;
        break;
      case 2:
        col_str = "green";
        red = 0, green = 63, blue = 01;
        break;
      default:
        break;
    }
    Gradu_Color_Set( col_str );
    Message( col_str, red, green, blue );
    Trend_Tweet_Get();
  }
}

【解説】

過去の記事と重複しているところは説明を省略します。

●23-24行：
ご自分のルーターの SSID とパスワードに書き換えてください。

●34行：
自作ライブラリ ESP32_TwitterAPI のクラス名を定義しています。
好きな名前にすることができます。

●37-54行：
Twitter APIs 関連のパラメーターを定義します。
37-40行は、ご自分のTwitter APIs アカウントで取得したキーをそれぞれ入力してください。
43行は無くても良いのですが、Twitter APIs のルート証明書を入れたい場合は入力します。
ただ、その分、メモリを圧迫しますので、ここでは無しにしています。

●50-53行：
トレンドデータを取得する地域を選択できるように複数定義します。
ご自分の取得したい地域に変更してみてください。
WoeID の調べ方はこちらを参照してください。

●64行：
文字色をボタンスイッチで切り替える為の配列

●91行：
ESP32_LCD_ILI9341_SPI beta ver 1.23 で新たに追加した関数です。
1 にすると縦置き対応になります。

●138-139行：
ここでTwitter APIs のキーを設定します。

●141行：
文字色にグラデーションっぽくする効果を出す関数です。
179-206行で関数化しています。

●142行：
ここで Twitter APIs からトレンドデータを取得しています。
155-177行で関数化しています。

●147-153行：
メインループです。
60秒毎にトレンドツイートを取得しています。
ボタン操作は、227-271行で関数化しています。

●155-177行：
Twitter APIs からトレンドデータを取得して、ディスプレイに表示させています。
文字量が半角１５文字以上になった場合は、文字幅を１にして３０文字まで表示できるようにしています。

●179-206行：
トレンドツイート文字列を１０列表示させるときに、色を１行ずつグラデーションする効果をつけています。
老いた頭を振り絞ってアルゴリズムを考えてみました。
イマイチ効率が悪いし、あまり良い効果ではないかも知れませんが、個人的には満足しています。

●208-216行：
メッセージウィンドウを表示させています。
半角14文字しか表示できません。

●218-225行：
文字列が取得できなかった場合のエラー表示ですが、今までエラーが出たことが無いので、ちゃんと動作するか分かりません。

●227-271行：
ボタン操作に関する関数です。
Ａボタンを押すと、トレンドツイートを取得します。
Ｂボタンを押すと、地域を変更します。
Ｃボタンを押すと、文字色を変更します。
今回は長押し対応はやめました。

コンパイル書き込み実行

では、Wi-Fi環境を起動し、インターネットに接続できるようにして、Arduino IDE でコンパイル書き込み実行してみてください。

最初に紹介した動画のようになっていればＯＫです。
シリアルモニターを 115200bps で起動すると、詳細なログを見ることが出来ます。
アラビア語も表示されるのでぜひ見てみて下さい。

下図の様に、OSが対応していないフォントは表示されません。

当然、M5Stack の Shift_JIS コードで対応できるのは日本語と英語のみです。

編集後記

いかがでしょうか？

今回は個人的に良い出来に仕上がりました。
最新の情報が一目で分かって、パソコンやスマホで見るよりも便利です。
地域が「地球」というものを表示できるというのは、改めてツイッターというものの偉大さを感じてしまいました。

そして、この M5Stack は micro SD カードスロットと、ボタン、LCD が一体となっているところは、プログラミングがとても捗ります。
最初から作る楽しみは無いのですが、プログラミングする楽しさが倍増ですね。
自分が作り貯めておいたライブラリがいろいろ使えて面白いように動いてくれます。

ということで、今回はここまでですが、近々Google Home や Amazon ECHO などを使ったプログラミングもしてみようと思っています。

ではまた・・・。