ESP32でST7735 TFT LCD液晶ディスプレイを使ってみる

つかうもの

この記事で使うものをご紹介いたします。

TFT LCD（ST7735）

こちらの、ST7735チップ搭載のTFT LCDを使用しました。ピン端子はあらかじめ半田付けされていました。

スペックは次のとおりです。

項目	値
サイズ	1.8インチ
表示モード	TFT
入力データ	SPIインタフェース
ドライブIC	ST7735S
解像度	128RGB×160ポイント
アクティブエリアLCD	28.03（W）×35.04（H）
動作温度	-20〜70℃

前回のArduinoでTFT LCDディスプレイ（ST7789）を使ってみるで使用したST7789と違って、こちらの製品にはCS（チップセレクト）端子があります。ですから複数のSPIデバイスを接続できます。画面も1.8インチと若干大きめですが、ドット数は128×160になります。

ESP32

今回はST7735のLCDを、ESP32で動かしてみます。こちらのWayinTopさんから販売されているESP32を使ってみました。技適マークも刻印されていますので、安心して使えますね。GPIOの役割図は 商品ページ に詳しく掲載されています。

2個セットで値段も安く、秋月電子通商さんのESP32と同じ形で38ピンあります。

WayinTopのESP32

▼ WiFiやBluetooth接続が必要なければ、他のArduinoでも構いません。こちらの記事で色々な種類のArduinoをご紹介していますので、ご参考になさってみてください。

その他

また、ブレッドボードやジャンプワイヤもあると便利です。

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

ST7735搭載のTFT LCDを動かすには、最低限 Adafruit_GFX Adafruit_SPITFT Adafruit_ST77xx Adafruit_ST7735 gfxfont が必要になります。下記GitHubリポジトリからインストールするなりしてください。

私は最近、VS CodeにPlatformIOを入れてArduino開発を行っています。そのため下記のような構成でライブラリを配置しています。基本ライブラリマネージャーは使っておらず、ソースコードをそのままダウンロードして配置させています。ここでは display_test.ino にサンプルプログラムを記述しました。

.
├── include
│   └── README
├── lib
│   ├── README
│   └── TFT_ST7735
│       ├── Adafruit_GFX.cpp
│       ├── Adafruit_GFX.h
│       ├── Adafruit_SPITFT.cpp
│       ├── Adafruit_SPITFT.h
│       ├── Adafruit_ST7735.cpp
│       ├── Adafruit_ST7735.h
│       ├── Adafruit_ST77xx.cpp
│       ├── Adafruit_ST77xx.h
│       ├── examples
│       │   └── test_display
│       │       └── test_display.ino
│       ├── gfxfont.h
│       └── glcdfont.c
├── platformio.ini
├── src
│   └── main.cpp
└── test
    └── README

platformio.ini には次のように記述し、test_display.inoを対象にESP32とArduino Unoの開発環境でビルドできるようにしています。

[platformio]
src_dir = lib/TFT_ST7735/examples/test_display

[env:esp32]
platform = https://github.com/platformio/platform-espressif32.git
board = esp32dev
framework = arduino
monitor_speed = 115200
platform_packages = framework-arduinoespressif32 @ https://github.com/espressif/arduino-esp32#2.0.2


[env:uno]
platform = atmelavr
board = uno
framework = arduino
monitor_speed = 115200

/**
 * @date 2022-11-22
 * @author Toshihiko Arai
 * @copyright https://101010.fun
*/
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>

#if defined(ESP32)
#define TFT_RST 4  // IO4
#define TFT_DC 2   // IO2
//#define TFT_MOSI 23      // VSPID
//#define TFT_SCLK 18      // VSPICLK
//#define TFT_BACKLIGHT 7  // IO7
#define TFT_CS 5  // VSPICS0

#else
  #define TFT_CS        10
  #define TFT_RST        9
  #define TFT_DC         8
#endif

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

int number = 0;

void setup(void) {
    Serial.begin(115200);
    tft.initR(INITR_GREENTAB);
    tft.fillScreen(ST77XX_MAGENTA);
    tft.setRotation(1);
    tft.setTextWrap(false);

    tft.setTextSize(2);
    tft.setCursor(5, 5);
    tft.print("Ready...");
    delay(3000);
}

void loop() {
    char buff[4];
    sprintf(buff, "%2d", number);  // 数字を右寄せで表示させるため
    tft.setTextWrap(false);

    tft.fillScreen(ST77XX_MAGENTA);
    tft.setCursor(20, 30);
    tft.setTextColor(ST77XX_WHITE);
    tft.setTextSize(10);
    tft.println(buff);
    delay(500);

    number++;
}

ロータリーエンコーダーを追加して数値を自在に操る

最後にこの記事のゴールである、ロータリーエンコーダーで数値を自在に操ることをやってみましょう。ロータリーエンコーダーの使い方の詳しくはM5StickC PLUSとロータリーエンコーダをご覧ください。

ESP32とTFT LCDとローターリーエンコーダーの配線

ロータリーエンコーダーは秋月電子通商さんのものを使いました。A、Bの2信号の位相差出力となっています。

ロータリーエンコーダーを使うにあたって、プルアップ抵抗が必要になります。ここではESP32内蔵のプルアップ機能を使いました。ESP32のIO34～IO39はプルアップしないので、他の配線に変更する際はご注意ください。

ESP32とTFT LCDとローターリーエンコーダーの配線

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

ロータリーエンコーダーのプログラミングはかなり複雑なので、素直にライブラリを使いましょう。

