Upstream/esphome-docs
1
0
Fork 0
mirror of https://github.com/esphome/esphome-docs.git synced 2024-12-25 17:17:54 +01:00
Code Issues Projects Releases Wiki Activity

Add mdi image documentation (#2837)

Browse Source
This commit is contained in:
guillempages 2023-06-06 23:32:24 +02:00 committed by GitHub
parent 18f738b945
commit 52bff79366
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/display/index.rst
View File

@ -660,14 +660,24 @@ Use this component to store graphical images on the device, you can then draw th
id: my_image id: my_image
resize: 100x100 resize: 100x100
.. code-block:: yaml
image:
- file: mdi:alert-outline
id: alert
resize: 80x80
Configuration variables: Configuration variables:
- **file** (**Required**, string): The path (relative to where the .yaml file is) of the image file. - **file** (**Required**, string):
- **Local files**: The path (relative to where the .yaml file is) of the image file.
- **Material Design Icons**: Specify the `Material Design Icon <https://pictogrammers.com/library/mdi/>`_ id in the format ``mdi:icon-name``, and that icon will automatically be downloaded and added to the configuration.
- **id** (**Required**, :ref:`config-id`): The ID with which you will be able to reference the image later - **id** (**Required**, :ref:`config-id`): The ID with which you will be able to reference the image later
in your display code. in your display code.
- **resize** (*Optional*, string): If set, this will resize the image to fit inside the given dimensions ``WIDTHxHEIGHT`` - **resize** (*Optional*, string): If set, this will resize the image to fit inside the given dimensions ``WIDTHxHEIGHT``
and preserve the aspect ratio. and preserve the aspect ratio.
- **type** (*Optional*): Specifies how to encode image internally. Defaults to ``BINARY``. - **type** (*Optional*): Specifies how to encode image internally. Defaults to ``BINARY`` for local images and ``TRANSPARENT_BINARY`` for MDIs.
- ``BINARY``: Two colors, suitable for 1 color displays or 2 color image in color displays. Uses 1 bit - ``BINARY``: Two colors, suitable for 1 color displays or 2 color image in color displays. Uses 1 bit
per pixel, 8 pixels per byte. per pixel, 8 pixels per byte.
@ -691,6 +701,12 @@ Configuration variables:
If you're running this as a Home Assistant add-on or with the official ESPHome docker image, it should already be If you're running this as a Home Assistant add-on or with the official ESPHome docker image, it should already be
installed. Otherwise you need to install it using ``pip install pillow``. installed. Otherwise you need to install it using ``pip install pillow``.
.. note::
To use mdi images you will additionally need to have the python ``cairosvg`` package installed.
If you're running this as a Home Assistant add-on or with the official ESPHome docker image, it should already be
installed. Otherwise you need to install it using ``pip install cairosvg``.
And then later in code: And then later in code:
.. code-block:: yaml .. code-block:: yaml