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

記事公開日:2018年10月8日


スポンサーリンク

Arduino – ESP32 をインストールしておく

Arduino IDE は ver 1.8.6 で動作確認しています。
Arduino core for the ESP32 ( 以下 Arduino – ESP32 )は、Stable版 1.0.0 で動作確認しています。
インストール方法は以下の記事を参照してください。

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

日本語東雲フォントを micro SDHC カードに保存しておく

日本語フリービットマップフォントの東雲フォントと UTF8→Shift_JIS 変換テーブルファイルを micro SDHC カード に保存しておきます。
以下の記事を参照して、micro SDHC カードに /font/ フォルダを作成して、そこに以下の3つのファイルを保存しておいてください。

Utf8Sjis.tbl (UTF8→Shift_JIS変換テーブル)
shnmk16.bdf (16×16 全角フォント)
shnm8x16.bdf  ( shnm8x16r.bdf のファイル名中の ’r’ 文字を削除しておく)

Arduino – ESP32 ( SPIFFS または micro SD ) 自作Fontライブラリインストール方法
(※この記事のfontファイルのみ使います。ライブラリインストールは不要です)

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

Arduino 標準 Time ライブラリをインストールしておきます。
GitHub の以下のリンクにあります。

https://github.com/PaulStoffregen/Time

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

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

最新版自作ライブラリ ESP32_mgo_tec のインストール

先ほど述べたように、今回は私の自作ライブラリをかなり修正しました。
バージョンは、beta ver 1.0.50  です。

GigHub の以下のリンクにありますので、ZIP ファイルをダウンロードしてください。
(※古いライブラリはフォルダごと削除してから再インストールしてください)

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

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

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

※BOSCH 製 センサ BME280 , BME680 ライブラリをインストールされていない方は、ライブラリ内の以下の /Sensor/ フォルダを削除してください
Windows 10 の場合は、以下のファイルパスになります。

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

※\User-Name\ はご自分のパソコンのユーザー名です。

自作カスタムフォントを micro SDHC カードに保存しておく

最初に紹介した動画の時計表示フォントは私の自作フォントです。
天気予報フォントも
以下の記事を参照してください。

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

これは、上記の東雲フォントと同じ micro SDHC カードの /font/ フォルダに保存しておきます。
全角東雲フォントの数字をカスタムフォントにして埋め込んだ場合のファイル名は、
MYshnmk16.bdf

カスタムフォントを作ることが面倒な方は、東雲フォントのままで良いです。
後で紹介するスケッチ上のコメント解除とコメントアウトで東雲フォントを使うこともできます。

そして、天気予報用フォントは、先ほどインストールした、自作ライブラリの /data/ フォルダの中にあります。
Windows 10 のファイルパスは以下です。

C:\Users\User-Name\Documents\Arduino\libraries\ESP32_mgo_tec-master\data

その中の
MyFont.fnt
を micro SDHC カードの /font/ フォルダにコピーしておいてください。

シンプルになった M5Stack 用文字列表示サンプルスケッチ

先ほど述べたように、私の自作ライブラリ ESP32_mgo_tec の beta ver 1.0.50 では、文字列表示がシンプルになりました。
今まで小難しくてすいませんでした。

Arduino IDE の「スケッチの例」にもありますが、一応ここでも紹介します。
先に述べましたが、これでもかなり簡単にした方です。
できるだけ M5Stack ライブラリ用スケッチの書き方に近づくようにしてみました。
こんな感じです。

#define MGO_TEC_BV1_M5STACK_SD_SKETCH
#include <mgo_tec_bv1_m5stack_sd_simple1.h>

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"; //半角フォントファイル名を定義

