- Browse the cheat sheets and pick symbols
- For each symbol, add its hex code (0xf641 for the 'Ad' icon, for example) to the Range list in the
fonts.json
file - Convert this hex value into a UTF-8 code using this site
- Define the new symbols in
src/displayapp/screens/Symbols.h
:
static constexpr const char* newSymbol = "\xEF\x86\x85";
inside fonts
, there is a dictionary of fonts,
and for each font there is:
- sources - list of file,range(,symbols) wanted (as a dictionary of those)
- bpp - bits per pixel.
- size - size.
- patches - list of extra "patches" to run: a path to a .patch file. (may be relative)
- compress - optional. default disabled. add
"compress": true
to enable
navigtion.ttf
is created with the web app icomoon by importing the svg files from src/displayapp/icons/navigation/unique
and generating the font. lv_font_navi_80.json
is a project file for the site, which you can import to add or remove icons.
To save space in the internal flash memory, the navigation icons are now moved into the external flash memory. To do this, the TTF font is converted into pictures (1 for each symbol). Those pictures are then concatenated into 2 big pictures (we need two files since LVGL supports maximum 2048px width/height). At runtime, a map is used to locate the desired icon in the corresponding file at a specific offset.
Here is the command to convert the TTF font in PNG picture:
convert -background none -fill white -font navigation.ttf -pointsize 80 -gravity center label:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" navigation0.png
convert -background none -fill white -font navigation.ttf -pointsize 80 -gravity center label:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" navigation1.png
Please note that the characters after label:
are UTF-8 characters and might not be displayed correctly in this document.
The characters in the TTF font range from 0xEEA480
to 0xEEA4A9
. Characters from 0xEEA480
to 0xEEA498
are stored in navigation0.png
and the others in navigation1.png
. Each character is 80px height so displaying a specific character consists in multiplying its index in the file by -80 and use this value as the offset when calling lv_img_set_offset_y()
.