ラズパイPicoでタッチパネル液晶表示器 ILI9341の使い方

#include <Adafruit_GFX.h>         // Adafruitのグラフィックスライブラリ
#include <Adafruit_ILI9341.h>     // 液晶表示器 ILI9341 制御用ライブラリ
#include <XPT2046_Touchscreen.h>  // タッチパネル制御用ライブラリ

#include <Adafruit_GFX.h>      // Adafruitのグラフィックスライブラリ
#include <Adafruit_ILI9341.h>  // 液晶表示器 ILI9341 制御用ライブラリ
#include <Fonts/FreeSans18pt7b.h> // フォントを読み込み
#include <Fonts/FreeSans12pt7b.h>

#define TFT_WIDTH   320 // 画面幅
#define TFT_HEIGHT  240 // 画面高さ

#define TFT_SCK  18  // 液晶表示の SCK
#define TFT_MOSI 19  // 液晶表示の MOSI
#define TFT_DC   20  // 液晶画面の DC
#define TFT_RST  21  // 液晶画面の RST
#define TFT_CS   22  // 液晶画面の CS

// ILI9341ディスプレイのインスタンスを作成
Adafruit_ILI9341 tft = Adafruit_ILI9341(&SPI, TFT_DC, TFT_CS, TFT_RST);

// スプライト（メモリ描画領域から一括表示）をcanvasとして準備
// 画面表示をtftではなくcanvasで指定して一括描画することでチラツキなく表示できる
GFXcanvas16 canvas(TFT_WIDTH, TFT_HEIGHT);  // 16bitカラースプライト（オフスクリーンバッファ）

// 初期設定 ----------------------------------------
void setup() {
  // SPI0初期設定
  SPI.setTX(TFT_MOSI); // SPI0のTX(MOSI)
  SPI.setSCK(TFT_SCK); // SPI0のSCK

  // TFT初期設定
  tft.begin();           // TFTを初期化
  tft.setRotation(3);    // TFTの回転を設定（0-3）
  canvas.setTextSize(1); // テキストサイズを設定
}

// メイン -----------------------------------------
void loop() {
  canvas.fillScreen(0x0000); // 背景色
  
  // 文字表示
  canvas.setCursor(48, 125);        // 表示座標指定
  canvas.setTextColor(0xFFFF);      // テキスト色（文字色、背景色）※背景色は省略可
  canvas.setFont(&FreeSans18pt7b);  // フォント指定
  canvas.println("Logikara Blog");  // 表示内容

  // 電源ONからの経過時間カウント表示
  canvas.setFont(&FreeSans12pt7b);  // フォント指定
  canvas.setCursor(0, 22);          // 表示座標指定
  canvas.print(millis());           // 経過時間をms単位で表示

  // スプライト（メモリ内に描画した画面）をTFTに描画
  tft.drawRGBBitmap(0, 0, canvas.getBuffer(), TFT_WIDTH, TFT_HEIGHT);
}

// ILI9341ディスプレイのインスタンスを作成
Adafruit_ILI9341 tft = Adafruit_ILI9341(&SPI, TFT_DC, TFT_CS, TFT_RST);

// SPI0初期設定
SPI.setTX(TFT_MOSI); // SPI0のTX(MOSI)
SPI.setSCK(TFT_SCK); // SPI0のSCK

// スプライト（メモリ描画領域から一括表示）をcanvasとして準備
// 画面表示をtftではなくcanvasで指定して一括描画することでチラツキなく表示できる
GFXcanvas16 canvas(TFT_WIDTH, TFT_HEIGHT);  // 16bitカラースプライト（オフスクリーンバッファ）

// TFT初期設定
tft.begin();           // TFTを初期化
tft.setRotation(3);    // TFTの回転を設定（0-3）
canvas.setTextSize(1); // テキストサイズを設定

// スプライト（メモリ内に描画した画面）をTFTに描画
tft.drawRGBBitmap(0, 0, canvas.getBuffer(), TFT_WIDTH, TFT_HEIGHT);

