LVGL - Pro - Resolution scale

General discussion
1

Is it possible to proportionally scale screens or components created in LVGL PRO Editor to different resolutions?

This would be useful because the editor automatically generates everything using pixel values, and we need to deploy the same UI across different screen sizes without recreating it for each resolution.

2

LVGL PRO Editor does not support proportionally scaling whole screens/components to different resolutions in terms of UI design, but at runtime you can make LVGL objects adapt by using responsive sizing such as lv_pct() for width and height (and layouts like flex/grid) so the UI scales correctly across displays.

3

So your suggestion is to call lv_pct() on every LVGL object at runtime?

Wouldn’t that require significant code rework(manually adding lv_pct()) and add runtime overhead that could be avoided with pre-compiled scaling?

4

Using lv_pct() means LVGL will calculate the final pixel sizes at runtime, based on the current display resolution and the parent object size. It’s not a one-time conversion either: whenever the parent container changes size (rotation, resize, layout refresh, etc.), LVGL re-evaluates the percentage values and updates the child objects accordingly.

<lv_obj width="100%" height="100%" /> 
lv_obj_set_width(obj, lv_pct(100));
lv_obj_set_height(obj, lv_pct(100));
5

Figured out we can just do

	<lv_button width="15%" height="8%" x="2%" y="8%">
		<lv_label text="Button 1" align="center" />
	</lv_button>

that does exactly what i was looking for.

1 Like