2403572_en-US

Yes

GUI Guider 1.10.1 omits background style properties when Background Opacity is 0

Environment

GUI Guider: 1.10.1
LVGL: 8.3
Widget: Button
Style Part: LV_PART_MAIN
Style State: LV_STATE_DEFAULT

Problem Description

I found a reproducible code-generation issue in GUI Guider 1.10.1.

When a button has a configured background color but its Background Opacity is set to 0, GUI Guider does not generate the corresponding background color property.

This causes unexpected behavior when the background opacity is changed dynamically at runtime.

Reproduction

Create a Button and configure:

Background Color: #F08300
Background Opacity: 0

Then generate the LVGL 8.3 code.

GUI Guider generates:

lv_obj_set_style_bg_opa(ui->screen_password_btn_15,
0,
LV_PART_MAIN | LV_STATE_DEFAULT);
However, the configured background color is not generated:

lv_obj_set_style_bg_color(ui->screen_password_btn_15,
lv_color_hex(0xF08300),
LV_PART_MAIN | LV_STATE_DEFAULT);
Test: Change only Background Opacity from 0 to 1

I changed only the Background Opacity from 0 to 1, while keeping the same Background Color #F08300.

After regenerating the code, GUI Guider generates:

lv_obj_set_style_bg_opa(ui->screen_password_btn_15,
1,
LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_set_style_bg_color(ui->screen_password_btn_15,
lv_color_hex(0xF08300),
LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_set_style_bg_grad_dir(ui->screen_password_btn_15,
LV_GRAD_DIR_NONE,
LV_PART_MAIN | LV_STATE_DEFAULT);
Therefore, the generated code differs depending on whether Background Opacity is exactly 0.

Background Opacity = 0:
bg_opa is generated
bg_color is not generated

Background Opacity = 1:
bg_opa is generated
bg_color is generated
other background properties are also generated

Runtime Impact

My application uses the background opacity to indicate the currently selected password digit.

The background color is configured in GUI Guider as #F08300, while the application dynamically changes only the background opacity.

For example:

lv_obj_set_style_bg_opa(btn,
LV_OPA_COVER,
LV_PART_MAIN | LV_STATE_DEFAULT);
For a button whose initial Background Opacity is 0, the generated code does not contain the configured background color.

When the application changes the opacity from 0 to LV_OPA_COVER, the button displays the LVGL theme or default background color instead of the #F08300 color configured in GUI Guider.

The behavior is:

GUI Guider configuration:
Background Color = #F08300
Background Opacity = 0

Generated code:
bg_opa = 0
bg_color is not generated

Runtime:
bg_opa is changed to LV_OPA_COVER

Result:
The default or theme background color is displayed instead of #F08300.

Workaround

Explicitly setting the background color in application code resolves the issue:

lv_obj_set_style_bg_color(btn,
lv_color_hex(0xF08300),
LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_set_style_bg_opa(btn,
LV_OPA_COVER,
LV_PART_MAIN | LV_STATE_DEFAULT);
Another possible workaround is setting Background Opacity to 1 in GUI Guider, because this causes GUI Guider to generate the configured background color.

However, this changes the initial UI state and is therefore not ideal.

Expected Behavior

Background Color and Background Opacity are separate LVGL style properties.

If the user explicitly configures:

Background Color = #F08300
Background Opacity = 0

I would expect GUI Guider to preserve both properties in the generated code:

lv_obj_set_style_bg_opa(btn,
0,
LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_set_style_bg_color(btn,
lv_color_hex(0xF08300),
LV_PART_MAIN | LV_STATE_DEFAULT);
Although bg_color has no visible effect while bg_opa is 0, it becomes relevant when the application dynamically changes bg_opa at runtime.

The current code-generation behavior loses the background color information configured in GUI Guider.

Actual Behavior

GUI Guider 1.10.1 appears to omit background style properties when Background Opacity is 0.

Changing only the opacity from 0 to 1 causes the background color and other background properties to be generated again.

Steps to Reproduce

Create a Button in GUI Guider 1.10.1.

Set Background Color to #F08300.

Set Background Opacity to 0.

Generate LVGL 8.3 code.

Observe that lv_obj_set_style_bg_opa with value 0 is generated.

Observe that lv_obj_set_style_bg_color with #F08300 is not generated.

Change only Background Opacity from 0 to 1.

Generate the code again.

Observe that lv_obj_set_style_bg_color with #F08300 is now generated.

At runtime, change the opacity of the original button to LV_OPA_COVER.

Observe that the configured background color is not displayed unless bg_color is explicitly set by the application.

Question

Is this an intentional code-size optimization in GUI Guider 1.10.1, or is it a code-generation issue?

If this optimization is intentional, could GUI Guider provide an option to preserve background properties when Background Opacity is 0?

Runtime applications commonly change LVGL style properties dynamically, so omitting bg_color based only on its initial opacity can result in runtime behavior that differs from the UI configuration.

Re: GUI Guider 1.10.1 omits background style properties when Background Opacity is 0

Hello @zzjgood ,

Thanks for your post.

I can reproduce the behavior you described. I think this is a code-generation issue. If the user explicitly configures a Background Color, GUI Guider should preserve the corresponding bg_color code even when the initial Background Opacity is 0, or provide an option to preserve background style properties for transparent objects. I will report this to the GUI-Guider team for further fix. In addition, according to our internal escalation process, we would appreciate it if you could provide the following information:

- Which NXP product are you using?
- What is your end application?

The current practical workaround is to explicitly set both the background color and opacity in the application code:

lv_obj_set_style_bg_color(btn,
                          lv_color_hex(0xF08300),
                          LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(btn,
                        LV_OPA_COVER,
                        LV_PART_MAIN | LV_STATE_DEFAULT);

Hop it helps.

BR

Celeste