LVGL & CYD Button Issue

Projects Programming
1

I'm reasonably new to LVGL. I'm creating a GUI which basically controls appliances around the house. It talks to other ESP32's which is attached to the appliances. I've created the TabView, TabView Buttons and Header Labels which all work perfectly fine. They are exactly what I want. I then started adding buttons and the word 'Text' has suddenly appeared to the left of the Header Label...... and I cannot for the life of me work out where it has come from. I commented out all of the buttons and the word 'Text' no longer appears, so it has something to do with the button coding. I apologise in advance if it is something simple and I'm having a blonde day, but it is wrecking my head. If someone can help it would be appreciated.

IMG_4178
IMG_41781920×1134 281 KB

Here's the code: -

//*************************************************
//***************** Tabbed GUI ***********************
//*************************************************
void lv_create_main_gui(void) {
    //CLEAR SCREEN
    lv_obj_clean(lv_scr_act());

   /*Create a Tab view object*/
    lv_obj_t * tabview;
    tabview = lv_tabview_create(lv_screen_active());
    lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT);
    lv_tabview_set_tab_bar_size(tabview, 95);
    //Set background colour on all tabs
    lv_obj_set_style_bg_color(tabview, lv_palette_lighten(LV_PALETTE_YELLOW, 1), 0);

    lv_obj_t * tab_buttons = lv_tabview_get_tab_bar(tabview);
    lv_obj_set_style_bg_color(tab_buttons, lv_palette_darken(LV_PALETTE_BLUE, 5), 0);
    lv_obj_set_style_text_color(tab_buttons, lv_palette_lighten(LV_PALETTE_BLUE, 5), 0);
    lv_obj_set_style_border_side(tab_buttons, LV_BORDER_SIDE_RIGHT, LV_PART_ITEMS | LV_STATE_CHECKED);

    /*Add tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Lounge");
    lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Kitchen");
    lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Printing");
    lv_obj_t * tab4 = lv_tabview_add_tab(tabview, "Bedroom");
    lv_obj_t * tab5 = lv_tabview_add_tab(tabview, "Cameras");
    lv_obj_t * tab6 = lv_tabview_add_tab(tabview, "To Do");
    lv_obj_t * tab7 = lv_tabview_add_tab(tabview, "Shopping");

//******* Header Style *******
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_text_font(&style, &lv_font_montserrat_20); 

//******************************
//**** Living Room *************
//******************************
    lv_obj_t * Header_label = lv_label_create(tab1);
    lv_obj_add_style(Header_label, &style, 0); 
    lv_label_set_long_mode(Header_label, LV_LABEL_LONG_WRAP); 
    lv_label_set_text(Header_label, "Living Room");
    lv_obj_set_width(Header_label, 180);
    lv_obj_set_style_text_align(Header_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Header_label, LV_ALIGN_CENTER, 0, -100);

    // Create Big Light Button with event handling
    lv_obj_t * BigLight_label = lv_label_create(tab1);
    lv_obj_t * BigLight_Btn = lv_button_create(tab1);
    lv_obj_set_width(BigLight_label, 160);
    lv_obj_set_width(BigLight_Btn, 180);
    lv_obj_add_event_cb(BigLight_Btn, event_handler_BigLight, LV_EVENT_ALL, NULL);
    lv_obj_align(BigLight_Btn, LV_ALIGN_CENTER, 0, -50);
    lv_obj_add_flag(BigLight_Btn, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_remove_flag(BigLight_Btn, LV_OBJ_FLAG_PRESS_LOCK);
    BigLight_label = lv_label_create(BigLight_Btn);
    lv_obj_set_style_bg_color(BigLight_Btn, lv_color_hex(0x5d91e9), LV_PART_MAIN);
    lv_label_set_text(BigLight_label, "Big Light");
    lv_obj_center(BigLight_label);
    Serial.println("BigLight Status ON RETURN: ");
    Serial.println(BigLight);
    if(BigLight == HIGH){
      lv_obj_add_state(BigLight_Btn, LV_STATE_CHECKED);
    }

    // Create Small Light Button with event handling
    lv_obj_t * SmallLight_label = lv_label_create(tab1);
    lv_obj_t * SmallLight_Btn = lv_button_create(tab1);
    lv_obj_set_width(SmallLight_label, 160);
    lv_obj_set_width(SmallLight_Btn, 180);
    lv_obj_align(SmallLight_Btn, LV_ALIGN_CENTER, 0, -10);
    lv_obj_add_event_cb(SmallLight_Btn, event_handler_SmallLight, LV_EVENT_ALL, NULL);
    lv_obj_add_flag(SmallLight_Btn, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_remove_flag(SmallLight_Btn, LV_OBJ_FLAG_PRESS_LOCK);
    SmallLight_label = lv_label_create(SmallLight_Btn);
    lv_obj_set_style_bg_color(SmallLight_Btn, lv_color_hex(0x5d91e9), LV_PART_MAIN);
    lv_label_set_text(SmallLight_label, "Small Light");
    lv_obj_center(SmallLight_label);
    if(SmallLight == HIGH){
      lv_obj_add_state(SmallLight_Btn, LV_STATE_CHECKED);
    }

    // Create Lamp Button with event handling
    lv_obj_t * Lamp_label = lv_label_create(tab1);
    lv_obj_t * Lamp_Btn = lv_button_create(tab1);
    lv_obj_set_width(Lamp_label, 160);
    lv_obj_set_width(Lamp_Btn, 180);
    lv_obj_align(Lamp_Btn, LV_ALIGN_CENTER, 0, 30);
    lv_obj_add_event_cb(Lamp_Btn, event_handler_Lamp, LV_EVENT_ALL, NULL);
    lv_obj_add_flag(Lamp_Btn, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_remove_flag(Lamp_Btn, LV_OBJ_FLAG_PRESS_LOCK);
    Lamp_label = lv_label_create(Lamp_Btn);
    lv_obj_set_style_bg_color(Lamp_Btn, lv_color_hex(0x5d91e9), LV_PART_MAIN);
    lv_label_set_text(Lamp_label, "Table Lamp");
    lv_obj_center(Lamp_label);
    if(Lamp == HIGH){
      lv_obj_add_state(Lamp_Btn, LV_STATE_CHECKED);
    }

    // Create a Blinds Button with event handling
    lv_obj_t * blinds_label = lv_label_create(tab1);
    lv_obj_t * Blinds_Btn = lv_button_create(tab1);
    lv_obj_set_width(blinds_label, 160);
    lv_obj_set_width(Blinds_Btn, 180);
    lv_obj_add_event_cb(Blinds_Btn, event_handler_Blinds, LV_EVENT_ALL, NULL);
    lv_obj_align(Blinds_Btn, LV_ALIGN_CENTER, 0, 70);
    lv_obj_add_flag(Blinds_Btn, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_remove_flag(Blinds_Btn, LV_OBJ_FLAG_PRESS_LOCK);
    blinds_label = lv_label_create(Blinds_Btn);
    lv_obj_set_style_bg_color(Blinds_Btn, lv_color_hex(0x5d91e9), LV_PART_MAIN);
    lv_label_set_text(blinds_label, "Blinds");
    lv_obj_center(blinds_label);
    if(Blinds == HIGH){
      lv_obj_add_state(Blinds_Btn, LV_STATE_CHECKED);
    }

//******************************
//******** Kitchen *************
//******************************
    Header_label = lv_label_create(tab2);
    lv_obj_add_style(Header_label, &style, 0); 
    lv_label_set_long_mode(Header_label, LV_LABEL_LONG_WRAP); 
    lv_label_set_text(Header_label, "Kitchen");
    lv_obj_set_width(Header_label, 180);
    lv_obj_set_style_text_align(Header_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Header_label, LV_ALIGN_CENTER, 0, -100);

//******************************
//******** Kitchen *************
//******************************
    Header_label = lv_label_create(tab3);
    lv_obj_add_style(Header_label, &style, 0); 
    lv_label_set_long_mode(Header_label, LV_LABEL_LONG_WRAP); 
    lv_label_set_text(Header_label, "Printing Room");
    lv_obj_set_width(Header_label, 180);
    lv_obj_set_style_text_align(Header_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Header_label, LV_ALIGN_CENTER, 0, -100);

//******************************
//******** Bedroom *************
//******************************
    Header_label = lv_label_create(tab4);
    lv_obj_add_style(Header_label, &style, 0); 
    lv_label_set_long_mode(Header_label, LV_LABEL_LONG_WRAP); 
    lv_label_set_text(Header_label, "Bedroom");
    lv_obj_set_width(Header_label, 180);
    lv_obj_set_style_text_align(Header_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Header_label, LV_ALIGN_CENTER, 0, -100);

//******************************
//******** Cameras *************
//******************************
    Header_label = lv_label_create(tab5);
    lv_obj_add_style(Header_label, &style, 0); 
    lv_label_set_long_mode(Header_label, LV_LABEL_LONG_WRAP); 
    lv_label_set_text(Header_label, "Cameras");
    lv_obj_set_width(Header_label, 180);
    lv_obj_set_style_text_align(Header_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Header_label, LV_ALIGN_CENTER, 0, -100);

//******************************
//********** To Do *************
//******************************
    Header_label = lv_label_create(tab6);
    lv_obj_add_style(Header_label, &style, 0); 
    lv_label_set_long_mode(Header_label, LV_LABEL_LONG_WRAP); 
    lv_label_set_text(Header_label, "To Do List");
    lv_obj_set_width(Header_label, 180);
    lv_obj_set_style_text_align(Header_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Header_label, LV_ALIGN_CENTER, 0, -100);

//******************************
//******** Shopping ************
//******************************
    Header_label = lv_label_create(tab7);
    lv_obj_add_style(Header_label, &style, 0); 
    lv_label_set_long_mode(Header_label, LV_LABEL_LONG_WRAP); 
    lv_label_set_text(Header_label, "Shopping");
    lv_obj_set_width(Header_label, 180);
    lv_obj_set_style_text_align(Header_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(Header_label, LV_ALIGN_CENTER, 0, -100);

    lv_obj_remove_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);
}
2

I don't see anything obviously wrong that would lead to this, but you create two labels using the same variable
lv_obj_t * blinds_label = lv_label_create(tab1); and
blinds_label = lv_label_create(Blinds_Btn);

The first label doesn't appear to be used at all after that.

I think every time you create a widget, LVGL adds it to an internal list. For the first creation, you don't set the text, so maybe it defaults to "Text."

3

I've found the issue, it did lie within the button code. This is what I was using to create the buttons.

    // Create Big Light Button with event handling
    lv_obj_t * BigLight_label = lv_label_create(tab1);
    lv_obj_t * BigLight_Btn = lv_button_create(tab1);
    lv_obj_set_width(BigLight_label, 160);
    lv_obj_set_width(BigLight_Btn, 180);
    lv_obj_add_event_cb(BigLight_Btn, event_handler_BigLight, LV_EVENT_ALL, NULL);
    lv_obj_align(BigLight_Btn, LV_ALIGN_CENTER, 0, -50);
    lv_obj_add_flag(BigLight_Btn, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_remove_flag(BigLight_Btn, LV_OBJ_FLAG_PRESS_LOCK);
    BigLight_label = lv_label_create(BigLight_Btn);
    lv_obj_set_style_bg_color(BigLight_Btn, lv_color_hex(0x5d91e9), LV_PART_MAIN);
    lv_label_set_text(BigLight_label, "Big Light");
    lv_obj_center(BigLight_label);
    Serial.println("BigLight Status ON RETURN: ");
    Serial.println(BigLight);
    if(BigLight == HIGH){
      lv_obj_add_state(BigLight_Btn, LV_STATE_CHECKED);
    }

I altered a few bits and now everything is working as designed. After fixing the issue, it caused centring issues which I rectified. Here's the new button template:

    // Create Big Light Button with event handling
    lv_obj_t * BigLight_Btn = lv_button_create(tab1);
    lv_obj_set_width(BigLight_Btn, 180);
    lv_obj_add_event_cb(BigLight_Btn, event_handler_BigLight, LV_EVENT_ALL, NULL);
    lv_obj_align(BigLight_Btn, LV_ALIGN_CENTER, 0, -50);
    lv_obj_add_flag(BigLight_Btn, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_remove_flag(BigLight_Btn, LV_OBJ_FLAG_PRESS_LOCK);
    lv_obj_set_style_bg_color(BigLight_Btn, lv_color_hex(0x0e3576), LV_PART_MAIN);
    // Add label to button
    lv_obj_t * BigLight_label = lv_label_create(BigLight_Btn);
    lv_obj_set_width(BigLight_label, 160);
    lv_obj_set_style_text_align(BigLight_label, LV_TEXT_ALIGN_CENTER, 0);
    lv_label_set_text(BigLight_label, "Big Light");
    lv_obj_add_style(BigLight_label, &buttonLabelStyle, 0); 
    Serial.println("BigLight Status ON RETURN: ");
    Serial.println(BigLight);
    if(BigLight == HIGH){
      lv_obj_add_state(BigLight_Btn, LV_STATE_CHECKED);
    }

IMG_4186
IMG_41861920×1362 146 KB

That's my CYD housing I designed and printed. If you have a 3D Printer you can find it here:
[🏢 Cheap Yellow Display (CYD) - ESP32 - 2432S028 320x240 LVGL WIFI & Bluetooth Casing・ STL File for 3D printing・Cults](https://Cheap Yellow Display casing)