[lvgl] Msgbox fixes and enhancements (#7380)

esphome/components/lvgl/automation.py

@@ -229,19 +229,23 @@ async def obj_hide_to_code(config, action_id, template_arg, args):
     async def do_hide(widget: Widget):
         widget.add_flag("LV_OBJ_FLAG_HIDDEN")
 
-    return await action_to_code(
-        await get_widgets(config), do_hide, action_id, template_arg, args
-    )
+    widgets = [
+        widget.outer if widget.outer else widget for widget in await get_widgets(config)
+    ]
+    return await action_to_code(widgets, do_hide, action_id, template_arg, args)
 
 
 @automation.register_action("lvgl.widget.show", ObjUpdateAction, LIST_ACTION_SCHEMA)
 async def obj_show_to_code(config, action_id, template_arg, args):
     async def do_show(widget: Widget):
         widget.clear_flag("LV_OBJ_FLAG_HIDDEN")
+        if widget.move_to_foreground:
+            lv_obj.move_foreground(widget.obj)
 
-    return await action_to_code(
-        await get_widgets(config), do_show, action_id, template_arg, args
-    )
+    widgets = [
+        widget.outer if widget.outer else widget for widget in await get_widgets(config)
+    ]
+    return await action_to_code(widgets, do_show, action_id, template_arg, args)
 
 
 def focused_id(value):

esphome/components/lvgl/defines.py

@@ -374,6 +374,7 @@ CONF_ANTIALIAS = "antialias"
 CONF_ARC_LENGTH = "arc_length"
 CONF_AUTO_START = "auto_start"
 CONF_BACKGROUND_STYLE = "background_style"
+CONF_BUTTON_STYLE = "button_style"
 CONF_DECIMAL_PLACES = "decimal_places"
 CONF_COLUMN = "column"
 CONF_DIGITS = "digits"

esphome/components/lvgl/widgets/__init__.py

@@ -89,6 +89,8 @@ class Widget:
             self.obj = MockObj(f"{self.var}->obj")
         else:
             self.obj = var
+        self.outer = None
+        self.move_to_foreground = False
 
     @staticmethod
     def create(name, var, wtype: WidgetType, config: dict = None):

esphome/components/lvgl/widgets/msgbox.py

@@ -1,11 +1,12 @@
 from esphome import config_validation as cv
-from esphome.const import CONF_BUTTON, CONF_ID, CONF_TEXT
+from esphome.const import CONF_BUTTON, CONF_ID, CONF_ITEMS, CONF_TEXT
 from esphome.core import ID
 from esphome.cpp_generator import new_Pvariable, static_const_array
 from esphome.cpp_types import nullptr
 
 from ..defines import (
     CONF_BODY,
+    CONF_BUTTON_STYLE,
     CONF_BUTTONS,
     CONF_CLOSE_BUTTON,
     CONF_MSGBOXES,
@@ -25,7 +26,7 @@ from ..lvcode import (
     lv_obj,
     lv_Pvariable,
 )
-from ..schemas import STYLE_SCHEMA, STYLED_TEXT_SCHEMA, container_schema
+from ..schemas import STYLE_SCHEMA, STYLED_TEXT_SCHEMA, container_schema, part_schema
 from ..styles import TOP_LAYER
 from ..types import LV_EVENT, char_ptr, lv_obj_t
 from . import Widget, set_obj_properties
@@ -48,9 +49,10 @@ MSGBOX_SCHEMA = container_schema(
         {
             cv.GenerateID(CONF_ID): cv.declare_id(lv_obj_t),
             cv.Required(CONF_TITLE): STYLED_TEXT_SCHEMA,
-            cv.Optional(CONF_BODY): STYLED_TEXT_SCHEMA,
+            cv.Optional(CONF_BODY, default=""): STYLED_TEXT_SCHEMA,
             cv.Optional(CONF_BUTTONS): cv.ensure_list(BUTTONMATRIX_BUTTON_SCHEMA),
-            cv.Optional(CONF_CLOSE_BUTTON): lv_bool,
+            cv.Optional(CONF_BUTTON_STYLE): part_schema(buttonmatrix_spec),
+            cv.Optional(CONF_CLOSE_BUTTON, default=True): lv_bool,
             cv.GenerateID(CONF_BUTTON_TEXT_LIST_ID): cv.declare_id(char_ptr),
         }
     ),
@@ -74,7 +76,8 @@ async def msgbox_to_code(conf):
     )
     lvgl_components_required.add("BUTTONMATRIX")
     messagebox_id = conf[CONF_ID]
-    outer = lv_Pvariable(lv_obj_t, messagebox_id.id)
+    outer_id = f"{messagebox_id.id}_outer"
+    outer = lv_Pvariable(lv_obj_t, messagebox_id.id + "_outer")
     buttonmatrix = new_Pvariable(
         ID(
             f"{messagebox_id.id}_buttonmatrix_",
@@ -82,8 +85,11 @@ async def msgbox_to_code(conf):
             type=lv_buttonmatrix_t,
         )
     )
-    msgbox = lv_Pvariable(lv_obj_t, f"{messagebox_id.id}_msgbox")
-    outer_widget = Widget.create(messagebox_id, outer, obj_spec, conf)
+    msgbox = lv_Pvariable(lv_obj_t, messagebox_id.id)
+    outer_widget = Widget.create(outer_id, outer, obj_spec, conf)
+    outer_widget.move_to_foreground = True
+    msgbox_widget = Widget.create(messagebox_id, msgbox, obj_spec, conf)
+    msgbox_widget.outer = outer_widget
     buttonmatrix_widget = Widget.create(
         str(buttonmatrix), buttonmatrix, buttonmatrix_spec, conf
     )
@@ -92,10 +98,8 @@ async def msgbox_to_code(conf):
     )
     text_id = conf[CONF_BUTTON_TEXT_LIST_ID]
     text_list = static_const_array(text_id, text_list)
-    if (text := conf.get(CONF_BODY)) is not None:
-        text = await lv_text.process(text.get(CONF_TEXT))
-    if (title := conf.get(CONF_TITLE)) is not None:
-        title = await lv_text.process(title.get(CONF_TEXT))
+    text = await lv_text.process(conf[CONF_BODY].get(CONF_TEXT, ""))
+    title = await lv_text.process(conf[CONF_TITLE].get(CONF_TEXT, ""))
     close_button = conf[CONF_CLOSE_BUTTON]
     lv_assign(outer, lv_expr.obj_create(TOP_LAYER))
     lv_obj.set_width(outer, lv_pct(100))
@@ -111,20 +115,27 @@ async def msgbox_to_code(conf):
     )
     lv_obj.set_style_align(msgbox, literal("LV_ALIGN_CENTER"), 0)
     lv_add(buttonmatrix.set_obj(lv_expr.msgbox_get_btns(msgbox)))
-    await set_obj_properties(outer_widget, conf)
-    if close_button:
-        async with LambdaContext(EVENT_ARG, where=messagebox_id) as context:
+    if button_style := conf.get(CONF_BUTTON_STYLE):
+        button_style = {CONF_ITEMS: button_style}
+        await set_obj_properties(buttonmatrix_widget, button_style)
+    await set_obj_properties(msgbox_widget, conf)
+    async with LambdaContext(EVENT_ARG, where=messagebox_id) as close_action:
         outer_widget.add_flag("LV_OBJ_FLAG_HIDDEN")
+    if close_button:
         with LocalVariable(
             "close_btn_", lv_obj_t, lv_expr.msgbox_get_close_btn(msgbox)
         ) as close_btn:
             lv_obj.remove_event_cb(close_btn, nullptr)
             lv_obj.add_event_cb(
                 close_btn,
-                await context.get_lambda(),
+                await close_action.get_lambda(),
                 LV_EVENT.CLICKED,
                 nullptr,
             )
+    else:
+        lv_obj.add_event_cb(
+            outer, await close_action.get_lambda(), LV_EVENT.CLICKED, nullptr
+        )
 
     if len(ctrl_list) != 0 or len(width_list) != 0:
         set_btn_data(buttonmatrix.obj, ctrl_list, width_list)

tests/components/lvgl/lvgl-package.yaml

@@ -52,6 +52,29 @@ lvgl:
     - touchscreen_id: tft_touch
       long_press_repeat_time: 200ms
       long_press_time: 500ms
+
+  msgboxes:
+    - id: message_box
+      close_button: true
+      title: Messagebox
+      bg_color: 0xffff
+      body:
+        text: This is a sample messagebox
+        bg_color: 0x808080
+      button_style:
+        bg_color: 0xff00
+        border_width: 4
+      buttons:
+        - id: msgbox_button
+          text: Button
+        - id: msgbox_apply
+          text: "Close"
+          on_click:
+            then:
+              - lvgl.widget.hide: message_box
+    - id: simple_msgbox
+      title: Simple
+
   pages:
     - id: page1
       on_load:
@@ -98,6 +121,7 @@ lvgl:
                 - lvgl.update:
                     disp_bg_color: 0xffff00
                     disp_bg_image: cat_image
+                - lvgl.widget.show: message_box
         - label:
             text: "Hello shiny day"
             text_color: 0xFFFFFF