Download<\/a><\/div>\n\n\n\n\/\/ TFT_eSPI library to create a single clickable rectangle (button)\n#include <TFT_eSPI.h> \/\/ Include the TFT_eSPI library\n\nTFT_eSPI tft = TFT_eSPI(); \/\/ Create TFT object\n\n\/\/ Define button properties\n#define BUTTON_X 100\n#define BUTTON_Y 100\n#define BUTTON_W 80\n#define BUTTON_H 40\n#define BUTTON_COLOR TFT_BLUE\n#define BUTTON_TEXT_COLOR TFT_WHITE\n\nvoid setup() {\n tft.begin(); \/\/ Initialize the display\n tft.setRotation(1); \/\/ Set display rotation\n tft.fillScreen(TFT_BLACK); \/\/ Clear screen\n\n \/\/ Draw a simple button\n drawButton(false);\n}\n\nvoid loop() {\n uint16_t x, y;\n\n \/\/ Check for touch input\n if (tft.getTouch(&x, &y)) {\n \/\/ Check if the touch is within the button bounds\n if (x > BUTTON_X - BUTTON_W \/ 2 && x < BUTTON_X + BUTTON_W \/ 2 &&\n y > BUTTON_Y - BUTTON_H \/ 2 && y < BUTTON_Y + BUTTON_H \/ 2) {\n \/\/ If the button is pressed, redraw it as \"pressed\"\n drawButton(true);\n delay(200); \/\/ Debounce delay\n drawButton(false); \/\/ Restore the button\n }\n }\n}\n\n\/\/ Function to draw the button\nvoid drawButton(bool pressed) {\n uint16_t color = pressed ? TFT_RED : BUTTON_COLOR;\n tft.fillRoundRect(BUTTON_X - BUTTON_W \/ 2, BUTTON_Y - BUTTON_H \/ 2, BUTTON_W, BUTTON_H, 5, color);\n tft.drawRoundRect(BUTTON_X - BUTTON_W \/ 2, BUTTON_Y - BUTTON_H \/ 2, BUTTON_W, BUTTON_H, 5, TFT_WHITE);\n tft.setTextColor(BUTTON_TEXT_COLOR, color);\n tft.setTextDatum(MC_DATUM);\n tft.drawString(\"Click\", BUTTON_X, BUTTON_Y);\n}\n<\/pre>\n\n\n\n
\/\/ 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;
}
}<\/pre>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":89,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,1,13,15,11,16,17],"tags":[],"class_list":["post-85","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arduino","category-blog","category-c","category-esp32","category-python","category-tft","category-tft_espi"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/posts\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":5,"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/posts\/85\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/posts\/85\/revisions\/113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/media\/89"}],"wp:attachment":[{"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/categories?post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/praxismechatronics.com\/index.php\/wp-json\/wp\/v2\/tags?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}