[lvgl] Enhancements (#7453)

esphome/components/lvgl/__init__.py

@@ -22,9 +22,10 @@ from esphome.helpers import write_file_if_changed
 
 from . import defines as df, helpers, lv_validation as lvalid
 from .automation import disp_update, focused_widgets, update_to_code
-from .defines import add_define
+from .defines import CONF_WIDGETS, add_define
 from .encoders import ENCODERS_CONFIG, encoders_to_code, initial_focus_to_code
 from .gradient import GRADIENT_SCHEMA, gradients_to_code
+from .hello_world import get_hello_world
 from .lv_validation import lv_bool, lv_images_used
 from .lvcode import LvContext, LvglComponent
 from .schemas import (
@@ -32,7 +33,7 @@ from .schemas import (
     FLEX_OBJ_SCHEMA,
     GRID_CELL_SCHEMA,
     LAYOUT_SCHEMAS,
-    STYLE_SCHEMA,
+    STATE_SCHEMA,
     WIDGET_TYPES,
     any_widget_schema,
     container_schema,
@@ -292,6 +293,13 @@ def display_schema(config):
     return value or [cv.use_id(Display)(config)]
 
 
+def add_hello_world(config):
+    if CONF_WIDGETS not in config and CONF_PAGES not in config:
+        LOGGER.info("No pages or widgets configured, creating default hello_world page")
+        config[CONF_WIDGETS] = cv.ensure_list(WIDGET_SCHEMA)(get_hello_world())
+    return config
+
+
 FINAL_VALIDATE_SCHEMA = final_validation
 
 CONFIG_SCHEMA = (
@@ -313,7 +321,7 @@ CONFIG_SCHEMA = (
             ),
             cv.Optional(df.CONF_STYLE_DEFINITIONS): cv.ensure_list(
                 cv.Schema({cv.Required(CONF_ID): cv.declare_id(lv_style_t)})
-                .extend(STYLE_SCHEMA)
+                .extend(STATE_SCHEMA)
                 .extend(
                     {
                         cv.Optional(df.CONF_GRID_CELL_X_ALIGN): grid_alignments,
@@ -349,4 +357,5 @@ CONFIG_SCHEMA = (
         }
     )
     .extend(DISP_BG_SCHEMA)
-).add_extra(cv.has_at_least_one_key(CONF_PAGES, df.CONF_WIDGETS))
+    .add_extra(add_hello_world)
+)

esphome/components/lvgl/hello_world.py

@@ -0,0 +1,64 @@
+from io import StringIO
+
+from esphome.yaml_util import parse_yaml
+
+CONFIG = """
+- obj:
+    radius: 0
+    pad_all: 12
+    bg_color: 0xFFFFFF
+    height: 100%
+    width: 100%
+    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!"
+        align: center
+        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!"
+        widgets:
+          - label:
+              text: "Button"
+    - 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/lv_validation.py

@@ -49,17 +49,172 @@ def opacity_validator(value):
 
 opacity = LValidator(opacity_validator, uint32, retmapper=literal)
 
+COLOR_NAMES = {
+    "aliceblue": 0xF0F8FF,
+    "antiquewhite": 0xFAEBD7,
+    "aqua": 0x00FFFF,
+    "aquamarine": 0x7FFFD4,
+    "azure": 0xF0FFFF,
+    "beige": 0xF5F5DC,
+    "bisque": 0xFFE4C4,
+    "black": 0x000000,
+    "blanchedalmond": 0xFFEBCD,
+    "blue": 0x0000FF,
+    "blueviolet": 0x8A2BE2,
+    "brown": 0xA52A2A,
+    "burlywood": 0xDEB887,
+    "cadetblue": 0x5F9EA0,
+    "chartreuse": 0x7FFF00,
+    "chocolate": 0xD2691E,
+    "coral": 0xFF7F50,
+    "cornflowerblue": 0x6495ED,
+    "cornsilk": 0xFFF8DC,
+    "crimson": 0xDC143C,
+    "cyan": 0x00FFFF,
+    "darkblue": 0x00008B,
+    "darkcyan": 0x008B8B,
+    "darkgoldenrod": 0xB8860B,
+    "darkgray": 0xA9A9A9,
+    "darkgreen": 0x006400,
+    "darkgrey": 0xA9A9A9,
+    "darkkhaki": 0xBDB76B,
+    "darkmagenta": 0x8B008B,
+    "darkolivegreen": 0x556B2F,
+    "darkorange": 0xFF8C00,
+    "darkorchid": 0x9932CC,
+    "darkred": 0x8B0000,
+    "darksalmon": 0xE9967A,
+    "darkseagreen": 0x8FBC8F,
+    "darkslateblue": 0x483D8B,
+    "darkslategray": 0x2F4F4F,
+    "darkslategrey": 0x2F4F4F,
+    "darkturquoise": 0x00CED1,
+    "darkviolet": 0x9400D3,
+    "deeppink": 0xFF1493,
+    "deepskyblue": 0x00BFFF,
+    "dimgray": 0x696969,
+    "dimgrey": 0x696969,
+    "dodgerblue": 0x1E90FF,
+    "firebrick": 0xB22222,
+    "floralwhite": 0xFFFAF0,
+    "forestgreen": 0x228B22,
+    "fuchsia": 0xFF00FF,
+    "gainsboro": 0xDCDCDC,
+    "ghostwhite": 0xF8F8FF,
+    "goldenrod": 0xDAA520,
+    "gold": 0xFFD700,
+    "gray": 0x808080,
+    "green": 0x008000,
+    "greenyellow": 0xADFF2F,
+    "grey": 0x808080,
+    "honeydew": 0xF0FFF0,
+    "hotpink": 0xFF69B4,
+    "indianred": 0xCD5C5C,
+    "indigo": 0x4B0082,
+    "ivory": 0xFFFFF0,
+    "khaki": 0xF0E68C,
+    "lavenderblush": 0xFFF0F5,
+    "lavender": 0xE6E6FA,
+    "lawngreen": 0x7CFC00,
+    "lemonchiffon": 0xFFFACD,
+    "lightblue": 0xADD8E6,
+    "lightcoral": 0xF08080,
+    "lightcyan": 0xE0FFFF,
+    "lightgoldenrodyellow": 0xFAFAD2,
+    "lightgray": 0xD3D3D3,
+    "lightgreen": 0x90EE90,
+    "lightgrey": 0xD3D3D3,
+    "lightpink": 0xFFB6C1,
+    "lightsalmon": 0xFFA07A,
+    "lightseagreen": 0x20B2AA,
+    "lightskyblue": 0x87CEFA,
+    "lightslategray": 0x778899,
+    "lightslategrey": 0x778899,
+    "lightsteelblue": 0xB0C4DE,
+    "lightyellow": 0xFFFFE0,
+    "lime": 0x00FF00,
+    "limegreen": 0x32CD32,
+    "linen": 0xFAF0E6,
+    "magenta": 0xFF00FF,
+    "maroon": 0x800000,
+    "mediumaquamarine": 0x66CDAA,
+    "mediumblue": 0x0000CD,
+    "mediumorchid": 0xBA55D3,
+    "mediumpurple": 0x9370DB,
+    "mediumseagreen": 0x3CB371,
+    "mediumslateblue": 0x7B68EE,
+    "mediumspringgreen": 0x00FA9A,
+    "mediumturquoise": 0x48D1CC,
+    "mediumvioletred": 0xC71585,
+    "midnightblue": 0x191970,
+    "mintcream": 0xF5FFFA,
+    "mistyrose": 0xFFE4E1,
+    "moccasin": 0xFFE4B5,
+    "navajowhite": 0xFFDEAD,
+    "navy": 0x000080,
+    "oldlace": 0xFDF5E6,
+    "olive": 0x808000,
+    "olivedrab": 0x6B8E23,
+    "orange": 0xFFA500,
+    "orangered": 0xFF4500,
+    "orchid": 0xDA70D6,
+    "palegoldenrod": 0xEEE8AA,
+    "palegreen": 0x98FB98,
+    "paleturquoise": 0xAFEEEE,
+    "palevioletred": 0xDB7093,
+    "papayawhip": 0xFFEFD5,
+    "peachpuff": 0xFFDAB9,
+    "peru": 0xCD853F,
+    "pink": 0xFFC0CB,
+    "plum": 0xDDA0DD,
+    "powderblue": 0xB0E0E6,
+    "purple": 0x800080,
+    "rebeccapurple": 0x663399,
+    "red": 0xFF0000,
+    "rosybrown": 0xBC8F8F,
+    "royalblue": 0x4169E1,
+    "saddlebrown": 0x8B4513,
+    "salmon": 0xFA8072,
+    "sandybrown": 0xF4A460,
+    "seagreen": 0x2E8B57,
+    "seashell": 0xFFF5EE,
+    "sienna": 0xA0522D,
+    "silver": 0xC0C0C0,
+    "skyblue": 0x87CEEB,
+    "slateblue": 0x6A5ACD,
+    "slategray": 0x708090,
+    "slategrey": 0x708090,
+    "snow": 0xFFFAFA,
+    "springgreen": 0x00FF7F,
+    "steelblue": 0x4682B4,
+    "tan": 0xD2B48C,
+    "teal": 0x008080,
+    "thistle": 0xD8BFD8,
+    "tomato": 0xFF6347,
+    "turquoise": 0x40E0D0,
+    "violet": 0xEE82EE,
+    "wheat": 0xF5DEB3,
+    "white": 0xFFFFFF,
+    "whitesmoke": 0xF5F5F5,
+    "yellow": 0xFFFF00,
+    "yellowgreen": 0x9ACD32,
+}
+
 
 @schema_extractor("one_of")
 def color(value):
     if value == SCHEMA_EXTRACT:
         return ["hex color value", "color ID"]
-    return cv.Any(cv.int_, cv.use_id(ColorStruct))(value)
+    return cv.Any(cv.int_, cv.one_of(*COLOR_NAMES, lower=True), cv.use_id(ColorStruct))(
+        value
+    )
 
 
 def color_retmapper(value):
     if isinstance(value, cv.Lambda):
         return cv.returning_lambda(value)
+    if isinstance(value, str) and value in COLOR_NAMES:
+        value = COLOR_NAMES[value]
     if isinstance(value, int):
         return literal(
             f"lv_color_make({(value >> 16) & 0xFF}, {(value >> 8) & 0xFF}, {value & 0xFF})"

tests/components/lvgl/lvgl-package.yaml

@@ -38,8 +38,8 @@ lvgl:
       border_width: 0
       radius: 0
       pad_all: 0
-      border_color: 0x0077b3
-      text_color: 0xFFFFFF
+      border_color: tomato
+      text_color: springgreen
       width: 100%
       height: 30
       border_side: [left, top]

tests/components/lvgl/test.host.yaml

@@ -0,0 +1,11 @@
+display:
+  - platform: sdl
+    auto_clear_enabled: false
+    dimensions:
+      width: 480
+      height: 480
+
+touchscreen:
+  - platform: sdl
+
+lvgl: