What do you want to achieve?
I try to build a design for a project, i can make the layout fine but when i try to add background’s or border’s it is hit or miss. Now a lot of miss. The code undernead have a lot of backgrounds for testing but on the screen i only see the labels. Also other elements have a border but it is not visable. I did fight with AI but it did not find a solution, i did try to search for the problem but only find things about alpa that did not work for me.
I’m thinking to go back to lvgl 8 but i do not want to downgrade.
What have you tried so far?
- I have tried to set opa on all parents, i have tried to change the color’s and set multiple values to default like padding, margin, border, radius,…
- AI is not helpfull.
Code to reproduce
Design test:
/* Main content - right side 70% */
lv_obj_t *main_content = lv_obj_create(scr);
lv_obj_set_size(main_content, DISP_HOR_RES * 70 / 100, DISP_VER_RES);
lv_obj_set_pos(main_content, DISP_HOR_RES * 30 / 100, 0);
lv_obj_set_style_bg_color(main_content, lv_color_hex(0x14181F), 0);
lv_obj_set_style_bg_opa(main_content, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(main_content, 0, 0);
lv_obj_set_style_radius(main_content, 0, 0);
/* main content placeholder */
lv_obj_t * main_content_placeholder = lv_obj_create(main_content);
lv_obj_set_size(main_content_placeholder, LV_PCT(100), LV_PCT(100));
lv_obj_set_style_bg_opa(main_content_placeholder, LV_OPA_TRANSP, 0);
lv_obj_set_style_border_width(main_content_placeholder, 0, 0);
lv_obj_set_style_pad_all(main_content_placeholder, 48, 0);
lv_obj_set_layout(main_content_placeholder, LV_LAYOUT_FLEX);
lv_obj_set_flex_flow(main_content_placeholder, LV_FLEX_FLOW_COLUMN);
lv_obj_set_style_pad_row(main_content_placeholder, 12, 0);
lv_obj_clear_flag(main_content_placeholder, LV_OBJ_FLAG_SCROLLABLE);
/* main content top */
lv_obj_t * main_content_top = lv_obj_create(main_content_placeholder);
lv_obj_set_width(main_content_top, LV_PCT(100));
lv_obj_set_height(main_content_top, 120);
lv_obj_set_style_bg_color(main_content_top, lv_color_hex(0xFF0000), 0);
lv_obj_set_style_bg_opa(main_content_top, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(main_content_top, 0, 0);
lv_obj_set_style_pad_all(main_content_top, 12, 0);
lv_obj_set_layout(main_content_top, LV_LAYOUT_FLEX);
lv_obj_set_flex_flow(main_content_top, LV_FLEX_FLOW_ROW);
lv_obj_set_style_pad_column(main_content_top, 12, 0);
/* room info */
lv_obj_t * main_content_top_room_info = lv_obj_create(main_content_top);
lv_obj_set_size(main_content_top_room_info, LV_PCT(50), LV_PCT(100));
lv_obj_set_style_bg_color(main_content_top_room_info, lv_color_hex(0xFF8000), 0);
lv_obj_set_style_bg_opa(main_content_top_room_info, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(main_content_top_room_info, 0, 0);
lv_obj_t * l7 = lv_label_create(main_content_top_room_info);
lv_label_set_text(l7, "Left 50%");
/* date time info */
lv_obj_t * main_content_top_date_time_info = lv_obj_create(main_content_top);
lv_obj_set_size(main_content_top_date_time_info, LV_PCT(50), LV_PCT(100));
lv_obj_set_style_bg_color(main_content_top_date_time_info, lv_color_hex(0x00FFFF), 0);
lv_obj_set_style_bg_opa(main_content_top_date_time_info, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(main_content_top_date_time_info, 0, 0);
lv_obj_t * l9 = lv_label_create(main_content_top_date_time_info);
lv_label_set_text(l9, "Right 50%");
/* main_content_current_meeting */
lv_obj_t * main_content_current_meeting = lv_obj_create(main_content_placeholder);
lv_obj_set_width(main_content_current_meeting, LV_PCT(100));
lv_obj_set_height(main_content_current_meeting, 150);
lv_obj_set_style_bg_color(main_content_current_meeting, lv_color_hex(0x0000FF), 0);
lv_obj_set_style_bg_opa(main_content_current_meeting, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(main_content_current_meeting, 0, 0);
lv_obj_set_style_pad_all(main_content_current_meeting, 16, 0);
lv_obj_t * l2 = lv_label_create(main_content_current_meeting);
lv_label_set_text(l2, "Child 2");
/* main_content_button_placeholder */
lv_obj_t * main_content_button_placeholder = lv_obj_create(main_content_placeholder);
lv_obj_set_width(main_content_button_placeholder, LV_PCT(100));
lv_obj_set_height(main_content_button_placeholder, 80);
lv_obj_set_style_bg_color(main_content_button_placeholder, lv_color_hex(0x00FF00), 0);
lv_obj_set_style_bg_opa(main_content_button_placeholder, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(main_content_button_placeholder, 0, 0);
lv_obj_set_style_pad_all(main_content_button_placeholder, 16, 0);
lv_obj_t * l4 = lv_label_create(main_content_button_placeholder);
lv_label_set_text(l4, "Child 4");
/* main_content_next */
lv_obj_t * main_content_next = lv_obj_create(main_content_placeholder);
lv_obj_set_width(main_content_next, LV_PCT(100));
lv_obj_set_style_bg_color(main_content_next, lv_color_hex(0x800080), 0);
lv_obj_set_style_bg_opa(main_content_next, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(main_content_next, 0, 0);
lv_obj_set_style_pad_all(main_content_next, 16, 0);
lv_obj_set_flex_grow(main_content_next, 1);
lv_obj_t * l3 = lv_label_create(main_content_next);
lv_label_set_text(l3, "Child 3 (fills rest)");
/* main_content_action_button_placeholder */
lv_obj_t * main_content_action_button_placeholder = lv_obj_create(main_content_placeholder);
lv_obj_set_width(main_content_action_button_placeholder, LV_PCT(100));
lv_obj_set_height(main_content_action_button_placeholder, 100);
lv_obj_set_style_bg_color(main_content_action_button_placeholder, lv_color_hex(0xFF00FF), 0);
lv_obj_set_style_bg_opa(main_content_action_button_placeholder, LV_OPA_COVER, 0);
lv_obj_set_style_border_width(main_content_action_button_placeholder, 0, 0);
lv_obj_set_style_pad_all(main_content_action_button_placeholder, 16, 0);
lv_obj_t * l0 = lv_label_create(main_content_action_button_placeholder);
lv_label_set_text(l0, "Child 4");
Wifi card (no border and background)
/* room info fasilities WIFI */
lv_obj_t *room_info_facilities_wifi_card = lv_obj_create(room_info_facilities);
lv_obj_set_width(room_info_facilities_wifi_card, LV_PCT(100));
lv_obj_set_height(room_info_facilities_wifi_card, LV_SIZE_CONTENT);
//lv_obj_set_style_bg_color(room_info_facilities_wifi_card, lv_color_hex(0x1d212b), 0);
lv_obj_set_style_bg_opa(room_info_facilities_wifi_card, LV_OPA_COVER, 0);
lv_obj_set_style_border_color(room_info_facilities_wifi_card, lv_color_hex(0x2f3541), 0);
lv_obj_set_style_border_width(room_info_facilities_wifi_card, 1, 0);
lv_obj_set_style_border_opa(room_info_facilities_wifi_card, LV_OPA_COVER, 0);
lv_obj_set_style_radius(room_info_facilities_wifi_card, 12, 0);
lv_obj_set_style_pad_all(room_info_facilities_wifi_card, 16, 0);
lv_obj_set_layout(room_info_facilities_wifi_card, LV_LAYOUT_FLEX);
lv_obj_set_flex_flow(room_info_facilities_wifi_card, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(room_info_facilities_wifi_card,LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
lv_obj_set_style_bg_color(room_info_facilities_wifi_card, lv_color_hex(0x0000FF), 0);
lv_obj_t *room_info_facilities_wifi_label = lv_label_create(room_info_facilities_wifi_card);
lv_label_set_text(room_info_facilities_wifi_label, "WIFI");
lv_obj_set_style_text_color(room_info_facilities_wifi_label, lv_color_hex(0x7A899F), 0);
lv_obj_set_style_text_font(room_info_facilities_wifi_label, &sora_16, 0);
lv_obj_set_style_text_align(room_info_facilities_wifi_label, LV_TEXT_ALIGN_CENTER, 0);
lv_obj_set_style_pad_bottom(room_info_facilities_wifi_label, 12, 0);
lv_obj_t *room_info_facilities_wifi_qr = lv_qrcode_create(room_info_facilities_wifi_card);
lv_obj_set_size(room_info_facilities_wifi_qr, 140, 140);
lv_qrcode_set_light_color(room_info_facilities_wifi_qr, lv_color_white());
lv_qrcode_set_dark_color(room_info_facilities_wifi_qr, lv_color_black());
lv_obj_set_style_radius(room_info_facilities_wifi_qr, 12, 0);
lv_obj_set_style_pad_bottom(room_info_facilities_wifi_qr, 12, 0);
const char *wifi_qr = "WIFI:S:MySSID;T:WPA;P:password;;";
lv_qrcode_update(room_info_facilities_wifi_qr, wifi_qr, strlen(wifi_qr));
lv_obj_t *room_info_facilities_wifi_credentials = lv_obj_create(room_info_facilities_wifi_card);
lv_obj_set_width(room_info_facilities_wifi_credentials, LV_PCT(100));
lv_obj_set_height(room_info_facilities_wifi_credentials, LV_SIZE_CONTENT);
lv_obj_set_style_bg_opa(room_info_facilities_wifi_credentials, LV_OPA_TRANSP, 0);
lv_obj_set_style_border_width(room_info_facilities_wifi_credentials, 0, 0);
lv_obj_set_style_pad_all(room_info_facilities_wifi_credentials, 0, 0);
lv_obj_set_layout(room_info_facilities_wifi_credentials, LV_LAYOUT_GRID);
static lv_coord_t col_dsc[] = {
LV_GRID_FR(1),
LV_GRID_FR(1),
LV_GRID_TEMPLATE_LAST
};
static lv_coord_t row_dsc[] = {
LV_GRID_CONTENT,
LV_GRID_CONTENT,
LV_GRID_TEMPLATE_LAST
};
lv_obj_set_grid_dsc_array(room_info_facilities_wifi_credentials, col_dsc, row_dsc);
lv_obj_t *room_info_facilities_wifi_credentials_network_label = lv_label_create(room_info_facilities_wifi_credentials);
lv_obj_set_style_text_font(room_info_facilities_wifi_credentials_network_label, &sora_14, 0);
lv_label_set_text(room_info_facilities_wifi_credentials_network_label, "Netwerk:");
lv_obj_set_style_text_align(room_info_facilities_wifi_credentials_network_label, LV_TEXT_ALIGN_LEFT, 0);
lv_obj_set_grid_cell(room_info_facilities_wifi_credentials_network_label,LV_GRID_ALIGN_START, 0, 1,LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_style_text_color(room_info_facilities_wifi_credentials_network_label, lv_color_hex(0x7A899F), 0);
lv_obj_t * room_info_facilities_wifi_credentials_password_label = lv_label_create(room_info_facilities_wifi_credentials);
lv_obj_set_style_text_font(room_info_facilities_wifi_credentials_password_label, &sora_14, 0);
lv_label_set_text(room_info_facilities_wifi_credentials_password_label, "Password:");
lv_obj_set_style_text_align(room_info_facilities_wifi_credentials_password_label, LV_TEXT_ALIGN_LEFT, 0);
lv_obj_set_grid_cell(room_info_facilities_wifi_credentials_password_label,LV_GRID_ALIGN_START, 0, 1,LV_GRID_ALIGN_CENTER, 1, 1);
lv_obj_set_style_text_color(room_info_facilities_wifi_credentials_password_label, lv_color_hex(0x7A899F), 0);
lv_obj_t * room_info_facilities_wifi_credentials_network_value = lv_label_create(room_info_facilities_wifi_credentials);
lv_obj_set_style_text_font(room_info_facilities_wifi_credentials_network_value, &sora_14, 0);
lv_label_set_text(room_info_facilities_wifi_credentials_network_value, "net123");
lv_obj_set_style_text_align(room_info_facilities_wifi_credentials_network_value, LV_TEXT_ALIGN_RIGHT, 0);
lv_obj_set_grid_cell(room_info_facilities_wifi_credentials_network_value,LV_GRID_ALIGN_END, 1, 1,LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_style_text_color(room_info_facilities_wifi_credentials_network_value, lv_color_hex(0x7A899F), 0);
lv_obj_t * room_info_facilities_wifi_credentials_password_value = lv_label_create(room_info_facilities_wifi_credentials);
lv_obj_set_style_text_font(room_info_facilities_wifi_credentials_password_value, &sora_14, 0);
lv_label_set_text(room_info_facilities_wifi_credentials_password_value, "12345");
lv_obj_set_style_text_align(room_info_facilities_wifi_credentials_password_value, LV_TEXT_ALIGN_RIGHT, 0);
lv_obj_set_grid_cell(room_info_facilities_wifi_credentials_password_value,LV_GRID_ALIGN_END, 1, 1,LV_GRID_ALIGN_CENTER, 1, 1);
lv_obj_set_style_text_color(room_info_facilities_wifi_credentials_password_value, lv_color_hex(0x7A899F), 0);
Debug tree (part)
├── Widget@0x54a810 (0x0x54a810)
Position: (0, 0) Size: 360x258
Absolute: [12,530] -> [371,787]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: YES
BG Color: #1D212B
Children: 2
├── Widget@0x54a918 (0x0x54a918)
Position: (152, 0) Size: 36x27
Absolute: [174,540] -> [209,566]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: NO
BG Color: #FFFFFF
Children: 0
├── Widget@0x54aa5c (0x0x54aa5c)
Position: (0, 38) Size: 340x200
Absolute: [22,578] -> [361,777]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: YES
BG Color: #FFFFFF
Children: 2
├── Widget@0x54aaf4 (0x0x54aaf4)
Position: (0, 0) Size: 134x130
Absolute: [30,586] -> [163,715]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: YES
BG Color: #FFFFFF
Children: 4
├── Widget@0x54abb4 (0x0x54abb4)
Position: (0, 0) Size: 90x18
Absolute: [52,608] -> [141,625]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: NO
BG Color: #FFFFFF
Children: 0
├── Widget@0x54ad18 (0x0x54ad18)
Position: (0, 29) Size: 90x18
Absolute: [52,637] -> [141,654]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: NO
BG Color: #FFFFFF
Children: 0
├── Widget@0x54ae44 (0x0x54ae44)
Position: (0, 58) Size: 90x18
Absolute: [52,666] -> [141,683]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: NO
BG Color: #FFFFFF
Children: 0
├── Widget@0x54af60 (0x0x54af60)
Position: (0, 87) Size: 90x18
Absolute: [52,695] -> [141,712]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: NO
BG Color: #FFFFFF
Children: 0
├── Widget@0x54b080 (0x0x54b080)
Position: (140, 0) Size: 184x184
Absolute: [170,586] -> [353,769]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: YES
BG Color: #FFFFFF
Children: 1
├── Widget@0x54b0f4 (0x0x54b0f4)
Position: (0, 0) Size: 140x140
Absolute: [192,608] -> [331,747]
State: DEFAULT
Opacity: 255/255
Hidden: NO
Clickable: NO
BG Color: #FFFFFF
Children: 0
Environment
- MCU/MPU/Board: Luckfox lyra ultra with ubuntu server
- LVGL version: 9.5
