Update lvgl.rst

components/lvgl.rst

@@ -11,7 +11,7 @@ LVGL
 embedded graphics library to create beautiful UIs for any MCU, MPU and display type. ESPHome supports
 `LVGL version 8.3.9 <https://docs.lvgl.io/8.3/>`__.
 
-.. figure:: ../images/logo_lvgl.png
+.. figure:: /images/logo_lvgl.png
     :align: center
 
 
@@ -59,36 +59,36 @@ Configuration variables:
 - **log_level** (*Optional*): Set the logger level specifically for the messages of the lvgl component.
 - **color_depth** (**Required**, int8): The color deph at which the contents are generated. Valid values are 1 (monochrome), 8, 16 or 32.
 - **bg_color** (*Optional*, :ref:`color <config-color>`): A basic background color, to draw contents on.
-- **text_font** (**Required**, :ref:`font <display-fonts>`): The ID of the font used to render textual contents by default on all _lvgl_ widget.
-- **touchscreens** (*Optional*, list): IDs of touchscreens interacting with the _lvgl_ widget on the screen.
-- **style_definitions** (*Optional*, list): A list of style definitions to use with _lvgl_ widget:
-  - **id** (*Optional*, :ref:`config-id`): Set the ID of this style definition.
-  - **line_color** (*Optional*, :ref:`color <config-color>`): The ID of a color you want to use for lines. If not specified, defaults to ???
-  - **line_width** (*Optional*, int16): The desired width of the line, in pixels. Defaults to ???
-  - **line_rounded** (*Optional*, boolean): Draw the end of the lines rounded. Defaults to ???
-  - **text_font** (*Optional*, :ref:`font <display-fonts>`):  The ID of the font used to override the render of textual contents on _lvgl_ widget using this style. 
-  - **align** (*Optional*): The alignment of the text within the object. Possible values: ``left``, ``center``, ``right``. Defaults to ``center``.
-  - **text_color** (*Optional*, :ref:`color <config-color>`): The ID of a color for text rendering.
-  - **bg_opa**(*Optional*): The opacity of the background of the widget. ???
-  - **radius** (*Optional*, uint16): The radius of the rounded corners of the object. 0 = no radius i.e. square corners; 65535 = pill shaped object (true circle if object has same width and height)
-  - **pad_all** (*Optional*, int16): Paddigng of all the edges of the widget. Default based on widget type.
+- **text_font** (**Required**, :ref:`font <display-fonts>`): The ID of the font used to render textual contents by default on all *lvgl* widget.
+- **touchscreens** (*Optional*, list): IDs of touchscreens interacting with the *lvgl* widget on the screen.
+- **style_definitions** (*Optional*, list): A list of style definitions to use with *lvgl* widget:
+    - **id** (*Optional*, :ref:`config-id`): Set the ID of this style definition.
+    - **line_color** (*Optional*, :ref:`color <config-color>`): The ID of a color you want to use for lines. If not specified, defaults to ???
+    - **line_width** (*Optional*, int16): The desired width of the line, in pixels. Defaults to ???
+    - **line_rounded** (*Optional*, boolean): Draw the end of the lines rounded. Defaults to ???
+    - **text_font** (*Optional*, :ref:`font <display-fonts>`):  The ID of the font used to override the render of textual contents on *lvgl* widget using this style. 
+    - **align** (*Optional*): The alignment of the text within the object. Possible values: ``left``, ``center``, ``right``. Defaults to ``center``.
+    - **text_color** (*Optional*, :ref:`color <config-color>`): The ID of a color for text rendering.
+    - **bg_opa**(*Optional*): The opacity of the background of the widget. ???
+    - **radius** (*Optional*, uint16): The radius of the rounded corners of the object. 0 = no radius i.e. square corners; 65535 = pill shaped object (true circle if object has same width and height)
+    - **pad_all** (*Optional*, int16): Paddigng of all the edges of the widget. Default based on widget type.
 - **layout** (*Optional*): ???