#include <Fonts/FreeSans18pt7b.h> // フォントを読み込み
#include <Fonts/FreeSans12pt7b.h>

canvas.setFont(&FreeSans18pt7b);  // フォント指定

canvas.setFont(&FreeSans12pt7b);  // フォント指定

#include <Adafruit_GFX.h>         // Adafruitのグラフィックスライブラリ
#include <Adafruit_ILI9341.h>     // 液晶表示器 ILI9341 制御用ライブラリ
#include <XPT2046_Touchscreen.h>  // タッチパネル制御用ライブラリ

#define TFT_WIDTH   320 // 画面幅
#define TFT_HEIGHT  240 // 画面高さ
#define TFT_ROTATION  3 // 画面の回転（タッチパネルの回転と合わせる）

#define COMMON_SCK  18  // 液晶表示とタッチパネル共通の SCK
#define COMMON_MOSI 19  // 液晶表示とタッチパネル共通の MOSI
#define TOUCH_MISO 16   // タッチパネルの MISO
#define TOUCH_CS 17     // タッチパネルの CS
#define TFT_DC   20     // 液晶画面の DC
#define TFT_RST  21     // 液晶画面の RST
#define TFT_CS   22     // 液晶画面の CS

XPT2046_Touchscreen ts(TOUCH_CS); // タッチパネルのインスタンスを作成
Adafruit_ILI9341 tft = Adafruit_ILI9341(&SPI, TFT_DC, TFT_CS, TFT_RST); // ILI9341ディスプレイのインスタンスを作成

// 初期設定　----------------------------------------
void setup() {
  //SPI0設定
  SPI.setTX(COMMON_MOSI); // SPI0のTX(MOSI)
  SPI.setRX(TOUCH_MISO);  // SPI0のRX(MISO)
  SPI.setSCK(COMMON_SCK); // SPI0のSCK

  //液晶画面初期設定
  tft.begin();                   // TFTを初期化
  tft.setRotation(TFT_ROTATION); // TFTの回転を設定（0-3）

  //タッチパネル初期設定
  ts.begin();                    // タッチパネル初期化
  ts.setRotation(TFT_ROTATION);  // タッチパネルの回転を設定（液晶画面と合わせる） 
  tft.fillScreen(ILI9341_WHITE); // 画面白色塗りつぶし
  tft.fillRect(300, 1, 19, 18, ILI9341_DARKGREY); // 画面消去ボタン

  // 出力端子初期設定
  pinMode(LED_BUILTIN, OUTPUT);   // LED用端子
  digitalWrite(LED_BUILTIN, HIGH); // LED点灯（電源ランプ）
}
// メイン ------------------------------------------
void loop() {
  if (ts.touched() == true) {        // タッチされていれば
    TS_Point tPoint = ts.getPoint(); // タッチ座標を取得
    int16_t x = (tPoint.x-400) * TFT_WIDTH / (4095-550);  // タッチx座標をTFT画面の座標に換算
    int16_t y = (tPoint.y-230) * TFT_HEIGHT / (4095-420); // タッチy座標をTFT画面の座標に換算

    // 円の連続で線を描画
    tft.fillCircle(x, y, 2, 0x0A08); // タッチ座標に塗り潰し円を描画

    // 描画エリア消去
    if (x > 300 && y < 20) {  // 画面右上角座標をタッチしたら
      tft.fillScreen(ILI9341_WHITE); // 画面白色塗りつぶし
      tft.fillRect(300, 1, 19, 18, ILI9341_DARKGREY); // 消去ボタン
    }
  }
}

XPT2046_Touchscreen ts(TOUCH_CS); // タッチパネルのインスタンスを作成
Adafruit_ILI9341 tft = Adafruit_ILI9341(&SPI, TFT_DC, TFT_CS, TFT_RST); // ILI9341ディスプレイのインスタンスを作成

