Drop-down widget does not display whitespaces

ap213 · May 10, 2022, 11:06am

Description

When using the drop down widget I have the problem that options like e.g. “Device Info” appear correct in the C simulation but when I run the code on the MCU it looks like this “DeviceInfo”.

What MCU/Processor/Board and compiler are you using?

MCU: IMXRT1052, MCUXpresso 11.5, GUI Guider 1.3.1

What LVGL version are you using?

8.0.2

What do you want to achieve?

I want the whitespaces to appear in my options.

What have you tried so far?

I have tried using lv_dropdown_add_option() instead of lv_dropdown_set_options(). I’ve also tried to find related issues but nothing so far.

Code to reproduce

//Write codes screen_ddlist_menu
	ui->screen_ddlist_menu = lv_dropdown_create(ui->screen);
	lv_obj_set_pos(ui->screen_ddlist_menu, 1, 32);
	lv_obj_set_width(ui->screen_ddlist_menu, 130);
	lv_dropdown_set_options(ui->screen_ddlist_menu, "Brightness\nComm Interface\nScr Save Style\nScr Save Time\nPresets Saving\nAntelope Button\nFactory Reset\nDevice Info\nTouch Scr Calibr");

Screenshot and/or video

ddown

luozhenhua · May 10, 2022, 2:37pm

I tried your code in both GUI Guider v1.3.1 and MCUXpresso IDE 11.5, it works normally on my i.MX RT1050, can you please share more details or project which can help to reproduce the issue?

ap213 · May 11, 2022, 6:53am

I have commented out all of the styling options and ran only the snippet I sent you and yes it works. So the additional styling must be breaking it. I experimented a little bit and it seems that by setting the font to arial the spaces disappear. If I do not set a font but use the default, everything is fine. Here is the styling snippet:

