You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/lvgl/widgets.rst
+141
Original file line number
Diff line number
Diff line change
@@ -607,6 +607,146 @@ The button matrix widget is a lightweight way to display multiple buttons in row
607
607
608
608
The Button Matrix widget supports the :ref:`key_collector` to collect the button presses as key press sequences for further automations. Check out :ref:`lvgl-cookbook-keypad` for an example.
609
609
610
+
``canvas``
611
+
-------------
612
+
613
+
The canvas widget provides a surface for custom drawing operations. It allows you to draw shapes, text, images and perform pixel-level manipulations.
614
+
All options are templatable.
615
+
Where a list of points is required, this can be provided in the form of a list of dictionaries, each with templatable ``x`` and ``y`` keys, or as a shorthand ``x,y`` pair (constant integers only.)
616
+
617
+
.. figure:: /components/lvgl/images/canvas.png
618
+
:align:center
619
+
620
+
**Configuration variables:**
621
+
622
+
- **width** (**Required**, int): Width of the canvas in pixels.
623
+
- **height** (**Required**, int): Height of the canvas in pixels.
- **id** (**Required**): The ID of the canvas widget.
666
+
- **points** (**Required**, list): List of points forming the polygon vertices.
667
+
- Other options as for ``lvgl.canvas.draw_rectangle``.
668
+
669
+
- ``lvgl.canvas.draw_text`` draws text:
670
+
- **id** (**Required**): The ID of the canvas widget.
671
+
- **x** (**Required**, int): X coordinate.
672
+
- **y** (**Required**, int): Y coordinate.
673
+
- **text** (**Required**, string): Text to draw.
674
+
- **max_width** (**Required**, int): Max width in pixels.
675
+
- **align** (*Optional*, enum): Alignment of the text relative to ``x`` and ``max_width``. One of ``LEFT``, ``CENTER``, ``RIGHT``, ``AUTO``.
676
+
- **color** (*Optional*, :ref:`color <lvgl-color>`): Text color.
677
+
- **opa** (*Optional*, :ref:`opacity <lvgl-opacity>`): Text opacity. Defaults to ``COVER``.
678
+
- **font** (*Optional*, string): Font to use.
679
+
- **decor** (*Optional*, list): Choose decorations for the text: ``NONE``, ``UNDERLINE``, ``STRIKETHROUGH`` (multiple can be specified as YAML list). Defaults to ``NONE``.
680
+
- **letter_space** (*Optional*, int16): Extra character spacing of the text. Defaults to ``0``.
681
+
- **line_space** (*Optional*, int16): Line spacing of the text. Defaults to ``0``.
682
+
683
+
- ``lvgl.canvas.draw_line`` draws a line:
684
+
- **id** (**Required**): The ID of the canvas widget.
685
+
- **points** (**Required**, list): List of points forming the line, each with:
686
+
- **x** (**Required**, int): X coordinate.
687
+
- **y** (**Required**, int): Y coordinate.
688
+
- **color** (*Optional*, :ref:`color <lvgl-color>`): Line color.
689
+
- **width** (*Optional*, int): Line width.
690
+
- **opa** (*Optional*, :ref:`opacity <lvgl-opacity>`): Line opacity. Defaults to ``COVER``.
691
+
- **round_start** (*Optional*, boolean): Round the start of the line. Defaults to ``false``.
692
+
- **round_end** (*Optional*, boolean): Round the end of the line. Defaults to ``false``.
693
+
694
+
- ``lvgl.canvas.draw_arc`` draws an arc:
695
+
- **id** (**Required**): The ID of the canvas widget.
- **pivot_x** (*Optional*, int): X pivot point for rotation.
714
+
- **pivot_y** (*Optional*, int): Y pivot point for rotation.
715
+
716
+
.. code-block:: yaml
717
+
718
+
# Example widget:
719
+
- canvas:
720
+
id: my_canvas
721
+
width: 240
722
+
height: 240
723
+
transparent: false
724
+
725
+
# Example drawing actions, executed at startup:
726
+
on_boot:
727
+
then:
728
+
# Fill canvas with white
729
+
- lvgl.canvas.fill:
730
+
id: my_canvas
731
+
color: white
732
+
# Draw a blue rectangle
733
+
- lvgl.canvas.draw_rectangle:
734
+
id: my_canvas
735
+
x: 10
736
+
y: 10
737
+
width: 100
738
+
height: 50
739
+
bg_color: blue
740
+
# Draw some red text
741
+
- lvgl.canvas.draw_text:
742
+
id: my_canvas
743
+
x: 20
744
+
y: 20
745
+
text: "Hello World"
746
+
max_width: 100
747
+
color: red
748
+
749
+
610
750
.. _lvgl-widget-checkbox:
611
751
612
752
``checkbox``
@@ -1444,6 +1584,7 @@ The ``slider`` can be also integrated as :doc:`Number </components/number/lvgl>`
1444
1584
1445
1585
See :ref:`lvgl-cookbook-bright` and :ref:`lvgl-cookbook-volume` for examples which demonstrate how to use a slider to control entities in Home Assistant.
0 commit comments