How to set the color of a button in TOGGLED state

How-to
1

Description

I would like to set different colors for a button in TOGGLED and in RELEASED state. In the documentation of the Button object there is no separate style for “toggled” state.

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

PC Simulator - SDL2

What do you want to achieve?

Different colors for a button in TOGGLED and in RELEASED state

What have you tried so far?

LV_BTN_STYLE_REL is already set to the wanted color. I also tried LV_BTN_STYLE_PR and LV_BTN_STYLE_TGL_PR without success.

Code to reproduce

The code is the following: first part is for the released state color setting --> works
2nd part would be for the “toggled” state, but neither LV_BTN_STYLE_TGL_PR or LV_BTN_STYLE_PR produces the result I want. There should be a LV_BTN_STYLE_TOGGLED style as well?

/* Set toggled release style 	*/
static lv_style_t styleBtnAutoManualTglRel;
lv_style_copy(&styleBtnAutoManualTglRel,lv_btn_get_style(btnAutoManual, LV_BTN_STYLE_REL));
styleBtnAutoManualTglRel.body.main_color = LV_COLOR_GREEN;
styleBtnAutoManualTglRel.body.grad_color = LV_COLOR_GREEN;
lv_btn_set_style(btnAutoManual,LV_BTN_STYLE_REL,&styleBtnAutoManualTglRel);
/* Set toggled applied style 	*/
static lv_style_t styleBtnAutoManualTglPr;
lv_style_copy(&styleBtnAutoManualTglPr,lv_btn_get_style(btnAutoManual, LV_BTN_STYLE_TGL_PR));
styleBtnAutoManualTglPr.body.main_color = LV_COLOR_RED;
styleBtnAutoManualTglPr.body.grad_color = LV_COLOR_RED;
lv_btn_set_style(btnAutoManual,LV_BTN_STYLE_TGL_PR,&styleBtnAutoManualTglPr);

Screenshot and/or video

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

2

Have a look at the button state documentation.

Essentially, buttons that can be toggled have two mutually exclusive states: toggled/untoggled, and pressed/released. These are independent of each other.

LV_BTN_STYLE_TGL_PR refers to a button that is currently toggled and being pressed.

LV_BTN_STYLE_TGL_REL refers to a button that is currently toggled but not pressed.

The same applies for LV_BTN_STYLE_[PR/REL]. They refer to a button that is not toggled, and pressed/released.

So you would need to set a style for both LV_BTN_STYLE_TGL_REL and LV_BTN_STYLE_TGL_PR.

3

like below

Blockquote
static lv_style_t style1; /Declare a new style. Should be static/
lv_style_copy(&style1, &lv_style_plain); /Copy a buil-in style/
style1.body.main_color = LV_COLOR_GEOTRAN; /Main color/
style1.body.grad_color = LV_COLOR_GEOTRAN; /Gradient color (orange)/
style1.body.radius = 2;
style1.text.color = LV_COLOR_WHITE;
style1.text.font = &arial_15; /Change font/
static lv_style_t style2; /Declare a new style. Should be static/
lv_style_copy(&style2, &lv_style_plain); /Copy a buil-in style/
style2.body.main_color = LV_COLOR_RED; /Main color/
style2.body.grad_color = LV_COLOR_RED; /Gradient color (orange)/
style2.body.radius = 2;
style2.text.color = LV_COLOR_WHITE;
style2.text.font = &arial_15; /Change font/
//
//
// create button
lv_obj_t * btnSystemOnOFF = lv_btn_create(window, NULL);
lv_obj_align(btnSystemOnOFF, NULL, LV_ALIGN_IN_TOP_RIGHT, -24, 40);
lv_obj_set_size(btnSystemOnOFF, 125, 40);
lv_btn_set_toggle(btnSystemOnOFF, true);
lv_btn_toggle(btnSystemOnOFF);
// button label
ButtonLabel_SystemOnOff = lv_label_create(btnSystemOnOFF, NULL);
lv_label_set_text(ButtonLabel_SystemOnOff, “System ON”);
// button action
lv_imgbtn_set_action(btnSystemOnOFF, LV_BTN_ACTION_CLICK, btn_click_SystemOnOFF);
//
lv_btn_set_style(btnSystemOnOFF, LV_BTN_STYLE_REL, &style2);
lv_btn_set_style(btnSystemOnOFF, LV_BTN_STYLE_PR, &style2);
lv_btn_set_style(btnSystemOnOFF, LV_BTN_STYLE_TGL_REL, &style1);
lv_btn_set_style(btnSystemOnOFF, LV_BTN_STYLE_TGL_PR, &style1);

4

Yes. Does that work?

5

Thank you for the reply. Actually I had to set LV_BTN_STYLE_TGL_REL for the “red” toggled state, and LV_BTN_STYLE_REL for the non-toggled “green” state.
It was not clear for me for the first read of the documentation.

6

That’s correct, as per what I wrote above. When the style has TGL in its name it means that the button is toggled on. When the style does not have TGL in its name the button is off.