esp32 tftタッチシールド の使い方 ① ボタン作成

30/01/2025

esp32でTFT表示とタッチシールドが使えるようになったので次はボタンの作成です。ボタンというよりTFTタッチスイッチですね。

ボタンスイッチ

ボタン作成に必要な条件といえば、幅や高さ、色…それにどの位置に置くかというX,Yの座標なので必要な条件をまとめてみます

これを実際のスケッチで表示するには…

ボタン幅 100 , ボタン高さ 50 , ボタンのX座標 350 , ボタンのY座標 65 , 角の丸み半径 5 , ボタンの色 青 , テキストの色 白　としてみました

位置を右上にしたのはこれから色々と表示させたいからですが何を表示させるかはこれからです　 ^^;

3.5インチ 480×320 SPIシリアルTFT LCDモジュール

arduinoIDEでスケッチする

ここまでのスケッチはこんな感じ

#define BUTTON_W 100   // ボタンの幅
#define BUTTON_H 50    // ボタンの高さ
#define BUTTON_X 350    // ボタンのX座標
#define BUTTON_Y 65   // ボタンのY座標
#define BUTTON_RADIUS 5  // 角の丸みの半径
#define BUTTON_COLOR TFT_BLUE
#define TEXT_COLOR TFT_WHITE

3.5インチ 480×320 SPIシリアルTFT LCDモジュール

TFT_eSPI の fillRoundRect

TFT_eSPIのfillRoundRect()はRoundってあるので丸める？みたいな感じがしますが調べるといろいろ引数があるみたいです

構文

void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint16_t color)

TFT_eSPI tft = TFT_eSPI() とした場合

 tft.fillRoundRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, BUTTON_RADIUS, color); 

と代入出来ます

3.5インチ 480×320 SPIシリアルTFT LCDモジュール3.5インチ 480×320 SPIシリアルTFT LCDモジュール

TFT_eSPI の drawRoundRect

TFT_eSPI の drawRoundRect は fillRoundRect が塗りつぶしであるのに対し枠線を表示します

構文

void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint16_t color)

TFT_eSPI の fillRoundRect と同様に代入すると…

 tft.drawRoundRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, BUTTON_RADIUS, TFT_WHITE);

3.5インチ 480×320 SPIシリアルTFT LCDモジュール

setTextDatum とは？

ボタン内の文字、例えば「ON」「OFF」やSelect などの文字の位置を指定します

構文

void setTextDatum(uint8_t datum)

位置指定は定数名称でも値でも出来ます

kazuは値を使うことが多いです（簡単ですから　^^; )

3.5インチ 480×320 SPIシリアルTFT LCDモジュール

ボタンサンプルスケッチ

ボタンを押したら色が赤に変わり離したら青に戻るところに苦心しましたがdrawButton(bool pressed) は、TFT_eSPI ライブラリ の TFT_eSPI_Button クラスに含まれるメソッドというのが判りました

void drawButton(bool pressed)

ということでボタンの作成です

void drawButton(bool pressed) {
uint16_t color = pressed ? TFT_RED : BUTTON_COLOR; 
tft.fillRoundRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, BUTTON_RADIUS, color); 
tft.drawRoundRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, BUTTON_RADIUS, TFT_WHITE);
tft.setTextColor(TEXT_COLOR);
tft.setTextDatum(4);
tft.drawString("Select", BUTTON_X + BUTTON_W / 2, BUTTON_Y + BUTTON_H / 2);
}

文字表示は「Select」で 位置は４ –中央–表示にしています

これをesp32に書き込んでタッチしてみると青色から赤色に変化します

実験、成功です

ESP32と ILI9488ドライバでTFTをタッチ表示で動かすには？

TFTとesp32のGPIOピン設定やライブラリのヘッダファイル設定をお伝えしています

TFTは3.5インチ 480×320 SPIシリアルTFT LCDモジュールを使いました

低価格ながらそこそこの画面サイズで使えます

nomad-life.net

ESP32と ILI9488ドライバでTFTを動かすには？

https://nomad-life.net/19458077/

esp32とILI9488ドライバー搭載の3.5インチ 480x320 TFT LCDモジュールの設定と注意点などまとめました。 ILI9488 3.5インチ 480x320 TFT LCD TFT_...