LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ypsitau(Yutaka Saito)

pico-jxblib と TFT LCD の話

Last updated at Posted at 2025-01-27

pico-jxglib は、ワンボードマイコン Raspberry Pi Pico の Pico SDK プログラミングをサポートするライブラリです。

前の記事では、このライブラリの導入方法について説明しました。

今回は、pico-jxglib を使って TFT LCD の描画をします。

TFT LCD について

CPU に接続する周辺機器で一番遊び心をくすぐるのはディスプレイ関連ではないでしょうか。実用面においても、文字やグラフィックなどユーザに伝達できる情報量はピカイチです。数あるディスプレイの中でも、ワンボードマイコンに SPI インターフェースで接続できる TFT LCD は、コンパクトなサイズと手ごろな価格で非常に魅力的なデバイスです。

ところで、僕は電子部品の調達に主に秋月電子と Amazon を利用しているのですが、これらのショップで「TFT LCD」というキーワードで検索して見つけた以下のデバイスを購入しました。

  • ST7789
    左のデバイスが 1.8 インチ・ピクセル数 240x320、右が 1.3 インチ・ピクセル数 240x240 です。それぞれ 1,000 円程度で購入できます
    ST7789.jpg
  • ST7735
    左のデバイスが 0.96 インチ・ピクセル数 80x160、右が 1.8 インチ・ピクセル数 128x160 です。それぞれ 1,000 円未満で購入できます。
    ST7735.jpg
  • ILI9341/ILI9488
    タッチスクリーン付きのデバイスです。左が ILI9341 で 2.8 インチ・ピクセル数 240x320、右が ILI9488 で 3.5 インチ・ピクセル数 320x480 です。値段はそれぞれ 1,500 円、2,500 円程度です
    ILI9341_ILI9488.jpg

上に挙げたデバイスたちは、初期化に必要な手順や VRAM の描画方向、ピクセルフォーマットなどに若干の違いはありますが、コマンドはほぼ共通しています。今回の記事では、pico-jxglib でこれらのデバイスに画像データや文字を描画します。

準備するもの

Visual Studio Code や Pico SDK のセットアップが済んでいない方は こちら をご覧ください。

GitHub から pico-jxglib をクローンします。

git clone https://github.com/ypsitau/pico-jxglib.git
cd pico-jxglib
git submodule update --init

TFT LCD の描画

ST7789 の接続

デバイス ST7789 (ピクセル数 240x320) を接続して描画処理をします。

ブレッドボードの配線イメージは以下の通りです。

circuit-st7789.png

VSCode のコマンドパレットから >Raspberry Pi Pico: New Pico Project を実行し、以下の内容でプロジェクトを作成します (Pico SDK プロジェクトの詳細はこちら)。

  • Name ... プロジェクト名を入力します。今回は例として lcdtest を入力します
  • Board type ... ボード種別を選択します
  • Location ... プロジェクトディレクトリを作る一つ上のディレクトリを選択します
  • Stdio support .. UART 接続するポート (GPIO または USB) を選択します
  • Code generation options ... Generate C++ code にチェックをつけます

このプロジェクトディレクトリと pico-jxglib のディレクトリ配置が以下のようになっていると想定します。

+-[pico-jxglib]
+-[lcdtest]
  +-CMakeLists.txt
  +-lcdtest.cpp
  +- ...

CMakeLists.txt の最後に以下の行を追加してください。

CMakeLists.txt
target_link_libraries(lcdtest jxglib_ST7789 jxglib_DrawableTest)

add_subdirectory(${CMAKE_CURRENT_LIST_DIR}/../pico-jxglib pico-jxglib)

ソースファイルを以下のように編集します。

lcdtest.cpp
#include <stdio.h>
#include "pico/stdlib.h"
#include "jxglib/ST7789.h"
#include "jxglib/DrawableTest.h"

using namespace jxglib;

