TFT GUI design

In this Project, we will see about how to design custom GUI for TFT Touch Display. The project can simultaneously read button inputs & show sensor output values.

Circuit Diagram:

Arduino Code:

tft_custom_gui_design.ino

//This Code is Developed by Sdev
//Follow Us Here : https://youtube.com/sdevelectronics

#include <Adafruit_GFX.h>
#include <MCUFRIEND_kbv.h>
MCUFRIEND_kbv tft;
#include <TouchScreen.h>

#define MINPRESSURE 200
#define MAXPRESSURE 1000

const int XP = 7, XM = A1, YP = A2, YM = 6; //ID=0x7789
const int TS_LEFT = 199, TS_RT = 913, TS_TOP = 947, TS_BOT = 191;

TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);

#define BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

#define myLED 53
#define US_TRIG 22
#define US_ECHO  23
long duration, distance;

int pixel_x, pixel_y;     //Touch_getXY() updates global vars
bool Touch_getXY(void) {
  TSPoint p = ts.getPoint();
  pinMode(YP, OUTPUT);      //restore shared pins
  pinMode(XM, OUTPUT);
  digitalWrite(YP, HIGH);   //because TFT control pins
  digitalWrite(XM, HIGH);
  bool pressed = (p.z > MINPRESSURE && p.z < MAXPRESSURE);
  if (pressed) {
    pixel_x = map(p.y, TS_TOP, TS_BOT, 0, 320); //.kbv makes sense to me
    pixel_y = map(p.x, TS_RT, TS_LEFT, 0, 240);
  }
  return pressed;
}

void setup() {
  Serial.begin(9600);

  pinMode(myLED, OUTPUT);
  pinMode(US_TRIG, OUTPUT);
  pinMode(US_ECHO, INPUT);
  
  tft.reset();
  tft.begin(0x7789);
  tft.setRotation(1);         //0-Portrait 1-Landscape

  page1();
  delay(3000);
  page2();
}
void loop() {}

void page1() {
  tft.fillScreen(BLACK);                    //color
  tft.drawRect(0, 0, 319, 240, WHITE);      //start_X,start_Y,end_X,end_Y,color

  tft.setCursor(70, 60);                    //x,y
  tft.setTextColor(WHITE);                  //color
  tft.setTextSize(3);                       //Eg., 1,2,3
  tft.print("Welcome to ");                 //Your Text

  tft.setCursor(20, 120);
  tft.setTextColor(GREEN);
  tft.setTextSize(3);
  tft.print("Sdev Electronics");

  tft.setCursor(80, 170);
  tft.setTextColor(RED);
  tft.setTextSize(3);
  tft.print("YT Channel");
}
void page2() {
  tft.fillScreen(BLACK);
  tft.drawRect(0, 0, 319, 240, WHITE);

  tft.setCursor(45, 20);
  tft.setTextColor(YELLOW);
  tft.setTextSize(2);
  tft.print("Ultrasonic Distance");

  tft.drawLine(15, 160, 305, 160, WHITE);

  tft.fillRect(40, 180, 100, 40, GREEN);
  tft.drawRect(40, 180, 100, 40, WHITE);
  tft.setCursor(55, 192);
  tft.setTextColor(BLACK);
  tft.setTextSize(2);
  tft.print("LED On");

  tft.fillRect(180, 180, 100, 40, RED);
  tft.drawRect(180, 180, 100, 40, WHITE);
  tft.setCursor(190, 192);
  tft.setTextColor(BLACK);
  tft.setTextSize(2);
  tft.print("LED Off");

  bool down = Touch_getXY();
  while (!down) {
    down = Touch_getXY();

    Serial.println(down);
    digitalWrite(US_TRIG, LOW);
    delayMicroseconds(2);
    digitalWrite(US_TRIG, HIGH);
    delayMicroseconds(10);
    digitalWrite(US_TRIG, LOW);
    duration = pulseIn(US_ECHO, HIGH);
    distance = duration * 0.017;         //distance in centimeters

    tft.fillRect(90, 90, 200, 40, BLACK);
    
    tft.setCursor(90, 90);
    tft.setTextColor(WHITE);
    tft.setTextSize(4);
    tft.print(distance);
    tft.print(" cm");

    if (pixel_x > 40 && pixel_x < 140 && pixel_y > 180 && pixel_y < 220) {      //LED on
      digitalWrite(myLED, HIGH);
      down = false;
    }
    else if (pixel_x > 180 && pixel_x < 280 && pixel_y > 180 && pixel_y < 220) {     //LED off
      digitalWrite(myLED, LOW);
      down = false;
    }
    else{
      down = false;
    }
    delay(100);
  }
}

Libraries Used:

1. MCUFRIEND_kbv - https://github.com/prenticedavid/MCUFRIEND_kbv

2. Adafruit-GFX-Library - https://github.com/adafruit/Adafruit-GFX-Library

3. Adafruit_TouchScreen - https://github.com/adafruit/Adafruit_TouchScreen

Youtube Video Tutorial:

https://youtu.be/hhte-mpxtxA

Download our official Android App in PlayStore. Click Here

You can get the all the required files (like Circuit Diagram, Arduino.ino file, Libraries Used, and others) for the project  in ZIP format and much more...