Trying to add new Symbold

How-to
1

Hello!
I am trying to add a few symbols. To get started I followed what the manual describes and tried to add the USB symbol, but fail. Fist of all, the link to the file converter is broken. I’ve used the one linked in the Tools section of the website navigation instead. Selected the Font-Awesome font, added 0xf287 for the USB symbol into the range field, and got presented with a usb.c file in my downloads. It only has 85 lines, I do not see anything that would be complex enough to describe the shape of the USB logo in it, so I already suspected this might not work at all, but gave it a chance because maybe there’s just some magic going on that I have yet to understand.
Had to edit the file to include <lvgl.h> instead of "lvgl/lvgl.h" (VScode/PlatformIO), added #define LV_SYMBOL_USB "\xEF\x8A\x87" to my lv_conf.h, changed one working symbol with LV_SYMBOL_USB. Everything compiled, uploaded and executed normally. Only as expected the Symbol was gone, no USB symbol displayed.

Is there anything I am missing?
thanks!

2

They are the exact same link, from what I can see. Unless you are referring to a different link in the documentation?

You could try using the decimal version instead: 62087. I’m not sure if the converter can handle the hex version or not. That might be an error in the manual.

3

The manual links to https://littlevgl.com/font_conv_new, not https://littlevgl.com/ttf-font-to-c-array.

Anyway, I seem to be wrong with the file not including any data, this is the bitmap that is included:

/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t gylph_bitmap[] = {
    /* U+F287 "" */
    0x0, 0x0, 0x0, 0x1, 0xe0, 0x0, 0x3f, 0x0,
    0x3, 0x30, 0x0, 0x10, 0x0, 0x79, 0x80, 0x33,
    0xff, 0xff, 0xdf, 0x18, 0xe, 0x70, 0x40, 0x40,
    0x3, 0x0, 0x0, 0xb, 0xc0, 0x0, 0x3e, 0x0,
    0x0, 0x70, 0x0
};

comparing it to the included font files this seems correct.
Do I have to declare my usb.c file as a font and select it as well by any chance? I have the impression lvgl is looking for the glyph in the standard font, as I have not found any other references, but the manual does not state this, unless I have overlooked it. Which I doubt, because its only one short paragraph …

thanks!

Edit: I also double checked if HEX or DEC makes a difference in the font converter, both work the same it seems.

4

while trying to track down the issue I found a bug in lv_img.c, line 127

#if LV_USE_LOG && LV_LOG_LEVEL >= LV_LOG_LEVEL_INFO should be #if LV_USE_LOG && LV_LOG_LEVEL <= LV_LOG_LEVEL_INFO, or it will never trace the info.

5

Yes. Otherwise LittlevGL has no way of knowing to use that font.

6

I believe you, but I am still not seeing that. Can you copy and paste the line so that I know what words to look for?

7

I just checked again, and it seems somebody changed it since I posted this thread without letting us now. I actually copied the first link from my open manual-window. I just opened it again and it is now fixed. Thank whoever did that without letting us know :slight_smile:

I got it working with:

// USB Power
usbPowerButton = lv_win_add_btn(guiWindow, LV_SYMBOL_USB);
static lv_style_t imageStyle;
lv_style_copy(&imageStyle, lv_obj_get_style(lv_obj_get_child_back(usbPowerButton, NULL)));
imageStyle.text.font = &usb;
lv_img_set_style(lv_obj_get_child_back(usbPowerButton, NULL), LV_IMG_STYLE_MAIN, &imageStyle);

Now 5 lines instead of 2, would be open for more elegant solutions, but it works after all :slight_smile: Thank you!

I guess it would be a good idea to add this informatin to the manual as well. Now that I have solved it of course one could say this is common sense. But it is a manual after all :wink:

and by the way, is there a possibilty to add those symbols into a font right away?

8

That change appears to have been made a month ago: https://github.com/littlevgl/docs/commit/debd9c0fe6b79232e65b2c2bd80650d87f2799e9

It’s likely that your browser was caching the old version and only now redownloaded the new one.

The cleanest solution is to essentially remake the builtin font but with the USB symbol included. That way you don’t need a separate font.

9

I was about to ask how I’d go about this, when I found the “include other font” button in the converter! it all makes sense now! Thanks a lot! I guess this is solved :slight_smile:

10

Ok, one more question. Is there a list of already included symbols in a form that I can paste into the range field to maintain compatibilty?

Edit: Nevermind, found it on the converter page :see_no_evil: