[Feature] Added a "variables" tag for the components page.

[SB2DD]

This adds the "variables" tag from automations to the integration. IT ONLY WORKS IN THE CONFIGURATION. (In the service, templates are rendered by HA. I therefore cannot give it the variables.)

This technically would make it easier for people to share pre-made components pages. Users would only have to change some variables, whilst page creators would handle the rest!

Example usage: (in the config)

- page_type: components
  variables:
    test_var: input_number.kml
  components:
    - type: image
      image_path: /config/custom_components/divoom_pixoo/img/sunpower.png
      position:
        - 2
        - 1
    - type: text
      content: "{{ states(test_var) }}"
      color: "{{ [255,175,0] if states(test)|int >= 1 else [131,131,131] }}"
      font: GICKO
      position:
        - 17
        - 8

[gickowtf]

- page_type: components
  variables:
    test_var: "{{ states('state') }}"
  components:
    - type: image
      image_path: /config/custom_components/divoom_pixoo/img/sunpower.png
      position:
        - 2
        - 1
    - type: text
      content: "{{ test_var }}"
      color: "{{ [255,175,0] if test_var | int >= 9 else [131,131,131] }}"
      font: GICKO
      position:
        - 17
        - 8

very nice... at first i thought ok jinja set variable but your solution is a thousand times better for the end user https://stackoverflow.com/questions/3727045/set-variable-in-jinja

[gickowtf]

i think i found a bug i had tried to write the progressbar as non special pages and therefore had to calculate the progressbar size but the size does not allow templates anyway it does not work

works in automations:

page_type: components
components:
  - type: image
    image_url: https://pub.inflowbogie.dev/lock_closed.png
    position:
      - 50
      - "{{ 5 * 6 }}"
    resample_mode: box
    height: 20

does not work in the configuration

- page_type: components
  components:
    - type: image
      image_url: https://pub.inflowbogie.dev/lock_closed.png
      position:
        - 50
        - "{{ 5 * 6 }}"
      resample_mode: box
      height: 20

[SB2DD]

You're right. The variables tag only works with templatable tags. There are a few that are left that don't get rendered (like the position of images). This PR basically added a parameter to the async-render method, but if it isn't called in the first time, it's obviously not going to work.

I think we could add templates to all tags of all components though. It would be useful idea I think.

[gickowtf]

i was surprised because i thought that size and position in the rectangle, for example, already had an async-render method