šŸ”¹ Lovelace_gen - Add abilities to ui_lovelace.yaml

Assuming I took my lovelace_new_data.yaml file and cut it in 2 creating the following:

  • lovelace_new_data_variables.yaml
  • lovelace_new_data_rest.yaml

Each of the files has the # lovelace_gen at the beginning of course.

How should my new main lovelace file lovelace_new.yaml be?

current file is:

# lovelace_gen

kiosk_mode:
  hide_header: true

title: Home

views:
  - !include lovelace_new_data.yaml

I have no idea because I donā€™t know the contents of your files.

I think you should spend some time learning what includes actually do. They simply piece together information.

i.e.

foo:
- bar: Foobar

with incldues is

foo: !include something.yaml

something.yaml

- bar: Foobar

The same principle is applied here, however the yaml requires what the documents say. And then the information you pass is passed via the supplied variables. As long as you have a field, that field can be broken out like above.

field: 
  content1: value1
  content2: value2  

you can even include something like this

field: content

The syntax is no different for the include.

field: !include something.yaml

something.yaml

content

I went over how include works (again) and try to implement it but had issues with my configuration as I have macros and for loops that make it problematic.

Is there a way to ā€œincludeā€ files as a simple concatenation? Meaning taking split files and appending them to each other without considering their content? Identation and fields will be taken care of inside each of the files as if they were already a single file.

For example taking a single file:

badges: []
icon: 'mdi:home-outline'
panel: true
path: floorplan
title: FloorPlan
cards:
  - type: picture-elements
    image: /local/images/floorplan/background_t.png
    elements:
      - type: image
        entity: cover.cover1
        ...
      - type: image
        entity: cover.cover2
        ...
      - type: image
        entity: cover.cover3
        ...
      - type: image
        entity: light.light1
        ...
      - type: image
        entity: light.light2
        ...
      - type: image
        entity: light.light3
        ...

and create the following 3 files with indentations as in the original file:

badges: []
icon: 'mdi:home-outline'
panel: true
path: floorplan
title: FloorPlan
cards:
  - type: picture-elements
    image: /local/images/floorplan/background_t.png
    elements:
      - type: image
        entity: cover.cover1
        ...
      - type:image
        entity: cover.cover2
        ...
      - type: image
        entity: cover.cover3
        ...
      - type: image
        entity: light.light1
        ...
      - type: image
        entity: light.light2
        ...
      - type: image
        entity: light.light3
        ...

Hi all.

I have follow all step to install lovelace_gen but not work for me.
This is my configuration

configuration.yaml

lovelace_gen:

lovelace:
  mode: storage
  dashboards:
    home-tablet:
      mode: yaml
      title: HomeBase
      icon: mdi:script
      show_in_sidebar: true
      filename: dashboard/home_tablet/home-tablet.yaml

This are my yaml files (I have extract only the affected code)

In home_tablet.yaml

- title: IRRIGAZIONE
    path: irrigazione
    panel: true
    cards:
      - !include view_irrigation.yaml

view_irrigation.yaml

#lovelace_gen
- type: vertical-stack
      cards:
        - type: markdown
          content: "## ZONE DI IRRIGAZIONE"
        #- !include irrigation_zone1.yaml
        - !include
            - irrigation_zone.yaml
            - entity: group.zone1_onoff
        - !include irrigation_zone2.yaml
        - !include irrigation_zone3.yaml

irrigation_zone.yaml

#lovelace_gen

        type: custom:button-card
        entity: { { entity } }
        template: irrigation_zone
        name: ORTO
        show_icon: true
        show_name: true
        icon: mdi:checkbox-blank-outline
        layout: icon_name

But not work, I reload dashboard but I receive ā€œUnknown errorā€.

I thought the problem was in the configuration.yaml with multiple dashboards, but Iā€™ve seen several people using the same configuration as me.

Can someone help me?

Regards,
Marco

Add a bit

I tried to use a simple page with only a button and it work fine.
I have retry with complete page, adding one card at a time and I found that the problem is here:

            type: custom:mushroom-template-card
            entity: light.lampada_sala
            icon: |
              {% if is_state('light.lampada_sala', 'on') %}
                mdi:stop-circle-outline
              {% else %}
                mdi:play-circle-outline
              {% endif %}

If I remove the code under icon: the page loading correctly and with passed parameters, otherwise, in the log, after a long python exception, I see this error:

jinja2.exceptions.UndefinedError: 'is_state' is undefined

Any ideas?

Unable to load HK5 Infused YI, getting he below errorUI File ā€œ/config/hki-base/base.yamlā€, line 4, in top-level template code

As far as I can tell, lovelace-Gen does not provide the built in HASS extensions to work with state entities. Iā€™m looking for a solution that does. Did you ever figure this out?

did you get any response on this? running in to the same issue myself.

thanks!

Need help please. Here is self-contained snippet from one of dashboards that does not render as expected. What was expected is the cards each display the device, index j, and name, index i, based on their respective index values.

What actually happens is the entity is the right one, I have verified that by tapping on each of them to check info. But, the name displayed is always the first one. See picture below.

