TFT Screen 3.5 mcufriend GUI Design For Menu or Back button along with 3-Pages Synch-up each other

Please find given Code as well as my GUI design pic -

  1. If I press Menu button then it will comes to Menu1 Gui and if I press Menu1 Gui button then it will comes to Menu2 Gui button , How can I make Gui for my slide?

  2. How to synch-up my pages to each other using Back Gui button? Like if I press Page2 Back button then it will comes to Page1 and if I press Page1 back button then it will comes to Home screen? How can I do this ?

I am using Arduino Uno board, TFT Gui screen ILI9486 Mcufriend.

`
#include <SPI.h>            
#include <Adafruit_GFX.h>    
#include <Adafruit_TFTLCD.h> 
#include <TouchScreen.h>
#include<Fonts/FreeSansBold12pt7b.h>


#define LCD_CS A3     // Chip Select goes to Analog 3
#define LCD_CD A2     // Command/Data goes to Analog 2
#define LCD_WR A1     // LCD Write goes to Analog 1
#define LCD_RD A0     // LCD Read goes to Analog 0
#define LCD_RESET A4  // Can alternately just connect to Arduino's reset pin

#include <MCUFRIEND_kbv.h>
MCUFRIEND_kbv tft;


// Define some TFT readable colour codes to human readable names
#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 REDBAR_MINX 80
#define GREENBAR_MINX 130
#define BLUEBAR_MINX 180
#define BAR_MINY 30
#define BAR_HEIGHT 250
#define BAR_WIDTH 30

#define YP A2  // must be an analog pin, use "An" notation!
#define XM A3  // must be an analog pin, use "An" notation!
#define YM 8   // can be a digital pin
#define XP 9   // can be a digital pin

// from Kuman_SC3A
#define TS_MINX 85
#define TS_MAXX 925
#define TS_MINY 135
#define TS_MAXY 910

#define MINPRESSURE 10
#define MAXPRESSURE 1000

TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
boolean buttonEnabled = true;
int currentPage = 0;

#define PALETTEDEPTH   0     // do not support Palette modes

void setup(void) {
  Serial.begin(9600);
  Serial.print(F("Finding out the type of TFT LCD... ID is : "));
  tft.reset();
  uint16_t identifier = tft.readID();
  Serial.print(identifier, HEX);
  tft.begin(identifier);
  Serial.print(". TFT size is : "); Serial.print(tft.width()); Serial.print(" x "); Serial.println(tft.height());
  tft.setRotation(1);
  tft.invertDisplay(1);                           // UNCOMMENT THIS IF COLORS get inverted
  tft.fillScreen(BLACK);

  Serial.println("Drawing Init Screen...");
  drawInitScreen();
  delay(100);
  
  Serial.println("Drawing Home or Menu Screen...");
  //drawHomeScreen1();
  drawHomeScreen();
  delay(100);
  
}

void drawInitScreen()
{
  tft.setTextSize(4);

  tft.setTextColor(BLUE);
  tft.setCursor(20, 30);
  tft.print("Welcome ");
  tft.setTextSize(2);
  tft.setTextColor(WHITE);
  tft.setCursor(100, 170);
  tft.print("Smart Lighting System");

  for ( int i = 1; i < 400; i++)
  {
      tft.fillRect(30, 200, i, 15, MAGENTA);
      delay(5);
  }
}



void drawHomeScreen()
{
  
  tft.fillScreen(BLACK);
  tft.drawRoundRect(0, 0, 479, 319, 8, BLUE);     //Page border

  
  tft.setTextSize(2);
  tft.setCursor(120, 30);
  tft.setTextColor(WHITE);
  tft.drawLine(100,50,390,50,WHITE);
  tft.print("SMART LIGHTING SYSTEM");
  

  tft.fillRoundRect(60, 100, 360, 40, 8, RED);
  tft.drawRoundRect(60, 100, 360, 40, 8, WHITE); 

  tft.fillRoundRect(60, 180, 360, 40, 8, RED);   
  tft.drawRoundRect(60, 180, 360, 40, 8, WHITE);
    
  tft.setTextColor(WHITE);
  
  tft.setCursor(165, 115);
  tft.print("Menu ");

  
  tft.setCursor(175, 195);
  tft.print("Home");

  tft.fillRoundRect(60, 250, 360, 40, 8, RED);   
  tft.drawRoundRect(60, 250, 360, 40, 8, WHITE);
  tft.setCursor(160, 260);
  tft.print("GROUP-DETAILS");

  
 
}


void loop(void) {
  
 
  digitalWrite(13, HIGH);
  TSPoint p = ts.getPoint();
  digitalWrite(13, LOW);
  
  buttonEnabled = true;
  
  pinMode(XM, OUTPUT);
  pinMode(YP, OUTPUT);


   if (currentPage == 0){
      if (p.z > MINPRESSURE && p.z < MAXPRESSURE) {
               
          //map(value, fromLow, fromHigh, toLow, toHigh)
          p.x = map( p.x, TS_MINX, TS_MAXX,0,  480 );
          p.y = map( p.y, TS_MINY, TS_MAXY, 0, 320 );                 

          
          if(p.x>60 && p.x<400 && p.y>100 && p.y<120 )// The user has pressed inside the red rectangle        // 1 slide 
          {
                            
              currentPage = 1;
              tft.fillScreen(BLACK);
              tft.drawRoundRect(0, 0, 479, 319, 8, BLUE);     //Page border
              
              // top row buttons

              
              tft.fillRoundRect(40, 80, 80, 40, 8, RED);
              tft.drawRoundRect(40, 80, 80 , 40, 8, WHITE); 
              tft.setTextSize(2);
              tft.setTextColor(WHITE);  
              tft.setCursor(74, 93);
              tft.print("1");

              tft.fillRoundRect(380, 260, 60, 30, 8, RED);
              tft.drawRoundRect(380, 260, 60 , 30, 8, WHITE);
              tft.setTextSize(2);
              tft.setTextColor(WHITE);  
              tft.setCursor(395, 268);
              tft.print("<<"); 
           
              tft.setTextSize(2);
              tft.setCursor(170, 30);
              tft.setTextColor(WHITE);
              tft.print(" ON");
    
              if(p.x>380 && p.x<435 && p.y>260 && p.y<285 ){
                  currentPage = 0;
                  drawHomeScreen();
                  
              }   
          }       
     
      if (currentPage == 2){
      if (p.z > MINPRESSURE && p.z < MAXPRESSURE) {
               
          //map(value, fromLow, fromHigh, toLow, toHigh)
          p.x = map( p.x, TS_MINX, TS_MAXX,0,  480 );
          p.y = map( p.y, TS_MINY, TS_MAXY, 0, 320 );                 

          
          if(p.x>40 && p.x<400 && p.y>80 && p.y<120 )// The user has pressed inside the red rectangle        // 1 slide 
          {
              currentPage = 3;
              tft.fillScreen(BLACK);
              tft.drawRoundRect(0, 0, 479, 319, 8, BLUE);     //Page border
              tft.fillRoundRect(40, 80, 80, 40, 8, RED);
              tft.drawRoundRect(40, 80, 80 , 40, 8, WHITE); 
              tft.setTextSize(2);
              tft.setTextColor(WHITE);  
              tft.setCursor(74, 93);
              tft.print("Timer");

               tft.fillRoundRect(380, 260, 60, 30, 8, RED);
              tft.drawRoundRect(380, 260, 60 , 30, 8, WHITE);
              tft.setTextSize(2);
              tft.setTextColor(WHITE);  
              tft.setCursor(395, 268);
              tft.print("<<"); 
           
              tft.setTextSize(2);
              tft.setCursor(170, 30);
              tft.setTextColor(WHITE);
              tft.print(" ON-OFF");
    
              if(p.x>380 && p.x<435 && p.y>260 && p.y<285 ){
                  currentPage = 1;
                  drawHomeScreen();
          }
      }
      }
      }
      }
   }
   
  


  if (currentPage == 1){
      if (p.z > MINPRESSURE && p.z < MAXPRESSURE) {
         
          //map(value, fromLow, fromHigh, toLow, toHigh)
          p.x = map( p.x, TS_MINX, TS_MAXX,0,  480 );
          p.y = map( p.y, TS_MINY, TS_MAXY, 0, 320 );
           
          if(p.x>380 && p.x<470 && p.y>260 && p.y<300 ){
              tft.fillRoundRect(380, 260, 60, 30, 8, BLACK);
              tft.drawRoundRect(380, 260, 60 , 30, 8, WHITE);
              tft.setTextSize(2);
              tft.setTextColor(WHITE);  
              tft.setCursor(395, 268);
              tft.print("<<"); 
                      currentPage = 0;          
                      drawHomeScreen();
          } 


      }       
  } // end of page 1
  }
  
`

What is the problem? What happens and what doesn't?
Okey, lots of anonymous numbers in the code but currentPage is used in a possible way.

i want to design GUI for my TFT Touch screen display. How can i design? please check given image.

Please answer #2. Repeating the initial question tells nothing.

pls read carefully what i written in above quires. i want to design GUI like above img.

One important idea with this forum is of cource to assist members but also that other members can share the advice. Therefore I don't use privat Email communication.
Anyway, I don't understand Your problem.

Are you willing to PAY for such help ?
If the answer is YES you can have the topic transferred to the pay section.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.