From ca72286386aa0f47e609bd3774cab65ccc4047c5 Mon Sep 17 00:00:00 2001
From: Clyde Stubbs <2366188+clydebarrow@users.noreply.github.com>
Date: Fri, 29 Aug 2025 15:42:39 +1000
Subject: [PATCH] [lvgl] Update hello world (#10469)

---
 esphome/components/lvgl/hello_world.py | 129 ++++++++++++++++++-------
 1 file changed, 96 insertions(+), 33 deletions(-)

diff --git a/esphome/components/lvgl/hello_world.py b/esphome/components/lvgl/hello_world.py
index 2c2ec6732c..f85da9d8e4 100644
--- a/esphome/components/lvgl/hello_world.py
+++ b/esphome/components/lvgl/hello_world.py
@@ -4,49 +4,112 @@ from esphome.yaml_util import parse_yaml
 
 CONFIG = """
 - obj:
-    radius: 0
+    id: hello_world_card_
     pad_all: 12
-    bg_color: 0xFFFFFF
+    bg_color: white
     height: 100%
     width: 100%
+    scrollable: false
     widgets:
-    - spinner:
-        id: hello_world_spinner_
-        align: center
-        indicator:
-          arc_color: tomato
-        height: 100
-        width: 100
-        spin_time: 2s
-        arc_length: 60deg
-    - label:
-        id: hello_world_label_
-        text: "Hello World!"
+    - obj:
+        align: top_mid
+        outline_width: 0
+        border_width: 0
+        pad_all: 4
+        scrollable: false
+        height: size_content
+        width: 100%
+        layout:
+            type: flex
+            flex_flow: row
+            flex_align_cross: center
+            flex_align_track: start
+            flex_align_main: space_between
+        widgets:
+        - button:
+            checkable: true
+            radius: 4
+            text_font: montserrat_20
+            on_click:
+              lvgl.label.update:
+                id: hello_world_label_
+                text: "Clicked!"
+            widgets:
+              - label:
+                  text: "Button"
+        - label:
+            id: hello_world_title_
+            text: ESPHome
+            text_font: montserrat_20
+            width: 100%
+            text_align: center
+            on_boot:
+                lvgl.widget.refresh: hello_world_title_
+            hidden: !lambda |-
+                return lv_obj_get_width(lv_scr_act()) < 400;
+        - checkbox:
+            text: Checkbox
+            id: hello_world_checkbox_
+            on_boot:
+                lvgl.widget.refresh: hello_world_checkbox_
+            hidden: !lambda |-
+                return lv_obj_get_width(lv_scr_act()) < 240;
+            on_click:
+              lvgl.label.update:
+                id: hello_world_label_
+                text: "Checked!"
+    - obj:
+        id: hello_world_container_
         align: center
+        y: 14
+        pad_all: 0
+        outline_width: 0
+        border_width: 0
+        width: 100%
+        height: size_content
+        scrollable: false
         on_click:
             lvgl.spinner.update:
               id: hello_world_spinner_
               arc_color: springgreen
-    - checkbox:
-        pad_all: 8
-        text: Checkbox
-        align: top_right
-        on_click:
-          lvgl.label.update:
-            id: hello_world_label_
-            text: "Checked!"
-    - button:
-        pad_all: 8
-        checkable: true
-        align: top_left
-        text_font: montserrat_20
-        on_click:
-          lvgl.label.update:
-            id: hello_world_label_
-            text: "Clicked!"
+        layout:
+            type: flex
+            flex_flow: row_wrap
+            flex_align_cross: center
+            flex_align_track: center
+            flex_align_main: space_evenly
         widgets:
-          - label:
-              text: "Button"
+            - spinner:
+                id: hello_world_spinner_
+                indicator:
+                  arc_color: tomato
+                height: 100
+                width: 100
+                spin_time: 2s
+                arc_length: 60deg
+                widgets:
+                    - label:
+                        id: hello_world_label_
+                        text: "Hello World!"
+                        align: center
+            - obj:
+                id: hello_world_qrcode_
+                outline_width: 0
+                border_width: 0
+                hidden: !lambda |-
+                    return lv_obj_get_width(lv_scr_act()) < 300 && lv_obj_get_height(lv_scr_act()) < 400;
+                widgets:
+                - label:
+                    text_font: montserrat_14
+                    text: esphome.io
+                    align: top_mid
+                - qrcode:
+                    text: "https://esphome.io"
+                    size: 80
+                    align: bottom_mid
+                    on_boot:
+                        lvgl.widget.refresh: hello_world_qrcode_
+
     - slider:
         width: 80%
         align: bottom_mid