int main()
{
	::stdio_init_all();
	::spi_init(spi1, 125 * 1000 * 1000);
	GPIO14.set_function_SPI1_SCK();
	GPIO15.set_function_SPI1_TX();
	ST7789 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
	display.Initialize(Display::Dir::Rotate0);
    DrawableTest::RotateImage(display);
	//DrawableTest::DrawString(display);
	//DrawableTest::DrawFonts(display);
}

DrawableTest:: で始まる関数のコメントを外してプログラムをビルド・書き込み・実行してください。以下のような表示をします。

  • DrawableTest::RotateImage() は LCD に画像データを回転して表示するテスト用関数です。UART につなげたシリアルターミナルから適当なキーを入力すると画像を 90 度ずつ回転して描画します。
    lcdtest-RotateImage.jpg

  • DrawablTest::DrawString() は　LCD の画面いっぱいに日本語テキストを表示するテスト用関数です。UART につなげたシリアルターミナルで操作することで、フォント種別・フォントの描画倍率・行間隔を変えられます。
    lcdtest-DrawString.jpg

  • DrawablTest::DrawFonts() は LCD に異なるフォントで文字列を表示するテスト用関数です。
    lcdtest-DrawFonts.jpg

他のデバイスの接続

ST7789 以外のデバイスを接続する場合、上に示したプロジェクトをもとにして以下のように変更します。

  • ST7789 (ピクセル数 240x240)
    ブレッドボードの配線は上に示した ST7789 の図を参考にしてください。このデバイスには CS (Chip Select) がありません。ソースファイルの対応する行を以下のように変更します

    lcdtest.cpp
    - ST7789 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
+ ST7789 display(spi1, 240, 240, {RST: GPIO10, DC: GPIO11, BL: GPIO13});

  • ST7735 (ピクセル数 80x160)
    ブレッドボードの配線は上に示した ST7789 の図を参考にしてください。CMakeLists.txt とソースファイルの対応する箇所を以下のように変更します

    CMakeLists.txt
    target_link_libraries(lcdtest jxglib_ST7735 jxglib_DrawableTest)
    lcdtest.cpp
    - #include "jxglib/ST7789.h"
+ #include "jxglib/ST7735.h"

- ST7789 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
+ ST7735 display(spi1, 80, 160, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});

  • ST7735 (ピクセル数 128x160)
    ブレッドボードの配線は上に示した ST7789 の図を参考にしてください。CMakeLists.txt とソースファイルの対応する箇所を以下のように変更します

    CMakeLists.txt
    target_link_libraries(lcdtest jxglib_ST7735 jxglib_DrawableTest)
    lcdtest.cpp
    - #include "jxglib/ST7789.h"
+ #include "jxglib/ST7735.h"

- ST7789 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
+ ST7735::TypeB display(spi1, 128, 160, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});

  • ILI9341
    ブレッドボードの配線イメージは以下の通りです
    circuit-ili9341.png
    CMakeLists.txt とソースファイルの対応する箇所を以下のように変更します

    CMakeLists.txt
    target_link_libraries(lcdtest jxglib_ILI9341 jxglib_DrawableTest)
    lcdtest.cpp
    - #include "jxglib/ST7789.h"
+ #include "jxglib/ILI9341.h"

- ST7789 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
+ ILI9341 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});

  • ILI9488
    ブレッドボードの配線は上に示した ILI9341 の図を参考にしてください。CMakeLists.txt とソースファイルの対応する箇所を以下のように変更します

    CMakeLists.txt
    target_link_libraries(lcdtest jxglib_ILI9488 jxglib_DrawableTest)
    lcdtest.cpp
    - #include "jxglib/ST7789.h"
+ #include "jxglib/ILI9488.h"

- ST7789 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
+ ILI9488 display(spi1, 320, 480, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});

次回の記事

次回は「TFT LCD の話」の続きです。初期化処理の詳細や、描画機能について解説します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?