đŸ”č Lovelace_gen - Add abilities to ui_lovelace.yaml

i’ve had general issues with relative paths, so i moved to using absolute paths.

Is there a way to parameterize the entity (e.g. input_boolean.living_room_motion_override) in custom_fields?

I have 3 ceiling lights/fans and split it to 2 yaml files:

ceiling_light.yaml

type: custom:button-card
name: {{ name }}
entity: {{ entity }}
tap_action:
  action: toggle
hold_action:
  action: call-service
  service: input_boolean.toggle
  service_data:
    entity_id: {{ entity_id }}
show_icon: true
show_name: true
show_state: false
styles:
  card:
    - font-size: 16px
  icon:
    - height: 30px
  grid:
    - grid-template-areas: '"lock lock" "i i" "n n"'
    - grid-template-columns: 0px
    - grid-template-rows: 0px
custom_fields:
  lock: >
    [[[
    if (states['**input_boolean.living_room_motion_override**'].state == 'on')
    return `<ha-icon
      icon="mdi:motion-sensor-off"
        style="width: 15px; height: 15px; color: red;">`
    ]]]

ceiling_fan.yaml

type: custom:button-card
name: {{ name }}
entity: {{ entity }}
icon: {{ icon }}
tap_action:
  action: toggle
hold_action:
  action: none
show_icon: true
show_name: true
show_state: false
styles:
  card:
    - font-size: 16px
  icon:
    - height: 30px

I then use !include:

  - type: horizontal-stack
    cards:
      - !include
        - ceiling_light.yaml
        - name: "Light"
          entity: switch.sonoff_100092da5b_1
          entity_id: input_boolean.living_room_motion_override
      - !include
        - ceiling_fan.yaml
        - name: "Fan Low"
          entity: switch.sonoff_100092da5b_3
          icon: mdi:arrow-down-bold
      - !include
        - ceiling_fan.yaml
        - name: "Fan High"
          entity: switch.sonoff_100092da5b_4
          icon: mdi:arrow-up-bold

I just need to parameterize ‘input_boolean.living_room_motion_override’ in ceiling_light.yaml to be able to try the split files in 3 rooms.

Any help is appreciated.

You might be having issues in traversing the folders.

Use 2 periods to go out of the current folder. For example:

> folder_1
> > folder_1_1
> > > folder_1_1_1 (current folder)
> > > > folder_1_1_1_1
> > > folder_1_1_2
> > folder_1_2
> > > folder_1_2_1

From folder_1_1_1 to folder_1_1_1_1:

folder_1_1_1_1/filename

From folder_1_1_1 to folder_1_1_2:

../folder_1_1_2/filename

I hope I did that correctly.

I am not sure exactly what you are asking for. But if I understand correctly, isn’t already this the variable ‘entity_id’? You can use this in the custom fields as w noell. Just remove the quotes and write

if states(entity_id) == 'on') 

What have you tried?

I tried:

custom_fields:
  lock: >
    [[[
    if (states[{{ lock }}].state == 'on')
    return `<ha-icon
      icon="mdi:motion-sensor-off"
        style="width: 15px; height: 15px; color: red;">`
    ]]]

I also tried parameterizing the entire script:

custom_fields:
  lock: {{ lock }}

I think I got it. I re-analyzed the syntax as well as the error messages thrown. I came up with:

custom_fields:
  lock: >
    [[[
    if (states['{{ lock }}'].state == 'on')
    return `<ha-icon
      icon="mdi:motion-sensor-off"
        style="width: 15px; height: 15px; color: red;">`
    ]]]

Thanks for the nudge.

1 Like

Below are 3 renderings:

  1. Left is right on the view.yaml
  2. Middle is via a browser_mod.popup
  3. Right is via a browser_mod.popup and lovelace_gen macro

Left - observe that “Off” does not show under the “Nook Speaker” media player.

Middle - again, observe that “Off” does not show under the “Nook Speaker” media player.

Right - now, observe that “Off” shows under the “Nook Speaker” media player.

How do I remove the state text? I tried the media_player idle_view options but no luck.

Here is the code:

# lovelace_gen

{% macro tap_action_entities(entity) -%}
                    - entity: {{ entity }}
{% if media_player %}
                      type: 'custom:mini-media-player'
                      group: true
{% else %}
                      tap_action:
                        action: none
{% endif %}
{%- endmacro %}

title: Test
path: test
panel: true
icon: ''

cards:

  - type: custom:layout-card
    layout: vertical
    cards:

      - type: entities
        entities:
          - entity: 'switch.gosund_dc4f229cc629_relay_2'
            name: "Cat Water"
          - entity: 'media_player.nook_speaker'
            name: "Nook Speaker"
            group: true
            type: 'custom:mini-media-player'

      - break

      - type: entities
        entities:
          - type: 'custom:button-card'
            name: "via browser_mod.popup"
            tap_action:
              action: call-service
              service: browser_mod.popup
              service_data:
                title: " "
                card:
                  type: entities
                  show_header_toggle: false
                  entities:
                    - entity: 'switch.gosund_dc4f229cc629_relay_2'
                      name: "Cat Water"
                    - entity: 'media_player.nook_speaker'
                      name: "Nook Speaker"
                      group: true
                      type: 'custom:mini-media-player'
                deviceID:
                  - this

      - break

      - type: entities
        entities:
          - type: 'custom:button-card'
            name: "via browser_mod.popup and lovelace_gen macro"
            tap_action:
              action: call-service
              service: browser_mod.popup
              service_data:
                title: " "
                card:
                  type: entities
                  show_header_toggle: false
                  entities:
                    {{ tap_action_entities('switch.gosund_dc4f229cc629_relay_2') }}
                      name: "Cat Water"
                    {{ tap_action_entities('media_player.nook_speaker') }}
                      name: "Nook Speaker"
                deviceID:
                  - this

Well, in the first two cases you have a mini-media-player row, in the last one it’s the default entities row since media_player is undefined and thus not true.

Again, thank you!

{% if media_player %}

changed to

{% if entity.startswith("media_player") %}

I’m a bit annoyed at my VSCode for not being able to auto format Jinja + Yaml properly. It actually breaks my code because it auto formats {{ to { {

Did you figure a way around this by any chance?

Hi Thomas, I tried using !file as explained in the docs but configuration checker gives this:

Error loading /config/configuration.yaml: could not determine a constructor for the tag '!file'

I’m using the !file tag in an included YAML file, in lovelace.resource key:

lovelace:
  mode: yaml
  resources: !include_dir_merge_list ../../my/file

Without the !file tag resources work.

https://github.com/thomasloven/hass-lovelace_gen#can-i-use-this-for-my-general-home-assistant-configuration

Aha I see what that means. Thanks!

hey @klogg did you manage to sort this? I am trying to pass custom icons into a partial with button card but as you said it is difficult to get the formatting correct with multiple lines.

No I didn’t, but my issue has gone away (for 6 months) as I’m now on UTC for the winter :wink:

Please post here if you ever find a way to do it!

Did lovelace_gen break for you on 2020.12? I find it indispensable and am considering reverting now.

Hi, i don’t get this to run.

I copied the files from github (custom_components/lovelace_gen) into the folder config\custom_components\lovelace_gen from my home assistant.

Then tried to include the file.

My configuration.yaml looks like this

lovelace:
  mode: storage
  # Add yaml dashboards
  dashboards:
    lovelace-yaml:
      mode: yaml
      title: Test YAML
      icon: mdi:script
      show_in_sidebar: true
      filename: ui-lovelace.yaml
    test-yaml:
      mode: yaml
      title: Test YAML 2
      icon: mdi:script
      show_in_sidebar: true
      filename: test.yaml   

I want to test this on my test.yaml because this is empty. Which is the code from thomasloven

Here is the code:

# lovelace_gen
title: Diverse
icon: mdi:home-assistant
cards:

  type: picture-elements
  image: !file /local/images/BottenvÄning.png
  elements:

  {% macro lamp(entity, x, y) -%}
  {% if not no_light %}
  - entity: {{entity}}
    style: { left: {{x}}%, top: {{y}}% }
    type: state-icon
    tap_action: { action: toggle }
  {% endif %}
  {%- endmacro %}
  {% macro dimlamp(entity, x, y) -%}
  {% if not no_light %}
  - entity: {{entity}}
    style: { left: {{x}}%, top: {{y}}% }
    type: state-icon
    tap_action: { action: toggle }
    hold_action: { action: more-info }

But i always get this error: while scanning for the next token found character ‘%’ that cannot start any token in “/config/test.yaml”, line 10, column 4

Anyone knows what i am doing wrong? Did i missed something?