Rpi4 + Touchscreen: Distorted Demo / LVGL doubles the horizontal width

Hi all!

This is my first post here. I am pretty thrilled by what LVGL offers, and am now struggling a bit to get everything up and running. Let me know if any information is missing! Also please be aware that I had to add a whitespace to some URLs, as new Users can´t add more then 3 Links in a Post.

Description

I am trying to make the base example of LVGL work on a Raspberry pi with Touchscreen. I am using
that repository: GitHub - helioz2000/lvgl_demo: LVGL graphic demo for Raspberry Pi with 7" screen as a starting point.

I have not changed anything in the files. It compiles fine, but when I start the demo with sudo ./demo I only see distorted images. The video below should show it clearly.

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

Raspberry Pi 4b, Raspbian OS Lite 64Bit (Release 2023-05-03, Debian Bullseye)
Raspberry pi Oficial Touchscreen 7"

What do you want to achieve?

Working demo with clear image

What have you tried so far?

  • Frame buffer demo project - strange colors and garbage on the screen - #10 by rpcy
    (edit lv_conf.h to make LV_HOR_RES_MAX 800 and LV_VER_RES_MAX 480, and make LV_COLOR_DEPTH 32, and finally edit lvgl/lv_drv_conf.h to #define USE_FBDEV 1) - no change, even after reboot
  • Setup the /boot/config.txt as mentioned here https ://learn.adafruit.com/adafruit-5-800x480-tft-hdmi-monitor-touchscreen-backpack/raspberry-pi-config
  • Tried a different Example Repo: https ://github.com/lvgl/lv_port_linux_frame_buffer (compiles fine, produces a similiar error)
  • Installed the newest regular LVGL by cloning Master Branch, copied the Config file https ://github.com/helioz2000/lvgl_demo/blob/master/lv_conf.h and compiled. No Change, still distorted screen

Code to reproduce

See Github Repo https ://github.com/helioz2000/lvgl_demo
UPDATE: The latest tests were made with that Repo here that uses lvgl v8.3.0: https: / /github.com/lvgl/lv_port_linux_frame_buffer

Screenshot and/or video

UPDATE
I have found out that the horizontal screen size is an issue.

The screen is 800x480 Pixels.

    /*Initialize and register a display driver*/
    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.draw_buf   = &disp_buf;
	disp_drv.flush_cb   = fbdev_flush;
    disp_drv.hor_res    = 800;
    disp_drv.ver_res    = 480;
    lv_disp_drv_register(&disp_drv);

Then I created a button with 400x240 Pixels. The result that I expected was that the button is 50%of Horizontal and 50% of Vertical Size:

 lv_obj_t * btn = lv_btn_create(lv_scr_act());     /*Add a button the current screen*/
 lv_obj_set_pos(btn, 0, 0);                            /*Set its position*/
 lv_obj_set_size(btn, 400, 240);                          /*Set its size*/

The result was this:

I tried setting the Screen size differently and ran the code again:

  /*Initialize and register a display driver*/
    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.draw_buf   = &disp_buf;
	disp_drv.flush_cb   = fbdev_flush;
    disp_drv.hor_res    = 400; /* Now changed from 800 to 400 */
    disp_drv.ver_res    = 480;
    lv_disp_drv_register(&disp_drv);

With this result (as expected):

So my interpretation is the following:
The LVGL Content is rendered, assuming that the Display width is 2*800 = 1600 Pixels, even though the screen is 800 Pixels wide

1 Like

I had similar problem, now it’s solved.
My solution is to adjust /boot/config.txt file as follow:

#Enable DRM VC4 V3D driver
#dtoverlay=vc4-kms-v3d
max_framebuffers=2

#Don’t have the firmware create an initial video= setting in cmdline.txt.
#Use the kernel’s default instead.
disable_fw_kms_setup=1

#Disable compensation for displays with overscan
#disable_overscan=1

hdmi_pixel_encoding=2
hdmi_group=2
hdmi_mode=87
hdmi_cvt=1366 768 50 0 1 0
hdmi_drive=2

I think what’s really made the effect is when I disable dtoverlay=vc4-kms-v3d