【Arduino】 ST7735 / ST7735S LCDモジュールとタッチパネルを使う

it

Arduino環境でのST7735/ST7735S LCDモジュールの表示制御をします。
RaspberryPi PicoとESP32-WROOMほか、Arduino環境で使用できるマイコンを使って簡単なLCD表示、SDカードからのjpg画像の表示、タッチパネルの制御を使います。

記事の目的と内容

本記事では、Arduino環境でLCDモジュール ST7735を使うための内容を記載します。
・RP2040搭載基板、RaspberryPi Picoでの配線と簡単な表示スケッチ
・ESP32-WROOM搭載基板、NODE-MCUでの配線と簡単なスケッチ

・SDカードリーダモジュールを使った画像表示(jpg)
・タッチパネル付きST7735のタッチ入力

こんな方にお勧め
・Arduino環境で使用できるマイコンで小型のLCDを使いたい。
・タッチパネル(抵抗膜)を制御したい。

LCD ST7735, ST7735S

簡単紹介

◆ST7735 赤基板

SPIを使った通信で表示制御。
モデルにより、SDカードリーダ、タッチパネル(感圧式抵抗膜)が搭載。
それぞれは独立したSPIで各機能のCS(チップセレクト)で個別に制御します。

◆ST7735S 青基板

SPIを使った通信で表示制御。
IPS方式で視野角が広くコントラストの綺麗な表示。

◆その他のLCD記事

画像をクリックすると当サイト内の記事にジャンプします。

ST7735の記事です。
小型で安価、SPIで通信するLCDをRaspberry Pi Picoで表示、タッチパネル、SDカードリーダを使いました。
Nextion のHMI NX3224T024を使った記事です。
NextionEditorのセットアップと簡単な使い方、Raspberry Pi Picoと連動した画面制御について記事にしました。
ILI9341の記事です。
Arduino環境で使える中型サイズのLCDを使いました。
表示制御、タッチパネルとトラブル、SDカードからのJPG表示を記事にしました。
ILI9488の記事です。
表示制御以外にGT911静電容量式タッチパネルの多点タッチを使いました。
ESP32以外にRaspberry Pi Picoでも使用できるスケッチの修正を紹介しています。
ST7789の記事です。
IPS方式で発色のきれいなLCDです。
表示やタッチ制御以外にTNとIPS方式の視野角についても比べてみました。
SSD1331 カラーOLEDの記事です。
OLEDの鮮やかな発色と広い視野角のディスプレイです。
Raspberry Pi PicoとESP32-WROOM32での表示をしました。

◆関連記事

ピン配置

◆ST7735 LCDにSDカードリーダ搭載、タッチパネル非搭載

ST7735とSDカードリーダモデルです。

◆ST7735 LCDにSDカードリーダ搭載、タッチパネル非搭載

ST7735とSDカードリーダとタッチパネル付きモデルです。
LCD用の4線式SPIとは反対側にSDカードリーダとタッチパネルのSPI端子が配置されています。

◆ST7735S 0.96インチ青基板

外観

◆ST7735 LCDにSDカードリーダ搭載、タッチパネル非搭載

◆ST7735 LCDにSDカードリーダ搭載、タッチパネル非搭載

◆ST7735S 0.96インチ青基板

使ってみた

◆LCD表示

LCDに文字を表示させました。
LCDだけ使う場合は電源3.3Vでも動作しますが少しうす暗いです。
電源5Vにするとバックライトが明るくなり鮮やかに表示されます。

赤基板の液晶パネルはTN方式です。
長手方向の視野角は少し狭く、角度がつくと色味が変わります。
背景の黒は白っぽくなり、青と赤は背景に溶け込んでいるように見えます。

青基板の液晶パネルはIPS方式です。
視野角が広く鮮やかな発色です。

タッチパネル付きモデル

