Custom font cut off at end

Bug (archived)
1

Description

I’ve created a custom font using the font converter on the lvgl website. It all works well except the fact that the last character is cut off at the end, so it’s not fully displaying the font.

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

PC simulator

What do you experience?

As can be seen in the image below, the “3” is cut off at the end towards last few pixels

image
image960×632 55.8 KB

What do you expect?

Code to reproduce

This is the basic sketch used, the font is declared in the config file. The font is Eurostile Extended Bold Italic

LV_IMG_DECLARE(guage_bg_bar);

float boostVal = 2.3;

void lv_ex_get_started_guage(void)
{
	lv_obj_t * obj0 = lv_obj_create(lv_scr_act(), NULL);
	lv_obj_set_width(obj0, 480);
	lv_obj_set_height(obj0, 320);


	static lv_style_t style1;
	lv_style_init(&style1);
	lv_style_set_bg_color(&style1, LV_STATE_DEFAULT, LV_COLOR_BLACK);
	lv_obj_add_style(obj0,LV_OBJ_PART_MAIN, &style1);
	lv_style_set_border_width(&style1, LV_STATE_DEFAULT, 0);
	lv_style_set_radius(&style1, LV_STATE_DEFAULT, 0);


	static lv_style_t text1;
	lv_style_init(&text1);
	lv_style_set_text_color(&text1, LV_STATE_DEFAULT, LV_COLOR_WHITE); //
	lv_style_set_text_font(&text1, LV_STATE_DEFAULT, &EurostileExtObl_Bold_Regular_24px);  /*Set a larger font*/



	static lv_color_t colors[1];
	colors[0] = LV_COLOR_BLUE;

	lv_obj_t * guage_bg = lv_img_create(obj0, NULL);
	lv_img_set_src(guage_bg, &guage_bg_bar);
    lv_obj_t * gauge1 = lv_gauge_create(guage_bg, NULL);
    lv_obj_clean_style_list(gauge1, LV_GAUGE_PART_MAJOR);
    lv_obj_clean_style_list(gauge1, LV_GAUGE_PART_MAIN);   //The default is transparent
    lv_gauge_set_scale(gauge1, 270, 0, 0);
    lv_gauge_set_angle_offset(gauge1, -45);
    lv_gauge_set_range(gauge1,0,750);

    lv_gauge_set_needle_count(gauge1, 1, colors);
    lv_obj_set_size(gauge1, 320, 319);
    lv_obj_align(gauge1, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_gauge_set_value(gauge1,0, 260);

    lv_obj_t * label2 = lv_label_create(obj0, NULL);
    lv_obj_set_x(label2, 182);
    lv_obj_set_y(label2, 230);
    lv_obj_add_style(label2,LV_OBJ_PART_MAIN, &text1);
    lv_label_set_text_fmt(label2, "%.1f", boostVal); // %.2f sets two digits after the decimal point

}
2

i see two solutions:
the first solution is to raise your text higher gauge

static lv_style_t text1;
lv_style_init(&text1);
lv_style_set_text_color(&text1, LV_STATE_DEFAULT, LV_COLOR_WHITE); //
lv_style_set_text_font(&text1, LV_STATE_DEFAULT, &EurostileExtObl_Bold_Regular_24px);  /*Set a larger font*/

lv_obj_t * label2 = lv_label_create(obj0, NULL);
lv_obj_set_x(label2, 182);
lv_obj_set_y(label2, 230);
lv_obj_add_style(label2,LV_OBJ_PART_MAIN, &text1);
lv_label_set_text_fmt(label2, "%.1f", boostVal); // %.2f sets two digits after the decimal point

lv_obj_t * gauge1 = lv_gauge_create(guage_bg, NULL);
lv_obj_clean_style_list(gauge1, LV_GAUGE_PART_MAJOR);
lv_obj_clean_style_list(gauge1, LV_GAUGE_PART_MAIN);   //The default is transparent
lv_gauge_set_scale(gauge1, 270, 0, 0);
lv_gauge_set_angle_offset(gauge1, -45);
lv_gauge_set_range(gauge1,0,750);

lv_gauge_set_needle_count(gauge1, 1, colors);
lv_obj_set_size(gauge1, 320, 319);
lv_obj_align(gauge1, NULL, LV_ALIGN_CENTER, 0, 0);

lv_gauge_set_value(gauge1,0, 260);

or a couple of pixels to the left

3

I’ve tried your suggestion of creating the label and printing it before the gauge object, but it made no difference. Also, the number of digits does not affect it being cut off (does the same with a value of 2.3) so moving it left won’t do much either.

4

then I don’t know … sorry
it may be related to the font, because it is italic…

5

Is it always the 3 that gets cut off, or does the end digit not matter?

I’m guessing it’s an issue with the way the bounding box is calculated for italic fonts. What size did you convert your font at?

6

All digits besides the number 1.
I’ve converted the font through 6px to 32px, but tested 20px and 24px.

Is there a way to extended the bounding box any perhaps apply it to the object or style?

7

@kisvegabor do you have any suggestion or insight?

8

try using the bring to front function to bring the text to the foreground. I think the label is being drawn before the circle layer so the background is drawn over it. Or the text needs to be right aligned so that the edge of the 3 lines up with the edge of the label.

9

As I’m quite new to lvgl and still learning, can you point me into the direction of the bring to front function?

I did have the text aligned right but it made no difference. Also, the same behaviour is exhibited outside of the gauge, for instance on the blank area to the right side of the display.

10

It’s lv_obj_move_foreground.

11

In case anyone is experiencing the same issue:

I had trouble rendering Bukhari Script, also an italic font. I tried resizing the label fullscreen but it would still be cut off, in my case, on both ends.

My solution was to add a space character to the start and end of the label. Not ideal, but it does the job. :+1: