[lvgl] Some properties were not templatable (Bugfix) (#7655)

esphome/components/lvgl/lv_validation.py

@@ -267,6 +267,9 @@ def angle(value):
     return int(cv.float_range(0.0, 360.0)(cv.angle(value)) * 10)
 
 
+lv_angle = LValidator(angle, uint32)
+
+
 @schema_extractor("one_of")
 def size_validator(value):
     """A size in one axis - one of "size_content", a number (pixels) or a percentage"""
@@ -403,6 +406,7 @@ class TextValidator(LValidator):
 lv_text = TextValidator()
 lv_float = LValidator(cv.float_, cg.float_)
 lv_int = LValidator(cv.int_, cg.int_)
+lv_positive_int = LValidator(cv.positive_int, cg.int_)
 lv_brightness = LValidator(cv.percentage, cg.float_, retmapper=lambda x: int(x * 255))
 
 

esphome/components/lvgl/schemas.py

@@ -91,7 +91,7 @@ STYLE_PROPS = {
     "arc_opa": lvalid.opacity,
     "arc_color": lvalid.lv_color,
     "arc_rounded": lvalid.lv_bool,
-    "arc_width": cv.positive_int,
+    "arc_width": lvalid.lv_positive_int,
     "anim_time": lvalid.lv_milliseconds,
     "bg_color": lvalid.lv_color,
     "bg_grad": lv_gradient,
@@ -111,7 +111,7 @@ STYLE_PROPS = {
     "border_side": df.LvConstant(
         "LV_BORDER_SIDE_", "NONE", "TOP", "BOTTOM", "LEFT", "RIGHT", "INTERNAL"
     ).several_of,
-    "border_width": cv.positive_int,
+    "border_width": lvalid.lv_positive_int,
     "clip_corner": lvalid.lv_bool,
     "color_filter_opa": lvalid.opacity,
     "height": lvalid.size,
@@ -134,11 +134,11 @@ STYLE_PROPS = {
     "pad_right": lvalid.pixels,
     "pad_top": lvalid.pixels,
     "shadow_color": lvalid.lv_color,
-    "shadow_ofs_x": cv.int_,
+    "shadow_ofs_x": lvalid.lv_int,
-    "shadow_ofs_y": cv.int_,
+    "shadow_ofs_y": lvalid.lv_int,
     "shadow_opa": lvalid.opacity,
-    "shadow_spread": cv.int_,
+    "shadow_spread": lvalid.lv_int,
-    "shadow_width": cv.positive_int,
+    "shadow_width": lvalid.lv_positive_int,
     "text_align": df.LvConstant(
         "LV_TEXT_ALIGN_", "LEFT", "CENTER", "RIGHT", "AUTO"
     ).one_of,
@@ -150,7 +150,7 @@ STYLE_PROPS = {
     "text_letter_space": cv.positive_int,
     "text_line_space": cv.positive_int,
     "text_opa": lvalid.opacity,
-    "transform_angle": lvalid.angle,
+    "transform_angle": lvalid.lv_angle,
     "transform_height": lvalid.pixels_or_percent,
     "transform_pivot_x": lvalid.pixels_or_percent,
     "transform_pivot_y": lvalid.pixels_or_percent,

tests/components/lvgl/lvgl-package.yaml

@@ -299,6 +299,13 @@ lvgl:
             id: button_button
             width: 20%
             height: 10%
+            transform_angle: !lambda return 180*100;
+            arc_width: !lambda return 4;
+            border_width: !lambda return 6;
+            shadow_ofs_x: !lambda return 6;
+            shadow_ofs_y: !lambda return 6;
+            shadow_spread: !lambda return 6;
+            shadow_width: !lambda return 6;
             pressed:
               bg_color: light_blue
             checkable: true