タッチパネル付きモデルは、全面にはタッチパネルの配線、背面にはタッチパネルのICと端子に違いがあります。
画像左はタッチパネルなし、画像右はタッチパネル有です。
SDカードリーダ付きやタッチパネル付きを購入する場合は、購入前に販売店に確認するか商品説明をよく読んで購入します。
※LCDのみ使うときは電源に3.3Vを与えています。
SDカードリーダを使用する場合は5Vを与えます。


注意
タッチパネル付きモデルの注意点は、LCD制御側のピンホール位置とSDカードとタッチパネル制御側のピンホールの水平軸の高さが合っていません。
ブレッドボードは2枚使用することで水平軸の高さは問題になりませんが、ユニバーサル基板への実装は1枚にきれいに実装できません。

画面が小さく、解像度も低いのであまり大きな画像や多くの情報を表示できませんが、簡単なゲームやマイコン基板の情報表示にはちょうど良いとも思います。タッチパネル付きは、ブレッドボードをブリッジ上に使用するのであれば気になりませんが、ユニバーサル基板への配置ができません。無理やり斜めにすれば使えますが気になるし、ひずみが破損の原因になります。

まとめ

Good

安価で入手性が良い。
SDカードリーダ一体型は別途SDカードリーダモジュールの用意が不要。

Bad

SDカードを挿入した時のSDカードのはみ出しが大きい。
SDカードリーダを使用するときは配線が左右に分かれるので配線がまとまらない。
タッチパネル付きのスルーホールのずれは組み込みに使いにくい。

準備

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

ArduinoIDEでST7735を制御するために必要なライブラリをインストールします。
にはAdafruit製ライブラリを使用します。

ライブラリ名検索動作確認Ver
Adafruit GFX Library by AdafruitAdafruit GFX1.11.9
Adafruit ST7735 and ST7789 Library by AdafruitAdafruit ST77351.10.3

今回SDカードリーダに保存したJPG画像を表示するため以下のライブラリのインストールをします。
SDカードリーダだけを使用する場合ライブラリのインストールは不要です。

ライブラリ名検索動作確認Ver
TJpg_Decoder by Bodmerjpg1.1.0

タッチパネルを使用する場合は、以下のライブラリをインストールします。

ライブラリ名検索動作確認Ver
XPT2046_Touchscreen by Paul StoffregenXPT20461.4

ライブラリの修正

概要

ST7735 LCDの表示にはAdafruit製ライブラリを使用しています。
当方の購入したST7735タッチ付きLCDは、画面が少しオフセットされてしまいます。
以下の画像では、画面の左と下が砂嵐状態の表示が見えます。

こちらを解消するために、Adafruitライブラリを一部修正して使用します。
修正に失敗した場合(コンパイルができなくなったり、修正前と同じ表示ができなくなった)は、ライブラリを再インストールすることで復旧できます。

修正箇所と修正方法

ローカルPC内のAdafruit ST7735 & ST7789 ライブラリフォルダを開きます。
以下フォルダの[username]箇所を変更します。

C:\Users\[username]\OneDrive\ドキュメント\Arduino\libraries\Adafruit_ST7735_and_ST7789_Library

Adafruit_ST7735.cpp から以下のスケッチの手前に追加スケッチを挿入します。

