mirror of
https://github.com/esphome/esphome-docs.git
synced 2024-12-24 17:08:15 +01:00
Add documentation for images using URL (#3409)
This commit is contained in:
parent
0df31afcfd
commit
a53fc6b37e
@ -184,7 +184,7 @@ Next, create a ``font:`` section in your configuration:
|
|||||||
|
|
||||||
- file: "fonts/tom-thumb.bdf"
|
- file: "fonts/tom-thumb.bdf"
|
||||||
id: tomthumb
|
id: tomthumb
|
||||||
|
|
||||||
- file: 'gfonts://Material+Symbols+Outlined'
|
- file: 'gfonts://Material+Symbols+Outlined'
|
||||||
id: icon_font_50
|
id: icon_font_50
|
||||||
size: 50
|
size: 50
|
||||||
@ -202,7 +202,7 @@ Configuration variables:
|
|||||||
|
|
||||||
**Google Fonts**:
|
**Google Fonts**:
|
||||||
|
|
||||||
Each Google Font will be downloaded once and cached for future use. This can also be used to download Material
|
Each Google Font will be downloaded once and cached for future use. This can also be used to download Material
|
||||||
Symbols or Icons as in the example above.
|
Symbols or Icons as in the example above.
|
||||||
|
|
||||||
- **family** (**Required**, string): The name of the Google Font family.
|
- **family** (**Required**, string): The name of the Google Font family.
|
||||||
@ -407,10 +407,10 @@ You can display current time using a time component. Please see the example :ref
|
|||||||
Screen Clipping
|
Screen Clipping
|
||||||
***************
|
***************
|
||||||
|
|
||||||
Screen clipping is a new set of methods since version 2023.2.0 of esphome. It could be useful when you just want to show
|
Screen clipping is a new set of methods since version 2023.2.0 of esphome. It could be useful when you just want to show
|
||||||
a part of an image or make sure that what you draw on the screen does not go outside a specific region on the screen.
|
a part of an image or make sure that what you draw on the screen does not go outside a specific region on the screen.
|
||||||
|
|
||||||
With ``start_clipping(left, top, right, bottom);`` start you the clipping process and when you are done drawing in that region
|
With ``start_clipping(left, top, right, bottom);`` start you the clipping process and when you are done drawing in that region
|
||||||
you can stop the clipping process with ``end_clipping();`` . You can nest as many ``start_clipping();`` as you want as long
|
you can stop the clipping process with ``end_clipping();`` . You can nest as many ``start_clipping();`` as you want as long
|
||||||
you end them as many times as well.
|
you end them as many times as well.
|
||||||
|
|
||||||
@ -420,7 +420,7 @@ you end them as many times as well.
|
|||||||
- platform: ...
|
- platform: ...
|
||||||
# ...
|
# ...
|
||||||
id: my_binary_sensor
|
id: my_binary_sensor
|
||||||
|
|
||||||
color:
|
color:
|
||||||
- name: my_red
|
- name: my_red
|
||||||
red: 100%
|
red: 100%
|
||||||
@ -439,12 +439,12 @@ you end them as many times as well.
|
|||||||
it.printf(0, 0, id(my_font), id(my_red), "State: %s", id(my_binary_sensor).state ? "ON" : "OFF");
|
it.printf(0, 0, id(my_font), id(my_red), "State: %s", id(my_binary_sensor).state ? "ON" : "OFF");
|
||||||
it.end_clipping();
|
it.end_clipping();
|
||||||
|
|
||||||
After you started clipping you can manipulate the region with ``extend_clipping(left, top, right, bottom);``
|
After you started clipping you can manipulate the region with ``extend_clipping(left, top, right, bottom);``
|
||||||
and ``shrink_clipping(left, top, right, bottom);`` within previous set clipping region.
|
and ``shrink_clipping(left, top, right, bottom);`` within previous set clipping region.
|
||||||
|
|
||||||
With ``get_clipping();`` you get a ``Rect`` object back with the latest set clipping region.
|
With ``get_clipping();`` you get a ``Rect`` object back with the latest set clipping region.
|
||||||
|
|
||||||
.. code-block:: cpp
|
.. code-block:: cpp
|
||||||
|
|
||||||
class Rect {
|
class Rect {
|
||||||
int16_t x; ///< X/Left coordinate
|
int16_t x; ///< X/Left coordinate
|
||||||
@ -678,6 +678,13 @@ Use this component to store graphical images on the device, you can then draw th
|
|||||||
id: alert
|
id: alert
|
||||||
resize: 80x80
|
resize: 80x80
|
||||||
|
|
||||||
|
.. code-block:: yaml
|
||||||
|
|
||||||
|
image:
|
||||||
|
- file: https://esphome.io/_images/logo.png
|
||||||
|
id: esphome_logo
|
||||||
|
resize: 200x162
|
||||||
|
|
||||||
Configuration variables:
|
Configuration variables:
|
||||||
|
|
||||||
- **file** (**Required**, string):
|
- **file** (**Required**, string):
|
||||||
@ -685,7 +692,8 @@ Configuration variables:
|
|||||||
- **Local files**: The path (relative to where the .yaml file is) of the image file.
|
- **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/>`_
|
- **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 in the format ``mdi:icon-name``, and that icon will automatically be downloaded and added to the configuration.
|
||||||
|
- **Remote files**: The URL of the image file.
|
||||||
|
|
||||||
- **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``
|
||||||
@ -971,7 +979,7 @@ Color Test Pattern
|
|||||||
******************
|
******************
|
||||||
|
|
||||||
If you're experiencing issues with your color display, the script below can help you to identify what might be wrong.
|
If you're experiencing issues with your color display, the script below can help you to identify what might be wrong.
|
||||||
It will show 3 color bars in **RED**, **GREEN** and **BLUE**. To help the graphics display team determine
|
It will show 3 color bars in **RED**, **GREEN** and **BLUE**. To help the graphics display team determine
|
||||||
the best way to help you, **a picture of the result of this script is very helpful.**
|
the best way to help you, **a picture of the result of this script is very helpful.**
|
||||||
|
|
||||||
Should you `create an issue <https://github.com/esphome/issues/issues>`__ in GitHub regarding your display, please
|
Should you `create an issue <https://github.com/esphome/issues/issues>`__ in GitHub regarding your display, please
|
||||||
@ -988,15 +996,15 @@ be sure to **include a link to where you purchased it** so that we can validate
|
|||||||
for(auto i = 0; i<256; i++) {
|
for(auto i = 0; i<256; i++) {
|
||||||
it.horizontal_line(shift_x+ 0,i+shift_y,50, my_red.fade_to_white(i));
|
it.horizontal_line(shift_x+ 0,i+shift_y,50, my_red.fade_to_white(i));
|
||||||
it.horizontal_line(shift_x+ 50,i+shift_y,50, my_red.fade_to_black(i));
|
it.horizontal_line(shift_x+ 50,i+shift_y,50, my_red.fade_to_black(i));
|
||||||
|
|
||||||
it.horizontal_line(shift_x+105,i+shift_y,50, my_green.fade_to_white(i));
|
it.horizontal_line(shift_x+105,i+shift_y,50, my_green.fade_to_white(i));
|
||||||
it.horizontal_line(shift_x+155,i+shift_y,50, my_green.fade_to_black(i));
|
it.horizontal_line(shift_x+155,i+shift_y,50, my_green.fade_to_black(i));
|
||||||
|
|
||||||
it.horizontal_line(shift_x+210,i+shift_y,50, my_blue.fade_to_white(i));
|
it.horizontal_line(shift_x+210,i+shift_y,50, my_blue.fade_to_white(i));
|
||||||
it.horizontal_line(shift_x+260,i+shift_y,50, my_blue.fade_to_black(i));
|
it.horizontal_line(shift_x+260,i+shift_y,50, my_blue.fade_to_black(i));
|
||||||
}
|
}
|
||||||
it.rectangle(shift_x+ 0, 0+shift_y, shift_x+ 310, 256+shift_y, my_yellow);
|
it.rectangle(shift_x+ 0, 0+shift_y, shift_x+ 310, 256+shift_y, my_yellow);
|
||||||
|
|
||||||
color:
|
color:
|
||||||
- id: my_blue
|
- id: my_blue
|
||||||
blue: 100%
|
blue: 100%
|
||||||
|
1
lint.py
1
lint.py
@ -395,6 +395,7 @@ def lint_directive_formatting(fname, content):
|
|||||||
include=["*.rst"],
|
include=["*.rst"],
|
||||||
exclude=[
|
exclude=[
|
||||||
"components/web_server.rst",
|
"components/web_server.rst",
|
||||||
|
"components/display/index.rst",
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
def lint_esphome_io_link(fname, match):
|
def lint_esphome_io_link(fname, match):
|
||||||
|
Loading…
Reference in New Issue
Block a user