Description
I have made a menu using labels.
When I switch menu point I remove the background from the selected and draw for the next one.
I tried to use the minimal dependencies and the simplest components.
What MCU/Processor/Board and compiler are you using?
Configuration:
- NUCLEO-L452RE
- ICE Driving Board connected through SPI
- ED043WC3 ePaper display
- arm-gcc with -O1
What do you want to achieve?
The text of the label should have a padding like the background of the selected menu point would extend beyond the text.
What have you tried so far?
I have tried to add padding in the style of the label, but when I switch the selection the padding part of the background is not being cleared. I was wondering if it is possible to solve this issue somehow?
I have found the conversation in git about the best approach to create a menu and if it is not possible to solve with labels I will try that. (https://github.com/littlevgl/lvgl/issues/379)
Code to reproduce
void MainMenuScreen_ctor(void)
{
/* Create GUI */
LV_FONT_DECLARE(bpreplay_bold_35);
LV_FONT_DECLARE(sw_symbols);
/* Set screen properties */
static lv_style_t style_screen;
style_screen.body.main_color = LV_COLOR_WHITE;
lv_style_copy(&style_screen, &lv_style_plain);
lv_obj_set_style(lv_scr_act(), &style_screen);
/*Create a new style*/
lv_style_copy(&styleLight40_txt, &lv_style_plain);
styleLight40_txt.text.font = &bpreplay_bold_35;
styleLight40_txt.text.letter_space = 2;
styleLight40_txt.text.line_space = 1;
styleLight40_txt.text.color = LV_COLOR_BLACK;
styleLight40_txt.body.padding.top = 8; // <<<<< This is the part which does not clear!!!
styleLight40_txt.body.padding.bottom = 0;
styleLight40_txt.body.padding.left = 8;// <<<<< This is the part which does not clear!!!
styleLight40_txt.body.padding.right = 0;
styleLight40_txt.body.main_color = LV_COLOR_SILVER;
styleLight40_txt.body.grad_color = LV_COLOR_SILVER;
styleLight40_txt.body.radius = 5;
/*Create a new style*/
lv_style_copy(&styleBold40Filled_txt, &lv_style_plain);
styleBold40Filled_txt.text.font = &bpreplay_bold_35;
styleBold40Filled_txt.text.letter_space = 2;
styleBold40Filled_txt.text.line_space = 1;
styleBold40Filled_txt.text.color = LV_COLOR_BLACK;
styleBold40Filled_txt.body.padding.top = 40;
styleBold40Filled_txt.body.padding.bottom = 40;
styleBold40Filled_txt.body.main_color = LV_COLOR_SILVER;
styleBold40Filled_txt.body.grad_color = LV_COLOR_SILVER;
/*Create a new style*/
lv_style_copy(&styleSymbols, &lv_style_plain);
styleSymbols.text.font = &sw_symbols;
styleSymbols.text.letter_space = 2;
styleSymbols.text.line_space = 1;
styleSymbols.text.color = LV_COLOR_BLACK;
styleSymbols.body.padding.top = 24;
styleSymbols.body.padding.bottom = 24;
styleSymbols.body.main_color = LV_COLOR_GRAY;
styleSymbols.body.grad_color = LV_COLOR_GRAY;
/*Create a new label*/
topLabel = lv_label_create(lv_scr_act(), NULL);
lv_obj_set_style(topLabel, &styleBold40Filled_txt);
lv_label_set_long_mode(topLabel, LV_LABEL_LONG_CROP);
lv_label_set_recolor(topLabel , true);
lv_label_set_body_draw(topLabel, true);
lv_obj_set_width(topLabel, 480);
lv_obj_align(topLabel, NULL, LV_ALIGN_IN_TOP_MID, 0, 40);
lv_label_set_align(topLabel, LV_LABEL_ALIGN_CENTER);
/*Create a new label*/
hotWaterLabel = lv_label_create(lv_scr_act(), NULL);
lv_obj_set_style(hotWaterLabel, &styleLight40_txt);
lv_label_set_long_mode(hotWaterLabel, LV_LABEL_LONG_CROP);
lv_obj_set_width(hotWaterLabel, 400);
lv_obj_set_height(hotWaterLabel, 64);
lv_obj_align(hotWaterLabel, topLabel, LV_ALIGN_OUT_BOTTOM_MID, 0, 104);
lv_label_set_align(hotWaterLabel, LV_LABEL_ALIGN_LEFT);
/*Create a new label*/
settingsLabel = lv_label_create(lv_scr_act(), NULL);
lv_obj_set_style(settingsLabel, &styleLight40_txt);
lv_label_set_long_mode(settingsLabel, LV_LABEL_LONG_CROP);
lv_obj_set_width(settingsLabel, 400);
lv_obj_set_height(settingsLabel, 56);
lv_obj_align(settingsLabel, hotWaterLabel, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 16);
lv_label_set_align(settingsLabel, LV_LABEL_ALIGN_LEFT);
/*Create a new label*/
helpLabel = lv_label_create(lv_scr_act(), NULL);
lv_obj_set_style(helpLabel, &styleLight40_txt);
lv_label_set_long_mode(helpLabel, LV_LABEL_LONG_CROP);
lv_obj_set_width(helpLabel, 400);
lv_obj_set_height(helpLabel, 56);
lv_obj_align(helpLabel, settingsLabel, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 16);
lv_label_set_align(helpLabel, LV_LABEL_ALIGN_LEFT);
/*Create a new label*/
arrowUpLabel = lv_label_create(lv_scr_act(), NULL);
lv_obj_set_style(arrowUpLabel, &styleSymbols);
lv_label_set_long_mode(arrowUpLabel, LV_LABEL_LONG_CROP);
lv_obj_set_width(arrowUpLabel, 60);
lv_obj_align(arrowUpLabel, helpLabel, LV_ALIGN_OUT_BOTTOM_LEFT, 160, 350);
lv_label_set_align(arrowUpLabel, LV_LABEL_ALIGN_LEFT);
/*Create a new label*/
arrowDownLabel = lv_label_create(lv_scr_act(), NULL);
lv_obj_set_style(arrowDownLabel, &styleSymbols);
lv_label_set_long_mode(arrowDownLabel, LV_LABEL_LONG_CROP);
lv_obj_set_width(arrowDownLabel, 60);
lv_obj_align(arrowDownLabel, arrowUpLabel, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
lv_label_set_align(arrowDownLabel, LV_LABEL_ALIGN_LEFT);
}
void selectMenuPoint(uint8_t highLightNr, uint8_t lastHighLightNr)
{
switch (lastHighLightNr)
{
case 0:
lv_label_set_body_draw(hotWaterStatus, false);
break;
case 1:
lv_label_set_body_draw(settingsLabel, false);
break;
case 2:
lv_label_set_body_draw(helpLabel, false);
break;
default:
break;
}
switch (highLightNr)
{
case 0:
lv_label_set_body_draw(hotWaterStatus, true);
break;
case 1:
lv_label_set_body_draw(settingsLabel, true);
break;
case 2:
lv_label_set_body_draw(helpLabel, true);
break;
default:
break;
}
}
