TFT touch screen menu - Cocktail Maker

maclarkson · September 1, 2024, 2:04pm

Hi there all,

I started creating a tft touch screen menu for this project

The file has turned out very big because I am using converted bitmaps. and thus I have put the code and INO file onto github.

https://github.com/Milongy/Milongy

I am not a very experienced developer. but I have managed to get things working pretty well on the first page. I will up load photos of what I am using and what it looks like. I have created three separate menu pages and each one works OK when I comment out all of the other pages. However when I try to use the menus together I just get a white screen.

Thanks everyone

maclarkson · September 1, 2024, 2:07pm

gilshultz · September 1, 2024, 4:27pm

Have you considered external memory to hold the page data? There if FRAM, SD cards, EEPROM to name a few.

SurferTim · September 1, 2024, 4:33pm

The repository link to your code isn't public.
I presume the images are on an SD card.

maclarkson · September 1, 2024, 10:17pm

Hay Tim how are you? Sorry guys. I have now made the project public.

I eventually gave up on the idea of trying to get things off the SD card. I just couldn't get it to work. (lack of my coding experience). Youll probably look at the code I have made and go Oh my god!!! its so bad.

SurferTim · September 1, 2024, 10:18pm

If it works, it's good.
If it doesn't, maybe somebody here can help.
I can see your code now. Looks like it uses a lot of program memory.
That's the reason I went with the SD card.

maclarkson · September 2, 2024, 9:37am

Can you see why the code might not be working with multiple menus

SurferTim · September 2, 2024, 9:56am

I use the SD card, so I would load everything onto it. Otherwise to add or change the menu, you need to recompile and upload the code. Just my opinion.

You are not separating the pages in loop. I'd try something like this:

int current_page = 0;
int new_page = 0;

void loop() {
  if(new_page != current_page) {
    current_page = new_page;
    if(current_page == 0) displaypage0();
    if(current_page == 1) displaypage1();
    if(current_page == 2) displaypage2();
  }

  if(current_page == 0) page0buttons();
  if(current_page == 1) page1buttons();
  if(current_page == 2) page2buttons();
}

maclarkson · September 2, 2024, 10:01am

can you give me an example of how that might fit into my code. I am not good enough to know where I would put that?

SurferTim · September 2, 2024, 10:06am

That is it.
Separate your menu displays into functions.
Separate your button checks into functions.
Call them depending on what the current menu sets new_page value.

maclarkson · September 2, 2024, 10:19am

so does that mean I no longer display them as void menu1()

SurferTim · September 2, 2024, 10:21am

I just made up function names. You can call them whatever you want. Dealer's choice here.
Call them
void Menu0()
void Menu1()
void Menu2()
and
void Buttons0()
void Buttons1()
void Buttons2()

Edit: Is that not clear?
Put the setup of the menu (print the text and graphics) in MenuX()
Put the button checks in ButtonsX()
...where X is the current_page.

maclarkson · September 2, 2024, 11:07am

you mean like this

void menu1()
{    
   int x = 0, y, w = 128, h = 64;
   y=0;
    tft.setAddrWindow(x, y, x + 64 - 1, y + 64 - 1);
    tft.pushColors((const uint8_t*)VodkaSprite, 64 * 64, 1, false);
   y=68;
    tft.setAddrWindow(x, y, x + 64 - 1, y + 64 - 1);
    tft.pushColors((const uint8_t*)BlueLagoon, 64 * 64, 1, false);
   y=136;
    tft.setAddrWindow(x, y, x + 64 - 1, y + 64 - 1);
    tft.pushColors((const uint8_t*)Cosmopolitan, 64 * 64, 1, false);
   y=204;
    tft.setAddrWindow(x, y, x + 64 - 1, y + 64 - 1);
    tft.pushColors((const uint8_t*)LemonDrop, 64 * 64, 1, false);
   y=272;
    tft.setAddrWindow(x, y, x + 64 - 1, y + 64 - 1);
    tft.pushColors((const uint8_t*)BlueMoon, 64 * 64, 1, false);
   y=340;
    tft.setAddrWindow(x, y, x + 64 - 1, y + 64 - 1);
    tft.pushColors((const uint8_t*)BlueGinMoon, 64 * 64, 1, false); 

      tft.setTextSize(2);
      tft.setTextColor(WHITE);
      tft.fillRect(70, 7, 230, 40, BLACK);      
      tft.drawRect(70, 7, 230, 40, WHITE);
      tft.setCursor(80, 20);
      tft.println("Vodka Sprite"); 

      tft.fillRect(70, 75, 230, 40, BLACK);      
      tft.drawRect(70, 75, 230, 40, WHITE);
      tft.setCursor(80, 88);
      tft.println("Blue Lagoon"); 

      tft.fillRect(70, 143, 230, 40, BLACK);      
      tft.drawRect(70, 143, 230, 40, WHITE);
      tft.setCursor(80, 156);
      tft.println("Cosmopolitan"); 

      tft.fillRect(70, 211, 230, 40, BLACK);      
      tft.drawRect(70, 211, 230, 40, WHITE);
      tft.setCursor(80, 224);
      tft.println("Lemon Drop"); 

      tft.fillRect(70, 279, 230, 40, BLACK);      
      tft.drawRect(70, 279, 230, 40, WHITE);
      tft.setCursor(80, 292);
      tft.println("Blue Moon"); 

      tft.fillRect(70, 347, 230, 40, BLACK);      
      tft.drawRect(70, 347, 230, 40, WHITE);
      tft.setCursor(80, 360);
      tft.println("Blue Gin Moon"); 
      }}


Void buttons1()

    next_btn.initButton(&tft, 240, 440, 150, 64, WHITE, BLACK, WHITE, "Next >>", 2);
    back_btn.initButton(&tft,75,440, 150, 64, WHITE, BLACK, WHITE, "<< Back", 2);
    vs_btn.initButton(&tft, 190, 30, 250, 40, BLACK, BLACK, BLACK, "", 2);
    bl_btn.initButton(&tft, 190, 98, 250, 40, BLACK, BLACK, BLACK, "", 2);
    co_btn.initButton(&tft, 190, 166, 250, 40, BLACK, BLACK, BLACK, "", 2);
    ld_btn.initButton(&tft, 190, 234, 250, 40, BLACK, BLACK, BLACK, "", 2);
    bm_btn.initButton(&tft, 190, 302, 250, 40, BLACK, BLACK, BLACK, "", 2);
   bgm_btn.initButton(&tft, 190, 370, 250, 40, BLACK, BLACK, BLACK, "", 2);

    next_btn.drawButton(false);
    back_btn.drawButton(false);
    vs_btn.drawButton(false);
    bl_btn.drawButton(false);
    co_btn.drawButton(false);
    ld_btn.drawButton(false);   
    bm_btn.drawButton(false);
    bgm_btn.drawButton(false);

maclarkson · September 2, 2024, 11:10am

what do I do with this?

