[Feature] Added the templatable component

[Mrredstone5230]

Hi! This adds a "templatable" component which will add all the components that are listed in the "template" tag/list (which is obviously templatable). This is a pretty advanced component, since this is used to dynamically add components to pages, and it's supposed to use jinja a lot.

Here's an example use of this. This is an example page that shows a "grid" of entities, but it only shows a pixel if it's on or off, or etc... I didn't want to create this as an integrated component, since there's a lot of things users might want to customize, so here I made it in components. Also, in the example, the first variables could be set using our own variables tag.

- page_type: components
  enabled: true
  components:
    - type: templatable
      template: >-
        {% set entities = [["input_boolean.sw1", "input_boolean.sw2"],
        ["input_boolean.sw2"]] %} {% set origin = [1, 62] %}

        {% set output = namespace(list=[], position_x = origin[0], position_y =
        origin[1]) %} {% for entity_group in entities -%} {# {%- if loop.first
        %}The {% elif loop.last %} and the {% else %}, the {% endif -%} #}

        {% for entity in entity_group -%} {# {%- if loop.first %}The {% elif
        loop.last %} and the {% else %}, the {% endif -%} #} {% set entity_state
        = states(entity) %}

        {## Select the color ##} {% if entity_state=="off" or
        entity_state=="not_home" or entity_state == "standby" %} {% set
        color="red" %} {% elif entity_state=="on" or entity_state=="home" %} {%
        set color="green" %} {% elif entity_state=="playing" or
        entity_state=="idle" or entity_state=="paused" %} {% set color="blue" %}
        {% else %} {% set color="white" %} {% endif %}

        {% set component = {"type": "rectangle", "size": [1,1], "color": color,
        "position": [output.position_x, output.position_y]}%}

        {## Make next pixel 2px higher ##} {% set output.position_y =
        output.position_y - 2 %} {## Add to the output list##} {% set
        output.list = output.list + [component] %}

        {%- endfor %} {## Make next pixel 2px to the right ##} {% set
        output.position_x = output.position_x + 2 %} {## reset y ##} {% set
        output.position_y = origin[1] %} {%- endfor %} {{output.list}}

And here's the jinja template with proper formatting and all

{% set entities = [["input_boolean.sw1", "input_boolean.sw2"], ["input_boolean.sw2"]] %}
{% set origin = [1, 62] %}

{% set output = namespace(list=[], position_x = origin[0], position_y = origin[1]) %}
{% for entity_group in entities -%}
  {# {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%} #}

  {% for entity in entity_group -%}
  {# {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%} #}
    {% set entity_state = states(entity) %}

    {## Select the color ##}
    {% if entity_state=="off" or entity_state=="not_home" or entity_state == "standby" %}
      {% set color="red" %}
    {% elif entity_state=="on" or entity_state=="home" %}
      {% set color="lime" %}
    {% elif entity_state=="playing" or entity_state=="idle" or entity_state=="paused" %}
      {% set color="blue" %}
    {% else %}
      {% set color="white" %}
    {% endif %}

    {% set component = {"type": "rectangle", "size": [1,1], "color": color, "position": [output.position_x, output.position_y]}%}

    {## Make next pixel 2px higher ##}
    {% set output.position_y = output.position_y - 2 %}
    {## Add to the output list##}
    {% set output.list = output.list + [component] %}

  {%- endfor %}
  {## Make next pixel 2px to the right ##}
  {% set output.position_x = output.position_x + 2 %}
  {## reset y ##}
  {% set output.position_y = origin[1] %}
{%- endfor %}
{{output.list}}

(I'll publish this example properly in the discussions afterwards 😉)

Hope you like it!

[gickowtf]

hey, at first glance it looks great again. i hope i'll be able to take a closer look tomorrow! to be honest, i'm already very excited :D

[Mrredstone5230]

Alright, I just tested my example and it almost perfectly worked. I only changed the default origin and now it's looking good! I also tested using some variables set in the variables tag, and it worked!