Same program on both simulator and target Board display differently


Same program on both,Simulator and target Board display differently

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

Target board:

STM32F769-DISC using STM32CubeIDE

Simulator (on windows 10):

Microsoft Visual Studio Community 2017
Version 15.5.2
Microsoft .NET Framework
Version 4.8.03752

What LVGL version are you using?

both 7.7.0 ( shows ## v7.7.0 (06.10.2020) but git tag shows 7.6.1)

What do you want to achieve?

Development on simulator and deployment on target board by copy my code from simulator project to the
board project

What have you tried so far?

Changing the LV_DPI to different values in lv_conf.h. This does affect the display but in a strange and inconsistent (for me) maner. Fx. increasing LV_DPI makes containers wider and higher, on a tab page
but tables remain the same. On a window object buttons get bigger in both h&w, dropdown list are unchanged, and text areas higher but vertical and horizontal distances are the same.

Code to reproduce

Show how I create text areas and position it (more code can be shown if needed)

static lv_obj_t * create_numeric_field(
		lv_obj_t *parent,
		lv_obj_t *relObj, 
		const char *lbl_text,
		uint16_t  *field_ptr) {
	/* fiels text area */
	lv_obj_t * ta = lv_textarea_create(parent, NULL);
	lv_obj_set_event_cb(ta, ta_event_cb);
	lv_textarea_set_accepted_chars(ta, NUMERIC_RANGE);
	lv_textarea_set_cursor_hidden(ta, true);
	lv_textarea_set_max_length(ta, 5);
	lv_textarea_set_one_line(ta, true);
	lv_obj_set_width(ta, 80);
	lv_snprintf(buf, TEXT_BUF_SIZE_LOCAL, "%d", *field_ptr);
	lv_textarea_set_text(ta, buf);
	lv_obj_set_user_data(ta, field_ptr);
	if (relObj == NULL) {
		lv_obj_align(ta, NULL, LV_ALIGN_IN_TOP_LEFT, 250, 50);
	else {
		lv_obj_align(ta, relObj, LV_ALIGN_IN_TOP_LEFT, 0, 50);
	/*field  lable*/
	lv_obj_t * f_lbl = lv_label_create(parent, NULL);
	lv_label_set_text(f_lbl, lbl_text);
	lv_coord_t obj_width = lv_obj_get_width(f_lbl);
	lv_obj_align(f_lbl, ta, LV_ALIGN_IN_TOP_LEFT, -(obj_width + 10), 5);
	return ta;

Screenshot and/or video

In the following screenshots ,The first two images(drawn on a tab) are shown equally in simulator ad target, The last two (drawon on a window object) are shown differently:


The difference is the most notable on boxes with checkboxes. Could show how you created these boxes?

here is the functionthat creates checkboxes

static lv_obj_t * create_checkbox_for_close_water_alarm(lv_obj_t *parent,
					lv_obj_t *relObj, // relative obj for positioning
					const char *lbl_text,
					alarm_mask_t alarm_mask) {

	//char buf[TEXT_BUF_SIZE_LOCAL];
	lv_obj_t *check_box= lv_checkbox_create(parent, NULL);
	lv_checkbox_set_text(check_box, lbl_text);
	lv_obj_set_event_cb(check_box, water_close_alarm_event_cb);
	lv_obj_set_user_data(check_box, (lv_obj_user_data_t)alarm_mask);
	uint16_t  *dataPtr= &current_vandvagt->close_water_alarm;
	// set a checkmark
	if (alt_cfg) {
		dataPtr = &current_vandvagt->alt_close_water_alarm;
	if (*dataPtr & alarm_mask) {
			lv_checkbox_set_checked(check_box, true);


	if (relObj == NULL) {
		lv_obj_align(check_box, NULL, LV_ALIGN_IN_TOP_LEFT, 10, 20);
	else {
		lv_obj_align(check_box, relObj, LV_ALIGN_IN_TOP_LEFT, 0, 40);
	return check_box;


looks like that on a tab as parent it shows the same in the simulator and on the target.
However, on window as aparent it shows differently

I’ve checked the images in GIMP and found that the font size are different.
Please check the value of LV_THEME_DEFAULT_FONT_NORMAL in lv_conf.h.

YES !!
Changing the fonts fixed the problem .
I simple copied the settings from the simulator

// original 
//#define LV_THEME_DEFAULT_FONT_SMALL         &lv_font_montserrat_16
//#define LV_THEME_DEFAULT_FONT_NORMAL        &lv_font_montserrat_20
//define LV_THEME_DEFAULT_FONT_SUBTITLE      &lv_font_montserrat_24
//#define LV_THEME_DEFAULT_FONT_TITLE         &lv_font_montserrat_30
// from simulator
#define LV_THEME_DEFAULT_FONT_SMALL         &lv_font_montserrat_12
#define LV_THEME_DEFAULT_FONT_NORMAL        &lv_font_montserrat_16
#define LV_THEME_DEFAULT_FONT_SUBTITLE      &lv_font_montserrat_20
#define LV_THEME_DEFAULT_FONT_TITLE         &lv_font_montserrat_24

I also had to enable lv_font_montserrat_12 by

#define LV_FONT_MONTSERRAT_12    0 


#define LV_FONT_MONTSERRAT_12    1
1 Like