void loop(void)
{

  bool down = Touch_getXY();

  /////////////Menu1////////////

    next_btn.press(down && next_btn.contains(pixel_x, pixel_y));
    back_btn.press(down && back_btn.contains(pixel_x, pixel_y));
    vs_btn.press(down && vs_btn.contains(pixel_x, pixel_y));
    bl_btn.press(down && bl_btn.contains(pixel_x, pixel_y));
    co_btn.press(down && co_btn.contains(pixel_x, pixel_y));
    ld_btn.press(down && ld_btn.contains(pixel_x, pixel_y));
    bm_btn.press(down && bm_btn.contains(pixel_x, pixel_y));
    bgm_btn.press(down && bgm_btn.contains(pixel_x, pixel_y));

////////////////MEnu2///////////////
    next2_btn.press(down && next2_btn.contains(pixel_x, pixel_y));
    back2_btn.press(down && back2_btn.contains(pixel_x, pixel_y));
    vc_btn.press(down && vc_btn.contains(pixel_x, pixel_y));
    gs_btn.press(down && gs_btn.contains(pixel_x, pixel_y));
    ws_btn.press(down && ws_btn.contains(pixel_x, pixel_y));
    ap_btn.press(down && ap_btn.contains(pixel_x, pixel_y));
    ps_btn.press(down && ps_btn.contains(pixel_x, pixel_y));
    ma_btn.press(down && ma_btn.contains(pixel_x, pixel_y));

////////////////MEnu3///////////////
    next3_btn.press(down && next3_btn.contains(pixel_x, pixel_y));
    back3_btn.press(down && back3_btn.contains(pixel_x, pixel_y));
    cg_btn.press(down && cg_btn.contains(pixel_x, pixel_y));
    vc_btn.press(down && vc_btn.contains(pixel_x, pixel_y));
    lc_btn.press(down && lc_btn.contains(pixel_x, pixel_y));
    tc_btn.press(down && tc_btn.contains(pixel_x, pixel_y));
    fd_btn.press(down && fd_btn.contains(pixel_x, pixel_y));
    ds_btn.press(down && ds_btn.contains(pixel_x, pixel_y));

 /////////////Menu1////////////
    if (next_btn.justPressed()) {
     Serial.println("Next"); 
      // menu2();
    }
    if (back_btn.justPressed()) {
     Serial.println("Back");
      // menu3();
    }
        if (vs_btn.justPressed()) {
     Serial.println("Mixing Vodka Sprite");
      mixing();  
      menu1();
          }
    
    if (bl_btn.justPressed()) {
     Serial.println("Mixing Blue Lagoon");
      mixing();  
      menu1();
    }

    if (co_btn.justPressed()) {
     Serial.println("Mixing Cosmopilitan");
      mixing();  
      menu1();

    }

    if (ld_btn.justPressed()) {
     Serial.println("Mixing Lemon Drop");
      mixing();  
      menu1();

    }
        if (bm_btn.justPressed()) {
     Serial.println("Mixing blue Moon");
      mixing();  
      menu1();
    }
        if (bgm_btn.justPressed()) {
     Serial.println("Mixing blue gin moon");
      mixing();  
      menu1();
    }
///////////////////menu2////////////////////
    if (next2_btn.justPressed()) {
     Serial.println("Next2"); 
      // menu3();
    }
    if (back2_btn.justPressed()) {
     Serial.println("Back2");
      menu2();
    }
            if (vc_btn.justPressed()) {
     Serial.println("Mixing Vodka Cranberry");
      mixing();  
      menu2();
    }
        if (gs_btn.justPressed()) {
     Serial.println("Mixing Gin Sour");
      mixing();  
      menu2();
    }        
        if (ws_btn.justPressed()) {
     Serial.println("Mixing Whisky Sour");
      mixing();  
      menu2();
    }    
    if (ap_btn.justPressed()) {
     Serial.println("Mixing Apple Pie");
      mixing();  
      menu2();
    }
        
    if (ps_btn.justPressed()) {
     Serial.println("Mixing Pisco Sour");
      mixing();  
      menu2();
    }
        if (ma_btn.justPressed()) {
     Serial.println("Mixing Margarita");
      mixing();  
      menu2();
    }


/////////////////////menu3////////////////////

        if (next3_btn.justPressed()) {
     Serial.println("Next3"); 
      menu1();
    }
    if (back3_btn.justPressed()) {
     Serial.println("Back3"); 
      menu2();
    }
            if (vc_btn.justPressed()) {
     Serial.println("Mixing Vodka Cranberry");
      mixing();  
      menu3();
    }
        if (lc_btn.justPressed()) {
     Serial.println("London Cosmo");
      mixing();  
      menu3();
    }        
        if (tc_btn.justPressed()) {
     Serial.println("Mixing Tom Collins");
      mixing();  
      menu3();
    }    
    if (fd_btn.justPressed()) {
     Serial.println("Mixing Flying Dutchman");
      mixing();  
      menu3();
    }

        if (ds_btn.justPressed()) {
     Serial.println("Double Strike");
      mixing();  
      menu3();
    }
}

SurferTim · September 2, 2024, 11:35am

The button decodes move to ButtonsX(). They'll be different for each menu page.

maclarkson · September 2, 2024, 11:40am

sorry I am completely lost

SurferTim · September 2, 2024, 12:08pm

If you insist on starting at 1 rather than 0, then:

void Buttons1() {
    bool down = Touch_getXY();
    next_btn.press(down && next_btn.contains(pixel_x, pixel_y));
    back_btn.press(down && back_btn.contains(pixel_x, pixel_y));
    vs_btn.press(down && vs_btn.contains(pixel_x, pixel_y));
    bl_btn.press(down && bl_btn.contains(pixel_x, pixel_y));
    co_btn.press(down && co_btn.contains(pixel_x, pixel_y));
    ld_btn.press(down && ld_btn.contains(pixel_x, pixel_y));
    bm_btn.press(down && bm_btn.contains(pixel_x, pixel_y));
    bgm_btn.press(down && bgm_btn.contains(pixel_x, pixel_y));
} 

