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

TFT_eSPIで複数ページ構成のプログラムを作ろう2 の続きです。
https://qiita.com/usashirou/items/aef8951ace729f39ec6f

無地の画面を作る

今回は、無地の何も表示しない画面を作ってみます。

といっても難しいことはなく関数とタッチ部分のコードを追加するだけです。
これで背景黒の無地画面を表示できます。

void page_x() {
  tft.fillScreen(TFT_BLACK);
  page = 'x';//change the state page into 1
}

loop部追加コード

  if (page == 'x') { //first page function touch screen
    uint16_t x, y;
    static uint16_t color;
    int pressed = tft.getTouch(&x, &y);
    if (pressed) {
      if ((x > 0) && (x < 480)) {
        if ((y > 0) && (y < 320)) {
          戻り先();
        }
      }
    }
  }

画像を表示する

今回は、ボタンの画像を表示してみましょう。
今まで、各ボタンは fillRect により構成していましたが影つきのボタンにするため
別途ボタン画像を用意して表示します。

最初に bmp 等でボタンを用意し、C のコードに変換します。
変換はこちらのサイトで行いました。

読み込むボタンファイルを宣言文に追加します。

#include "button.h"

表示する画像のXY座標、横幅、縦幅、表示する画像の名前

tft.pushImage(x, y, widh, high, button);

注：色が異なる場合、調整します。
以上によりボタンを画像に置換することができました。

ここまでのプログラムはこちらになります。