検索 : if (options == INITR_HALLOWING) {

追加スケッチ

  if (options == INITR_BLACKTAB2) {
    _colstart = 2;			//Macro definition added to set the offset.
    _rowstart = 1;

    uint8_t data = 0xC0;
    sendCommand(ST77XX_MADCTL, &data, 1);
    options = INITR_BLACKTAB;
  }

Adafruit_ST7735.h の17行目に以下のスケッチを挿入します。

#define INITR_BLACKTAB2 0x07

メインのスケッチの初期化には、今回追加した INITR_BLACKTAB2 を指定します。
この修正を適用したスケッチは次の「使い方」で紹介します。

使い方

Arduino環境で使用できる代表的なマイコンボードを使って簡単なサンプルを動かします。

RP2040系 RaspberryPi Picoを使った表示

説明

RP2040搭載基板の代表にRaspberryPi Picoを使用します。
色を変化させて、”TAMANEGI”と表示します。

RP2040の2系統SPIのうちSPI0を使用します。
コンストラクタでSPIオブジェクトを使用します。
Adafruit_ST7735 tft = Adafruit_ST7735(&SPI, TFT_CS, TFT_DC, TFT_RST);

SPI1を使用する場合は、SPI1オブジェクトを使用します。
ピン設定では、SPI1ピンを指定します。


配線

スケッチ

#include <Adafruit_GFX.h> 
#include <Adafruit_ST7735.h>
#include <SPI.h>

#define TFT_DC      (28)  // DC
#define TFT_CS      (17)  // CS
#define TFT_SCLK    (18)  // Clock
#define TFT_MOSI    (19)  // MOSI
#define TFT_RST     (22)  // Reset 

//SPI0をコンストラクタに指定する
Adafruit_ST7735 tft = Adafruit_ST7735(&SPI, TFT_CS, TFT_DC, TFT_RST);

void setup(void) 
{
  SPI.setTX(TFT_MOSI);                        //H/W SPI 設定
  SPI.setSCK(TFT_SCLK);

  tft.initR(INITR_BLACKTAB);                //Init ST7735S初期化
  
  tft.fillScreen(ST77XX_BLACK);               //背景の塗りつぶし

  //テキスト表示
  tft.setRotation(3);                         //画面回転
  tft.setTextSize(3);                         //サイズ

  tft.setCursor(0, 20);                      //カーソル位置                      
  tft.setTextColor(ST77XX_RED);              //赤
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_GREEN);            //緑
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_BLUE);             //青
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_YELLOW);           //黄
  tft.printf("TAMANEGI\n");
}

void loop()
{
}

結果

ESP32系 ESP32-WROOMを使った表示

説明

ESP32-WROOM搭載基板の代表にESP32-WROOM32 Node-MCUを使用します。
色を変化させて、”TAMANEGI”と表示します。

ESP32-WROOMの2系統SPIのうちVSPIを使用します。
コンストラクタでSPIオブジェクトを使用します。

HSPIを使用する場合、以下のマクロ定義をコメントアウトするか削除します。
#define SPI_VSPI

setup()関数の以下コメントを外します。
//hspi.begin(TFT_SCK, -1, TFT_MOSI, TFT_CS);

配線

スケッチ

#include <Adafruit_GFX.h> 
#include <Adafruit_ST7735.h>
#include <SPI.h>

//HSPIを使用する場合、この#defineをコメントアウトする。
#define SPI_VSPI

//ピン番号設定
//VSPIを使用する場合
#ifdef SPI_VSPI
  #define TFT_CS       5  // CS
  #define TFT_RST      27  // Reset 
  #define TFT_DC       26  // DC
  #define TFT_MOSI     23  // MOSI
  #define TFT_SCK      18  // Clock

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

#else
  //HSPIを使用する場合
  #define TFT_CS          15  // CS
  #define TFT_RST         27  // Reset 
  #define TFT_DC          26  // DC
  #define TFT_MOSI        13  // MOSI
  #define TFT_SCK         14  // Clock

  SPIClass hspi(HSPI);
  Adafruit_ST7735 tft = Adafruit_ST7735(&hspi, TFT_CS, TFT_DC, TFT_RST);

#endif

//S/W SPIはこちら。遅いが任意のピンを使用できる。
//Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCK, TFT_RST);

void setup(void) 
{

  //hspi.begin(TFT_SCK, -1, TFT_MOSI, TFT_CS);
  SPI.begin(TFT_SCK, -1, TFT_MOSI, TFT_CS);
  
  tft.initR(INITR_BLACKTAB);                //Init ST7735S初期化
  
  tft.fillScreen(ST77XX_BLACK);               //背景の塗りつぶし

  //テキスト表示
  tft.setRotation(3);                         //画面回転
  tft.setTextSize(3);                         //サイズ

  tft.setCursor(0, 20);                      //カーソル位置                      
  tft.setTextColor(ST77XX_RED);              //赤
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_GREEN);            //緑
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_BLUE);             //青
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_YELLOW);           //黄
  tft.printf("TAMANEGI\n");
}

