Migrating from 7.5 to 8.1 - Table Cell Colours

elgerg · December 21, 2021, 5:34pm

Description

I have a table. In 7.5 you could colour the cells. I would like to do the same in 8.1

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

Simulator

What LVGL version are you using?

8.1

What do you want to achieve?

I would like to colour the text values of the cells

What have you tried so far?

Reviewing the docs

Code to reproduce

In 7.5 I did have:

    printf("Set Colours\n");
    lv_color_t lvcolourACE = LV_COLOR_MAKE(0xF7,0x34,0x34);
    lv_obj_set_style_text_color(sensorTable, lvcolourACE, LV_TABLE_PART_CELL2);
    lv_obj_set_style_text_color(sensorTable, lv_palette_main(LV_PALETTE_LIME), LV_TABLE_PART_CELL3);
    lv_obj_set_style_text_color(sensorTable, lv_palette_main(LV_PALETTE_CYAN), LV_TABLE_PART_CELL4);

    if(strcmp("green", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_PART_CELL3;
    }
    if(strcmp("red", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_PART_CELL2;
    }
    if(strcmp("blue", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_PART_CELL4;
    }

    lv_table_set_cell_type(sensorTable, arraypos, 1, outCol);

Screenshot and/or video

N/A

kisvegabor · December 22, 2021, 6:35pm

In v8 it’s a little bit more complicated but much more versatile.

See this example: Table (lv_table) — LVGL documentation

elgerg · December 22, 2021, 8:39pm

That looks like it will work when initially rendering the table.
How can i set the colour on the fly IE cell by cell?

This is what I used to have:

Thanks!

kisvegabor · December 22, 2021, 8:44pm

You add custom control flags like here to indicate whether the text should be red or green.

Or in the event based on the current column and row, you can see its value and the text_color accordingly.

elgerg · December 22, 2021, 8:47pm

Ah, thats going to be painful.
I’ll have to think how I can do that given I want to colour it based on the temp (thats now a string with the degree symbol)…

kisvegabor · December 22, 2021, 9:10pm

LV_TABLE_CELL_CTRL_CUSTOM_1/2/3/4 can be used similarly to the STYLE_1/2/3/4 in lvgl v7.

elgerg · December 22, 2021, 9:13pm

Sorry, I’m not sure I understand

This is what I had:

    if(strcmp("green", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_PART_CELL3;
    }
    if(strcmp("red", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_PART_CELL2;
    }
    if(strcmp("blue", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_PART_CELL4;
    }

lv_table_set_cell_type(sensorTable, arraypos, 1, outCol);

I’m not sure how that fits. Can you expand?

Thanks!
Alex

kisvegabor · December 22, 2021, 9:26pm

In the event:


        if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_1)) {
            dsc->label_dsc->color = lv_color_hex(0xff0000);
        }
        else if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_2)) {
            dsc->label_dsc->color = lv_color_hex(0x00ff00);
        }

On the table:

    lv_table_add_cell_ctrl(table, 1, 0, LV_TABLE_CELL_CTRL_CUSTOM_1);
    lv_table_add_cell_ctrl(table, 1, 1, LV_TABLE_CELL_CTRL_CUSTOM_2);

Result

elgerg · December 22, 2021, 10:34pm

Sorry, I must be doing something stupid.

I have:

    lv_obj_add_event_cb(sensorTable, draw_part_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
    lv_obj_add_event_cb(sensorTable, change_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

static void change_event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);
    lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
    uint16_t col;
    uint16_t row;
    lv_table_get_selected_cell(obj, &row, &col);
    if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_1)) {
        dsc->label_dsc->color = lv_color_hex(0x00ff00);
    }
    else if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_2)) {
        dsc->label_dsc->color = lv_color_hex(0xff0000);
    }
    else if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_3)) {
        dsc->label_dsc->color = lv_color_hex(0xff0000);
    }
}

    int outCol = 0;

    if(strcmp("green", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_CELL_CTRL_CUSTOM_1;
    }
    if(strcmp("red", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_CELL_CTRL_CUSTOM_2;
    }
    if(strcmp("blue", json_object_get_string(colour_struct)) == 0)
    {
    	outCol = LV_TABLE_CELL_CTRL_CUSTOM_3;
    }

	lv_table_add_cell_ctrl(sensorTable, arraypos, 1, outCol);

what am i doing wrong?

Thanks
Alex

elgerg · December 23, 2021, 6:46pm

Ive out some extra prints in and I dont think the callback is being called:

    lv_obj_add_event_cb(sensorTable, change_event_cb, LV_EVENT_VALUE_CHANGED, NULL);


static void change_event_cb(lv_event_t * e)
{
    printf("Change event callback called\n");
    lv_obj_t * obj = lv_event_get_target(e);
    lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
    uint16_t col;
    uint16_t row;
    lv_table_get_selected_cell(obj, &row, &col);
    if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_1)) {
        printf("Set colour 1\n");
        dsc->label_dsc->color = lv_color_hex(0x00ff00);
    }
    else if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_2)) {
        printf("Set colour 2\n");
        dsc->label_dsc->color = lv_color_hex(0xff0000);
    }
    else if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_3)) {
        printf("Set colour 3\n");
        dsc->label_dsc->color = lv_color_hex(0xff0000);
    }
}