-- **width** (*Optional*, percentage): Percentage of the screen width used by _lvgl_.
-- **height** (*Optional*, percentage): Percentage of the screen height used by _lvgl_.
-- **widgets** (*Optional*, list): A list of _lvgl_ widgets to be drawn on the screen.
-  - :ref:`Widgets <lvgl-widgets>` (**Required**): ``btn``, ``img``, ???
-  - **widgets** (*Optional*, list): A list of _lvgl_ widgets to be drawn as children of this widget. Configuration options are is the same as the parent widgets, and values aren inherited.
-  - **id** (*Optional*, :ref:`config-id`): Set the ID of this widget.
-  - **x** (**Required**, int16): Horizontal position of the widget (anchored in the top left corner). Can be a negative value, and it's relative to the screen.
-  - **y** (**Required**, int16): Vertical position of the widget (anchored in the top left corner). Can be a negative value, and it's relative to the screen.
-  - **w** (**Required**, int16): Width of the widget (anchored in the top left corner). 
-  - **h** (**Required**, int16): Height of the widget (anchored in the top left corner). 
-  - **enabled** (*Optional*, boolean): Widget is touchable, if ``false``, a _disabled_ style is applied. Defaults to ``true``.
-  - **hidden** (*Optional*, boolean): Widget is hidden. Defaults to ``false``.
-  - **opacity** (*Optional*, uint8): How much the the widget is opaque (0-255).
-  - **click** (*Optional*, boolean): Widget is touch/clickable (also see ``enabled``). Defaults to ``true``.
-  - **ext_click_h** (*Optional*, uint8): Extended horizontal clickable area on the left and right. Defaults to ``0``.
-  - **ext_click_v** (*Optional*, uint8): Extended vertical clickable area on the top and bottom. Defaults to ``0``.
+- **width** (*Optional*, percentage): Percentage of the screen width used by *lvgl*.
+- **height** (*Optional*, percentage): Percentage of the screen height used by *lvgl*.
+- **widgets** (*Optional*, list): A list of *lvgl* widgets to be drawn on the screen.
+    - :ref:`Widgets <lvgl-widgets>` (**Required**): ``btn``, ``img``, ???
+    - **widgets** (*Optional*, list): A list of *lvgl* widgets to be drawn as children of this widget. Configuration options are is the same as the parent widgets, and values aren inherited.
+    - **id** (*Optional*, :ref:`config-id`): Set the ID of this widget.
+    - **x** (**Required**, int16): Horizontal position of the widget (anchored in the top left corner). Can be a negative value, and it's relative to the screen.
+    - **y** (**Required**, int16): Vertical position of the widget (anchored in the top left corner). Can be a negative value, and it's relative to the screen.
+    - **w** (**Required**, int16): Width of the widget (anchored in the top left corner). 
+    - **h** (**Required**, int16): Height of the widget (anchored in the top left corner). 
+    - **enabled** (*Optional*, boolean): Widget is touchable, if ``false``, a _disabled_ style is applied. Defaults to ``true``.
+    - **hidden** (*Optional*, boolean): Widget is hidden. Defaults to ``false``.
+    - **opacity** (*Optional*, uint8): How much the the widget is opaque (0-255).
+    - **click** (*Optional*, boolean): Widget is touch/clickable (also see ``enabled``). Defaults to ``true``.
+    - **ext_click_h** (*Optional*, uint8): Extended horizontal clickable area on the left and right. Defaults to ``0``.
+    - **ext_click_v** (*Optional*, uint8): Extended vertical clickable area on the top and bottom. Defaults to ``0``.
 
 
 .. note::
@@ -165,7 +165,7 @@ The Base Object can be directly used as a simple, empty widget. It is nothing mo
 
   - **options** (*Optional*, string): List of items separated by ``\n``. Defaults to "" (empty).
   - **text** (*Optional*, string): *Read-only* The text of the selected item. Defaults to "" (empty).
-  - **direction** (*Optional*, 0-3): Direction where the dropdown expands: ``0`` = down, ``1`` = up, ``2`` = left, ``3`` = right. _Note:_ up and down are superseeded by the screen size.
+  - **direction** (*Optional*, 0-3): Direction where the dropdown expands: ``0`` = down, ``1`` = up, ``2`` = left, ``3`` = right. *Note:* up and down are superseeded by the screen size.
   - **show_selected** (*Optional*, boolean): Show the selected option or a static text. Defaults to ``true``
   - **max_height** (*Optional*, int16): The maximum height of the open drop-down list. Defaults to 3/4 of screen height
 
@@ -203,12 +203,13 @@ The Base Object can be directly used as a simple, empty widget. It is nothing mo
 
   .. note::
 
-      To strip trailing zero's of major tick labels the `format` divider can be used to scale the values before printing:
-      - `0` : print the major tick value as is
-      - `1` : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label
-      - `2` : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label
-      - `3` : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label
-      - `4` : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label
+      To strip trailing zero's of major tick labels the ``format`` divider can be used to scale the values before printing:
+
+        - ``0`` : print the major tick value as is
+        - ``1`` : strip 1 zero, i.e. divide tick value by 10 before printing the major tick label
+        - ``2`` : strip 2 zeros, i.e. divide tick value by 100 before printing the major tick label
+        - ``3`` : strip 3 zeros, i.e. divide tick value by 1000 before printing the major tick label
+        - ``4`` : strip 4 zeros, i.e. divide tick value by 10000 before printing the major tick label
 
       Only these values are allowed, arbitrary numbers are not supported.
 
@@ -220,15 +221,14 @@ Data types
 
 LVLG supports numeric properties only as integer values with variable minimums and maximums. Certain object properties also support negative values.
 
-- _int8_ (signed) supports values ranging from -128 to 127.
-- _uint8_ (unsigned) supports values ranging from 0 to 255.
-- _int16_ (signed) supports values ranging from -32768 to 32767.   
-- _uint16_ (unsigned) supports values ranging from 0 to 65535.
+- ``int8`` (signed) supports values ranging from -128 to 127.
+- ``uint8`` (unsigned) supports values ranging from 0 to 255.
+- ``int16`` (signed) supports values ranging from -32768 to 32767.   
+- ``uint16`` (unsigned) supports values ranging from 0 to 65535.
 
 
 See Also
 --------
 
-- :doc:`/components/key_collector`
 - `LVGL 8.3 docs <https://docs.lvgl.io/8.3/>`__
 - :ghedit:`Edit`