void loop()
{
} 

結果

ST7735S 0.96inch RaspberryPi Picoを使った表示

説明

ST7735S 0.96inchをRaspberry Pi Picoで表示制御します。
「RP2040系 RaspberryPi Picoを使った表示」のスケッチをST7735S 0.96inchようにアレンジしました。
主な変更点は、LCDの初期化の解像度パラメータです。

tft.initR(INITR_MINI160x80_PLUGIN);

配線

スケッチ

#include <Adafruit_GFX.h> 
#include <Adafruit_ST7735.h>
#include <SPI.h>

#define TFT_DC      (28)
#define TFT_CS      (17)
#define TFT_SCLK    (18)
#define TFT_MOSI    (19)
#define TFT_RST     (22)

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

void setup(void) 
{
  // SPI.setTX(TFT_MOSI);
  // SPI.setSCK(TFT_SCLK);

  tft.initR(INITR_MINI160x80_PLUGIN);
  tft.fillScreen(ST77XX_BLACK);
  
  tft.setRotation(3);
  tft.setTextSize(2);
  
  tft.setCursor(0, 0);
  tft.setTextColor(ST77XX_RED);
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_GREEN);
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_BLUE);
  tft.printf("TAMANEGI\n");

  tft.setTextColor(ST77XX_YELLOW);
  tft.printf("TAMANEGI\n");
}

void loop()
{
}

結果

解像度が80×160なので、表示位置とサイズを調整しています。
発色はTNより鮮やかで広い視野角があります。

RP2040系 RaspberryPi Picoを使ったSDカードからjpg表示

説明

SDカードリーダよりjpgファイル”rpi.jpg”を読み取り、TFTに表示をします。

SDカードリーダはLCDの制御と同じSPI0を使用します。
MOSI、SCKはLCDと共通、MISOはSPI0を使用し、CSは任意のピンを使用します。

SDカードのルートフォルダには”rpi.jpg”ファイルを保存してください。
jpgファイルのサイズは160 x 128で作成します。

ライブラリ

jpgファイルをデコードするために以下のライブラリをArduinoIDEからインストールします。

ライブラリ名検索動作確認Ver
TJpg_Decoder by Bodmerjpg1.1.0

配線

SDカードリーダを使用する場合電源を5Vにします。

スケッチ

#include <SPI.h>
#include <SD.h>

#include <TJpg_Decoder.h>
#include <Adafruit_ST7735.h>
#include <Adafruit_GFX.h>

//TFT SD共通ピン設定
#define COMMON_MOSI   (19)
#define COMMON_SCK    (18)

//TFTピン設定
#define TFT_CS        (17)
#define TFT_RST       (22)
#define TFT_DC        (28)

//SDピン設定
#define SD_CS         (21)  
#define SD_MISO       (16)
#define FILENAME      "/rpi.jpg"

// JPGの最大サイズ(バッファを静的に確保するようにしているため、決め打ち。取り扱う最大ファイルサイズで変えるようにする)
#define JPG_SIZE_MAX (20 * 1024) //MAX 20KByteを想定

Adafruit_ST7735 tft = Adafruit_ST7735(&SPI, TFT_CS, TFT_DC, TFT_RST);     //SPI0を使用

struct jpg_file
{
  size_t size;
  uint8_t buf[JPG_SIZE_MAX];
};

jpg_file jpg;

//デコードを行うコールバック関数
bool tft_output(int16_t x, int16_t y, uint16_t w, uint16_t h, uint16_t *bitmap)
{
  if (y >= tft.height())
    return 0;

  tft.drawRGBBitmap(x, y, bitmap, w, h);

  return 1;
}