elgerg · January 1, 2022, 7:31pm

Ok, starting to make some progress.

The callback doesnt get called when the cell is updated by:
lv_table_set_cell_value(sensorTable, arraypos, 1, buffer);
via
lv_obj_add_event_cb(sensorTable, change_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

It does get called when a cell is clicked.

However, when a cell is clicked it fails with:

Any input would be appreciated.

Thanks!

elgerg · January 13, 2022, 8:34pm

@kisvegabor any ideas?

Thanks!

elgerg · January 13, 2022, 9:34pm

I figured it out. I was using dsc in the wrong place.

Working c:

    lv_obj_add_event_cb(sensorTable, draw_part_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);

static void draw_part_event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);
    lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
    /*If the cells are drawn...*/
    if(dsc->part == LV_PART_ITEMS) {
        uint32_t row = dsc->id /  lv_table_get_col_cnt(obj);
        uint32_t col = dsc->id - row * lv_table_get_col_cnt(obj);

        /*In the first column align the texts to the right*/
        if(col == 1 || col == 2) {
            dsc->label_dsc->align = LV_TEXT_ALIGN_RIGHT;
        }
        if(col == 3) {
            dsc->label_dsc->align = LV_TEXT_ALIGN_CENTER;
        }

        if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_1)) {
            //Green
            printf("Set colour 1\n");
            dsc->label_dsc->color = lv_palette_main(LV_PALETTE_LIME);
        }
        else if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_2)) {
            //Red
            printf("Set colour 2\n");
            dsc->label_dsc->color = lv_palette_main(LV_PALETTE_RED);
        }
        else if(lv_table_has_cell_ctrl(obj, row, col, LV_TABLE_CELL_CTRL_CUSTOM_3)) {
            //Blue
            printf("Set colour 3\n");
            dsc->label_dsc->color = lv_palette_main(LV_PALETTE_CYAN);
        }
        
    }
    
}

int outCol = 0;

if(strcmp("green", json_object_get_string(colour_struct)) == 0)
{
	outCol = LV_TABLE_CELL_CTRL_CUSTOM_1;
}
if(strcmp("red", json_object_get_string(colour_struct)) == 0)
{
	outCol = LV_TABLE_CELL_CTRL_CUSTOM_2;
}
if(strcmp("blue", json_object_get_string(colour_struct)) == 0)
{
	outCol = LV_TABLE_CELL_CTRL_CUSTOM_3;
}

lv_table_add_cell_ctrl(sensorTable, arraypos, 1, outCol);

lv_table_set_cell_value(sensorTable, arraypos, 1, buffer);

anghd · July 21, 2022, 5:48am

@elgerg, Hi, I’m new to lvgl and want to highlight values in table, may I ask how you design this GUI , which tools are you using?
thank you in advance.

elgerg · July 21, 2022, 4:17pm

Hi @anghd

There is a GUI creator, it’s called SquareLine https://squareline.io/

However if you’re using NXP there is an editor they made called GUI Guider GUI Guider | NXP Semiconductors

Personally I used neither of these, I just use Visual Studio Code and wrote my interface by hand using the LVGL widgets… It was a little painful but I did most of my work before the above editors were around. Since then it’s been a case of updating from 6 > 7 > 8…

The documentation Welcome to the documentation of LVGL! — LVGL documentation is a great starting point and there are some repos in the LVGL Github to help get you started:
https://github.com/lvgl/lv_port_pc_vscode
https://github.com/lvgl/lv_port_linux_frame_buffer
and
https://github.com/lvgl/lv_arduino

However the Arduino one looks like it hasnt been updated in a while, you might be best off installing it directly from the Arduino library manager:

It really depends on what your target is.

I hope that helps
Alex

anghd · August 17, 2022, 5:11am

Hi,@elgerg
thanks for you kindly guidance.