void setup() {
  mM5.init( utf8sjis_file, shino_half_font_file, shino_full_font_file );

  //font[max=8], scl_set[max=8], disp_fnt[max=8]
  mM5.font[0].y0 = 0;
  mM5.disp_fnt[0].dispText( mM5.font[0], "これはテストです" );

  mM5.font[1].y0 = 32;
  //red:(0 - 31), green:(0 - 63), blue:(0 - 31)
  mM5.font[1].red = 31, mM5.font[1].green = 0, mM5.font[1].blue = 0;
  mM5.font[1].Xsize = 2, mM5.font[1].Ysize = 2;
  mM5.disp_fnt[1].dispText( mM5.font[1], "日本語漢字" );

  mM5.font[2].x0 = 50; mM5.font[2].y0 = 64;
  mM5.font[2].red = 0, mM5.font[2].green = 63, mM5.font[2].blue = 0;
  mM5.disp_fnt[1].dispText( mM5.font[2], "ABCDEFGabcdefg" );

  mM5.font[3].x0 = 100; mM5.font[3].y0 = 100;
  mM5.font[3].red = 0, mM5.font[3].green = 0, mM5.font[3].blue = 31;
  mM5.disp_fnt[3].dispText( mM5.font[3], "今日はいい天気" );

  String str1 = "Hello World M5Stack ! ハローワールド 日本語漢字 ";
  mM5.font[4].y0 = 150;
  mM5.font[4].red = 31, mM5.font[4].green = 63, mM5.font[4].blue = 0;
  mM5.font[4].Xsize = 2, mM5.font[4].Ysize = 3;
  mM5.scl_set[4].interval = 10; //(millisecond)
  mM5.disp_fnt[4].initScrolle( mM5.font[4], mM5.scl_set[4] );
  mM5.disp_fnt[4].newSetText( mM5.scl_set[4], str1 );

  String str2 = "2行目の電光掲示板スクロールです。";
  mM5.font[5].y0 = 200;
  mM5.font[5].red = 31, mM5.font[5].green = 0, mM5.font[5].blue = 31;
  mM5.font[5].Xsize = 3, mM5.font[5].Ysize = 1;
  mM5.scl_set[5].interval = 5; //(millisecond)
  mM5.disp_fnt[5].initScrolle( mM5.font[5], mM5.scl_set[5] );
  mM5.disp_fnt[5].newSetText( mM5.scl_set[5], str2 );
}

void loop() {
  mM5.disp_fnt[4].scrolleText( mM5.font[4], mM5.scl_set[4] );
  mM5.disp_fnt[5].scrolleText( mM5.font[5], mM5.scl_set[5] );
}

いかがでしょうか。
かなりシンプルで使いやすくなったと思います。
しかも、フォントサイズやフォントカラーを自由に決められます。
因みに、font , scl_set, disp_fnt などの配列は、最大8までです。
もっと多い文字列を表示させたい場合はその配列をうまく使い回してください。

コンパイル書き込み実行して、以下のように表示されればOKです。

selectbox_m5stack_esp32_01.jpg


因みに、このライブラリは現在も試行錯誤中です。
こういうプログラミング手法で良いのかどうかは私自身よくわかりません。
今後しばらく使ってみて様子を見て行こうと思います。
不都合ならば改良していこうと思っています。

では、次の項では Yahoo News Watch のスケッチを紹介します。


スポンサーリンク


