Questions about Version 7.0 styles and theme

How-to
1

Description

Questions about Version 7.0 styles and theme

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

Xilinx Zynq 7020

What do you want to achieve?

1). Change the default Material theme styles and flip between the dark and light versions at run-time.
2). Previously I also used the ink in/out functions on the button objects, how would I now go about reproducing that functionality now those functions appear to have been removed from the API. I am guessing that will also be a style based implementation but I can’t quite see how it works right now?

What have you tried so far?

I have successfully ported one of my projects completely to Version 7.0 so far but, I need to be able to change the default theme styles to my needs. I have worked out how to add local styles to the objects and that is all working fine :slight_smile: but I would like to edit some of the default style parameters at run-time as I need to allow the user to re-colour the GUI and flip between Light and Dark theme and reinitialise the theme during normal operation. I could do this with local style parameters also but it seems quite a lot of work, I would prefer to just edit the existing global theme style parameters and reinitialise the theme. I suspect the Light & Dark flip is probably coming but not implemented yet?

I hope this makes sense! Any suggestions/help would be much appreciated!

Kind Regards,

Pete

2

Yes, that’s the case. I’m planning to do this for weeks but you case is a good motivation. I’ll add the interface on Monday. :slight_smile:

I’ve removed it because it was too hacky. Thre is no direct replacement right now, but I’ll think about a better alternative.

1 Like
3

Hi @kisvegabor,

Hope you and family are staying safe and well in the current situation.

Thank you for your response it is much appreciated, I will keep an eye on the repository next week and test it when you’re done and let you know how it goes.

Just one remaining point is there anyway to change the theme internal styles at run-time also?
I am guessing there might be away to retrieve a pointer to the themes style list allowing the styles to be modified subsequently maybe? Or am I off track here? Or is it your intention that I should assign local styles to each object to make changes?

Sorry my original question probably was not worded that well.

Kind Regards,

Pete

4

Do you mean :hover modifier was removed?

5

No; this was a special feature added to lv_btn back in 5.2 that manually created a bubble effect on top of the button (instead of just darkening it). Hovering is still supported, as far as I know.

6

@pete-pjb
We are fine, thank you. ^^ I hope you too!

I’ve added the run time theme change feature. Unlike in v6, in v7 you can change only the current theme run time by calling lv_theme_xxx_init.

 lv_theme_material_init(LV_COLOR_RED, LV_COLOR_BLUE,
                LV_THEME_MATERIAL_FLAG_DARK, 
                &lv_font_roboto_16, &lv_font_roboto_22, &lv_font_roboto_28, &lv_font_roboto_28);

As you probably already know v7 supports “style cascading” (similar to CSS). Therefore it’s not recommended to overwrite the theme styles directly, but you can add custom styles to overwrite some properties. For example to make a button green you can create a “green button style” and add it to the buttons you need. Like this:
btn

t * btn1 = lv_btn_create(lv_scr_act(), NULL);
lv_obj_set_pos(btn1, 10, 10);

static lv_style_t style_green_btn;
lv_style_init(&style_green_btn);
lv_style_set_border_color(&style_green_btn, LV_STATE_DEFAULT, LV_COLOR_LIME);
lv_style_set_border_color(&style_green_btn, LV_STATE_PRESSED, LV_COLOR_GREEN);
lv_style_set_bg_color(&style_green_btn, LV_STATE_PRESSED, LV_COLOR_LIME);

lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);
lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_green_btn);
lv_obj_set_pos(btn2, 10, 100);

v7 is designed to supports hovering but it’s still not implemented.

1 Like
7

Hi @kisvegabor,

I’m well thank you.

Thank you for your reply I will get the dark/light change implemented in my code and let you know how it goes.

I have already been using the lv_obj_add_style() function in my code for various elements, so if your intention is to do things this way I will adapt my code to suite, including the ink in/out bit, no problem.:smiley:

Kind Regards,

Pete

8

Hi @kisvegabor,

I have implemented the dark/light theme change in my interface and all appears to be well at this stage.

So this topic can be closed now.

Thanks again.

Pete

9

Awesome, thank you for the feedback! :slight_smile: