How to add a new symbol?

How-to
1

Description

Starting Point - The simulator

Simulator - eclipse version running on CLION
demo project @ second tab @ second list button label

What do you want to achieve?

  • import new cloud-rain symbol
  • change font of list button label
  • show the new symbol

The problem

  • symbol is invisible or doesn’t exist

What have you tried so far?

Step 0: Create the font file

  • convert Font Awesome 5 Pro-Solid-900.otf to TTF with fonttools/blob/master/Snippets/otf2ttf.py
  • cloud-rain symbol 0xf73d from font-awesome
  • extract UTF8 bytes \xEF\x9C\xBD
  • create the array with 4 bit per pixel, size 16]

Step 1: setup the demo

Step 2: declare the font and symbol in the config

#define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(font_awesome_extra_symbols)
#define SYMBOL_CLOUD_RAIN "\xEF\x9C\xBD"

Step 3 Write a make file to include the font.c

Content of font_awesome_extra_symbols.mk:

CSRCS += font_awesome_extra_symbols.c
DEPPATH += --dep-path $(LVGL_DIR)/lv_examples
VPATH += :$(LVGL_DIR)/lv_examples
CFLAGS += "-I$(LVGL_DIR)/lv_examples"

Step 4: set style of the list button

    list_btn = lv_list_add_btn(list, SYMBOL_CLOUD_RAIN, "Rainy");
    lv_obj_set_event_cb(list_btn, list_btn_event_handler);

    static lv_style_t img_style;
    lv_style_copy(&img_style,lv_obj_get_style(lv_obj_get_child_back(list_btn,NULL)));
    img_style.text.font = &font_awesome_extra_symbols;
    lv_img_set_style(lv_obj_get_child_back(list_btn,NULL),LV_IMG_STYLE_MAIN,&img_style);

https://gitlab.com/teoman002/font_test1/-/blob/master/lv_examples/lv_apps/demo/demo.c#L293

Screenshot and/or video

demo

Any ideas on what I can try to narrow down the origin of the error?

I am thankful for any help

2

Solution to the problem:

  • Use hex codes in the range field instead of symbols field
1 Like