esphome-docs/components/display/st7789v.rst

ST7789V TFT LCD
===============

.. seo::
    :description: Instructions for setting up ST7789V TFT LCD display drivers.
    :image: st7789v.jpg

.. _st7789v:

Usage
-----

The ``st7789v`` display platform allows you to use
ST7789V (`datasheet <https://github.com/Xinyuan-LilyGO/TTGO-T-Display>`__,
`Tindie <https://www.tindie.com/products/ttgo/lilygor-ttgo-t-display/>`__)
displays with ESPHome. Note that this component utilizes the 4-Wire :ref:`SPI bus <spi>`.

.. figure:: images/st7789v-full.jpg
    :align: center
    :width: 75.0%

    ST7789V TFT LCD on TTGO T-Display module

The TTGO T-Display module shown has the display attached to the module's board and its connections to the ESP32
cannot be changed. Other display modules have pin headers or other connectors which must be connected appropriately
to an ESP module.

.. note::

    Displays larger than the 135x240 pixel display on the TTGO T-Display shown require a significant amount of RAM
    to operate correctly. Some ESP devices, such as the ESP8266, do not have sufficient memory to support this display.
    If you attempt to use this component and experience repeated crashes, this is likely the cause of the issue.

.. code-block:: yaml

    # Example minimal configuration entry
    spi:
      clk_pin: GPIO18
      mosi_pin: GPIO19

    display:
      - platform: st7789v
        model: TTGO TDisplay 135x240
        backlight_pin: GPIO4
        cs_pin: GPIO5
        dc_pin: GPIO16
        reset_pin: GPIO23
        lambda: |-
          it.print(0, 0, id(font), "Hello World!");

    font:
      - file: "gfonts://Roboto"
        id: font
        size: 20

.. note::

    For more information about the font options see: :ref:`display-fonts`.



Configuration variables:
************************

Options below marked **Required** *unless preset* must be provided but may be defined by a preset depending on the selected model, so
may not need to be explicitly specified in your YAML file. If you do specify them they will override any preset.

- **model** (**Required**, string): The display model to use. One of the following options:

  - ``TTGO TDisplay 135x240``
  - ``Adafruit Funhouse 240x240``
  - ``Adafruit RR 280x240`` (round-rectangular display -- some pixels are "deleted" from corners to form rounded shape)
  - ``Adafruit S2 TFT FEATHER 240X135``
  - ``LILYGO T-Embed 170X320``
  - ``Custom`` For other displays not listed above

- **height** (**Required** *unless preset*, int): Sets height of display in pixels.
- **width** (**Required** *unless preset*, int): Sets width of display.
- **offset_height** (**Required** *unless preset*, int): When ``model`` is set to "Custom", use this to specify the display's vertical
  offset in pixels. This option may not be specified when the ``model`` is not set to "Custom".
- **offset_width** (**Required** *unless preset*, int): When ``model`` is set to "Custom", use this to specify the display's horizontal
  offset in pixels. This option may not be specified when the ``model`` is not set to "Custom".
- **cs_pin** (**Required** *unless preset*, :ref:`Pin Schema <config-pin_schema>`): The CS pin.
- **dc_pin** (**Required** *unless preset*, :ref:`Pin Schema <config-pin_schema>`): The DC pin.
- **reset_pin** (**Required** *unless preset*, :ref:`Pin Schema <config-pin_schema>`): The RESET pin.
- **eightbitcolor** (*Optional*, boolean): Limits the supported color depth to eight bits. May be useful on
  memory-constrained devices. Defaults to false.
- **backlight_pin** (*Optional*, :ref:`Pin Schema <config-pin_schema>`): The display's backlight pin. May be required
  depending on the hardware configuration.
- **power_supply** (*Optional*, :ref:`config-id`): The :doc:`power supply </components/power_supply>` to connect to
  this display if required by hardware. The power supply will be turned on before attempting to initialize the display.
- **lambda** (*Optional*, :ref:`lambda <config-lambda>`): The lambda to use for rendering the content on the display.
  See :ref:`display-engine` for more information.
- **update_interval** (*Optional*, :ref:`config-time`): The interval to re-draw the screen. Defaults to ``5s``.
- **pages** (*Optional*, list): Show pages instead of a single lambda. See :ref:`display-pages`.
- **id** (*Optional*, :ref:`config-id`): Manually specify the ID used for code generation.


Preset configuration
********************

For specific models there is some preset configuration which will satisy some of the **Required** *unless preset* values.
All models except ``Custom`` preset the ``height``, ``width`` and ``offset_...`` values.
The table below summarises the other presets. Note that SPI CLK and SDO (mosi) pins, and the power supply pin must be separately
configured in ``spi:`` and ``power_supply:`` blocks - the pins are noted below for convenience only.

Items marked RQ are hardware dependent but required and not preset. Items marked ? are optional depending on the hardware.

.. list-table:: Model presets
   :header-rows: 1


   * - Model
     - Height/ width
     - Offsets
     - CS
     - DC
     - Reset
     - Back light
     - Pwr sup
     - SPI clk
     - SPI mosi
   * - TTGO TDisplay 135x240
     - 240/135
     - 52/40
     - 5
     - 6
     - 23
     - 4
     -
     - 18
     - 19
   * - Adafruit Funhouse 240x240
     - 240/240
     - 0/0
     - 40
     - 39
     - 41
     - 21
     -
     - 36
     - 35
   * - Adafruit RR 280x240
     - 240/240
     - 0/20
     - RQ
     - RQ
     - RQ
     - ?
     - ?
     - RQ
     - RQ
   * - Adafruit S2 TFT FEATHER 240X135
     - 240/135
     - 52/40
     - 7
     - 39
     - 40
     - 45
     - 21
     - 36
     - 35
   * - LILYGO T-Embed 170X320
     - 320/170
     - 35/0
     - 10
     - 13
     - 9
     - 15
     - 46
     - 12
     - 11
   * - Custom
     - RQ
     - RQ
     - RQ
     - RQ
     - RQ
     - ?
     - ?
     - RQ
     - RQ



