Why this checkbox has no visible 'V' mark when checked?

How-to
#1

Solution: the problem occurred for two reasons:

  1. My custom font didn’t have the check glyph and 0xf00c.
  2. My lv config didn’t enable patterns.

Description

I am using a checkbox. It works well except that it has no visible ‘V’ checkmark sign when checked.

My apps uses only custom fonts and they include only the glyphs it needed. I wonder if LVGL requires that the font that is used for checkbox text should also have that special checkbox mark glyph.

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

STM32

What LVGL version are you using?

#define LVGL_VERSION_MAJOR 7
#define LVGL_VERSION_MINOR 9
#define LVGL_VERSION_PATCH 1
#define LVGL_VERSION_INFO “dev”

What do you want to achieve?

Have the check mark displayed when the checkbox is checked.

What have you tried so far?

Verified my code.

Code to reproduce

I am using this function to create the checkbox.

void create_checkbox(const Screen& screen, lv_coord_t x, lv_coord_t y,
                     const char* kFootnotText, const lv_font_t* lv_font,
                     lv_color_t text_color, Checkbox* checkbox) {
  lv_obj_t* lv_checkbox = lv_checkbox_create(screen.lv_screen, NULL);
  lv_obj_set_pos(lv_checkbox, x, y);
  lv_checkbox_set_text(lv_checkbox, kFootnotText);
  lv_obj_set_style_local_text_font(lv_checkbox, LV_LABEL_PART_MAIN,
                                   LV_STATE_DEFAULT, lv_font);
  lv_obj_set_style_local_text_color(lv_checkbox, LV_LABEL_PART_MAIN,
                                    LV_STATE_DEFAULT, text_color);
  lv_obj_set_style_local_outline_width(lv_checkbox, LV_STATE_DEFAULT,
                                       LV_STATE_DEFAULT, 0);
}

Screenshot and/or video

Screenshots with the checkbox non-pressed and pressed, respectively.

settings1

settings2

#2

That’s correct. You would need to set the text_font property of LV_CHECKBOX_PART_BULLET to restore the font with the glyph on that part of the checkbox only.

#3

Thanks @embeddedt, I will give it a try. Also found these defaults of symbol and font https://github.com/lvgl/lvgl/blob/master/src/lv_themes/lv_theme_material.c#L628

It may be worth discussing it in the documentation of the checkbox, custom fonts, and themes, since it’s not obvious.

#4

@embeddedt, I tried it but no luck. Any idea what I am doing wrong?

This is what I did:

  1. Enabled the standard Montserrat14. This is file the was disable. Now it comes from the standard LVGL library.
#define LV_FONT_MONTSERRAT_14    1
  1. Restored the default THEME definitions. Before they used to point to my custom fonts.
#define LV_THEME_DEFAULT_FONT_SMALL         &lv_font_montserrat_14
#define LV_THEME_DEFAULT_FONT_NORMAL        &lv_font_montserrat_14
#define LV_THEME_DEFAULT_FONT_SUBTITLE      &lv_font_montserrat_14
#define LV_THEME_DEFAULT_FONT_TITLE         &lv_font_montserrat_14
  1. Added tons of font and color settings.
  lv_obj_t* lv_checkbox = lv_checkbox_create(screen.lv_screen, NULL);
  lv_obj_set_pos(lv_checkbox, x, y);
  lv_checkbox_set_text(lv_checkbox, "aa " LV_SYMBOL_OK " 123");

  lv_obj_set_style_local_text_font(lv_checkbox, LV_LABEL_PART_MAIN,
                                   LV_STATE_DEFAULT,
                                   LV_THEME_DEFAULT_FONT_SMALL);
  lv_obj_set_style_local_text_font(lv_checkbox, LV_LABEL_PART_MAIN,
                                   LV_STATE_PRESSED,
                                   LV_THEME_DEFAULT_FONT_SMALL);
  lv_obj_set_style_local_text_font(lv_checkbox, LV_LABEL_PART_MAIN,
                                   LV_STATE_CHECKED,
                                   LV_THEME_DEFAULT_FONT_SMALL);

  lv_obj_set_style_local_text_color(lv_checkbox, LV_LABEL_PART_MAIN,
                                    LV_STATE_DEFAULT, LV_COLOR_RED);
  lv_obj_set_style_local_text_color(lv_checkbox, LV_LABEL_PART_MAIN,
                                    LV_STATE_CHECKED, LV_COLOR_RED);
  lv_obj_set_style_local_text_color(lv_checkbox, LV_LABEL_PART_MAIN,
                                    LV_STATE_PRESSED, LV_COLOR_RED);

  lv_obj_set_style_local_text_font(lv_checkbox, LV_CHECKBOX_PART_BULLET,
                                   LV_STATE_DEFAULT,
                                   LV_THEME_DEFAULT_FONT_SMALL);
  lv_obj_set_style_local_text_font(lv_checkbox, LV_CHECKBOX_PART_BULLET,
                                   LV_STATE_CHECKED,
                                   LV_THEME_DEFAULT_FONT_SMALL);
  lv_obj_set_style_local_text_font(lv_checkbox, LV_CHECKBOX_PART_BULLET,
                                   LV_STATE_PRESSED,
                                   LV_THEME_DEFAULT_FONT_SMALL);

  lv_obj_set_style_local_text_color(lv_checkbox, LV_CHECKBOX_PART_BULLET,
                                    LV_STATE_DEFAULT, LV_COLOR_RED);
  lv_obj_set_style_local_text_color(lv_checkbox, LV_CHECKBOX_PART_BULLET,
                                    LV_STATE_CHECKED, LV_COLOR_RED);
  lv_obj_set_style_local_text_color(lv_checkbox, LV_CHECKBOX_PART_BULLET,
                                    LV_STATE_PRESSED, LV_COLOR_RED);

As you can see in the screenshot below, the OK symbol does exist but it doesn’t show in the checked checkbox.

Unchecked
image

Checked
image

#5

… I am also testing it in the simulator which does have just the standard fonts.

If I modify the default symbol in lv_theme_material.c from LV_SYMBOL_OK to LV_SYMBOL_BELL, I can see the bell when checked. However if I change it to “X”, the checkbox shows nothing when checked. This leads me to believe that there is some symbol related magic out there. For example, the that glyphs are pulled some symbol only font and not from LV_THEME_DEFAULT_FONT_SMALL as I thought.

Original line in lv_theme_material.c

lv_style_set_pattern_image(&styles->cb_bullet, LV_STATE_CHECKED, LV_SYMBOL_OK);

This change works

lv_style_set_pattern_image(&styles->cb_bullet, LV_STATE_CHECKED, LV_SYMBOL_BELL);

But this change doesn’t work

lv_style_set_pattern_image(&styles->cb_bullet, LV_STATE_CHECKED, "X");

This is very confusing to me. :wink:

#6

Ok, I found it, I had this in my lv config file:

#define LV_USE_PATTERN  0

Changing to 1 shows me the checkmark. It’s still don’t understand why the “X” didn’t work in the simulator but I don’t really want to display an X.

Bottom line, I had two problems

  1. My custom font didn’t have the check glyph and 0xf00c.
  2. My lv config didn’t enable patterns.

Thanks @embeddedt, you pointed me in the right direction.

1 Like