How to change the color of a label?

How-to
1

Description

I read the document, looks easy, but fail to work

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

codeblock

What do you want to achieve?

change the color of a label

What have you tried so far?

changed the code as the demo do, can’t pass compile, it says “expected expression before ‘uint16_t’”

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be between ```c and ``` tags:

/*You code here*/
//in lv_tutorial_hello_world.c
#include "../../../lvgl/src/lv_core/lv_style.h"
static lv_style_t style_me;

lv_style_copy(&style_me, &lv_style_plain);
style_me.body.main_color = uint16_t(0x07e0);
style_me.text.color = uint16_t(0xf800);
lv_label_set_style(label1, LV_LABEL_STYLE_MAIN, &style_me);

Screenshot and/or video

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

2

First of all, it looks like you are trying to use a C++ cast in a C project. In C you would write it as (uint16_t)0x07e0. That’s why you are getting the error.

Second, colors in LittlevGL are lv_color_t values, not integers. You should use the lv_color_make function and pass it 3 RGB values, or (only if you know that LV_COLOR_DEPTH is 16) I think putting a uint16_t value in main_color.full might work.

3

Cool, thanks for the quick reply, it works! thank you.

I changed it to:

style_me.body.main_color = LV_COLOR_BLUE;
style_me.text.color = LV_COLOR_GREEN;

It passed the compile and works, but the result is different from what I want.
I want the label to be green text in blue background, how to do that?

4

You also need to set grad_color to LV_COLOR_BLUE otherwise you will get a gradient.

5

Got it, I changed it again, here’s the code:

    style_me.body.main_color = LV_COLOR_BLUE;
    style_me.body.grad_color = LV_COLOR_RED;
    style_me.text.color = LV_COLOR_GREEN;

But I only got this: lvgl_label

Any ideas?

6

opa also changed, code:

style_me.body.main_color = LV_COLOR_BLUE;
    style_me.body.grad_color = LV_COLOR_RED;
    style_me.body.opa = 100;
    style_me.body.border.color = LV_COLOR_YELLOW;
    style_me.body.border.opa = 255;
    style_me.text.color = LV_COLOR_GREEN;

still don’t work.

7

Take a look at these part of the docs:

8

I see, sorry I missed the “Draw background” part.

Background color works now, except the border color, why?

lv_style_copy(&style_me, &lv_style_plain);
    style_me.body.main_color = LV_COLOR_BLUE;
    style_me.body.grad_color = LV_COLOR_BLUE;
    style_me.body.opa = 200;
    style_me.body.border.color = LV_COLOR_YELLOW;
    style_me.body.border.opa = 255;
    style_me.text.color = LV_COLOR_GREEN;
    lv_label_set_body_draw(label1, 1);
    lv_label_set_style(label1, LV_LABEL_STYLE_MAIN, &style_me);
9

Set style_me.body.border.width = 1.

10

1 don’t work on my screen, but 2 do

Thank you so much for the help, it looks perfect now.lvgl_label_1