void Buttons2() {
    bool down = Touch_getXY();
    next2_btn.press(down && next2_btn.contains(pixel_x, pixel_y));
    back2_btn.press(down && back2_btn.contains(pixel_x, pixel_y));
    vc_btn.press(down && vc_btn.contains(pixel_x, pixel_y));
    gs_btn.press(down && gs_btn.contains(pixel_x, pixel_y));
    ws_btn.press(down && ws_btn.contains(pixel_x, pixel_y));
    ap_btn.press(down && ap_btn.contains(pixel_x, pixel_y));
    ps_btn.press(down && ps_btn.contains(pixel_x, pixel_y));
    ma_btn.press(down && ma_btn.contains(pixel_x, pixel_y));
}

void Buttons3() {
    bool down = Touch_getXY();
    next3_btn.press(down && next3_btn.contains(pixel_x, pixel_y));
    back3_btn.press(down && back3_btn.contains(pixel_x, pixel_y));
    cg_btn.press(down && cg_btn.contains(pixel_x, pixel_y));
    vc_btn.press(down && vc_btn.contains(pixel_x, pixel_y));
    lc_btn.press(down && lc_btn.contains(pixel_x, pixel_y));
    tc_btn.press(down && tc_btn.contains(pixel_x, pixel_y));
    fd_btn.press(down && fd_btn.contains(pixel_x, pixel_y));
    ds_btn.press(down && ds_btn.contains(pixel_x, pixel_y));
}

johnrbi · September 2, 2024, 12:12pm

Hello

SurferTim · September 2, 2024, 1:28pm

I think your project is beyond an Arduino. I have a Python program running on an RPI3 that would be right up your alley. It currently plays my mp3s I call eJukeBox (shows my age). I can access it from any computer that runs Python on my localnet. It could just as easily mix drinks.

maclarkson · September 2, 2024, 9:29pm

Wow, that would be awesome, so let's do that after, I at least need to complete this task, cos I think that's a whole other game. I must try to at least complete this task for my own sanity

Should I combine them like this?

and If I do this then what happens next?

    Void Button1()
    next_btn.initButton(&tft, 240, 440, 150, 64, WHITE, BLACK, WHITE, "Next >>", 2);
    back_btn.initButton(&tft,75,440, 150, 64, WHITE, BLACK, WHITE, "<< Back", 2);
    vs_btn.initButton(&tft, 190, 30, 250, 40, BLACK, BLACK, BLACK, "", 2);
    bl_btn.initButton(&tft, 190, 98, 250, 40, BLACK, BLACK, BLACK, "", 2);
    co_btn.initButton(&tft, 190, 166, 250, 40, BLACK, BLACK, BLACK, "", 2);
    ld_btn.initButton(&tft, 190, 234, 250, 40, BLACK, BLACK, BLACK, "", 2);
    bm_btn.initButton(&tft, 190, 302, 250, 40, BLACK, BLACK, BLACK, "", 2);
   bgm_btn.initButton(&tft, 190, 370, 250, 40, BLACK, BLACK, BLACK, "", 2);

    next_btn.drawButton(false);
    back_btn.drawButton(false);
    vs_btn.drawButton(false);
    bl_btn.drawButton(false);
    co_btn.drawButton(false);
    ld_btn.drawButton(false);   
    bm_btn.drawButton(false);
    bgm_btn.drawButton(false);

bool down = Touch_getXY();
    next_btn.press(down && next_btn.contains(pixel_x, pixel_y));
    back_btn.press(down && back_btn.contains(pixel_x, pixel_y));
    vs_btn.press(down && vs_btn.contains(pixel_x, pixel_y));
    bl_btn.press(down && bl_btn.contains(pixel_x, pixel_y));
    co_btn.press(down && co_btn.contains(pixel_x, pixel_y));
    ld_btn.press(down && ld_btn.contains(pixel_x, pixel_y));
    bm_btn.press(down && bm_btn.contains(pixel_x, pixel_y));
    bgm_btn.press(down && bgm_btn.contains(pixel_x, pixel_y));
}

Topic		Replies	Views
Robot cocktail maker and TFT screen Displays	116	951	December 23, 2024
5" TFT LCD Touchscreen Menu Displays	10	3110	May 6, 2021
Help with the touch display Jobs and Paid Consultancy	1	565	May 6, 2021
TFT Touch Screen Menu (Arduino Due) Libraries	3	1466	May 6, 2021
Request tutorial for tft touchscreen Displays	1	507	May 6, 2021

TFT touch screen menu - Cocktail Maker

Related topics