Description
The bottom line is that I want to reduce the default vertical padding of the text within the button of the dropdown widget. Initially, I was using a label widget to display text using a custom, 32-pixel-tall font that I created. As can be seen in the first photo below, the characters render properly in the label widget, which is also 32 pixels tall. I decided I wanted to replace the label widget with a dropdown widget, so I could provide some simple editing functions via the drop-down menu. I found that the text is displayed with a downward shift, as shown in the second photo below.
What MCU/Processor/Board and compiler are you using?
Raspberry Pi Pico using Arduino 1.8.19
What LVGL version are you using?
8.3.11
What do you want to achieve?
Reduce the vertical height or ‘padding’ of the text within the button of the dropdown widget, so that the text within the button is display like it is in a label widget.
What have you tried so far?
Increasing the dropdown widget’s height to around 44 pixels reveals the entire text. This wasted space is not desirable. I have studied the sources of the dropdown widget to try to figure out how the access the label used for the dropdown button. So far I have not figured it out. Something is being done within the object code after a lv_obj_invalidate(obj), I think.
I have attempted to pull out a reference to the label in the dropdown widget’s lv_obj_t data structure to obtain the text string:
lv_dropdown_t * ddObj = (lv_dropdown_t *) kanji_text;
lv_obj_t ddBtn = ddObj->obj;
lv_obj_t * ddBtnPtr = &ddBtn;
Serial.printf("Label text: %s\n", lv_label_get_text(ddBtnPtr));
That resulted in crashing the micro-controller!
Code to reproduce
NOTE: Remove comment marker from one of the two #define statements to perform the appropriate test.
LV_FONT_DECLARE(KanaKanjiFont32);
static lv_obj_t *kanji_text, *kanji_list, *settings;
void make_interface(void) {
// Create a drop down list for Settings.
settings = lv_dropdown_create(lv_scr_act());
lv_obj_set_size(settings, 32, 32);
lv_obj_set_pos(settings, 0, 0);
// The items in the menu are set up according to the Unicode style in use.
lv_dropdown_set_options(settings,
"X MS Windows Unicode Input\n"
" Linux Unicode Input\n"
" MacOS Unicode Input\n"
"Calibrate Screen ...");
// Set a fixed text to display on the button of the drop-down list.
lv_dropdown_set_text(settings, LV_SYMBOL_SETTINGS);
lv_dropdown_set_symbol(settings, NULL);
// In a menu we don't need to show the last clicked item.
lv_dropdown_set_selected_highlight(settings, false);
// Callback not include in code example, so addition of callback commented out.
//lv_obj_add_event_cb(settings, settings_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
/* Remove comment marker from one of the define statements to perform test. */
// Create label for Kana/Kanji text box.
//#define LABEL_TEST 1
//#define DROPDOWN_TEST 1
#ifdef LABEL_TEST
kanji_text = lv_label_create(lv_scr_act());
lv_obj_set_style_text_font(kanji_text, &KanaKanjiFont32, 0);
lv_obj_set_pos(kanji_text, 32, 0);
lv_obj_set_size(kanji_text, 272, 32);
lv_label_set_text(kanji_text,"こにちは一七万");
#endif
#ifdef DROPDOWN_TEST
kanji_text = lv_dropdown_create(lv_scr_act());
lv_obj_set_pos(kanji_text, 32, 0);
lv_obj_set_size(kanji_text, 272, 32);
lv_dropdown_set_options(kanji_text,
"Delete last character\n"
"Delete all characters");
lv_obj_set_style_text_font(kanji_text, &KanaKanjiFont32, 0);
lv_dropdown_set_text(kanji_text, "こにちは一七万");
lv_dropdown_set_symbol(kanji_text, NULL);
// In a menu we don't need to show the last clicked item.
lv_dropdown_set_selected_highlight(kanji_text, false);
#endif
// Create a list that is not populated with buttons.
kanji_list = lv_list_create(lv_scr_act());
lv_obj_set_size(kanji_list, 320, 208);
lv_obj_set_pos(kanji_list, 0, 32);
lv_obj_set_style_pad_hor(kanji_list, 0, 0);
}
This is a ZIP archive of the KanaKanjiFont32.c file
KanaKanjiFont32.zip (682.1 KB)
Screenshot and/or video
This is an image of the display with a label widget:
This is an image of the display with a dropdown widget:
