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

TFT_eSPIで複数ページ構成のプログラムを作ろう の続きです。
https://qiita.com/usashirou/items/f5855e79e62d5ec316f6
今回は最初に page_1 と page_2 に文字を追加しましょう。
文字の追加はこちらを参照してください。
フォントファイルのアップロード

フォントをアップロードすると画面が表示されます。

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.loadFont("msgothic-36");
  tft.setTextColor(TFT_BLACK, TFT_GREEN);
  tft.drawString("     状態     ", 35  , 85);
  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.drawLine(0, 35, 375, 35, TFT_WHITE);
  tft.drawLine(0, 65, 375, 65, TFT_WHITE);
  tft.drawRect(0, 95, 480, 280, TFT_WHITE);
  tft.loadFont("msgothic-36");
  tft.fillRect(375, 0, 480, 95, TFT_YELLOW);
  tft.setTextColor(TFT_BLACK, TFT_YELLOW);
  tft.drawString("状態", 390  , 30);
  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);

  tft.loadFont("msgothic-28");
  // Set the font colour to be white with a black background, set text size multiplier to 1
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.drawString("運行 : 21  行先 : 荻窪", 10, 7);
  tft.drawString("地点 :     池袋", 10, 37);
  tft.drawString("終端戸締 :  1 側", 10, 67);
  tft.drawString("車内 :   ", 10, 100);
  tft.drawString(" 1      2      3      4      5      6", 135, 165);
  tft.drawString(" 1側扉 ", 25, 200);
  tft.drawString(" 2側扉 ", 25, 235);
  tft.setTextColor(TFT_WHITE, TFT_RED);
  tft.drawString("  閉    閉    閉    閉    閉    閉  ", 120, 200);
  tft.setTextColor(TFT_BLACK, TFT_WHITE);
  tft.drawString("  閉    閉    閉    閉    閉    閉  ", 120, 235);
  // 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
}

通信内容を反映する

次に、UARTのシリアル通信の内容を画面に反映させます。
最初に、扉の開閉を表示させます。
プログラムの最初に以下の宣言文を追加します。

今回、dai1 を追加しています。
これは、扉の開閉を記憶するものになります。
dai1 を用意しない場合、通信を受信したときだけ、開閉の反応をしてしまいます。
画面を切り替えている間の内容が反映されなかったり、違う画面で表示されるようになってしまいます。
このための、対策になります。

#define ELEMENTS_NUM 5 /**< カンマ区切りデータの項目数 */

/**
   @brief       受信済み文字列を格納する配列
*/
static String elements[ELEMENTS_NUM];
static int received_elements_num = 0; /**< 受信済み文字列の数 */
char dai1;
char dai1a;

loop 内に

  receive();

receive という関数を追加します。

void receive() {
  String line;              // 受信文字列
  unsigned int beginIndex;  // 要素の開始位置

  // シリアルモニタやProcessingから"AB,C,DEF,12,3,45,A1,2B,-1,+127"のように
  // ELEMENTS_NUM個の文字列の間にカンマを付けて送る
  // 送信側の改行設定は「LFのみ」にすること
  // シリアル通信で1行（改行コードまで）読み込む
  line = Serial.readStringUntil('\n');

  beginIndex = 0;
  for (received_elements_num = 0; received_elements_num < ELEMENTS_NUM; received_elements_num++) {
    // 最後の要素ではない場合
    if (received_elements_num != (ELEMENTS_NUM - 1)) {
      // 要素の開始位置から，カンマの位置を検索する
      unsigned int endIndex;
      endIndex = line.indexOf(',', beginIndex);
      // カンマが見つかった場合
      if (endIndex != -1) {
        // 文字列を切り出して配列に格納する
        elements[received_elements_num] = line.substring(beginIndex, endIndex);
        // 要素の開始位置を更新する
        beginIndex = endIndex + 1;
      }
      // カンマが見つからなかった場合はfor文を中断する
      else {
        break;
      }
    }
    // 最後の要素の場合
    else {
      elements[received_elements_num] = line.substring(beginIndex);
    }
    dai1a = elements[0].toInt();
    if ( (dai1a == 1) && (dai1 != dai1a))  {
      if (page == '2') {
        tft.setTextColor(TFT_WHITE, TFT_RED);
        tft.drawString("  開    開    開    開    開    開  ", 120, 200);
        dai1 = dai1a;
      }
    }
    if ((dai1a == 0) && (dai1 != dai1a)) {
      if (page == '2') {
        tft.setTextColor(TFT_BLACK, TFT_WHITE);
        tft.drawString("  閉    閉    閉    閉    閉    閉  ", 120, 200);
        dai1 = dai1a;
      }
    }
  }
}

以上により、０，１ を送信することで、扉の開閉が反映されると思います。
ここまでのプログラムは以下になります。