void setup()
{
  //SPIピン設定
  SPI.setTX(COMMON_MOSI);
  SPI.setRX(SD_MISO);
  SPI.setSCK(COMMON_SCK);

  //TFTの初期化と初期設定
  tft.initR(INITR_BLACKTAB);                  //Init ST7735S初期化  
  tft.fillScreen(ST77XX_BLACK);               //背景の塗りつぶし
  tft.setRotation(3);

  Serial.begin(115200);
  //while(!Serial);
  delay(1000);
  
  //SDカードリーダの初期化とファイルの読み取り
  if (!SD.begin(SD_CS, SD_SCK_MHZ(16)))
  {
    Serial.println("SD initialization failed!");
    while(1);
  }

  TJpgDec.setCallback(tft_output);

  File jpgFile = SD.open(FILENAME, FILE_READ);
  if (!jpgFile)
  {
    Serial.printf("Open file failed [%s]\r\n", FILENAME);
    while(1);
  }

  jpg.size = jpgFile.size();

  if(sizeof(jpg.buf) < jpg.size) 
  {
    Serial.println("File size over");
    return;
  }

  //ファイル情報の表示
  uint16_t w = 0, h = 0;
  Serial.printf("file size = %d bytes\r\n", jpgFile.readBytes((char *)jpg.buf, jpg.size));
  TJpgDec.getJpgSize(&w, &h, jpg.buf, jpg.size);
  Serial.printf("Width = %d, height = %d\r\n", w, h);

  TJpgDec.setJpgScale(1);
  TJpgDec.drawJpg(0, 0, jpg.buf, jpg.size);             //画像の表示

  jpgFile.close();
}

void loop()
{
}

結果

SDカード内のjpgファイルの表示をしました。
組み合わせて使用することでフォトフレームなどを作ることができます。

SDカードリーダからファイルリストを作るスケッチ

ESP32系 ESP32-WROOMを使ったSDカードからjpg表示

説明

SDカードリーダよりjpgファイル”esp.jpg”を読み取り、TFTに表示をします。

SDカードリーダはLCDの制御と同じSPI0を使用します。
MOSI、SCKはLCDと共通、MISOはSPI0を使用し、CSは任意のピンを使用します。

SDカードのルートフォルダには”esp.jpg”ファイルを保存してください。
jpgファイルのサイズは160 x 128で作成します。

ライブラリ

jpgファイルをデコードするために以下のライブラリをArduinoIDEからインストールします。

ライブラリ名検索動作確認Ver
TJpg_Decoder by Bodmerjpg1.1.0

配線

SDカードリーダを使用する場合電源を5Vにします。

スケッチ

#include <SPI.h>
#include <SD.h>

#include <TJpg_Decoder.h>
#include <Adafruit_ST7735.h>
#include <Adafruit_GFX.h>

#define TFT_CS       (5)   // CS
#define TFT_RST      (27)  // Reset 
#define TFT_DC       (26)  // DC

//TFT SD共通ピン設定
#define COMMON_MOSI   (23)
#define COMMON_SCK    (18)

//SDピン設定
#define SD_CS         (2)
#define SD_MISO       (19)
#define FILENAME      "/esp.jpg"

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

// JPGの最大サイズ(バッファを静的に確保するようにしているため、決め打ち。取り扱う最大ファイルサイズで変えるようにする)
#define JPG_SIZE_MAX (20 * 1024) //MAX 20KByteを想定

struct jpg_file
{
  size_t size;
  uint8_t buf[JPG_SIZE_MAX];
};

jpg_file jpg;

//デコードを行うコールバック関数
bool tft_output(int16_t x, int16_t y, uint16_t w, uint16_t h, uint16_t *bitmap)
{
  if (y >= tft.height())
    return 0;

  tft.drawRGBBitmap(x, y, bitmap, w, h);

  return 1;
}

