[lvgl] refactor hello world to yaml file (#12274)

esphome/components/lvgl/__init__.py

@@ -1,5 +1,6 @@
 import importlib
 import logging
+from pathlib import Path
 import pkgutil
 
 from esphome.automation import build_automation, validate_automation
@@ -26,6 +27,7 @@ from esphome.core import CORE, ID, Lambda
 from esphome.cpp_generator import MockObj
 from esphome.final_validate import full_config
 from esphome.helpers import write_file_if_changed
+from esphome.yaml_util import load_yaml
 
 from . import defines as df, helpers, lv_validation as lvalid, widgets
 from .automation import disp_update, focused_widgets, refreshed_widgets
@@ -37,7 +39,6 @@ from .encoders import (
     initial_focus_to_code,
 )
 from .gradient import GRADIENT_SCHEMA, gradients_to_code
-from .hello_world import get_hello_world
 from .keypads import KEYPADS_CONFIG, keypads_to_code
 from .lv_validation import lv_bool, lv_images_used
 from .lvcode import LvContext, LvglComponent, lvgl_static
@@ -84,6 +85,7 @@ DEPENDENCIES = ["display"]
 AUTO_LOAD = ["key_provider"]
 CODEOWNERS = ["@clydebarrow"]
 LOGGER = logging.getLogger(__name__)
+HELLO_WORLD_FILE = "hello_world.yaml"
 
 
 SIMPLE_TRIGGERS = (
@@ -354,7 +356,8 @@ def display_schema(config):
 def add_hello_world(config):
     if df.CONF_WIDGETS not in config and CONF_PAGES not in config:
         LOGGER.info("No pages or widgets configured, creating default hello_world page")
-        config[df.CONF_WIDGETS] = any_widget_schema()(get_hello_world())
+        hello_world_path = Path(__file__).parent / HELLO_WORLD_FILE
+        config[df.CONF_WIDGETS] = any_widget_schema()(load_yaml(hello_world_path))
     return config
 
 

esphome/components/lvgl/hello_world.py

@@ -1,127 +0,0 @@
-from io import StringIO
-
-from esphome.yaml_util import parse_yaml
-
-CONFIG = """
-- obj:
-    id: hello_world_card_
-    pad_all: 12
-    bg_color: white
-    height: 100%
-    width: 100%
-    scrollable: false
-    widgets:
-    - 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
-        layout:
-            type: flex
-            flex_flow: row_wrap
-            flex_align_cross: center
-            flex_align_track: center
-            flex_align_main: space_evenly
-        widgets:
-            - 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
-        on_value:
-          lvgl.label.update:
-            id: hello_world_label_
-            text:
-              format: "%.0f%%"
-              args: [x]
-"""
-
-
-def get_hello_world():
-    with StringIO(CONFIG) as fp:
-        return parse_yaml("hello_world", fp)

esphome/components/lvgl/hello_world.yaml

@@ -0,0 +1,118 @@
+# This file defines a placeholder LVGL "Hello World" that is shown when no
+# widgets are configured.
+- obj:
+    id: hello_world_card_
+    pad_all: 12
+    bg_color: white
+    height: 100%
+    width: 100%
+    scrollable: false
+    widgets:
+      - 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
+          layout:
+            type: flex
+            flex_flow: row_wrap
+            flex_align_cross: center
+            flex_align_track: center
+            flex_align_main: space_evenly
+          widgets:
+            - 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
+          on_value:
+            lvgl.label.update:
+              id: hello_world_label_
+              text:
+                format: "%.0f%%"
+                args: [x]