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

zapta · January 24, 2021, 10:16pm

Solution: the problem occurred for two reasons:

My custom font didn’t have the check glyph and 0xf00c.
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

embeddedt · January 24, 2021, 11:20pm

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.

zapta · January 24, 2021, 11:46pm

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.

zapta · January 25, 2021, 4:39am

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

This is what I did:

Enabled the standard Montserrat14. This is file the was disable. Now it comes from the standard LVGL library.

#define LV_FONT_MONTSERRAT_14    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

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

Checked

zapta · January 25, 2021, 4:56am

… 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.

zapta · January 25, 2021, 5:06am

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

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

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

tpt · December 23, 2023, 4:38pm

Hi. I’m using the simulator v8.3.

I’m using custom font awesome symbol font and added the 0xf00c to the font definition.

I facing same problem, the title displays the check mark well, that says the font is embedding the check glyph already, but the tick square does not display the symbol.

Unchecked:

Checked, but incorrect tick:

The console says: lv_draw_sw_letter: lv_draw_letter: glyph dsc. not found for U+F00C

I tried in lv_conf.h:

#define LV_USE_PATTERN  1

alse tried to set the font

lv_obj_set_style_text_font(obj_checkbox, &myfont, LV_PART_INDICATOR);

but no luck.

Please advise. Thanks.

tpt · December 23, 2023, 5:44pm

I solved the problem by adding the symbols from Font Awesome into the custom font. The problem was the check indicator uses default font, in this case my custom font. That the default ASCII lv_font_montserrat_14 was overwritten by my own Unicode font, but it had not contained the stock symbol yet:

#define LV_FONT_CUSTOM_DECLARE  LV_FONT_DECLARE(my_font_MontserratRegular14)

/*Always set a default font*/
//#define LV_FONT_DEFAULT &lv_font_montserrat_14
#define LV_FONT_DEFAULT &my_font_MontserratRegular14        // custom font

That happened also for the “X” close button symbol of the Message Box.

To add Font Awesome symbol into an unicode font, use the “Include another font” button in the Online font converter, to add font awesome WOFF file and add definitions. Note that, the Font manager in SquareLine Editor cannot embed symbol into a unicode font. Use Online converter instead.

tpt · December 24, 2023, 4:46pm

I found another good replacement for the stock symbol into the missing custom default font is: .fallback. Set fallback for missing glyph into the full glyph one, in the font definition file.

/*Initialize a public general font descriptor*/
LV_FONT_DECLARE(font_StockSymbol)            // extern declare if needed

#if LVGL_VERSION_MAJOR >= 8
const lv_font_t font_MontserratRegular14 = {
#else
lv_font_t font_MontserratRegular14 = {
#endif
    ...
    .fallback = &font_StockSymbol,
    ....
};

where &font_StockSymbol is the font with full symbol glyph. It may be the &lv_font_montserrat_14 or any other custom font with defined symbol glyph.