Upstream/esphome-docs
1
0
Fork 0
mirror of https://github.com/esphome/esphome-docs.git synced 2025-01-13 20:11:53 +01:00
Code Issues Projects Releases Wiki Activity

Display: Add example how to use color (#1278)

Browse Source 
The docs mentioned only binary displays, but color works just fine.
This commit is contained in:
Frederik Gladhorn 2021-09-13 22:12:59 +02:00 committed by GitHub
parent 2d5ed91e52
commit b02a19d40d
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

@ -89,8 +89,7 @@ and circles:
it.filled_circle(25, 25, 10); it.filled_circle(25, 25, 10);
All the above methods can optionally also be called with an argument at the end which specifies in which All the above methods can optionally also be called with an argument at the end which specifies in which
color to draw. Currently, only ``COLOR_ON`` (the default if color is not given) and ``COLOR_OFF`` are supported because color to draw. For monochrome displays, only ``COLOR_ON`` (the default if color is not given) and ``COLOR_OFF`` are supported.
ESPHome only has implemented binary displays.
.. code-block:: yaml .. code-block:: yaml
@ -109,6 +108,23 @@ ESPHome only has implemented binary displays.
// Turn off a whole display portion. // Turn off a whole display portion.
it.rectangle(50, 50, 30, 42, COLOR_OFF); it.rectangle(50, 50, 30, 42, COLOR_OFF);
For color displays (e.g. TFT displays), you can use the Color class.
.. code-block:: yaml
display:
- platform: ...
# ...
lambda: |-
auto red = Color(255, 0, 0);
auto green = Color(0, 255, 0);
auto blue = Color(0, 0, 255);
auto white = Color(255, 255, 255);
it.rectangle(20, 50, 30, 30, white);
it.rectangle(25, 55, 30, 30, red);
it.rectangle(30, 60, 30, 30, green);
it.rectangle(35, 65, 30, 30, blue);
Additionally, you have access to two helper methods which will fetch the width and height of the display: Additionally, you have access to two helper methods which will fetch the width and height of the display:
.. code-block:: yaml .. code-block:: yaml