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

メトロ02系のモニタ装置を液晶ディスプレイで再現しよう では1枚表示の画面を作りましたが複数ページ構成のプログラムを作ってみましょう。

基本画面を作る

最初に以下のような画面のプログラムを作ります。

#include "FS.h"
#include <SPI.h>
#include <TFT_eSPI.h>
TFT_eSPI tft = TFT_eSPI();
int page;

#define CALIBRATION_FILE "/calibrationData"

void setup(void) {
  uint16_t calibrationData[5];
  uint8_t calDataOK = 0;

  Serial.begin(115200);
  Serial.println("starting");

  tft.init();

  tft.setRotation(3);
  tft.fillScreen((0xFFFF));

  tft.setCursor(20, 0, 2);
  tft.setTextColor(TFT_BLACK, TFT_WHITE);  tft.setTextSize(1);
  tft.println("calibration run");

  // check file system
  if (!SPIFFS.begin()) {
    Serial.println("formating file system");
    SPIFFS.format();
    SPIFFS.begin();
  }

  // check if calibration file exists
  if (SPIFFS.exists(CALIBRATION_FILE)) {
    File f = SPIFFS.open(CALIBRATION_FILE, "r");
    if (f) {
      if (f.readBytes((char *)calibrationData, 14) == 14)
        calDataOK = 1;
      f.close();
    }
  }
  if (calDataOK) {
    // calibration data valid
    tft.setTouch(calibrationData);
  } else {
    // data not valid. recalibrate
    tft.calibrateTouch(calibrationData, TFT_WHITE, TFT_RED, 15);
    // store data
    File f = SPIFFS.open(CALIBRATION_FILE, "w");
    if (f) {
      f.write((const unsigned char *)calibrationData, 14);
      f.close();
    }
  }
//  tft.fillScreen((0xFFFF));

  tft.fillScreen(TFT_BLACK);
  tft.drawLine(0, 50, 375, 50, TFT_WHITE);
  tft.fillRect(375, 0, 480, 50, TFT_YELLOW);

  tft.fillRect(35, 75, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 135, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 195, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 255, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 75, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 135, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 195, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 255, 170, 45, TFT_RED); //stroke line
}

void loop() {
  uint16_t x, y;
  static uint16_t color;
  int pressed = tft.getTouch(&x, &y);

  if (tft.getTouch(&x, &y)) {

    tft.setCursor(150, 5, 2);
    tft.printf("x: %i     ", x);
    tft.setCursor(150, 20, 2);
    tft.printf("y: %i    ", y);
    color += 155;
  }
}

画面遷移を追加する

次に、ページの追加をし画面遷移をしてみます。

追加するプログラムは、X,Y が指定の中にある場合に
page_1 に遷移するというものです。

    if (pressed) {
      if ((x > 0) && (x < 105)) {
        if ((y > 280) && (y < 315)) {
          page_1();
        }
      }

遷移するページを void page_1() のように追加しておきます。

setup 内

//  tft.fillScreen((0xFFFF));

  tft.fillScreen(TFT_BLACK);
  tft.drawLine(0, 50, 375, 50, TFT_WHITE);
  tft.fillRect(375, 0, 480, 50, TFT_YELLOW);

  tft.fillRect(35, 75, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 135, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 195, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 255, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 75, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 135, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 195, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 255, 170, 45, TFT_RED); //stroke line

を削除し以下とします。

  tft.fillScreen((0xFFFF));
  page_1();

loop以下を以下に差し替えます。

void loop() {
  if (page == '1') { //first page function touch screen
    uint16_t x, y;
    static uint16_t color;
    int pressed = tft.getTouch(&x, &y);

    if (tft.getTouch(&x, &y)) {

      tft.setCursor(150, 5, 2);
      tft.printf("x: %i     ", x);
      tft.setCursor(150, 20, 2);
      tft.printf("y: %i    ", y);
      color += 155;
    }
    if (pressed) {
      if ((x > 35) && (x < 150)) {
        if ((y > 75) && (y <120)) {
          page_2();
        }
      }
    }
  }
  if (page == '2') { //first page function touch screen
    uint16_t x, y;
    static uint16_t color;
    int pressed = tft.getTouch(&x, &y);

    if (tft.getTouch(&x, &y)) {

      tft.setCursor(150, 5, 2);
      tft.printf("x: %i     ", x);
      tft.setCursor(150, 20, 2);
      tft.printf("y: %i    ", y);

      tft.drawPixel(x, y, color);
      color += 155;
    }

    if (pressed) {
      if ((x > 0) && (x < 105)) {
        if ((y > 280) && (y < 315)) {
          page_1();
        }
      }
    }
  }
}
void page_1() {
  tft.fillScreen(TFT_BLACK);
  tft.drawLine(0, 50, 375, 50, TFT_WHITE);
  tft.fillRect(375, 0, 480, 50, TFT_YELLOW);

  tft.fillRect(35, 75, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 135, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 195, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(35, 255, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 75, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 135, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 195, 170, 45, TFT_GREEN); //stroke line
  tft.fillRect(275, 255, 170, 45, TFT_RED); //stroke line
  page = '1';//change the state page into 1

}
void page_2() {
  tft.setCursor(0, 0);
  tft.fillScreen(TFT_BLACK);

  tft.drawRect(0, 0, 375, 95, TFT_WHITE);
  tft.drawLine(0, 35, 375, 35, TFT_WHITE);
  tft.drawLine(0, 65, 375, 65, TFT_WHITE);
  tft.drawRect(0, 95, 480, 280, TFT_WHITE);
  tft.fillRect(375, 0, 480, 95, TFT_YELLOW);
  tft.setTextColor(TFT_BLACK, TFT_YELLOW);
  tft.fillRect(20, 195, 95, 70, TFT_DARKGREEN);
  tft.fillRect(115, 195, 350, 70, TFT_WHITE);
  tft.fillRect(0, 275, 480, 45, TFT_WHITE);
  tft.fillRect(0, 280, 105, 35, TFT_CYAN);
  tft.fillRect(125, 280, 105, 35, TFT_CYAN);
  tft.fillRect(250, 280, 105, 35, TFT_CYAN);
  tft.fillRect(375, 280, 105, 35, TFT_CYAN);
  // Set the font colour to be white with a black background, set text size multiplier to 1
  page = '2';//change the state page into 1
}

遷移条件

if文 において遷移条件を追加します。
以下は page1 の場合に遷移する場合です。

if (page == '1') { //first page function touch screen

ページ指定

page の指定は以下のように記述しておきます。

page = '1';//change the state page into 1

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

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