「M5Stack と ESP32 のボタンで記事を選択できる Yahoo News 電光掲示板 天気予報 Watch」への22件のフィードバック

  1. mgo-tec 様

    リクエストにお応えいただきありがとうございます。
    Arduino IDE version 1.8.6 で動作確認とのことで、インストールしようとしたところ、すでに version 1.8.7 が最新となっていて、とりあえずインストールしました。
    「旧バージョン」のインストール手順に従って、version 1.8.6 をインストールしようと解凍まではできるのですが、開こうとすると「初期化中…」とのメッセージとなり画面が消えてしまいます。
    PCの不具合なのか、プログラムの不具合なのかわからず困っています。
    ご指導いただけると幸いです。

    1. juchang さん

      いつも世話になっております。

      Arduino IDE 1.8.7 が出ていることを初めて知りました。
      情報ありがとうございます。

      私の Windows 10 環境で、
      Arduino IDE ver 1.8.7
      Arduino core for the ESP32 stable ver 1.0.0
      は、問題無く動作確認できました。

      juchangさんのコメントから、最新版Arduino IDE 1.8.7 をインストールされたのに、なぜか再度 1.8.6 をインストールされていると読み取れます。
      おそらく、旧版 Arduino IDE は不要だと思いますので、アンインストールしてから 1.8.7 をインストールしていただければ良いと思います。

      私は installer でインストールせず、ZIP 形式で 1.8.7 をダウンロードして、その中の
      Arduino.exe
      というファイルを実行させています。
      一度 installer でインストールされていたら、アンインストールされてからインストールしてみてください。

      それでもインストールできない場合、Windows 10 の場合以下のパスのどれかに Arduino 15 または Arduino フォルダがあると思います。

      C:\Users\User-Name\AppData\Local
      C:\Users\User-Name\AppData\Roaming
      C:\Users\User-Name\AppData\LocalLow
      

      Arduino 15 フォルダは、Arduino core for the ESP32, ESP8266 関連フォルダです。
      IDE の初期設定が含まれています。
      Arduino フォルダまたは Arduino 15 フォルダのバックアップを取ってから、そのフォルダごと削除して再インストールしてみてください。

  2. mgo-tec 様

    Arduino IDE ver.1.8.7 で動作確認ができました。
    最近はぶっつけ本番で、ILI9341 LCD モジュールでの動作確認をしており、ボタン操作もばっちりです。
    まだ外付けのマイクロSDカードを使っているので、これからモジュール付属のSDカードスロットを使う方法を色々試してみたいと思います。
    いつも初歩的な質問ばかりで申し訳ありません。
    今後ともご指導の程よろしくお願いいたします。

    1. juchang さん

      無事動いてよかったです。
      安心しました。
      今回はライブラリを大幅修正して、いろいろ苦情が来そうな予感がしたので、ホッとしています。

      今回は我ながら自信作です。
      Core Debug Level “なし” に設定してコンパイルすれば、Yahoo ニュースとのコネクションも延々と安定動作すると思います。
      セレクトボックスもこれからいろいろと応用が利きそうです。

      juchang さんのリクエストで修正している最中に、いろいろ発見があり、新たな知識習得ができました。
      逆に切っ掛けを作ってくださり、感謝感謝です。
      いつも本当にありがとうございます。
      こちらこそ、今後ともよろしくお願いいたします。
      m(_ _)m

  3. こんにちは

    FireBaseもこの実験もスムーズに再現できました。
    サンスマートのLCDもうまくいきました。
    しかしLCDがili9341ドライバーのISPパネルの物がうまく働きません。
    画角とかは正常なのですが、色がすべて反転してるのです。
    1-13, 250, 251 の値のうち何れかということですべてやりましたが
    色反転は同じです。
    RGB(0.0.0)で白、31.63.31で黒、0.61.31で赤というような表示です。
    なにか解決法は無いでしょうか?

    1. マッキーさん

      いつもお試しいただき、ありがとうございます。

      なるほど!
      ボードによって反転する回路になっている場合もあるんですね。

      この場合は、ILI9341 のデータシートにあるコマンド Inversion On (0x21) を実行すれば良いと思います。
      早速、それ用の新しい関数を追加しました。
      dispInversionOn および dispInversionOff という関数です。
      以下のリンクで、beta ver 1.0.51 をダウンロードして、再インストールしてください。
      https://github.com/mgo-tec/ESP32_mgo_tec
      ※古いライブラリはフォルダごと削除してから再インストールしてください。

      その後、対象のスケッチの 67行目と68行目の間、LCD.dispRotation 関数の後に、

      LCD.dispInversionOn();
      

      と入力して、コンパイル書き込み実行させてみてください。

  4. mgo-tec 様

    HiLetgo 2.8″ ILI9341 LCD のSDカードスロットの接続で試行錯誤しています。
    今までサインスマートの LCD は使用していませんでしたが、原因究明のため新たに購入し試してみたところ、テキスト通りの動作を確認できました。
    改めてプルアップの追加をいろいろと試してみましたがうまくいきません。
    Amazon レビューに、「SD MISO だけ 1kΩの抵抗を入れたら正常に読み込めるようになった」とのことで、試してみましたがダメでした。
    他に何か試せるようなことがありましたら、ご教示の程お願いいたします。

    1. juchang さん

      いつもコメントありがとうございます。

      私はその LCD モジュールは持っていないので、良く分かりませんが、Amazon の簡易回路を見てみると、レビューにあるように、SD_MISO にだけ何故かプルアップ抵抗がありませんね。
      それに 1kΩ のプルアップ抵抗を入れれば良いような気がします。
      ただ、1kΩ というのは小さすぎるような気もしますが、良く分かりません。

      その他の方法として、クロック周波数を下げてみてはいかがでしょうか?
      スケッチの 63行目の
      SFR.init( cs_sd, 40000000 );
      を 20000000 とか、それ以下に下げてみて動くかですかね?

      今のところ、それくらいしかアドバイスできませんが、私ももうちょっと調べてみて、分かったらまたお知らせします。

      1. mgo-tec 様

        接続成功!!
        クロック周波数を 10000000 まで下げてみたところ動作確認できました。
        これから、ブレッドボードを3枚つなげて、LCD、ESP32-Devkit、押し釦を搭載したユニットが完成できそうです。
        いつも的確なアドバイスをいただきありがとうございます。

        1. juchang さん

          動作してよかったですね(^^)

          ただ、10MHz まで下げなければいけないとなると、SDカードの SPI クロックが鈍ってしまっている気がします。
          恐らく、ESP32 DevKitC からSDカードスロット端子までの配線が長すぎると、信号が鈍って、高速の SPI 信号が読み取れないことが起こります。
          極力短い配線にしてみてください。
          HiLetgo のボードのSD カードスロットはプルアップ抵抗だけの単純な構成なので、本来ならば SPI モードの標準最高周波数 約 21 MHz くらいは問題無く動作すると思われます。

          1. mgo-tec 様

            HiLetgo のボードを180度回して接続してみました。
            最初つながった 10MHz からスタートして 1MHz づつ上げていったところ、19 MHz までつながることが確認できました。
            この状態で使用して問題ありませんでしょうか。
            又、さらに周波数を上げる方策はありますでしょうか。
            アドバイスをいただけると幸いです。

          2. juchang さん

            いつもありがとうございます。

            恐らく、SDカード側を ESP32-DevKitC に近づけても、SCK や MOSI が LCD と共通線なので、LCD側が逆に長くなってしまっていると思われます。
            するとあまり意味ありません。
            要するに、SCK や MOSI線もトータル距離が短くならないと、インピーダンスが下がらないのです。
            高周波になると、その線の長さがインピーダンス増加に直結しますので、LCD側とSDカード側の SCK と MOSI 線も短くする必要があります。
            そもそも、HiLetgo のこの基板自体が、SDカードまでの回路が長すぎるので、その分、ジャンパーワイヤーも短くしないと辛いと思います。
            大きくなるとなかなか難しいですね。

            また、HiLetgo は 2.8インチですので、その分、LEDバックライトに多くの電流を使うと思われます。
            私の記事の回路図では、GPIO から定電流ダイオードで電流制限していますが、Amazon の回路図を見ると、電流制限抵抗3.9Ω(kΩ?)が入っているので、ESP32-DevKitC の 3.3V から直に LED 端子に入れた方が良いかもしれません。
            そして、LEDバックライトの大きさから、このボード全体的に、M5Stack よりも瞬間的に大電流が流れていることが想像されます。
            ということは、それの電圧降下で、SDカードの電圧が足りなくなっている可能性があります。
            ESP32-DevKitC の 3.3V からの供給では、電源容量が足りていない可能性もあります。
            ですから、3.3V からのジャンパーワイヤーも太く短く、そして、LCD に接続してある GND 線も太く短い配線にしてみてください。

            それと、ブレッドボードの接触不良や、ハンダ付けしたピンソケットの接触不良も SDカードの読み取りを悪くします。
            私の場合は、格安ブレッドボードやロープロファイルピンソケットを使った工作をしたことがありますが、接触不良が多く、殆ど読み取ってくれませんでした。
            でも、この記事でも紹介している、サンハヤトのブレッドボード SAD-101 に替えたら、接触不良は殆ど無くなりました。
            いずれにしても、ブレッドボードはそういう問題が付き物ですので、高周波動作には限界があります。

            また、私のプログラムでは、40MHz としていますが、実際の所、20MHz でも殆ど変わらないので、SPIモードの標準最高周波数付近の 20MHz で動作すれば良いと思います。
            40MHz はハッキリ言って保証外とも言えますが、それで動いているのでそのままにしていました。
            M5Stack の純正ライブラリも昔は 40MHz にしていたのを見受けられましたが、今は 20MHz にしていたと思います。

            ということで、20MHz で動作すればそれで問題ないと思います。
            これで試してみて下さい。

          3. 追伸;
            それと、もう一つ。
            私が動作確認している、Amazon の micro SDHC カード
            Transcend 32GB
            ですが、これだと SPI モードは 20MHz が限界かも知れません。
            もっと最新のハイスピードで高信頼性のもの、例えば、Sandisk とか TOSHIBA のものだと、読み取れる場合があります。
            ここでは動作保証し兼ねるので紹介しませんが、同じ micro SDHC でもいろいろ class がありますので、注意して購入する必要があります。
            このブログで紹介しているものは格安なので、20MHz が限界かも知れません。

  5. mgo-tec 様

    続報;
    ESP32-DevKitC を LCD の中心付近に配置し、最短となるよう硬いジャンパーワイヤーでブレッドボード上を這わせるように配線し直してみました。
    結果、見事に周波数 40MHz を達成することができました。
    ジャンパーワイヤを太く短くすることがこれほどの効果を上げるとは驚きです。
    大きい画面で試せることでこれからの新作発表が益々楽しみです。
    いろいろとご指導いただきありがとうございました。

    1. juchang さん

      それはそれは良かったです (^^)

      やっぱりジャンパーワイヤーでしたか。
      Amazon の写真を見ても、SDカード端子から SDカードスロットまでの距離が無駄に長すぎますよね。
      こんなに大きな基板スペースがあるのだから、最短回路に設計すれば良いのにと思っていました。
      これは疑問ですね。

      それと、勘違いしていたのですが、Amazon の写真および回路図で見えるチップ抵抗 1kΩ は直列に接続されているので、プルアップ抵抗ではなく、その線の保護抵抗のようです。
      プルアップ抵抗は明記されていませんでした。
      ということは、MISO だけに 1kΩ のプルアップする意味がありません。
      プルアップ抵抗が有るか無いかの推測は、VCC 端子と SCK や MOSI, MISO などの端子の抵抗値をテスターで測れば分かると思います。
      もっとちゃんとした回路図が欲しいですね。

      ということで、juchangさんのこの情報で、このコメントを見た他の HiLetgo ユーザーに大いに助けとなると思います。
      こちらこそ情報ありがとうございました。
      今後とも何卒よろしくお願いいたします。
      m(_ _)m

      1. juchangさん

        3Dプリンターとブレッドボードを合わせた素晴らしい工作写真を投稿して下さり、ありがとうございました。
        juchangさんからご了承いただきましたので、ここで紹介させていただきます。
        ブレッドボードを使って、2.8インチ ILI9341 (SDカードスロット付き)モジュールと ESP32 とのSPI通信距離を出来るだけ短くして、SDカードの40MHz設定通信を実現したアイデアはスバラシイです。

        jcg_m5stack_cm1.jpg

        【juchangさんからのコメント】
        3Dプリンター:idbox
        3Dソフト  :Fusion 360
        因みに、このボードは yunrichlcd 3.2” ILI9341 と共用できるようにしてあります。
        3.2“ の大画面は迫力があり皆さんにお勧めです。

         

        中央の隙間を通して、下の段の ESP32 の GPIO に最短で接続されているようです。
        これはなかなか考え付かないですね。
        ここまでくると、ガッツリケースを作って、ハンダ付けして固めた方が良いと思いますが、ブレッドボード上で別の 3.2インチディスプレイに換装できるということで、納得です。
        確かに、3.2インチは迫力ありそうですね!
        とにかくスバラシイ!!!
        みなさん、3.2インチの ILI9341 はおススメだそうですよ!!!

        juchangさんにはいつも工作を試していただき、感謝で言葉もありません。
        ホントにありがとうございます。
        m(_ _)m

  6. mgo-tecさん。素晴らしい作品で尊敬します。
    プログラムをROMさせてもらっています。
    ウオッチバンド仕様にして下記のようにバッテリーを長持ちさせています。
    ・CPUを80Mhzで動作させる。
    ・記事更新を15分間隔にしている。
    ・点灯時LCD.brightness(30)消灯時(0)ボタン操作から30秒自動消灯
    ・消灯時、フラグを見てスクロール処理しない。
    ・ウォッチバンド付属の850mAh→1000mAhを入れている。
    これで、WIFIがOFFかつ画面消灯の時、消費電流43mAになります。
    そこで、質問です。
    CPUを80Mhzにした際、時刻のピンクの数字が多少崩れます。
    処理速度が足りないと言ってしまえばそれまでですが、
    天才的なライブラリを見ても私ごときでは解読できませんでした。
    これって改良の余地はありますでしょうか?
    80Mhzにしている方法は、
    先頭に、#include を追加
    setup()の最終行に、rtc_clk_cpu_freq_set(RTC_CPU_FREQ_80M);を追加しています。
    引数は、
    RTC_CPU_FREQ_XTAL
    RTC_CPU_FREQ_80M
    RTC_CPU_FREQ_160M
    RTC_CPU_FREQ_240M
    RTC_CPU_FREQ_2M
    ちなみに、
    RTC_CPU_FREQ_XTALは40Mhzですが、低消費電力なので動けば面白いのですが
    WIFI接続失敗するので、接続時のみ一時的に80Mhzにして接続したりして見ましたが、
    40Mhz時はtimelibが2秒で1秒を刻むため、時計が狂ってしまいました。
    シリアルモニタも半分のbpsになります。
    RTC_CPU_FREQ_2Mはスローモーションスクロールでした。

    1. sakuppiさん

      記事をご覧いただき、ありがとうございました。
      そして、高度な改良で運用して下さっているようで、スゴイですね。
      うれしいかぎりです。

      ただ、CPUクロックを下げて作ったことが無いので、改良できるか分かりません。
      そもそも、デスクトップ用でフルパワー運用しか考えていなかったです。
      私の考えられる省電力は、スクロールの完全停止で、ボタンを押したらスクロールするとかですかね?
      いままで省電力プログラムは殆ど組んだことが無いので、全く分かりません。

      ピンクの数字は、速度が少しでも落ちると崩れてしまいますね。
      数字が動いている間に時刻受信したり、記事を受信したりすると数値が変わる場合があるので、高速処理が原則です。
      例えば、以下の記事
      https://www.mgo-tec.com/blog-entry-google-home-m5stack-realtime-message.html
      では、スクロール時計を使うと崩れてしまったので、固定数字時計にしました。
      いろいろとギリギリで動かしています。

      ということで、全くアドバイスになりませんが、省電力化は私もこれから勉強していきたいと思います。
      来年の課題とさせてください。
      m(_ _)m

  7. あっ。失礼しました。
    includeで付け足すのはsoc/rtc.hのつもりの文章です。
    HTMLでかっこの記号内が無視されるのですね。

    1. あー!
      そういうことですか!

      実はこれは WordPress なので、半角の<>という記号は無視されてしまうんです。
      その場合、HTML の<PRE>タグ内にソースコードを入れてくださればと思います。
      お知らせいただきありがとうございます。

コメントを残す

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

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