見出し画像

ESP32ボード＋240x240　ST7789　液晶ディスプレイがlovyanGFXを使う

kawashimaken

皆さんこんにちは！
もう暖かい３月になりましたね！　来週が雨の日が多いみたいで、いやですね！

今日は晴れなので、今月のnoteをお届けしようと思います！
今日の話は、自作のESP32ボードで lovyanGFXを使う話をします！
（300円に値段設定しますが、最後まで読めます！）

情報のアウトプットの手段

マイクロコントローラーを使って電子工作するときに、情報をアウトプットする際に、いろいろ手段があります。

単純なオン/オフならLEDの点滅でそれを表現すれば十分ですね。
でもせっかく最近のMCUは性能が良くて、より「リッチ」な表現を実現することができますね。
その中、カラー液晶ティスプレーも一般的になってきています。

私も以前インタネットラジオで大きい液晶ディスプレイを使いました。
（よかったら、そのシリーズのYouTubeをご覧ください）
Version 1

Version 2

Version 3

Version4

Version5
https://www.youtube.com/watch?v=tNm1u--l7O4

定番のディスプレー用ライブラリ


MCUでこのような液晶ディスプレイを使うときは、よく使われるのは、TFT_eSPIのライブラリとAdafruitさんの　Adafruit GFX Library　です。


また、最近人気のlovyanGFXがあります！

lovyanGFXももちろんオープソースで、Adafruit GFX Library とは完全互換ではありませんが、使い方がとても似ていて、Adafruit GFXを使ったことがあれば、lovyanGFXもすぐ慣れてくると思います。

lovyanGFXの一番の売りは、その速さです！
今のディスプレー用ライブラリの中で一番速いです。

その速さをうまく駆使すれば、高度なアニメーションなどが作成可能で、ゲームを作ることも可能でしょう。

M5StackとlovyanGFX


電子工作の愛好家なら、M5Stackもきっと知っている人が多いでしょう。またM5Stackの沼にハマっている人もたくさん知っています。笑

M5Stackが提供しているM5Stack専用のディスプレイライブラリ（https://github.com/m5stack/M5GFX）も中身はlovyanGFXです。

M5Stackを使う場合は、苦労せずに簡単にこの高速ライブラリを使うことができます！


lovyanGFXのGitHubページにいくと、lovyanGFXは多くの開発ボード（M5Stack / M5StickC / TTGO T-Watch / ODROID-GO / ESP-WROVER-KIT / WioTerminal　などなど）をサポートしています。
こちらのボードなら、ボードを指定すればディスプレーのタイプなどを自動で検出して、設定からディスプレーの初期化も簡単にできます！

自作のESP32ボードはlovyanGFXを使えるか？

結論から言うと、使えます！（ハードウェアの設計に問題がなければ）

いよいよこのnoteの本題です！
つまり、M5Stack / M5StickC / TTGO T-Watch / ODROID-GO / ESP-WROVER-KIT / WioTerminal　等以外のESP32ボード、特に私のように、独自のボードを作ったときに、どうやって動かせば良いのかと言う話をしたいと思います。

始まる前に、まず lovyan03さんに感謝を申し上げます！
Twitterで、いきなり声をかけたら、調整にも助言してくれて、無事lovyanGFXを使ってディスプレーを動かせました！

今回の対象はST7789ディスプレイ

lovyanGFXは様々なディスプレイをサポートしています。
また、SPIはI2Cのプロトコルもサポートしています。
詳細は、lovyanGFXのGitHubページをお読みください！

その中、とても限定的な話になりますが、今回はST7789の240x240の液晶ディスプレイを例にして話ます。

このディスプレイは大きいすぎず、小さすぎずいろんな電子工作プロジェクトでちょうどういいサイズだと思います。
このnoteで書いた方法は、他のディスプレイにも応用できると思います。

ESP32ボードを用意する

まず、あなたのESP32ボードを用意してください！
私はこの三つのボードを使ってみました！


使うプログラム


使うプログラムは下記のものです。

もちろん、そのままは動きません！
あたなのボードのピンの配置に合わせて設定し直すことが必要です！
今回動かすために変更した箇所をしたにまとめます
修正して、動いたプログラムはgistにしたので、下に貼ります。
このコードを見ながら説明していきます！


43行


まず43行をコメントアウトします。今回ST7789のパネルを使うので、これに使用します。合わせて、他のパネルは全部コメントアウトするようにしましょう。

ST7789 240x240 液晶ディスプレイ

タッチパネル関係


今回タッチパネルではないので、タッチパネル関係は全部lovyanさんがコメントしてくれている通りに、消しても大丈夫です。

77行

ここ結構大事です。
SPIモードは3にします。なぜならば、今回使っているディスプレイはCSピンがないもの（上の写真を参照してください）で、SPIモード0だと、リセットピンが設定できず、うまく動作しません。

84−87行


cfg.pin_sclk = 14; // SPIのSCLKピン番号を設定 
cfg.pin_mosi = 13; // SPIのMOSIピン番号を設定 
cfg.pin_miso = -1; // SPIのMISOピン番号を設定 (-1 = disable) 
cfg.pin_dc = 5; // SPIのD/Cピン番号を設定 (-1 = disable)

ここは、あなたのボード、またはつなぎ方によります。
私のボードでは、SCLKは14ピン、MOSIは13ピン、MISOは不使用（-1にします。）、DCは5ピンです。ここ間違ったら当然動作しませんので、注意して設定してください。

123-125行


cfg.pin_cs = -1; // CSが接続されているピン番号 (-1 = disable) 
cfg.pin_rst = 15; // RSTが接続されているピン番号 (-1 = disable) 
cfg.pin_busy = -1; // BUSYが接続されているピン番号 (-1 = disable)

上に、行ったように、CSピンのないディスプレイはSPIモード３を使用します。それに合わせて、CSピンもここで-1に設定します。RSTは私のボードの場合は、15なので、15にします。（16ピンにしたボードも一枚があったから、そのボードのときは16にしています。）

busyも-1にします。

129-130行

cfg.panel_width = 240; // 実際に表示可能な幅 
cfg.panel_height = 240; // 実際に表示可能な高さ

ここは今回のディスプレイに合わせて、240,240にします。

137行

cfg.invert = true; // パネルの明暗が反転してしまう場合 trueに設定

私のディスプレイが明暗反転してしまったので、指示通りに、trueにしました（デフォルトはfalseでした、 --> trueにします。）

140行


cfg.bus_shared = false; // SDカードとバスを共有している場合 trueに設定(drawJpgFile等でバス制御を行います)

SDカードと共有していないので、falseにします。（デフォルトはtrueでした）
ここまぁ今回、私のボードではあんまり関係はないですが、一応falseにしておきました。みなさんは自分のボードに合わせてくださいね。


完了です！

これで全てです！
これさえやれば、完璧に動くはずです！

本当に素晴らしいです！
再度 lovyan03に感謝です！

ちなみに、こちらのボードは、RP2040とESP32連携する実験ボードです！

今度、そのボードの話をYouTubeにまとめます！よかったら私のYouTubeチャンネルを覗いてみてください！

では、また次のnoteで会いましょう！

ここから先は

0字

¥ 300

株式会社虹賢舎 CEO 著書：https://amzn.to/39KwlE4 技術ブログ：https://kokensha.xyz 機械学習 深層学習 Python /JS IoT Raspberry Pi ロボット TOEIC950 https://gosen.world