Colour a table text using values like #fbd75b (recolor)

How-to
#1

Description

I have a table that I want to use for calendar purposes. Google calendars allow you to colour the entries and i would like to replicate that on the table.

As the colours come through as #x i would like to use the recolor but i dont think that exists for tables?

I suspect that the answer is to use more style parts and fix the colours to rgb values.

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

PC sim and RPIZero

What LVGL version are you using?

7.9.0 dev

What do you want to achieve?

Recolour text in tables based on #x data i get back from the google calendar API

What have you tried so far?

Checking the docs etc

Code to reproduce

None yet really

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

image
image976×400 15 KB

#2

It’s trivial to add a proper recoloring option to the table; I can do it in a few days.

In the meantime you can hack the feature in yourself by ORing LV_TXT_FLAG_RECOLOR with the values on lines 940, 943, and 950 in lv_table.c.

Modified example below:

                    if(format.s.crop == 0) {
                        txt_flags = LV_TXT_FLAG_NONE | LV_TXT_FLAG_RECOLOR;
                    }
                    else {
                        txt_flags = LV_TXT_FLAG_EXPAND | LV_TXT_FLAG_RECOLOR;
                    }

                    _lv_txt_get_size(&txt_size, ext->cell_data[cell] + 1, label_dsc[cell_type].font,
                                     label_dsc[cell_type].letter_space, label_dsc[cell_type].line_space,
                                     lv_area_get_width(&txt_area), txt_flags);

                    label_dsc[cell_type].flag = LV_TXT_FLAG_RECOLOR;
#3

Hi, it’s possible add this feature of recolor to value string of button widget?

#4

It’s doable but I’m concerned about the property bloat. In the meantime, I think you could also manually add the feature by adding label_dsc.flag = LV_TXT_FLAG_RECOLOR; here.

@kisvegabor What do you think?

1 Like
#5

it works :slight_smile:
thank you

#6

I was thinking a lot about how to make the styling of tables and button matrices easier and more flexible and finally came up with (I think) a good solution.

The idea is to let the user add a custom cell drawer function that looks something like this:

bool my_drawer(lv_obj_t * table, uint32_t row, uint32_t col,
               lv_draw_rect_dsc_t * rect_draw_dsc, lv_draw_label_dsc_t * label_draw_dsc,
               const lv_area_t * draw_area, const lv_area_t * clip_area)
{
    /*Draw anything you want in a specific cell. E.g. checkbox*/
    if(row == 1 && col == 1) {
       ...

       /*Tell LVGL the drawing happened and no more drawing needs to be done on this cell*/
       return true;   
    }

    /*Just modify some draw dsc-s*/

    /*Make every 2nd row gray*/
    if(row % 2) rect_draw_dsc->bg_color = lv_color_hex3(0xccc);
    
    /*Make a specific cell red*/
    if(row == 3 && col == 1)  rect_draw_dsc->bg_color = LV_COOR_RED;
    
    /*Tell LVGL no drawing happened, and use the modified draw dsc-s to draw the cell*/
    return false;
}

What do you think about it?

I know it does not solve your problem with v7 but we’d great to hear if this approach can work for you.

@embeddedt
I’m ok with adding recoloring in v7 but it’s limited only to the text. To check the background color of the cells it can’t be avoided to create many styles for each cell type.

#7

I like this idea!

1 Like
#8

I am good with both approaches. The latest would allow for more flexibility but the first would do what i need.

Any ideas when this could be scheduled in?

Thanks!