SPI.setTX(COMMON_MOSI); // SPI0のTX(MOSI)
SPI.setRX(TOUCH_MISO);  // SPI0のRX(MISO)
SPI.setSCK(COMMON_SCK); // SPI0のSCK

tft.setRotation(TFT_ROTATION); // TFTの回転を設定（0-3）

ts.setRotation(TFT_ROTATION);  // タッチパネルの回転を設定（液晶画面と合わせる）

if (ts.touched() == true) {        // タッチされていれば
  TS_Point tPoint = ts.getPoint(); // タッチ座標を取得

int16_t x = (tPoint.x-400) * TFT_WIDTH / (4095-550);  // タッチx座標をTFT画面の座標に換算
int16_t y = (tPoint.y-230) * TFT_HEIGHT / (4095-420); // タッチy座標をTFT画面の座標に換算

// 円の連続で線を描画
tft.fillCircle(x, y, 2, 0x0A08); // タッチ座標に塗り潰し円を描画

// 描画エリア消去
if (x > 300 && y < 20) {  // 画面右上角座標をタッチしたら
  tft.fillScreen(ILI9341_WHITE); // 画面白色塗りつぶし
  tft.fillRect(300, 1, 19, 18, ILI9341_DARKGREY); // 消去ボタン

#include <Adafruit_GFX.h>         // Adafruitのグラフィックスライブラリ
#include <Adafruit_ILI9341.h>     // 液晶表示器 ILI9341 制御用ライブラリ
#include <XPT2046_Touchscreen.h>  // タッチパネル制御用ライブラリ
#include <Fonts/FreeSerifBold9pt7b.h> // フォントを読み込み
#include <Fonts/FreeSansBold12pt7b.h>
#include <Fonts/FreeSans18pt7b.h> 
#include <Fonts/FreeSansBold18pt7b.h> 

#define TFT_WIDTH   320 // 画面幅
#define TFT_HEIGHT  240 // 画面高さ
#define TFT_ROTATION  3 // 画面の回転（タッチパネルの回転と合わせる）

#define COMMON_SCK  18  // 液晶表示とタッチパネル共通の SCK
#define COMMON_MOSI 19  // 液晶表示とタッチパネル共通の MOSI
#define TOUCH_MISO 16   // タッチパネルの MISO
#define TOUCH_CS 17     // タッチパネルの CS
#define TFT_DC   20     // 液晶画面の DC
#define TFT_RST  21     // 液晶画面の RST
#define TFT_CS   22     // 液晶画面の CS

XPT2046_Touchscreen ts(TOUCH_CS); // タッチパネルのインスタンスを作成
Adafruit_ILI9341 tft = Adafruit_ILI9341(&SPI, TFT_DC, TFT_CS, TFT_RST); // ILI9341ディスプレイのインスタンスを作成

// スプライト（メモリ描画領域から一括表示）をcanvasとして準備
// 画面表示をtftではなくcanvasで指定して一括描画することでチラツキなく表示できる
GFXcanvas16 canvas(TFT_WIDTH, TFT_HEIGHT);  // 16bitカラースプライト（オフスクリーンバッファ）

// 変数宣言
bool lampSignal = false;   // ランプ点灯状態格納用
int16_t slideYValue = 55;  // スライドボリュームY軸座標格納用
float volumeValue = 100;   // スライドボリュームレベル換算値格納用

/******************** テキスト描画関数 ********************/
void drawText(int16_t x, int16_t y, const char* text, const GFXfont* font, uint16_t color) {
  canvas.setFont(font);       // フォント
  canvas.setTextColor(color); // 文字色
  canvas.setCursor(x, y);     // 表示座標
  canvas.println(text);       // 表示内容
}

/******************** ボタン描画関数 ********************/
void drawButton(int x, int y, const char* label, const GFXfont* font, uint16_t bgColor, uint16_t labelColor) {
  canvas.fillRect(x, y, 80, 80, ILI9341_DARKGREY);      // 外枠
  canvas.fillRect(x + 3, y + 3, 74, 74, ILI9341_WHITE); // 境界線
  canvas.fillRect(x + 6, y + 6, 68, 68, bgColor);       // 操作部
  canvas.setFont(font); // 表示ラベル

  // テキストの幅と高さを取得
  int16_t textX, textY; // テキスト位置取得用
  uint16_t textWidth, textHeight; // テキストサイズ取得用
  canvas.getTextBounds(label, x, y, &textX, &textY, &textWidth, &textHeight);
  
  // 中央揃えのための新しいx, y座標の計算
  int16_t centeredX = x + (80 - textWidth) / 2;               // xを中央へ
  int16_t centeredY = y + (80 - textHeight) / 2 + textHeight; // yを下げて中央へ
  
  canvas.setTextColor(labelColor);        // 文字色
  canvas.setCursor(centeredX, centeredY); // 新しいカーソル位置を設定
  canvas.print(label);                    // テキストを描画
}

/***************** ランプ点灯状態更新関数 *****************/
void updateLamp() {
  if (lampSignal == true) { // ランプ状態点灯なら
    canvas.fillCircle(40, 190, 33, ILI9341_CYAN);         // ランプ部点灯
    analogWrite(LED_BUILTIN, (int)(volumeValue * 10.24)); // PWM出力開始
  } else { // ランプ状態消灯なら
    canvas.fillCircle(40, 190, 33, ILI9341_DARKGREY); // ランプ部消灯
    analogWrite(LED_BUILTIN, 0);                      // PWM出力停止
  }
}

// 初期設定 ----------------------------------------
void setup() {
  Serial.begin(115200); // シリアル通信初期化

  //SPI0設定
  SPI.setTX(COMMON_MOSI); // SPI0のTX(MOSI)
  SPI.setRX(TOUCH_MISO);  // SPI0のRX(MISO)
  SPI.setSCK(COMMON_SCK); // SPI0のSCK

  //液晶表示初期設定
  tft.begin();                      // TFTを初期化
  tft.setRotation(TFT_ROTATION);    // TFTの回転を設定（0-3）
  canvas.setTextSize(1);            // テキストサイズ（倍率）
  canvas.fillScreen(ILI9341_BLACK); // 背景色

  //タッチパネル初期設定
  ts.begin();                   // タッチパネル初期化
  ts.setRotation(TFT_ROTATION); // タッチパネルの回転を設定（液晶画面と合わせる）

  // PWM初期設定
  pinMode(LED_BUILTIN, OUTPUT); // LED用端子を出力設定
  analogWriteFreq(1000);        // PWM周波数
  analogWriteRange(1024);       // 分解能(10bit)
}

// メイン -----------------------------------------
void loop() {
  canvas.fillScreen(ILI9341_BLACK); // 画面クリア
  //タッチパネル処理
  canvas.setTextColor(ILI9341_WHITE); // 文字色
  canvas.setCursor(0, 26);            // 座標設定
  canvas.setFont(&FreeSans18pt7b);    // フォント
  if (ts.touched() == true) {  // タッチされていれば
    TS_Point tPoint = ts.getPoint();  // タッチ座標を取得
    // タッチx座標をTFT画面の座標に換算
    int16_t x = (tPoint.x-400) * TFT_WIDTH / (4095-550);  // タッチx座標をTFT画面の座標に換算
    int16_t y = (tPoint.y-230) * TFT_HEIGHT / (4095-420); // タッチy座標をTFT画面の座標に換算

    // ボタンタッチエリア検出
    if (x >= 91 && x <= 159 && y >= 156 && y <= 224) lampSignal = true;   // 範囲内ならランプ状態を点灯へ
    if (x >= 176 && x <= 244 && y >= 156 && y <= 224) lampSignal = false; // 範囲内ならランプ状態を消灯へ

    // スライドボリューム　調整エリア検出
    if (x >= 270 && x <= 315 && y >= 62 && y <= 216) { // 指定座標範囲内なら
      slideYValue = y - 10;   // ボリュームつまみ表示位置Y軸座標補正
      volumeValue = 100.0 - ((float)slideYValue - 55.0) * 0.68; // ボリュームレベルの変化を0〜100の値に換算
      volumeValue = (volumeValue > 100) ? 100 : (volumeValue < 0) ? 0 : volumeValue; // 100以上は100に、0以下は0でクランプ
    }
    canvas.printf("x=%d  y=%d", x, y); // 座標表示
    // Serial.printf("x=%d, y=%d\n", x, y); // シリアル出力確認用
  } else {  //タッチされていなければ座標表示なし
    canvas.print("x= -      y= -"); // 文字表示
  }
  // スライドボリュームレベル換算値表示
  canvas.setCursor(262, 30);          // 座標設定
  canvas.printf("%.0f", volumeValue); // 値表示

  // 線描画
  canvas.drawFastHLine(0, 38, 260, ILI9341_WHITE);  // 線（指定座標から平行線）
  canvas.drawFastHLine(0, 39, 260, ILI9341_WHITE);  // 線（指定座標から平行線）
  canvas.drawFastVLine(120, 44, 43, ILI9341_PINK);  // 線（指定座標から垂線）
  canvas.drawFastVLine(121, 44, 43, ILI9341_PINK);  // 線（指定座標から垂線）
  canvas.drawFastHLine(0, 90, 260, ILI9341_WHITE);  // 線（指定座標から平行線）
  canvas.drawFastHLine(0, 91, 260, ILI9341_WHITE);  // 線（指定座標から平行線）
  canvas.drawFastHLine(0, 135, 260, ILI9341_WHITE); // 線（指定座標から平行線）
  canvas.drawFastHLine(0, 136, 260, ILI9341_WHITE); // 線（指定座標から平行線）

  // 文字描画(x, y, 内容, フォント, 文字色)
  drawText(8, 60, "LCD Display", &FreeSerifBold9pt7b, ILI9341_GREEN); // 文字表示関数呼び出し
  drawText(5, 80, "Touch Screen", &FreeSerifBold9pt7b, ILI9341_GREEN);
  drawText(135, 77, "ILI9341", &FreeSans18pt7b, ILI9341_CYAN);
  drawText(15, 125, "LogikaraBlog", &FreeSansBold18pt7b, ILI9341_ORANGE);

  // ランプ描画(x, y, 半径, 色)
  canvas.fillCircle(40, 190, 40, ILI9341_DARKGREY); // 外枠
  canvas.fillCircle(40, 190, 36, ILI9341_WHITE);    // 境界線
  updateLamp(); // ボタン点灯状態更新関数呼び出し

  // ボタン描画（x, y, ラベル, フォント, ボタン色, ラベル色）
  drawButton(85, 150, "ON", &FreeSansBold12pt7b, ILI9341_GREEN, ILI9341_WHITE); // ONボタン
  drawButton(170, 150, "OFF", &FreeSansBold12pt7b, ILI9341_RED, ILI9341_WHITE); // OFFボタン

  // スライドボリューム描画
  canvas.fillRect(265, 38, 55, 200, ILI9341_DARKGREY); // スライドエリア
  canvas.fillRect(287, 48, 11, 182, ILI9341_WHITE);    // 縦ライン枠
  canvas.fillRect(290, 52, 5, 175, ILI9341_BLACK);     // 縦ライン
  canvas.fillRect(270, slideYValue, 45, 20, 0x0904);   // ボリュームつまみ
  canvas.fillRect(278, slideYValue + 8, 29, 3, ILI9341_RED);  // ボリュームつまみライン

  // スプライト（メモリ内に描画した画面）をTFTに描画
  tft.drawRGBBitmap(0, 0, canvas.getBuffer(), TFT_WIDTH, TFT_HEIGHT);
}