In this case the index values would be the same. But this is a simplified example to demo the issue in my real use case the value of i would not be equal to j.

Why is this not working and how can I make this work?

Thank you.

        - square: false
          type: grid
          columns: 3
          cards:
{% set i = -1 %}
{% set e = ['binary_sensor.dining_multisensor_motion_detection', 'binary_sensor.hue_motion_sensor_1_motion_2', 'binary_sensor.hue_motion_sensor_main_door_motion'] %}
{% set eN = ['Entity 1', 'Entity 2', 'Entity 3'] %}
{% for j in range(3) %}
{% set i = i + 1 %}
            - type: custom:button-card
              template: standard
              entity: {{ e[j] }}
              name: {{ eN[i] }}
              styles:
                icon:
                  - color: >
                      [[[
                        return (states['{{ e[j] }}'].state === 'on' ? 'red' : 'green');
                      ]]]
              tap_action:
                action: more-info
{% endfor %}

@thomasloven || @petro since you both are the most prolific responders in this thread tagging you both for a solution to the issue in my post above.

Sorry about tagging you guys, but have spent hours trying to figure this one out, without any luck.

Any help would be much appreciated.

Thank you.

Is there any way to do a conditional based on an entities supported features? For example, I may want to format a card slightly differently based on whether a light supports brightness, color temp, etc.

I know itā€™s pretty useless to be able to use state and attributes in general, but this is a static value, so Iā€™m hoping thereā€™s a chance?

I have a lovelace_gen configuration of ~2100 lines of code that gets expanded to >10000 lines of code - I use a lot of macros and for loops.

Is there a way to see the expanded code for debugging? I get an error on line 6798 but I donā€™t know what is really there.

you can just use j instead of i? if you want to add a name to an entity, they must be the same length lists, so not sure how j & i would ever be different.

I donā€™t know what happened but I just rebooted twice without lovelace trying to load before lovelace_gen :heart_eyes:

I am currently trying to change my frontend a little bit. As I am now working a lot with custom cards where it is not possible to use the ui editor I am trying to switch to the yaml mode. I saw lovelace_gen allows me to use jinja2 templates for my lovelace configuration.
So I tried it out.

So it seems like with this I can do a lot stuff but for now I am not able to print now().
Or I need a different syntax.

This is my smallest example which does not work:

# lovelace_gen
- title: Home
  cards:
    - type: custom:mushroom-template-card
      primary: '{{now()}}'
      secondary: ''
      icon: mdi:home

I am not sure if this does work with lovelace_gen. But how can I build a Dashboard with this values with lovelace_gen?

@thomasloven

Is there also a safe way for other cards? I have one card where I want to include different cards in separated files:
quickinfo.yaml
quickinfo_licht.yaml
quickinfo_fenster.yaml

quickinfo.yaml:

# lovelace_gen
type: custom:swipe-card
card_width: auto
start_card: 1
reset_after: 10
cards:
  !include 'quickinfo_licht.yaml'
  !include 'quickinfo_fenster.yaml'

quickinfo_licht.yaml looks similar to this:

# lovelace_gen

- type: conditional
  conditions:
    - condition: screen
      media_query: '(max-width: 600px)'
  card:
    type: custom:mushroom-template-card
    tap_action:
      action: navigate
      navigation_path: licht


- type: conditional
  conditions:
    - condition: screen
      media_query: '(max-width: 600px)'
  card:
    type: custom:mushroom-template-card
    tap_action:
      action: navigate
      navigation_path: licht

And quickinfo_fenster.yaml as well. So I have multiple files with a list of elements and I want to include them.

Or isnā€™t this possible at all? So do I have to include either all cards in one file or define one yaml per type and then i am able to include multiple files?

Banging my head against a wall for day. Need input from experts!

  1. Am using lovelace_gen and lots of !includes.
  2. I have a device whose state I want to pass to an !include file in a variable.
    Itā€™s an aircon, and when itā€™s off I want the include file to do various stuff vs. when itā€™s on.

I am trying to pass the state of climate.porch_ac_windfree_3_0e to the climate_device_state variable. But no-matter what I do, it doesnā€™t work. All works in the test markdown card shown below. But I canā€™t figure out a way of passing the result to the !include variable.

Please, pretty please, help! Iā€™ve tried inline, indentation frenzies, filters ā€“ all to no avail. It MUST be possible!

# lovelace_gen

{% set climate_entity = 'climate.porch_ac_windfree_3_0e' %}
{% set card_bg = card_bg or "var(--primary-background-color)"  %}
{% set card_margin = card_margin or "12px auto 12px auto"  %}
{% set ac_state_off = "off" %}

{%- macro offState() -%}
      {%- raw -%}
      {%- if (states({% endraw %}"{{climate_entity}}"){% raw %} == {% endraw %}"off"{% raw %}) -%}
        {%- endraw -%}
        {{"off"}}
        {%- raw -%}
      {%- else -%}
        {%- endraw -%}
        {{"on"}}
        {%- raw -%}
      {%- endif -%} 
      {%- endraw -%}
{%- endmacro -%}


