How to change table cell color after code generated by GUIGuider?

How-to
1

Description

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

Visual Studio Professional 2019, GUIGuider

What LVGL version are you using?

9.1

What do you want to achieve?

I created a table using the GUIGuider software, then generate a C code to later be used in my C++ program.

I noticed that I cannot change the color of specific cell. (Probably dont know how)
I want to make the first row of my table color different than the other rows.

What have you tried so far?

I tried reading the 9.1 documentation on sample source code to change table cell color.
However, the documentation generate the table from coding itself, whereas I am using generated code from GUIGuider, and trying to modify the code from my C++ program.

Is there any method to directly modify the cell color after the table has been created ?

When I tried to set the background color, it changes the whole table color.

Code to reproduce

Sorry I cannot provide a code that you can run, since I am modifying the code from my C++ program. The generated C code is only for base.

char verBuf[20];

       lv_table_set_col_width(guider_ui.FWVersion_FWVersionTable, 0, 400); //change width
	
	lv_obj_set_style_bg_color(guider_ui.FWVersion_FWVersionTable, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT); // How to make this apply to first row only ?
	lv_obj_set_style_border_color(guider_ui.FWVersion_FWVersionTable, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(guider_ui.FWVersion_FWVersionTable, &lv_font_montserratMedium_24, LV_PART_ITEMS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(guider_ui.FWVersion_FWVersionTable, LV_TEXT_ALIGN_LEFT, LV_PART_ITEMS|LV_STATE_DEFAULT);


	lv_table_set_row_cnt(guider_ui.FWVersion_FWVersionTable,9);

	lv_table_set_cell_value(guider_ui.FWVersion_FWVersionTable,1,0,"Product Version");
	ylib_makeVersionString(verBuf, YSIZEOF(verBuf), PRODUCT_INFO.productVersion());
	lv_table_set_cell_value(guider_ui.FWVersion_FWVersionTable,1,1,verBuf);

Screenshot and/or video

image

2

Welcome,

You need to use the table’s “draw” event to change these things on the fly.

See the example I posted in an earlier thread and this example in the documentation: Table (lv_table) — LVGL documentation , as you can see, the top row of the table has a different color.

Let me know if anything is unclear and I’ll try to help further.

1 Like
3

Thank you very much! Exactly what I am looking for.