void setup()
{
  //SPIピン設定
  SPI.begin(COMMON_SCK, SD_MISO, COMMON_MOSI, TFT_CS);

  //TFTの初期化と初期設定
  tft.initR(INITR_BLACKTAB);                  //Init ST7735S初期化  
  tft.fillScreen(ST77XX_BLACK);               //背景の塗りつぶし
  tft.setRotation(3);

  Serial.begin(115200);
  //while(!Serial);
  delay(1000);
  
  //SDカードリーダの初期化とファイルの読み取り
  if (!SD.begin(SD_CS))
  {
    Serial.println("SD initialization failed!");
    while(1);
  }

  TJpgDec.setCallback(tft_output);

  File jpgFile = SD.open(FILENAME, FILE_READ);
  if (!jpgFile)
  {
    Serial.printf("Open file failed [%s]\r\n", FILENAME);
    while(1);
  }

  jpg.size = jpgFile.size();

  if(sizeof(jpg.buf) < jpg.size) 
  {
    Serial.println("File size over");
    return;
  }

  //ファイル情報の表示
  uint16_t w = 0, h = 0;
  Serial.printf("file size = %d bytes\r\n", jpgFile.readBytes((char *)jpg.buf, jpg.size));
  TJpgDec.getJpgSize(&w, &h, jpg.buf, jpg.size);
  Serial.printf("Width = %d, height = %d\r\n", w, h);

  TJpgDec.setJpgScale(1);
  TJpgDec.drawJpg(0, 0, jpg.buf, jpg.size);             //画像の表示

  jpgFile.close();
}

void loop()
{
}

結果

SDカード内のjpgファイルの表示をしました。
組み合わせて使用することでフォトフレームなどを作ることができます。

SDカードリーダからファイルリストを作るスケッチ

RP2040系 RaspberryPi Picoを使ったタッチパネル制御

説明

SDカードリーダよりjpgファイル”rpi.jpg”を読み取り、TFTに表示をします。

SDカードリーダはLCDの制御と同じSPI0を使用します。
MOSI、SCKはLCDと共通、MISOはSPI0を使用し、CSは任意のピンを使用します。

SDカードのルートフォルダには”rpi.jpg”ファイルを保存してください。
jpgファイルのサイズは160 x 128で作成します。
今回使用したのは以下のjpgファイルです。

ライブラリ

jpgファイルをデコードするために以下のライブラリをArduinoIDEからインストールします。

ライブラリ名検索動作確認Ver
XPT2046_Touchscreen by Paul StoffregenXPT20461.4

配線

スケッチ

#include <SPI.h>
#include <Adafruit_ST7735.h>
#include <Adafruit_GFX.h>
#include <XPT2046_Touchscreen.h>

#define COMMON_MOSI   (19)
#define COMMON_MISO   (16)
#define COMMON_SCK    (18)

//TFTピン設定
#define TFT_CS        (17)
#define TFT_RST       (22)
#define TFT_DC        (28)

//タッチパネルピン設定
#define TOUCH_CS      (5)

XPT2046_Touchscreen ts(TOUCH_CS);
Adafruit_ST7735 tft = Adafruit_ST7735(&SPI, TFT_CS, TFT_DC, TFT_RST);

void setup()
{
  Serial.begin(115200);

  //SPI ピン設定
  SPI.setTX(COMMON_MOSI);
  SPI.setRX(COMMON_MISO);
  SPI.setSCK(COMMON_SCK);

  //TFTの初期化と初期設定
  tft.initR(INITR_BLACKTAB2);          //Init ST7735S初期化 修正版ライブラリ使用

  tft.fillScreen(ST77XX_BLACK);        //背景の塗りつぶし
  tft.setRotation(3);
  tft.setTextSize(1);
  tft.fillScreen(ST77XX_BLACK);

  //タッチ入力開始
  ts.begin();
  ts.setRotation(1);

}

