TFT_eSPI Cheat Sheet

Quick post here to add a link to the little cheat sheet I put together for TFT_eSPI by BODMER. While there is plenty of documentation and some tutorials available, when working with an unfamiliar library, I typically look for a quick syntax/keyword/usage overview and I was unable to find one.
Most of the trouble people run into with this library is the setup, which I will not go into here as there is plenty of information available elsewhere.

Below the document embed/download link are brief proof-of-concept programs showing the creation of a clickable button using the standard TFT_eSPI library by drawing discreet shapes, as well as the TFT_eWidget approach to accomplishing the same task.

Good luck!

• Mike at Praxis Mechatronics

// TFT_eSPI library to create a single clickable rectangle (button)
#include <TFT_eSPI.h> // Include the TFT_eSPI library

TFT_eSPI tft = TFT_eSPI(); // Create TFT object

// Define button properties
#define BUTTON_X 100
#define BUTTON_Y 100
#define BUTTON_W 80
#define BUTTON_H 40
#define BUTTON_COLOR TFT_BLUE
#define BUTTON_TEXT_COLOR TFT_WHITE

void setup() {
  tft.begin();               // Initialize the display
  tft.setRotation(1);        // Set display rotation
  tft.fillScreen(TFT_BLACK); // Clear screen

  // Draw a simple button
  drawButton(false);
}

void loop() {
  uint16_t x, y;

  // Check for touch input
  if (tft.getTouch(&x, &y)) {
    // Check if the touch is within the button bounds
    if (x > BUTTON_X - BUTTON_W / 2 && x < BUTTON_X + BUTTON_W / 2 &&
        y > BUTTON_Y - BUTTON_H / 2 && y < BUTTON_Y + BUTTON_H / 2) {
      // If the button is pressed, redraw it as "pressed"
      drawButton(true);
      delay(200); // Debounce delay
      drawButton(false); // Restore the button
    }
  }
}

// Function to draw the button
void drawButton(bool pressed) {
  uint16_t color = pressed ? TFT_RED : BUTTON_COLOR;
  tft.fillRoundRect(BUTTON_X - BUTTON_W / 2, BUTTON_Y - BUTTON_H / 2, BUTTON_W, BUTTON_H, 5, color);
  tft.drawRoundRect(BUTTON_X - BUTTON_W / 2, BUTTON_Y - BUTTON_H / 2, BUTTON_W, BUTTON_H, 5, TFT_WHITE);
  tft.setTextColor(BUTTON_TEXT_COLOR, color);
  tft.setTextDatum(MC_DATUM);
  tft.drawString("Click", BUTTON_X, BUTTON_Y);
}

// TFT_eWidget approach to the same task
#include <TFT_eSPI.h>
#include <TFT_eWidget.h>

// Create TFT and Button objects
TFT_eSPI tft = TFT_eSPI();
ButtonWidget *btn = new ButtonWidget(&tft); // ButtonWidget requires TFT pointer in constructor

// Define button properties
#define BUTTON_X 100
#define BUTTON_Y 100
#define BUTTON_W 80
#define BUTTON_H 40
#define BUTTON_COLOR TFT_BLUE
#define BUTTON_TEXT_COLOR TFT_WHITE

// Button label buffer
char buttonLabel[] = "Click";

void setup() {
    tft.begin();
    tft.setRotation(1);
    tft.fillScreen(TFT_BLACK);
    
    // Initialize touch calibration data
    //uint16_t calData[5] = { 195, 3456, 301, 3456, 7 }; // Example values - use your actual calibration data
    //tft.setTouch(calData);
    
    // Configure the button
    btn->initButtonUL(
        BUTTON_X - BUTTON_W/2,  // x coord of upper left
        BUTTON_Y - BUTTON_H/2,  // y coord of upper left
        BUTTON_W,   // width
        BUTTON_H,   // height
        TFT_WHITE,  // outline color
        BUTTON_COLOR, // fill color when not pressed
        TFT_RED,    // fill color when pressed
        buttonLabel,    // button text
        1           // text size
    );
    
    // Set text color
    btn->setTextColor(BUTTON_TEXT_COLOR);
    
    // Draw the button for the first time
    btn->drawButton(false);
}

void loop() {
    static uint16_t x, y;
    bool pressed = false;
    
    // Check for touch input
    if (tft.getTouch(&x, &y)) {
        // Check if touch is within button bounds
        if (btn->contains(x, y)) {
            pressed = true;
            btn->drawButton(true); // Draw pressed state
            delay(200);           // Debounce delay
        }
    }
    
    // If button was pressed, restore unpressed state
    if (pressed) {
        btn->drawButton(false);
        pressed = false;
    }
}