TFT_eSPIで複数ページ構成のプログラムを作ろう4

TFT_eSPIで複数ページ構成のプログラムを作ろう3 の続きになります。

文字入力する

今回は、文字入力画面を追加します。

キーボードのプログラムは TFT_eSPI のサンプルプログラム Keypad_480x320 をもとに必要な部分を追加していきます。

入力文字を指定する

最初に入力する文字列を指定します。
入力したい文字列、および背景の色を指定します。

// Create 15 keys for the keypad
char keyLabel[30][8] = {"New", "Del", "Send", "1", "2", "3", "4", "5", "6", "7", "8", "9",  "0", " " , "A", "B", "C", "D", "E", "F", "G", "H", "K", "M", "P", "R", "S", "T", "Y", "Z"};
uint16_t keyColor[30] = {TFT_RED, TFT_DARKGREY, TFT_DARKGREEN, TFT_BLUE, TFT_BLUE, TFT_BLUE,
                         TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE,
                         TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE,
                         TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE,
                         TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE, TFT_BLUE,
                        };

画面を作る

void drawKeypad() を引用して、加工します。
row,col を修正し入力した文字列を表示する場所を指定します。

void drawKeypad()
{
  tft.fillScreen(TFT_BLACK);
  // Draw the keys
  for (uint8_t row = 0; row < 5; row++) {
    for (uint8_t col = 0; col < 6; col++) {
      uint8_t b = col + row * 6;

      if (b < 3) tft.setFreeFont(LABEL1_FONT);
      else tft.setFreeFont(LABEL2_FONT);

      key[b].initButton(&tft, KEY_X + col * (KEY_W + KEY_SPACING_X),
                        KEY_Y + row * (KEY_H + KEY_SPACING_Y), // x, y, w, h, outline, fill, text
                        KEY_W, KEY_H, TFT_WHITE, keyColor[b], TFT_WHITE,
                        keyLabel[b], KEY_TEXTSIZE);
      key[b].drawButton();
    }
  }
  tft.fillRect(DISP_X, DISP_Y, DISP_W, DISP_H, TFT_BLACK);
  tft.drawRect(DISP_X, DISP_Y, DISP_W, DISP_H, TFT_WHITE);
  tft.fillRect(360, 0, 480, 50, TFT_YELLOW);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.loadFont("yu-gothic-28");
  tft.setTextColor( TFT_BLACK);
  tft.drawString("運行番号", 365  , 10);
  tft.pushImage(230, 10, 115, 45, button_purple);
  tft.drawString("起      動", 240, 20);
}

入力文字を表示する

最後に文字列 numberBuffer を表示するようにします。

tft.drawString(numberBuffer, 230, 75);

以上で、文字入力および、画面に表示できるようになりました。

文字の長さを指定する

#define NUM_LEN 

入力する文字列の長さを指定します。

ここまでのプログラムはこちらになります。
https://github.com/taisirou/TFT_eSPI_multi/tree/main/multi4