type: custom:stack-in-card
group: true
card_mod:
  style: |
    ha-card {
      max-width: 388px !important;
      margin: {{card_margin}};
      background: {{ card_bg }} !important;
      padding: 8px;
    }

cards:

  - type: vertical-stack
    cards:
      - !include
        - ../components/mini-climate.yaml
        - entity: {{climate_entity}}
          name: "Porch AC (Samsung)"
          climate_device_state: "I AM STUCK"
          buttons: ["cool", "heat", "auto"]
  - type: markdown
    title: "WTF"
    content: |
      "Hello from Markdown"
      ............
      {% raw %}
      So I can tell that my light is {{ states('climate.porch_ac_windfree_3_0e') }}!
      {% endraw %}
      .......
      {{offState()}}
  • First, define your macros first (probably. I always do so).
  • Second, pass parameters to them, donā€™t assume variables are global
  • Third, when returning constants, donā€™t put them in {{ā€¦}} and donā€™t quote them.
  • Fourth, I have no raw/endraw keywords in my lovelace code.
    Here is a macro for the custom:button-card:
      {% macro lightswitch(entity, x, y) -%}
      - entity: {{entity}}
        style: { left: {{x}}%, top: {{y}}%, width: 4% }
        type: image
        tap_action:  {# action: toggle #}
          action: call-service
          service: script.zwave_switches_toggle
          service_data:
            entity:  {{entity}}
        hold_action: { action: more-info }
        state_image: { 'off': /local/images/BulbOff.png, 'on': /local/images/BulbOn.png }
      {%- endmacro %}

Then, apply your macro as follows:

      {{ lightswitch('switch.front_porch_sconces',    65.0, 20.3 ) }}

which will render the result of the macro in your dashboard.
image

Caution: # lovelace_gen causes the custom:state-switch card not to render and to return Unknown Error on the Dashboard.

Hi,

I did a super bad job of explaining my conundrum. Apologies. Your reply was educational though. Thank you.
Let me simplify with a different example.

I have included yaml file in my yaml dashboard for a climate-card that is fed by variables.
The !include, looks like this:

- !include
    - ../components/mini-climate.yaml
    - entity: {{govee_entity}}
      name: "Porch Space Heater"
      buttons: ["heat", "auto", "swing", "presets"]
      hvac_show_buttons: ["auto", "heat", "fan", "swing_mode", "custom_1"]
      hvac_mode: {{govee_hvac_modes}}
      indicators: {{govee_indicators}}
      secondary_info: {"type": "fan-mode-dropdown"}

      {# override defaults #}
      hvac_auto: {"icon": "mdi:sun-snowflake-variant", "is_active": "auto", 
        "hvac_mode": "auto", "activeColor": "var(--state-climate-auto-color) !important"} 
      
      hvac_custom_1: {"type": "dropdown", "icon": "mdi:lightbulb", 
        "active": "(value !== '' && entity.attributes.nightlight == 'on')", 
        "state": {"attribute": "selected_scene"}, "activeColor": "var(--state-light-active-color) !important",
        "source": {"off":"Light Off", "Coffee": "Coffee", "Sleep":"Sleep", "Warm": "Warm"}, 
        "action": {"domain": "mqtt", "service": "publish", 
        "options": "{ topic: 'gv2mqtt/DB2A6074F445163C/set-mode-scene', payload: selected }" 
          }
        }

Inside the included yaml file, we use the hvac_custom_1.source variable like this:

    source:
      <<:
        {{item.source}}

It works.

The rendered output (with the dropdown fed by hvac_custom_1.source) is:

Now, instead of hard-coding that hvac_cutom_1.source variable, I want to create the options, from an attribute of an entity:

I have an entity: climate.porch_spaceheater. It has an attribute that looks like this (abbreviated):

nightlight_scenes:
  - name: Reading
    value: 1
  - name: Movie
    value: 2
  - name: Work
    value: 3
  - name: Night Light
    value: 4
  - name: Party
    value: 5
  - name: Sports
    value: 6
  - name: Music
    value: 7
  - name: Warm
    value: 8

To test my jinja to get the data from that attribute, I have created a ā€œDebug Markdown Cardā€ in the dashboard yaml that looks like this:

      - type: markdown
        title: "Debug Markdown Zone"
        content: |
          {% raw %}
          {% set scenes = state_attr('climate.porch_spaceheater', 'nightlight_scenes') | map(attribute='name')|list %}
          {% set source = '[' ~ (scenes | map('regex_replace', '^(.*)$', '{ "\\1": "\\1" }') | join(", ")) ~ ']' %}
          {{ source }}
          {% endraw %}

It works. And outputs this (I know thatā€™s a hairy xform, but it works!):

So, my question is how the heck do I get that {%raw%}ā€¦{%endraw%} block to feed the source prop in hvac_custom_1.source?

- !include:
  - ../..etc...
  - entity: ....
    hvac_custom_1: {
      ...
      "source": //STUFF FROM %RAW% %ENDRAW% GOES HERE!
    }

I have tried everything. doing it inline, creating a source variable at the top of the file, creating a macro, but all to avail. I hope I explained this well enough, and hoping someone can teach me the way. If you need more info, please shout!

TIA.