For all boards you can override the presets by specifying any of the configuration options. Pin assignments on some
boards can change between versions so if it doesn't work with the presets check the board pinouts and override options as
required.

.. note::

    On memory-constrained devices, it may be possible to use *part* of the display area by
    specifying a smaller ``height`` and/or ``width`` than that of the actual display.


Configuration examples
**********************

To use colors in your lambda:

.. code-block:: yaml

    color:
      - id: my_red
        red: 100%
        green: 3%
        blue: 5%

    ...

    display:
        ...
        lambda: |-
          it.rectangle(0,  0, it.get_width(), it.get_height(), id(my_red));


To bring in color images:

.. code-block:: yaml

    image:
      - file: "image.jpg"
        id: my_image
        resize: 200x200
        type: RGB24

    ...

    display:
        ...
        lambda: |-
          it.image(0, 0, id(my_image));

Complete example
****************

The following is an example YAML configuration that you can add to your base device configuration. It defines:

- three fonts (well, one font in three sizes)
- a ``binary_sensor`` that indicates the state of connectivity to the API
- a ``binary_sensor`` for each of the two buttons on the TTGO module
- a ``switch``, allowing control of the backlight from HA
- several colors
- a color image to be shown on the display
- time, for display...on the display
- the SPI configuration for communicating with the display
- the display component itself, for use on the TTGO module
- a lambda which paints the screen as shown in the picture above:

  - blue borders, with a sort of "title bar" along the top
  - "ESPHome" in yellow in the top left corner
  - the API connection status, "Online" in green when connected, "Offline" in red when not
  - the time and date, more or less in the center of the display

To use this example, you need only to provide the font file, "Helvetica.ttf" (or update it to
a font of your choosing) and an image file, "image.png" (it may also be a ".jpg"). Place these
into the same directory as the YAML configuration file itself. Comment/Uncomment/Modify the
appropriate lines of C code in the lambda to hide or show the image or text as you wish.

.. code-block:: yaml

    color:
      - id: my_red
        red: 100%
        green: 0%
        blue: 0%
      - id: my_yellow
        red: 100%
        green: 100%
        blue: 0%
      - id: my_green
        red: 0%
        green: 100%
        blue: 0%
      - id: my_blue
        red: 0%
        green: 0%
        blue: 100%
      - id: my_gray
        red: 50%
        green: 50%
        blue: 50%

    font:
      - file: "Helvetica.ttf"
        id: helvetica_48
        size: 48
      - file: "Helvetica.ttf"
        id: helvetica_24
        size: 24
      - file: "Helvetica.ttf"
        id: helvetica_12
        size: 12

    binary_sensor:
      - platform: status
        name: "Node Status"
        id: system_status
      - platform: gpio
        pin:
          number: GPIO0
          inverted: true
          mode:
            input: true
            pullup: true
        name: "T-Display Button Input 0"
        id: tdisplay_button_input_0
      - platform: gpio
        pin:
          number: GPIO35
          inverted: true
        name: "T-Display Button Input 1"
        id: tdisplay_button_input_1

    # Allow dimmable control of the backlight (pin GPIO4)
    output:
      - platform: ledc
        pin: GPIO4
        id: gpio4

    light:
      - platform: monochromatic
        output: gpio4
        name: "Backlight"

    image:
      - file: "image.png"
        id: my_image
        resize: 200x200
        type: RGB24

    time:
      - platform: homeassistant
        id: esptime

    spi:
      clk_pin: GPIO18
      mosi_pin: GPIO19

    display:
      - platform: st7789v
        cs_pin: GPIO5
        dc_pin: GPIO16
        reset_pin: GPIO23
        rotation: 270
        lambda: |-
          it.rectangle(0,  0, it.get_width(), it.get_height(), id(my_blue));
          it.rectangle(0, 20, it.get_width(), it.get_height(), id(my_blue));   // header bar

          it.strftime((240 / 2), (140 / 3) * 1 + 5, id(helvetica_24), id(my_gray), TextAlign::CENTER, "%Y-%m-%d", id(esptime).now());
          it.strftime((240 / 2), (140 / 3) * 2 + 5, id(helvetica_48), id(my_gray), TextAlign::CENTER, "%H:%M:%S", id(esptime).now());
          it.print(5, 5, id(helvetica_12), id(my_yellow), TextAlign::TOP_LEFT, "ESPHome");

          // Comment out the above lines to see the image without text overlaid
          // it.image(0, 0, id(my_image));

          if (id(system_status).state) {
            it.print(235, 5, id(helvetica_12), id(my_green), TextAlign::TOP_RIGHT, "Online");
          }
          else {
            it.print(235, 5, id(helvetica_12), id(my_red), TextAlign::TOP_RIGHT, "Offline");
          }


See Also
--------

- :doc:`index`
- :doc:`Power Supply Component </components/power_supply>`
- :apiref:`st7789v_base/st7789v_base.h`
- :ghedit:`Edit`