How to properly render fonts?

andresovela · November 15, 2021, 11:09am

Description

I am trying to render a custom font on a 256x64 display with 4-bits per pixel. When I display text using the font, it shows the text with the font, but it renders with some glitches: it looks jarred or something, not sure how to describe it.

It also glitches a lot when updating the text:

ezgif.com-gif-maker (1)

See how the D and the numbers glitch when updating the label to the same text.

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

NXP MIMXRT1011 with arm gcc 10.3.1

What LVGL version are you using?

v8.1

What do you want to achieve?

Nicer smooth rendering.

What have you tried so far?

I know that I don’t have issues drawing to my display. I tried rendering images and animations and they look very smooth. So I am confident that it is not a hardware issue or an issue with my flush function, etc.

I checked that the font doesn’t have issues in the simulator, it renders just fine.

I tried enabling/disabling antialiasing, subpixel rendering. I also tried regenerating the fonts with different bits-per-pixel and with/without subpix rendering. I still got glitchy text.

Code to reproduce

The following codes illustrates how I’m using the font in my project. This code works in the simulator and renders properly, but it does not look the same in my device.

#include "lvgl.h"

LV_FONT_DECLARE(inter_medium_35)

static lv_style_t text_style_regular;
static lv_obj_t * m_content_text;

void test_run(void) {
    lv_style_init(&text_style_regular);
    lv_style_set_text_font(&text_style_regular, &inter_medium_35);
    lv_style_set_text_color(&text_style_regular, lv_color_black());
    lv_style_set_align(&text_style_regular, LV_ALIGN_TOP_LEFT);
    lv_style_set_width(&text_style_regular, 480);

    m_content_text = lv_label_create(lv_scr_act());
    lv_obj_add_style(m_content_text, &text_style_regular, LV_STATE_DEFAULT);
    lv_label_set_text(m_content_text, "This is a very very long text that should be constantly scrolling");
    lv_label_set_long_mode(m_content_text, LV_LABEL_LONG_SCROLL_CIRCULAR);
}

Find the font file attached (generated with 4 bpp and subpix rendering):
inter_medium_35.c (803.0 KB)

andresovela · November 29, 2021, 10:11am

andresovela · December 1, 2021, 1:31pm

I found the issue. See:

github.com/lvgl/lvgl

Subpix text rendering does not work properly when using compact draw buffers

opened 01:24PM - 01 Dec 21 UTC

andresovela

### Perform all steps below and tick them with [x] - [x] Check the related part… of the [Documentation](https://docs.lvgl.io/) - [x] Update lvgl to the latest version - [ ] Reproduce the issue in a [Simulator](https://docs.lvgl.io/latest/en/html/get-started/pc-simulator.html) ### Describe the bug Labels render with glitches when subpixel rendering is enabled and your draw buffers do not map 1-to-1 to the display. #### Context [Initial report in the LVGL forum](https://forum.lvgl.io/t/how-to-properly-render-fonts/7342) I am using LVGL to drive a display with the [SH1122 driver](https://www.displayfuture.com/Display/datasheet/controller/SH1122.pdf). The display has 256x64 4-bit grayscale pixels. In order to use memory efficiently, I use the [`set_px_cb()`](https://docs.lvgl.io/master/porting/display.html#_CPPv4N14_lv_disp_drv_t9set_px_cbE) function in order to set pixels in the buffer. I am currently using two buffers and I have the full refresh option enabled. I have tracked the issue down and the problem is in these lines: https://github.com/lvgl/lvgl/blob/ee65410c3725070ed1779c95fb8742107cdd9267/src/draw/sw/lv_draw_sw_letter.c#L442-L447 The problem is that LVGL is assuming that it can just read colors as they are, directly from the buffers. In my particular setup, this is not the case. The coordinates are not even right: coordinate (2, 0) is at `buf[1]` in my case, since I'm storing two 4-bit pixels per byte. I presume the same issue exists anywhere else where LVGL needs to read data from the draw buffer. I have fixed this issue by adding a `get_px_cb()` function to the display driver and using that function in the rendering code instead of having direct reads from the draw buffer. I don't know if that's the best way to fix the issue, but it worked for me. Basically I made this change: ```diff + lv_color_t bg_color = disp->driver->get_px_cb(draw_buf->buf_act, col, row); + uint8_t bg_rgb[3] = {bg_color.ch.red, bg_color.ch.green, bg_color.ch.blue}; - uint8_t bg_rgb[3] = {disp_buf_buf_tmp->ch.red, disp_buf_buf_tmp->ch.green, disp_buf_buf_tmp->ch.blue}; ``` The variable `disp_buf_buf_tmp` was not used then, and I removed it. I hope this helps, and I hope it can be fixed upstream soon. ### Expected behavior Labels with subpixel rendering should look smooth. ### Screenshots or video See [initial report in the LVGL forum](https://forum.lvgl.io/t/how-to-properly-render-fonts/7342)