How to display custom Unicode characters in dev-7

How-to
#1

Description

Hi,everyone.
I want to display custom Unicode characters in dev-7. But there seems to be something wrong. Custom Unicode characters cannot be displayed normally in dev-7.
Does anyone know how to solve it? thank you!

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

  • eclipse

What do you want to achieve?

  • Display Unicode and Chinese in dev7

What have you tried so far?

  • I tried to display a character(unicode:\uf00c) in the built-in library directly in Unicode.
  • I try to display a character(unicode:\uf00c) in the built-in library directly with hex value.
  • This means there is no problem using the character or Unicode encoding directly.But when I use online font generation, characters(测试abcd℃●√×) cannot be displayed normally.
    Size: 12
    Bpp: 4bit-per-pixel
    Symbols: 测试abcd℃●√×
    Enable font compression: no
    Horizontal subpixel hinting: no
    1

Code to reproduce

main.c (6.7 KB)
my_font_CH.c (6.1 KB)

  • This is my code in main.
  	static lv_style_t style1;
  	static lv_style_t style2;
  	lv_style_init(&style1);
  	lv_style_init(&style2);
  	_lv_style_set_int(&style1, LV_STYLE_TEXT_LINE_SPACE, 5);

  	LV_FONT_DECLARE(my_font_CH);
  	//lv_style_copy(&style1, &LV_FONT_MONTSERRAT_20);
  	lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
  	lv_obj_t * label2 = lv_label_create(lv_scr_act(), NULL);
  	lv_style_set_text_font(&style1, LV_STATE_DEFAULT, &my_font_CH);
  	lv_style_set_text_font(&style2, LV_STATE_DEFAULT, &my_font_CH);
  	lv_obj_set_style_local_text_color(label1, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED);
  	lv_obj_set_style_local_text_color(label2, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_ORANGE);
  	lv_style_set_text_blend_mode(&style1, LV_STATE_DEFAULT, LV_BLEND_MODE_SUBTRACTIVE);
  	lv_label_set_text(label1, LV_SYMBOL_OK "a测试abcd℃●√×a\u6D4B");
  	char * xx="da√测试b℃●√c\uF00C";
  	lv_label_set_text(label2, xx);
  	/* Position the main label */
  	lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);
  	lv_obj_align(label2, NULL, LV_ALIGN_CENTER, 0, 12);
  • This is file my_font_CH.c.
#include "lvgl/lvgl.h"

/*******************************************************************************
 * Size: 12 px
 * Bpp: 4
 * Opts: 
 ******************************************************************************/

#ifndef MY_FONT_CH
#define MY_FONT_CH 1
#endif

#if MY_FONT_CH

/*-----------------
 *    BITMAPS
 *----------------*/

/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t gylph_bitmap[] = {
    /* U+61 "a" */
    0x6, 0xa9, 0xb2, 0x1, 0xf0, 0x6, 0x90, 0x1,
    0x25, 0xaa, 0x1, 0xc6, 0x36, 0xa0, 0x79, 0x0,
    0x9a, 0x2, 0xcb, 0xa4, 0xc7,

    /* U+62 "b" */
    0x5d, 0x50, 0x0, 0x0, 0xa5, 0x0, 0x0, 0xa,
    0x50, 0x0, 0x0, 0xa9, 0x9c, 0xb1, 0xa, 0x70,
    0x9, 0x90, 0xa5, 0x0, 0x4d, 0xa, 0x50, 0x4,
    0xc0, 0xa8, 0x0, 0xb7, 0xa, 0x59, 0xc9, 0x0,

    /* U+63 "c" */
    0x4, 0xa9, 0xb3, 0x2e, 0x10, 0x3c, 0x6a, 0x0,
    0x0, 0x6b, 0x0, 0x0, 0x2e, 0x20, 0x6, 0x4,
    0xca, 0x92,

    /* U+64 "d" */
    0x0, 0x0, 0x2c, 0x10, 0x0, 0x0, 0x7f, 0x10,
    0x0, 0x0, 0xf, 0x10, 0x4, 0xca, 0x8f, 0x10,
    0x2e, 0x10, 0x2f, 0x10, 0x6b, 0x0, 0xf, 0x10,
    0x7a, 0x0, 0xf, 0x10, 0x2e, 0x0, 0x2f, 0x10,
    0x6, 0xb8, 0x6f, 0xa0,

    /* U+D7 "×" */
    0x10, 0x0, 0x0, 0x1, 0x6c, 0x0, 0x0, 0xa7,
    0x7, 0xb0, 0xa, 0x80, 0x0, 0x8b, 0x99, 0x0,
    0x0, 0xd, 0xe0, 0x0, 0x0, 0x9a, 0x9a, 0x0,
    0x8, 0xa0, 0x9, 0x90, 0x6a, 0x0, 0x0, 0xa8,
    0x10, 0x0, 0x0, 0x1,

    /* U+2103 "℃" */
    0x25, 0x30, 0x6, 0x96, 0x40, 0x70, 0x71, 0xc4,
    0x4, 0xe2, 0x55, 0x5b, 0x60, 0x0, 0x55, 0x0,
    0x1f, 0x0, 0x0, 0x3, 0x0, 0x3e, 0x0, 0x0,
    0x0, 0x0, 0x3f, 0x0, 0x0, 0x0, 0x0, 0xe,
    0x40, 0x0, 0x2, 0x0, 0x6, 0xd1, 0x0, 0x75,
    0x0, 0x0, 0x5d, 0xcb, 0x50,

    /* U+221A "√" */
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x9, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x56, 0x0, 0x0, 0x0, 0x0, 0x2, 0xa0,
    0x0, 0x0, 0x0, 0x0, 0xb, 0x10, 0x2, 0x72,
    0x0, 0x0, 0x93, 0x0, 0x16, 0x8b, 0x0, 0x5,
    0x70, 0x0, 0x0, 0xe, 0x30, 0x1a, 0x0, 0x0,
    0x0, 0x6, 0xc0, 0xa1, 0x0, 0x0, 0x0, 0x0,
    0xdc, 0x40, 0x0, 0x0, 0x0, 0x0, 0x58, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,

    /* U+25CF "●" */
    0x0, 0x18, 0xbb, 0x82, 0x0, 0x5, 0xff, 0xff,
    0xff, 0x50, 0x2f, 0xff, 0xff, 0xff, 0xf2, 0xaf,
    0xff, 0xff, 0xff, 0xfa, 0xef, 0xff, 0xff, 0xff,
    0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xff,
    0xff, 0xff, 0xfc, 0x5f, 0xff, 0xff, 0xff, 0xf5,
    0xa, 0xff, 0xff, 0xff, 0xa0, 0x0, 0x6e, 0xff,
    0xe7, 0x0, 0x0, 0x0, 0x11, 0x0, 0x0,

    /* U+6D4B "测" */
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x5, 0x50,
    0x20, 0x31, 0x1, 0xd0, 0x0, 0xd3, 0xd6, 0xd6,
    0x11, 0xd0, 0x0, 0x13, 0xc7, 0xd1, 0xb2, 0xd0,
    0x3b, 0x15, 0xcb, 0xc1, 0xb1, 0xd0, 0x9, 0x71,
    0xcb, 0xc1, 0xb1, 0xd0, 0x0, 0x70, 0xcb, 0xc1,
    0xb1, 0xd0, 0x1, 0x70, 0xcb, 0xc1, 0xb1, 0xd0,
    0x2d, 0x50, 0x9c, 0x80, 0xa1, 0xd0, 0x9, 0x40,
    0x47, 0xd4, 0x1, 0xd0, 0xc, 0x51, 0x80, 0x8d,
    0x57, 0xd0, 0x9, 0x76, 0x0, 0x3, 0xd, 0x60,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0,

    /* U+8BD5 "试" */
    0x0, 0x0, 0x0, 0x1, 0x0, 0x0, 0x2, 0xa2,
    0x0, 0xc, 0x77, 0x0, 0x0, 0x89, 0x0, 0xb,
    0x3a, 0x30, 0x0, 0x23, 0x55, 0x5c, 0x75, 0xc3,
    0x23, 0xa2, 0x0, 0x9, 0x50, 0x0, 0x12, 0xe2,
    0x67, 0xbd, 0x70, 0x0, 0x0, 0xe1, 0xd, 0x15,
    0xa0, 0x0, 0x0, 0xe1, 0xd, 0x12, 0xd0, 0x0,
    0x0, 0xe4, 0x3d, 0x34, 0xe3, 0x14, 0x0, 0xf9,
    0x8e, 0x81, 0x7c, 0x62, 0x2, 0xd0, 0x81, 0x0,
    0xd, 0xf1, 0x0, 0x10, 0x0, 0x0, 0x2, 0xc4
};


/*---------------------
 *  GLYPH DESCRIPTION
 *--------------------*/

static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = {
    {.bitmap_index = 0, .adv_w = 0, .box_w = 0, .box_h = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
    {.bitmap_index = 0, .adv_w = 111, .box_w = 7, .box_h = 6, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 21, .adv_w = 119, .box_w = 7, .box_h = 9, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 53, .adv_w = 100, .box_w = 6, .box_h = 6, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 71, .adv_w = 119, .box_w = 8, .box_h = 9, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 107, .adv_w = 192, .box_w = 8, .box_h = 9, .ofs_x = 2, .ofs_y = -1},
    {.bitmap_index = 143, .adv_w = 192, .box_w = 10, .box_h = 9, .ofs_x = 1, .ofs_y = 0},
    {.bitmap_index = 188, .adv_w = 192, .box_w = 12, .box_h = 12, .ofs_x = 0, .ofs_y = -2},
    {.bitmap_index = 260, .adv_w = 192, .box_w = 10, .box_h = 11, .ofs_x = 1, .ofs_y = -2},
    {.bitmap_index = 315, .adv_w = 192, .box_w = 12, .box_h = 13, .ofs_x = 0, .ofs_y = -3},
    {.bitmap_index = 393, .adv_w = 192, .box_w = 12, .box_h = 12, .ofs_x = 0, .ofs_y = -2}
};

/*---------------------
 *  CHARACTER MAPPING
 *--------------------*/

static const uint16_t unicode_list_0[] = {
    0x0, 0x1, 0x2, 0x3, 0x76, 0x20a2, 0x21b9, 0x256e,
    0x6cea, 0x8b74
};

/*Collect the unicode lists and glyph_id offsets*/
static const lv_font_fmt_txt_cmap_t cmaps[] =
{
    {
        .range_start = 97, .range_length = 35701, .glyph_id_start = 1,
        .unicode_list = unicode_list_0, .glyph_id_ofs_list = NULL, .list_length = 10, .type = LV_FONT_FMT_TXT_CMAP_SPARSE_TINY
    }
};



/*--------------------
 *  ALL CUSTOM DATA
 *--------------------*/

/*Store all the custom data of the font*/
static lv_font_fmt_txt_dsc_t font_dsc = {
    .glyph_bitmap = gylph_bitmap,
    .glyph_dsc = glyph_dsc,
    .cmaps = cmaps,
    .kern_dsc = NULL,
    .kern_scale = 0,
    .cmap_num = 1,
    .bpp = 4,
    .kern_classes = 0,
    .bitmap_format = 0
};


/*-----------------
 *  PUBLIC FONT
 *----------------*/

/*Initialize a public general font descriptor*/
lv_font_t my_font_CH = {
    .get_glyph_dsc = lv_font_get_glyph_dsc_fmt_txt,    /*Function pointer to get glyph's data*/
    .get_glyph_bitmap = lv_font_get_bitmap_fmt_txt,    /*Function pointer to get glyph's bitmap*/
    .line_height = 13,          /*The maximum line height required by the font*/
    .base_line = 3,             /*Baseline measured from the bottom of the line*/
#if !(LVGL_VERSION_MAJOR == 6 && LVGL_VERSION_MINOR == 0)
    .subpx = LV_FONT_SUBPX_NONE,
#endif
    .dsc = &font_dsc           /*The custom font data. Will be accessed by `get_glyph_bitmap/dsc` */
};

#endif /*#if MY_FONT_CH*/

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

Some custom Unicode characters can not be displayed in dev-7
#2

OT: Don’t do that; use lv_style_set_text_line_space instead. It’s there for a reason. :slightly_smiling_face:

It seems that you didn’t add the style to the label, and thus it’s not using your font? (Use lv_obj_add_style.)

#3

Thank you.:grinning:
I just tried.

  • The style was not added to the label.
  • There are still some problems. Some characters are not shown.
  • characters "测试√℃●" only shown ***“试”***, "测√℃●" has been lost.I’m sure the font can display these characters normally, and it has been converted correctly.
  • Maybe it’s a bug?
    1
    1.jpg734×356 128 KB

    This is the code in main.
 static lv_style_t style1;
 static lv_style_t style2;
 lv_style_init(&style1);
 lv_style_init(&style2);

 LV_FONT_DECLARE(my_font_CH);

 lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
 lv_obj_t * label2 = lv_label_create(lv_scr_act(), NULL);
 lv_obj_add_style(label1, LV_OBJ_PART_MAIN, &style1);
 lv_obj_add_style(label2, LV_OBJ_PART_MAIN, &style2);
 lv_style_set_text_font(&style1, LV_STATE_DEFAULT, &my_font_CH);
 lv_style_set_text_font(&style2, LV_STATE_DEFAULT, &my_font_CH);
 lv_obj_set_style_local_text_color(label1, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED);
 lv_obj_set_style_local_text_color(label2, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_ORANGE);
 lv_label_set_text(label1, "测试√℃●");
 char * xx="\u6D4B 试测测测测 试da√测试b℃●√c\uF00C";
 lv_label_set_text(label2, xx);
 /* Position the main label */
 lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);
 lv_obj_align(label2, NULL, LV_ALIGN_CENTER, 0, 12);
#4

I think it’s a bug.I’ll report it.

#5

Thanks for @as564335sa ’s answer,now everything is ok. Some custom Unicode characters can not be displayed in dev-7
1

#6

Hello
According to your solution,mine still cannot display Chinese.
Using your Chinese font can not be displayed.Everything else can be displayed normally
Can you help me?

#7

Do you use the latest version form master?
Try to use the built-in LV_FONT_SIMSUN_16_CJK font.

#8

Thank you very much。That problem has been solved，I rebuilt the problem I had encountered。The related solution code is already written under the problem。