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

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

こんばんは.

今回は読者の方からリクエストがあり、またまた予定を変更して、以前のこちらの記事の M5Stack Yahoo! News 電光掲示板 天気予報 Watch をブラッシュアップしてみました。
ニューススクロール記事を1行増やして2行表示とし、 Yahoo News記事をボタンで選択できるようにしてみました。
M5Stack のボタンを押すと、Newsセレクトボックスが表示されるというやつです。

たったそれだけのことなんですが、私にとっては結構難しかったです。
とりあえずは以下の動画をご覧ください。

スポンサーリンク

いかがでしょうか。

動画の後半では、ESP32-DevKitC と LCD ILI9341モジュール(SDカードスロット付き)で組んだものでも試しています。

M5Stack の Aボタン瞬時押しで、変更したいニュース表示行セレクトボックスが表示され、更に瞬時押しすると、セレクトボックス内のカーソルを移動し、長押しで決定します。
すると、News セレクトボックスが表示されます。

ニュース種類は9項目あり、最初のページは5項目表示され、カーソルを移動していくと2ページ目の残り4項目のセレクトボックスが表示されていることが分かると思います 。
この操作をボタン一つで実現してみました。
結構頭を使いました。

セレクトボックスを表示するだけならばそれほど難しくありませんが、項目が多い場合2ページ目を表示させることが難しかったです。
そして、最初にセレクトボックスを表示する時に、現在選択されているニュース位置にカーソルが予め移動しているというところです。
これにはかなり頭を使いました。
我ながら良くできたと思います。
ここだけプチ自慢したいです。

もうここまで来ると、単なるアプリ開発と化しています。
改めて、パソコンやスマホアプリの UI ( ユーザーインターフェース ) を作った人たちはスゲーなぁ、と思いました。
もっといろいろと表示を凝りたいなと思いましたが、ユーザーインターフェースを突き詰めすぎると泥沼化してしまうので、適度に開発を打ち切ることが肝心と思いました。

それと、今回はこれ以上にとっても苦労したところがあります。
それは、自分のライブラリが、メインソースプログラムでもっとシンプル化できないかと気にするようになり、かなり時間をかけて自作ライブラリを大幅改良してしまったことです。
それによって、Arduino – ESP32 ライブラリを作るノウハウとして、今回はとても良い勉強になりました。
これについての詳細は次の項で語ります。

そして、ライブラリを改良したことによって、M5Stack で文字を表示したり、スクロールしたりするための Arduino スケッチをシンプル化することができました。
後で M5Stack 用のサンプルスケッチと、ESP32-DevKitC 用のサンプルスケッチも紹介します。

ではこれの使い方を説明してみたいと思います。

ちなみに私は素人アマチュアです。
プログラミングについては多々無知なことがあり、 不具合があるかもしれません。

すべてのプログラムは無保証です。
もし何かお気づきの点がありましたら、コメント投稿欄などでご連絡いただけると助かります。

このブログの維持運営にご支援いただけると助かります。
支援方法はこちらの記事をご覧ください。
(管理人:mgo-tec)

 

    【目次】

  1. 自作ライブラリの改良で苦労した点
  2. 使うもの
  3. Arduino – ESP32 をインストールしておく
  4. 日本語東雲フォントを micro SDHC カードに保存しておく
  5. Time ライブラリのインストール
  6. 最新版自作ライブラリ ESP32_mgo_tec のインストール
  7. 自作カスタムフォントを micro SDHC カードに保存しておく
  8. シンプルになった M5Stack 用文字列表示サンプルスケッチ
  9. M5Stack 用 Yahoo News Watch スケッチの入力
  10. コンパイル書き込み実行
  11. ESP32 開発ボードと ILI9341 モジュール(SDカードスロット付き)を使う場合
  12. 編集後記

自作ライブラリの改良で苦労した点

今回は、セレクトボックスを作った苦労よりも、それを忘れるくらい苦労したことをダラダラと語ります。

今まで私のライブラリを使った場合、どうしても Arduino IDE スケッチが複雑になってしまいました。
M5Stack ライブラリのようにどうにか簡単にできないかと試行錯誤していました。
しかも、過去にこのブログで上げたスケッチと互換性を保つことが不可欠だったのです。
それが、ヘビー級に難しかったんです。

今まで、Arduino IDE スケッチ(ソースプログラム)上で、グローバル領域にクラスオブジェクトを宣言していたので、ライブラリ内では extern を使って宣言していました。
これが、いざ、シンプル化しようとすると弊害になって、コンパイルエラーを吐きまくりました。

とても厄介なのは、ライブラリ内の /src/ フォルダにある全てのファイルの整合性を、コンパイラが余さずチェックしてしまうことです。

Arduino IDE スケッチ(ソースプログラム)上で include していなくても、/src/フォルダ内のファイルや宣言に全ての整合性が無いと、コンパイルエラーが出てしまうのです。
例えば、Arduino スケッチ上でそれに関連するライブラリについては整合性が取れていても、使っていない他のファイルに extern があって、どこかにグローバル定義が無いとコンパイルエラーが出ます。

私は、Arduino スケッチ上に関連するファイルの整合性が取れていれば、コンパイルが通るものだと今の今まで思い込んでいました。
使わないファイルは include しなければ、他のファイルが整合性取れていなくても問題ないと思い込んでいました。

でも、いろいろ調べると、Arduino – ESP32 では、ライブラリ内の /src/ フォルダ内のファイルを全てチェックするようなコンパイラオプション設定がされているようなのです。
そして、プリプロセッサの読み込み設定などもされているようでした。
私自身もまだ不勉強で良く分からないのですが、コンパイラオプション設定は Arduino – ESP32 の platform.txt に記載されています。

ネットでちょっと調べたところによると、コンパイラオプションによってプリプロセッサ定義の挙動が異なるらしいのです。
ですから、素人的に通常のプログラミングの考えで意図した動きとなるように #ifdef や #define を定義しても、なぜか全然効かず、意図した動作にならなくて、悩みに悩みました。

結局のところ、私自身がコンパイラの挙動をただ単に知らなかっただけなのです。
コンパイラの挙動に合わせてライブラリを作成しなければいけなかったんです。

ということで、今回は未熟な私なりの浅い知識でプリプロセッサを駆使して、過去のArduino IDE スケッチプログラムが使えて、新しいプログラムではスケッチのシンプル化に挑戦してみました。
後で紹介していますが、M5Stack ライブラリの構成に近いシンプル化ができたような気がします。
プリプロセッサの使い方はこれで良いのかどうか分かりませんが、コンパイルに一切警告表示が出ていないので、自分的にヨシとします。

Arduino – ESP32 ライブラリを作る上で改めて思ったことは、ひとつのライブラリに複数の機能を持たせない方が良いということです。
Arduino – ESP32 純正ライブラリはそのように機能別に分かれていますね。
それを考えると、M5Stack の純正ライブラリは、多機能ながらよく作られていると思いました。

他の方が作ったライブラリを眺めていると、#ifdef や #define などのプリプロセッサが沢山使用されています。
何でそんなに使うことがあるのかと疑問に思っていましたが、今回はようやく分かりました。
要するにコンパイラの挙動をコントロールしていたんでしょうね。
多分・・・。

ということで、無知ゆえの個人的な苦労話でした。
今もまだ試行錯誤中ですが、今後もライブラリのシンプル化にはチャレンジしていきたいと思っています。

使うもの

M5Stack

Espressif Systems 社の WiFi , Bluetooth デュアルcore マイコン、ESP32 を搭載し、LCD ILI9341 ディスプレイ、micro SD カードスロット、バッテリー、ボタンスイッチ、スピーカー、Grove コネクタ搭載の全部入りモジュールです。


これのレビューについては以下の記事を参照してください。

M5stack ( ESP32 搭載 ) を分解したり電源を入れてみて、いろいろ思ったこと

micro SDHC カード

M5Stack では、micro SDHC カードが良いようです。
容量の小さい micro SD カードは使えない場合があるようです。
また、micro SDXC カードは使えるかどうか分かりません。
とりあえす、micro SDHC カードにしておいた方が無難だと思います。
そして、大手メーカー製をお勧めします。

粗悪な物も出回っているみたいなので、要注意してください。
私の場合は以下のもので動作確認しています。

M5Stack オプションバッテリー

M5Stack 標準搭載のバッテリーだけでは、数十分しか動作しませんが、これを搭載すると、LCD の明るさを暗めに設定すれば、5~6時間持つようになります。
個人的に超おススメです。

スポンサーリンク

mgo-tec電子工作 関連コンテンツ ( 広告含む )

投稿者:

mgo-tec

ESP32 ( ESP-WROOM-32 ) , M5Stack , ESP8266 ( ESP-WROOM-02 ) , Arduino 等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやっているアマチュア中高年です。 ここで紹介していることは動作保証し兼ねます。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしていますが、少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持っています。

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

  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

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

         

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

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

コメントを残す

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

*画像の文字を入力してください。(スパム防止の為)

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