void loop()
{
  //タッチ状態読み取り
  boolean bTouch = ts.touched();
  //画面クリア
  tft.fillRect(0, 0, 128, 64, ST77XX_BLACK);

  //タッチがあればタッチされている座標の表示
  if (bTouch == true)
  {
   TS_Point tPoint = ts.getPoint();
    tft.setTextColor(ST77XX_WHITE);
    tft.setCursor(0, 0);
    tft.printf("(x,y) = (%d, %d)\r\n", tPoint.x, tPoint.y);
    Serial.printf("(x,y) = (%d, %d)\r\n", tPoint.x, tPoint.y);
  }
  else 
  {
    //タッチがなければタッチ無表示
    tft.setTextColor(ST77XX_RED);
    tft.setCursor(0, 0);
    tft.print("No Touch");
    
  }
  delay(10);
}

結果

ESP32系 ESP32-WROOMを使ったタッチパネル制御

説明

SDカードリーダよりjpgファイル”esp.jpg”を読み取り、TFTに表示をします。

SDカードリーダはLCDの制御と同じSPI0を使用します。
MOSI、SCKはLCDと共通、MISOはSPI0を使用し、CSは任意のピンを使用します。

SDカードのルートフォルダには”esp.jpg”ファイルを保存してください。
jpgファイルのサイズは160 x 128で作成します。
今回使用したのは以下のjpgファイルです。

ライブラリ

jpgファイルをデコードするために以下のライブラリをArduinoIDEからインストールします。

ライブラリ名検索動作確認Ver
XPT2046_Touchscreen by Paul StoffregenXPT20461.4

配線

スケッチ

#include <SPI.h>
#include <Adafruit_ST7735.h>
#include <Adafruit_GFX.h>
#include <XPT2046_Touchscreen.h>

#define COMMON_MOSI   (19)
#define COMMON_MISO   (16)
#define COMMON_SCK    (18)

//TFTピン設定
#define TFT_CS        (17)
#define TFT_RST       (22)
#define TFT_DC        (28)

//タッチパネルピン設定
#define TOUCH_CS      (4)

#define TFT_CS       (5)   // CS
#define TFT_RST      (27)  // Reset 
#define TFT_DC       (26)  // DC

//共通ピン設定
#define COMMON_MOSI   (23)
#define COMMON_MISO   (19)
#define COMMON_SCK    (18)


XPT2046_Touchscreen ts(TOUCH_CS);
Adafruit_ST7735 tft = Adafruit_ST7735(&SPI, TFT_CS, TFT_DC, TFT_RST);

void setup()
{
  Serial.begin(115200);

  //SPI ピン設定
  SPI.begin(COMMON_SCK, COMMON_MISO, COMMON_MOSI, TFT_CS);
  
  //TFTの初期化と初期設定
  tft.initR(INITR_BLACKTAB2);          //Init ST7735S初期化 修正版ライブラリ使用

  tft.fillScreen(ST77XX_BLACK);        //背景の塗りつぶし
  tft.setRotation(3);
  tft.setTextSize(1);
  tft.fillScreen(ST77XX_BLACK);

  //タッチ入力開始
  ts.begin();
  ts.setRotation(1);

}

void loop()
{
  //タッチ状態読み取り
  boolean bTouch = ts.touched();
  //画面クリア
  tft.fillRect(0, 0, 128, 64, ST77XX_BLACK);

  //タッチがあればタッチされている座標の表示
  if (bTouch == true)
  {
   TS_Point tPoint = ts.getPoint();
    tft.setTextColor(ST77XX_WHITE);
    tft.setCursor(0, 0);
    tft.printf("(x,y) = (%d, %d)\r\n", tPoint.x, tPoint.y);
    Serial.printf("(x,y) = (%d, %d)\r\n", tPoint.x, tPoint.y);
  }
  else 
  {
    //タッチがなければタッチ無表示
    tft.setTextColor(ST77XX_RED);
    tft.setCursor(0, 0);
    tft.print("No Touch");
    
  }
  delay(10);
}

結果

コメント

タイトルとURLをコピーしました