▼ 下記サイトより、RotaryEncoderのライブラリRotaryEncoder.h と RotaryEncoder.cpp 拾ってきます。

また、Org_01.h を追加してTFT LCDに表示させる文字のフォントを変えてみました。Org_01.h は Adafruit-GFX-Library に同包されています。

▼ .ttf フォントからC++のヘッダーファイルに変換してくれるツールも配布されています。

さて、Platform IOのツリー構造は下記の通りです。 with_pot.ino に新しくプログラミングしていきます。

.
├── include
│   └── README
├── lib
│   ├── README
│   └── TFT_ST7735
│       ├── Adafruit_GFX.cpp
│       ├── Adafruit_GFX.h
│       ├── Adafruit_SPITFT.cpp
│       ├── Adafruit_SPITFT.h
│       ├── Adafruit_ST7735.cpp
│       ├── Adafruit_ST7735.h
│       ├── Adafruit_ST77xx.cpp
│       ├── Adafruit_ST77xx.h
│       ├── Org_01.h
│       ├── RotaryEncoder.cpp
│       ├── RotaryEncoder.h
│       ├── examples
│       │   ├── test_display
│       │   │   └── test_display.ino
│       │   └── with_pot
│       │       └── with_pot.ino
│       ├── gfxfont.h
│       └── glcdfont.c
├── platformio.ini
├── src
│   └── main.cpp
└── test
    └── README

ソースコード（with_pot.ino）

最初で紹介した、Twitter動画のソースコードです。ロータリーエンコーダーを回すことで、TFTディスプレイに映される数値が変化します。ローターリーエンコーダの上限下限を設けるようにしてあります。詳しくはソースコードないの注釈をご覧ください。

/**
 * @date 2022-11-22
 * @author Toshihiko Arai
 * @copyright https://101010.fun
 */
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <RotaryEncoder.h>
#include <SPI.h>
#include <Org_01.h>

/**
 * @brief TFT LCD ST7735
 */
#define TFT_RST 4  // IO4
#define TFT_DC 2   // IO2
//#define TFT_MOSI 23      // VSPID
//#define TFT_SCLK 18      // VSPICLK
//#define TFT_BACKLIGHT 7  // IO7
#define TFT_CS 5  // VSPICS0

/**
 * @brief Rotary Encoder用のPIN
 * ESP32のIO34～IO39はプルアップしないので注意
 */
#define RE_A 25
#define RE_B 26

/**
 * @brief LimitedRotator.inoを参考に、ロタリーエンコーダーの上限、下限を設定
 * https://github.com/mathertel/RotaryEncoder/blob/master/examples/LimitedRotator/LimitedRotator.ino
*/
#define ROTARYSTEPS 1
#define ROTARYMIN 10
#define ROTARYMAX 60

/**
 * @brief ST77XX_REDなどの色がおかしいので自分で定義している
 * https://forum.arduino.cc/t/st7735-0-96-160x80-shows-wrong-colors/894996
*/
const uint16_t RED = 0x001f;
const uint16_t BLUE = 0xf800;
const uint16_t GREEN = 0x07e0;
const uint16_t YELLOW = RED | GREEN;
const uint16_t ORANGE = 0x02df;

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

RotaryEncoder encoder(RE_A, RE_B, RotaryEncoder::LatchMode::TWO03);

int lastPos = -1;

void clearDisplay() {
    tft.fillScreen(RED);
}

void setup(void) {
    Serial.begin(115200);
    tft.initR(INITR_GREENTAB);
    
    clearDisplay();
    tft.setRotation(1);
    tft.setTextWrap(false);

    tft.setFont(&Org_01);
    tft.setTextSize(2);
    tft.setCursor(20, 20);
    tft.print("Ready...");

    // pinMode(RE_A, INPUT_PULLUP); RotaryEncoderのコンストラクタでプルアップされているので必要ない
    // pinMode(RE_B, INPUT_PULLUP);

    encoder.setPosition(25 / ROTARYSTEPS);

    delay(2000);
}

void loop() {
    encoder.tick();  // just call tick() to check the state.

    int newPos = encoder.getPosition() * ROTARYSTEPS;
    
    if (newPos < ROTARYMIN) {
        encoder.setPosition(ROTARYMIN / ROTARYSTEPS);
        newPos = ROTARYMIN;

    } else if (newPos > ROTARYMAX) {
        encoder.setPosition(ROTARYMAX / ROTARYSTEPS);
        newPos = ROTARYMAX;
    }  // if

    if (lastPos != newPos) {
        lastPos = newPos;

        char buff[5];
        sprintf(buff, "%2d", newPos);  // 数字を右寄せで表示させるため
        tft.setTextWrap(false);

        clearDisplay();

        tft.setCursor(20, 15);
        tft.setTextColor(ST77XX_WHITE);
        tft.setTextSize(1);        
        tft.println("Target temperature:");

        tft.setCursor(20, 80);
        tft.setTextColor(ST77XX_WHITE);
        tft.setTextSize(10);
        tft.println(buff);

        delay(50);
    }
}

TFT LCDの色がおかしい

ソースコードのコメントにも書きましたが、ST77XX_RED などの一部の色が青色になってしまい、TFT LCDの色がおかしいバグがあります。そのため、独自で定義して色を反映させています。

const uint16_t RED = 0x001f;
const uint16_t BLUE = 0xf800;
const uint16_t GREEN = 0x07e0;
const uint16_t YELLOW = RED | GREEN;
const uint16_t ORANGE = 0x02df;