Upstream
/
esphome-docs
mirror of https://github.com/esphome/esphome-docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

color reference correction

This commit is contained in:
H. Árkosi Róbert 2024-05-02 14:43:25 +02:00
parent 334c35ba4e
commit 93c9074181
1 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/lvgl.rst
View File

@ -96,7 +96,7 @@ Configuration variables:
- **update_interval**: (*Optional*, :ref:`Time <config-time>`): The interval to re-draw the screen if necessarry. Defaults to ``1s``.
- **log_level** (*Optional*, enum): Set the logger level specifically for the messages of the LVGL library: ``TRACE``, ``INFO``, ``WARN``, ``ERROR``, ``USER``, ``NONE``. Defaults to ``WARN``.
- **byte_order** (*Optional*, enum): The byte order of the data outputted by lvgl, ``big_endian`` or ``little_endian``. If not specified, defaults to ``big_endian``.
- **disp_bg_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a color to fill the bacground.
- **disp_bg_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a color to fill the bacground.
- **disp_bg_image** (*Optional*, :ref:`image <display-image>`): The ID of an existing image configuration, to be used as backround wallpaper.
- **default_font** (*Optional*, enum): The ID of the :ref:`font <lvgl-fonts>` used by default to render the text or symbols. Defaults to LVGL's internal ``montserrat_14`` if not specified.
- **style_definitions** (*Optional*, list): A batch of style definitions to use with selected LVGL widgets. See :ref:`below <lvgl-theme>` for more details.
@ -251,8 +251,8 @@ The border is drawn inside the bounding box. Padding sets the space on the inner
You can adjust the appearance of widgets by changing the foreground, background and/or border color, font of each of them. Some widgets allow for more complex styling, effectively changing the appearance of their parts.
- **bg_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color for the background of the widget.
- **bg_grad_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to make the background gradually fade to.
- **bg_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color for the background of the widget.
- **bg_grad_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to make the background gradually fade to.
- **bg_dither_mode** (*Optional*, enum): Set ditherhing of the background gradient. One of ``NONE``, ``ORDERED``, ``ERR_DIFF``.
- **bg_grad_dir** (*Optional*, enum): Choose the direction of the background gradient: ``NONE``, ``HOR``, ``VER``.
- **bg_main_stop** (*Optional*, 0-255): Specify where the gradient should start: ``0`` = at left/top most position, ``128`` = in the center, ``255`` = at right/bottom most position. Defaults to ``0``.
@ -261,9 +261,9 @@ You can adjust the appearance of widgets by changing the foreground, background
- **opa** (*Optional*, enum or percentage): Opacity of the entire widget. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
- **opa_layered** (*Optional*, enum or percentage): Opacity of the entire layer the widget is on. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
- **bg_img_opa** (*Optional*, enum or percentage): Opacity of the background image of the widget. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
- **bg_img_recolor** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to mix with every pixel of the image.
- **bg_img_recolor** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to mix with every pixel of the image.
- **bg_img_recolor_opa** (*Optional*, enum or percentage): Opacity of the recoloring. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
- **border_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to draw borders of the widget.
- **border_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to draw borders of the widget.
- **border_opa** (*Optional*, enum or percentage): Opacity of the borders of the widget. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
- **border_post** (*Optional*, boolean): If ``true`` the border will be drawn after all children of the widget have been drawn.
- **border_side** (*Optional*, list): Select which borders of the widgets to show (multiple can be chosen):
@ -276,7 +276,7 @@ You can adjust the appearance of widgets by changing the foreground, background
- **border_width** (*Optional*, int16): Set the width of the border in pixels.
- **radius** (*Optional*, uint16): The radius of the rounded corners of the widget. 0 = no radius i.e. square corners; 65535 = pill shaped widget (true circle if it has same width and height).
- **clip_corner** (*Optional*, boolean): Enable to clip off the overflowed content on the rounded (``radius`` > ``0``) corners of a widget.
- **outline_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to draw an outline around the widget.
- **outline_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to draw an outline around the widget.
- **outline_opa** (*Optional*, string or percentage): Opacity of the outline. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
- **outline_pad** (*Optional*, int16): Distance between the outline and the widget itself.
- **outline_width** (*Optional*, int16): Set the width of the outline in pixels.
@ -287,7 +287,7 @@ You can adjust the appearance of widgets by changing the foreground, background
- **pad_right** (*Optional*, int16): Set the padding on the right, in pixels.
- **pad_row** (*Optional*, int16): Set the padding between the rows of the children elements, in pixels.
- **pad_column** (*Optional*, int16): Set the padding between the columns of the children elements, in pixels.
- **shadow_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to create a drop shadow under the widget.
- **shadow_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to create a drop shadow under the widget.
- **shadow_ofs_x** (*Optional*, int16): Horrizontal offset of the shadow, in pixels
- **shadow_ofs_y** (*Optional*, int16): Vertical offset of the shadow, in pixels
- **shadow_opa** (*Optional*, string or percentage): Opacity of the shadow. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
@ -358,6 +358,13 @@ In ESPHome you can also use a :ref:`font configured in the normal way<display-fo
Check out :ref:`lvgl-cook-icontext`, :ref:`lvgl-cook-iconstat` and :ref:`lvgl-cook-iconbatt` in the Cookbook for examples how to play with texts and icons using various TrueType/OpenType fonts.
.. _lvgl-color:
Colors
******
Colors can be specified anywehere in the LVGL configuartion either by referencing a preconfigured :ref:`ESPHome color <config-color>`, or directly represennting them in hexadecimal format. Eg. ``0xFF0000`` for red.
.. _lvgl-widgets:
Widgets
@ -478,7 +485,7 @@ A label is the basic widget type that is used to display text.
- **text** (**Required**, string): The text or built-in :ref:`symbol <lvgl-fonts>` to display. To display an empty label, specify ``""``.
- **text_align** (*Optional*, enum): Alignment of the text in the widget. One of ``LEFT``, ``CENTER``, ``RIGHT``, ``AUTO``
- **text_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to render the text in.
- **text_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to render the text in.
- **text_decor** (*Optional*, list): Choose decorations for the text: ``NONE``, ``UNDERLINE``, ``STRIKETHROUGH`` (multiple can be chosen)
- **text_font**: (*Optional*, :ref:`font <lvgl-fonts>`): The ID or the ID of the font used to render the text or symbol.
- **text_letter_space** (*Optional*, int16): Characher spacing of the text.
@ -1006,7 +1013,7 @@ The Arc consists of a background and a foreground arc. The foreground (indicator
- **mode** (*Optional*, string): ``NORMAL``: the indicator is drawn from the minimum value to the current. ``REVERSE``: the indicator is drawn counter-clockwise from the maximum value to the current. ``SYMMETRICAL``: the indicator is drawn from the middle point to the current value. Defaults to ``NORMAL``.
- **change_rate** (*Optional*, int8): If the arc is pressed the current value will set with a limited speed according to the set change rate. The change rate is defined in degree/second. Defaults to ``720``.
- **arc_opa** (*Optional*, enum or percentage): Opacity of the arcs. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
- **arc_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to use to draw the arcs.
- **arc_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to use to draw the arcs.
- **arc_rounded** (*Optional*, boolean): Make the end points of the arcs rounded. ``true`` rounded, ``false`` perpendicular line ending.
- **arc_width** (*Optional*, int16): Set the width of the arcs in pixels.
- **knob** (*Optional*, list): Settings for the knob *part* to control the value. Supports a list of :ref:`styles <lvgl-styling>` and state-based styles to customize. Draws a handle on the end of the indicator using all background properties and padding values. With zero padding the knob size is the same as the indicator's width. Larger padding makes it larger, smaller padding makes it smaller.
@ -1161,12 +1168,12 @@ The Meter widget can visualize data in very flexible ways. In can show arcs, nee
- **count** (**Required**): How many ticks to be on the scale. Defaults to ``12``.
- **width** (*Optional*): Tick line width in pixels. Required if ``count`` is greater than ``0``. Defaults to ``2``.
- **length** (*Optional*): Tick line length in pixels. Required if ``count`` is greater than ``0``. Defaults to ``10``.
- **color** (*Optional*): ID or hex code for the ticks :ref:`color <config-color>`. Required if ``count`` is greater than ``0``. Defaults to ``0x808080``.
- **color** (*Optional*): ID or hex code for the ticks :ref:`color <lvgl-color>`. Required if ``count`` is greater than ``0``. Defaults to ``0x808080``.
- **major** (*Optional*, list): If you want major ticks and value labels displayed:
- **stride**: How many minor ticks to skip when adding major ticks. Defaults to ``3``.
- **width**: Tick line width in pixels. Defaults to ``5``.
- **length**: Tick line length in pixels or percentage. Defaults to ``15%``.
- **color**: ID or hex code for the ticks :ref:`color <config-color>`. Defaults to ``0``.
- **color**: ID or hex code for the ticks :ref:`color <lvgl-color>`. Defaults to ``0``.
- **label_gap**: Label distance from the ticks with text proportionally to the values of the tick line. Defaults to ``4``.
- Style options from :ref:`lvgl-styling` for the tick *lines* and *labels* using the :ref:`lvgl-wgt-lin` and :ref:`lvgl-wgt-lbl` text style properties.
- **indicators** (**Required**, list): A list with indicators to be added to the scale. Multiple of each can be added. Their values are interpreted in the range of the scale:
@ -1174,20 +1181,20 @@ The Meter widget can visualize data in very flexible ways. In can show arcs, nee
- **start_value**: The value in the scale range to start drawing the arc from.
- **end_value**: The value in the scale range to end drawing the arc to.
- **width**: Arc width in pixels. Defaults to ``4``.
- **color**: ID or hex code for the arc :ref:`color <config-color>`. Defaults to ``0``.
- **color**: ID or hex code for the arc :ref:`color <lvgl-color>`. Defaults to ``0``.
- **r_mod**: Adjust the position of the arc from the scale radius with this amount (can be negative). Defaults to ``0``.
- Style options for the *arc* using the :ref:`lvgl-wgt-arc` style properties.
- **tick_style** (**Optional**): Add tick style modifications:
- **start_value**: The value in the scale range to modify the ticks from.
- **end_value**: The value in the scale range to modify the ticks to.
- **color_start**: ID or hex code for the gradient start :ref:`color <config-color>` of the ticks.
- **color_end**: ID or hex code for the gradient end :ref:`color <config-color>` of the ticks.
- **color_start**: ID or hex code for the gradient start :ref:`color <lvgl-color>` of the ticks.
- **color_end**: ID or hex code for the gradient end :ref:`color <lvgl-color>` of the ticks.
- **local**: If ``true`` the ticks' color will be faded from ``color_start`` to ``color_end`` in the start and end values specified above. If ``false``, ``color_start`` and ``color_end`` will be mapped to the entire scale range (and only a *slice* of that color gradient will be visible in the indicator's start and end value range). Defaults to ``false``.
- **width**: Modifies the ``width`` of the tick lines.
- **line** (*Optional*): Add a needle line to the scale. By default, the length of the line is the same as the scale's radius:
- **id**: Manually specify the :ref:`config-id` used for updating the indicator value at runtime.
- **width**: Needle line width in pixels. Defaults to ``4``.
- **color**: ID or hex code for the needle line :ref:`color <config-color>`. Defaults to ``0``.
- **color**: ID or hex code for the needle line :ref:`color <lvgl-color>`. Defaults to ``0``.
- **r_mod**: Adjust the length of the needle from the scale radius with this amount (can be negative). Defaults to ``0``.
- **value**: The value in the scale range to show at start.
- Style options for the *needle line* using the :ref:`lvgl-wgt-lin` style properties, as well as the background properties from :ref:`lvgl-styling` to draw a square (or circle) on the pivot of the needles. Padding makes the square larger.
@ -1353,7 +1360,7 @@ The Line widget is capable of drawing straight lines between a set of points.
- **line_dash_width** (*Optional*, int16): Set the width of the dashes in the line (in pixels).
- **line_dash_gap** (*Optional*, int16): Set the width of the gap between the dashes in the line (in pixels).
- **line_rounded** (*Optional*, boolean): Make the end points of the line rounded. ``true`` rounded, ``false`` perpendicular line ending.
- **line_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color for the line.
- **line_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color for the line.
- Style options from :ref:`lvgl-styling`, all the typical background properties and line style properties.
By default, the Line widget width and height dimensions are set to ``size_content``. This means it will automatically set its size to fit all the points. If the size is set explicitly, parts of the line may not be visible.
@ -1387,7 +1394,7 @@ The Led widgets are rectangle-like (or circle) widget whose brightness can be ad
**Specific options:**
- **color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color for the background, border, and shadow of the widget.
- **color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color for the background, border, and shadow of the widget.
- **brightness** (*Optional*, percentage): The brightness of the LED color, where ``0%`` corresponds to black, and ``100%`` corresponds to the full brightness of the color specified above.
- Style options from :ref:`lvgl-styling`, using all the typical background style properties.
@ -1436,7 +1443,7 @@ The Spinner widget is a spinning arc over a ring.
- **spin_time** (**Required**, :ref:`Time <config-time>`): Duration of one cycle of the spin.
- **arc_length** (**Required**, 0-360): Length of the spinning arc in degrees.
- **arc_opa** (*Optional*, enum or percentage): Opacity of the arcs. ``TRANSP`` for fully transparent, ``COVER`` for fully opaque, or an integer between ``0%`` and ``100%`` for percentage.
- **arc_color** (*Optional*, :ref:`color <config-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to use to draw the arcs.
- **arc_color** (*Optional*, :ref:`color <lvgl-color>`): The ID of a configured color, or a hexadecimal representation of a RGB color to use to draw the arcs.
- **arc_rounded** (*Optional*, boolean): Make the end points of the arcs rounded. ``true`` rounded, ``false`` perpendicular line ending.
- **arc_width** (*Optional*, int16): Set the width of the arcs in pixels.
- **indicator** (*Optional*, list): Settings for the indicator *part* to show the value. Supports a list of :ref:`styles <lvgl-styling>` and state-based styles to customize. Draws *another arc using the arc style* properties. Its padding values are interpreted relative to the background arc.