//Write style state: LV_STATE_DEFAULT for style_screen_ddlist_menu_main_main_default
	static lv_style_t style_screen_ddlist_menu_main_main_default;
	if (style_screen_ddlist_menu_main_main_default.prop_cnt > 1)
		lv_style_reset(&style_screen_ddlist_menu_main_main_default);
	else
		lv_style_init(&style_screen_ddlist_menu_main_main_default);
	lv_style_set_radius(&style_screen_ddlist_menu_main_main_default, 1);
	lv_style_set_bg_color(&style_screen_ddlist_menu_main_main_default, lv_color_make(0x3b, 0x3b, 0x3b));
	lv_style_set_bg_grad_color(&style_screen_ddlist_menu_main_main_default, lv_color_make(0x3b, 0x3b, 0x3b));
	lv_style_set_bg_grad_dir(&style_screen_ddlist_menu_main_main_default, LV_GRAD_DIR_VER);
	lv_style_set_bg_opa(&style_screen_ddlist_menu_main_main_default, 255);
	lv_style_set_border_color(&style_screen_ddlist_menu_main_main_default, lv_color_make(0xe1, 0xe6, 0xee));
	lv_style_set_border_width(&style_screen_ddlist_menu_main_main_default, 0);
	lv_style_set_text_color(&style_screen_ddlist_menu_main_main_default, lv_color_make(0xc7, 0xc7, 0xc7));
	lv_style_set_text_font(&style_screen_ddlist_menu_main_main_default, &lv_font_arial_12);
	lv_style_set_text_line_space(&style_screen_ddlist_menu_main_main_default, 20);
	lv_obj_add_style(ui->screen_ddlist_menu, &style_screen_ddlist_menu_main_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

luozhenhua · May 11, 2022, 10:56am

I still can’t reproduce the issue when I use arial font, what I tried to to create a new v8 project, add a dropdown widget and add 9 items with corresponding text, the whitespace is displayed. It would be helpful to troubleshoot if you can share a simple project to reproduce the issue.

The following is code of my setup_scr_screen.c.
static void _screen_ddlist_menu_event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target(e);

//Write style state: LV_STATE_DEFAULT for style_screen_ddlist_menu_extra_list_selected_default
static lv_style_t style_screen_ddlist_menu_extra_list_selected_default;
if (style_screen_ddlist_menu_extra_list_selected_default.prop_cnt > 1)
	lv_style_reset(&style_screen_ddlist_menu_extra_list_selected_default);
else
	lv_style_init(&style_screen_ddlist_menu_extra_list_selected_default);
lv_style_set_radius(&style_screen_ddlist_menu_extra_list_selected_default, 3);
lv_style_set_bg_color(&style_screen_ddlist_menu_extra_list_selected_default, lv_color_make(0x00, 0xa1, 0xb5));
lv_style_set_bg_grad_color(&style_screen_ddlist_menu_extra_list_selected_default, lv_color_make(0x00, 0xa1, 0xb5));
lv_style_set_bg_grad_dir(&style_screen_ddlist_menu_extra_list_selected_default, LV_GRAD_DIR_VER);
lv_style_set_bg_opa(&style_screen_ddlist_menu_extra_list_selected_default, 255);
lv_style_set_border_color(&style_screen_ddlist_menu_extra_list_selected_default, lv_color_make(0xe1, 0xe6, 0xee));
lv_style_set_border_width(&style_screen_ddlist_menu_extra_list_selected_default, 1);
lv_style_set_text_color(&style_screen_ddlist_menu_extra_list_selected_default, lv_color_make(0xff, 0xff, 0xff));
lv_style_set_text_font(&style_screen_ddlist_menu_extra_list_selected_default, &lv_font_simsun_12);
lv_obj_add_style(lv_dropdown_get_list(obj), &style_screen_ddlist_menu_extra_list_selected_default, LV_PART_SELECTED|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for style_screen_ddlist_menu_extra_list_main_default
static lv_style_t style_screen_ddlist_menu_extra_list_main_default;
if (style_screen_ddlist_menu_extra_list_main_default.prop_cnt > 1)
	lv_style_reset(&style_screen_ddlist_menu_extra_list_main_default);
else
	lv_style_init(&style_screen_ddlist_menu_extra_list_main_default);
lv_style_set_radius(&style_screen_ddlist_menu_extra_list_main_default, 3);
lv_style_set_bg_color(&style_screen_ddlist_menu_extra_list_main_default, lv_color_make(0x75, 0x75, 0x75));
lv_style_set_bg_grad_color(&style_screen_ddlist_menu_extra_list_main_default, lv_color_make(0x78, 0x78, 0x78));
lv_style_set_bg_grad_dir(&style_screen_ddlist_menu_extra_list_main_default, LV_GRAD_DIR_VER);
lv_style_set_bg_opa(&style_screen_ddlist_menu_extra_list_main_default, 255);
lv_style_set_border_color(&style_screen_ddlist_menu_extra_list_main_default, lv_color_make(0xe1, 0xe6, 0xee));
lv_style_set_border_width(&style_screen_ddlist_menu_extra_list_main_default, 1);
lv_style_set_text_color(&style_screen_ddlist_menu_extra_list_main_default, lv_color_make(0x0D, 0x30, 0x55));
lv_style_set_text_font(&style_screen_ddlist_menu_extra_list_main_default, &lv_font_arial_12);
lv_style_set_max_height(&style_screen_ddlist_menu_extra_list_main_default, 220);
lv_obj_add_style(lv_dropdown_get_list(obj), &style_screen_ddlist_menu_extra_list_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for style_screen_ddlist_menu_extra_list_scrollbar_default
static lv_style_t style_screen_ddlist_menu_extra_list_scrollbar_default;
if (style_screen_ddlist_menu_extra_list_scrollbar_default.prop_cnt > 1)
	lv_style_reset(&style_screen_ddlist_menu_extra_list_scrollbar_default);
else
	lv_style_init(&style_screen_ddlist_menu_extra_list_scrollbar_default);
lv_style_set_radius(&style_screen_ddlist_menu_extra_list_scrollbar_default, 3);
lv_style_set_bg_color(&style_screen_ddlist_menu_extra_list_scrollbar_default, lv_color_make(0x00, 0xff, 0x00));
lv_style_set_bg_grad_color(&style_screen_ddlist_menu_extra_list_scrollbar_default, lv_color_make(0xff, 0xff, 0xff));
lv_style_set_bg_grad_dir(&style_screen_ddlist_menu_extra_list_scrollbar_default, LV_GRAD_DIR_VER);
lv_style_set_bg_opa(&style_screen_ddlist_menu_extra_list_scrollbar_default, 255);
lv_obj_add_style(lv_dropdown_get_list(obj), &style_screen_ddlist_menu_extra_list_scrollbar_default, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);

}

void setup_scr_screen(lv_ui *ui){

//Write codes screen
ui->screen = lv_obj_create(NULL);

//Write style state: LV_STATE_DEFAULT for style_screen_main_main_default
static lv_style_t style_screen_main_main_default;
if (style_screen_main_main_default.prop_cnt > 1)
	lv_style_reset(&style_screen_main_main_default);
else
	lv_style_init(&style_screen_main_main_default);
lv_style_set_bg_color(&style_screen_main_main_default, lv_color_make(0xff, 0xff, 0xff));
lv_style_set_bg_opa(&style_screen_main_main_default, 0);
lv_obj_add_style(ui->screen, &style_screen_main_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write codes screen_ddlist_menu
ui->screen_ddlist_menu = lv_dropdown_create(ui->screen);
lv_obj_set_pos(ui->screen_ddlist_menu, 1, 11);
lv_obj_set_width(ui->screen_ddlist_menu, 130);
lv_dropdown_set_options(ui->screen_ddlist_menu, "Brightness\nComm Interface\nScr Save Style\nScr Save Time\nPresets Saving\nAntelope Button\nFactory Reset\nDevice Info\nTouch Scr Calibr");
lv_obj_add_event_cb(ui->screen_ddlist_menu, _screen_ddlist_menu_event_cb, LV_EVENT_READY, NULL);

//Write style state: LV_STATE_DEFAULT for style_screen_ddlist_menu_main_main_default
static lv_style_t style_screen_ddlist_menu_main_main_default;
if (style_screen_ddlist_menu_main_main_default.prop_cnt > 1)
	lv_style_reset(&style_screen_ddlist_menu_main_main_default);
else
	lv_style_init(&style_screen_ddlist_menu_main_main_default);
lv_style_set_radius(&style_screen_ddlist_menu_main_main_default, 3);
lv_style_set_bg_color(&style_screen_ddlist_menu_main_main_default, lv_color_make(0x6b, 0x6b, 0x6b));
lv_style_set_bg_grad_color(&style_screen_ddlist_menu_main_main_default, lv_color_make(0x70, 0x70, 0x70));
lv_style_set_bg_grad_dir(&style_screen_ddlist_menu_main_main_default, LV_GRAD_DIR_VER);
lv_style_set_bg_opa(&style_screen_ddlist_menu_main_main_default, 255);
lv_style_set_border_color(&style_screen_ddlist_menu_main_main_default, lv_color_make(0xe1, 0xe6, 0xee));
lv_style_set_border_width(&style_screen_ddlist_menu_main_main_default, 1);
lv_style_set_text_color(&style_screen_ddlist_menu_main_main_default, lv_color_make(0xff, 0xff, 0xff));
lv_style_set_text_font(&style_screen_ddlist_menu_main_main_default, &lv_font_arial_12);
lv_style_set_text_line_space(&style_screen_ddlist_menu_main_main_default, 20);
lv_obj_add_style(ui->screen_ddlist_menu, &style_screen_ddlist_menu_main_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

}

ap213 · May 11, 2022, 1:23pm

Link to example project
Here’s a link with an example project with the code you provided me. I still experience some problems with it:

Could the problem lie with the timing configurations of the display? I believe I’ve set it up correctly, especially because all the images on it look fine. The missing spaces with some fonts are the first problem I’ve experienced so far.