📝 100% Templatable Lovelace Configurations

[DvdNwk]

Alrighty, I’ve adapted your example into inception–less solution – one that I’m gonna keep, after all, thanks

type: custom:auto-entities
card:
  type: vertical-stack
card_param: cards
filter:
  template: |-
    {% for area_id in areas()|sort -%}
      {%- set area_lights = area_entities(area_id)
        | select('match', 'light.')
        | list -%}

      {%- if area_lights|count -%}
        {{
          {
            'type': 'entities',
            'title': area_name(area_id),
            'entities': area_lights
          }
        }},
      {%- endif -%}
    {%- endfor %}

[Ildar_Gabdullin]

+sorting by lights’ names if needed…
Well done.

OK, sorry to everyone about posting off-topic about auto-entities here )))

[DvdNwk]

yeah, i’m also missing 'secondary_info': 'last-changed' in the latest solution, but I keep working on it

[sparkyvision]

Someone suggested that I use this card to switch which information was being fed to things, and so after reading and poking around other’s code, here’s what I’ve written:

type: 'custom:config-template-card'
variables:
  thermostat_select_state: states['input_select.lcars_select_thermostat'].state
entities:
  - climate.dkn_deck_1
  - climate.dkn_deck_2
  - climate.dkn_deck_3
card:
  type: "thermostat"
  entities:
    - entity: climate.dkn_deck_1
      name: "${thermostat_select_state === 'deck1' }"
  entities:
    - entity: climate.dkn_deck_2
      name: "${thermostat_select_state === 'deck2' }"
  entities:
    - entity: climate.dkn_deck_3
      name: "${thermostat_select_state === 'deck3' }"
  show_current_as_primary: true
  features:
    - type: climate-hvac-modes
  card_mod:
    class: middle-right

However, this gives me an error message “No card type configured” and “type: ’ '” when I very clearly have defined my card type, as “thermostat”. For the record, that input select should be telling template-card which entity to look at. I tried this with visibility conditionals, but something in Lovelace (card_mod, probably) is doing redraws of the screen when the input is switched which looks a touch clunky.

[Ildar_Gabdullin]

@sparkyvision

  type: "thermostat"
  entities:
    - entity: climate.dkn_deck_1
      name: "${thermostat_select_state === 'deck1' }"
  entities:
    - entity: climate.dkn_deck_2
      name: "${thermostat_select_state === 'deck2' }"
  entities:
    - entity: climate.dkn_deck_3
      name: "${thermostat_select_state === 'deck3' }"

Remove everything related to config-template-card - and you will see that the inner card itself is configured wrong.

[Mariusthvdb (Marius)]

well there’s going to be a redraw in any case, as that is what you tell the system to do.

You really should prevent using config-template-card, as it is a resource hog of the more serious kind…

if you have just those 3 climates, you’d be much better of with visibility options indeed, and, glancing a your config, if you’d use a yaml anchor (with which you can c&p reused yaml) your complete config would be much more compact too.

why dont you show the bare config you need for those 3, and add a visibility condition for each, and show us what you have

just made a quick one:

entity: climate.heater_library
visibility:
  - condition: state
    entity: input_select.activiteit
    state: Opstaan
<<: &config
  type: thermostat
  show_current_as_primary: true
  features:
    - type: climate-hvac-modes
  card_mod:
    class: middle-right

and thats all there is to it. times 3.

entity: climate.heater_office
visibility:
  - condition: state
    entity: input_select.activiteit
    state: Slapen
<<: *config

Seems a no brainer to ditch config-template-card here

[petro]

type: 'custom:config-template-card'
variables:
  thermostat_select_state: states['input_select.lcars_select_thermostat'].state
entities:
  - climate.dkn_deck_1
  - climate.dkn_deck_2
  - climate.dkn_deck_3
card:
  type: thermostat
  entity: "${ `climate.dkn_deck_${ thermostat_select_state[thermostat_select_state.length - 1]}` }"
  name: "${ thermostat_select_state }"
  show_current_as_primary: true
  features:
    - type: climate-hvac-modes
  card_mod:
    class: middle-right

[skavan]

BEST CARD EVER!

Here’s what I’m trying to do.

1. Grab a JSON structure from a template sensor attribute. Working.
2. Grab the query string from the url of my yaml mode view. Working.
3. Use the query string value as a key to extract a given key from the json in #1. NOT WORKING.

In the snippet below, what I really want is to replace [states['input_text.remote_ui_target'].state] with the query string value of ‘params.mode’. i.e. http://homeassistant.local:8123/lovelace-yaml-1/0?mode=samsung_tv. So config: resolves as the below, grabbing that value from the ?mode=samsung_tv

config: JSON.parse(states['sensor.ui_remote'].attributes.configs)['samsung_tv']

Can’t figure out how to do it. It must be possible. H-E-L-P!

- type: custom:config-template-card
  variables:
    config: JSON.parse(states['sensor.ui_remote'].attributes.configs)[states['input_text.remote_ui_target'].state]
    params: >
      new Proxy(new URLSearchParams(window.location.search), {get: (searchParams, prop) => searchParams.get(prop)});
  entities:
    - sensor.ui_remote
    - input_text.remote_ui_target

# Just a test debug card:
  card:
    type: entities
    title: ${"Hello, " + params.mode} # <<<<---WORKS!
    entities:
      - sun.sun

[skavan]

Figured it out.
And what this let’s me do is:

1. Pass a query string to yaml dahboard. i.e. ?mode="porch"
2. Use that query string value to grab a set of configuration variables from a sensor template.
3. Use those variables to completely redefine my dashboard. So, in this case I have a TV remote. If I send the query string ?mode=porch, the remote is configured for my Porch TV. If I send ?mode=deck it configures as my deck tv…and so on.

I don’t think there is any other way of passing “variables” into a dashboard view!
You could set sensors, but they become system wide not user/device specific.

type: custom:config-template-card
variables:
  config: >
    var mode = new Proxy(new URLSearchParams(window.location.search), {get: (searchParams, prop) => searchParams.get(prop)})?.mode;
    var configs = JSON.parse(states['sensor.media_player_manager'].attributes.configs);
    configs[mode && configs.hasOwnProperty(mode) ? mode : "porch"];
  source_name: |
    (pv_media_player_id, media_player_id) => {
      const powerSource = states[pv_media_player_id]?.attributes?.source || states[pv_media_player_id]?.attributes?.app_name || "standby";
      const mediaSource = states[media_player_id]?.attributes?.source || states[media_player_id]?.attributes?.media_playlist || "standby MS";
      if (pv_media_player_id == media_player_id) {
        return powerSource
      } else {
        const combinedSource = powerSource + ' - ' + mediaSource;
        return combinedSource;
      }
    }

[uidee.dev]

Hi, can anyone help me with this:

I am trying to get an iomage based on the color temp of a light entity:

this is my code:

type: custom:stack-in-card
mode: vertical
cards:
  - type: picture-elements
    image: local/images/UIDEE/UIDEEE_bueno_1.png
    panel: true
    elements:
      - type: custom:config-template-card
        variables:
          LIGHT_STATE: states['light.fantasma_1'].state
          LIGHT_TEMP: states['light.fantasma_1'].attributes.color_temp
        entities:
          - light.fantasma_1
        card:
          type: image
          state_image: |-
            ${LIGHT_STATE === 'off' 
              ? '/local/images/UIDEE/UIDEEE_bueno_1.png' 
              : LIGHT_TEMP > 300 
                ? '/local/images/UIDEE/UIDEEE_bueno_1_1.png' 
                : '/local/images/UIDEE/UIDEEE_bueno_1_2.png'}
                

I don’t know what would be the cause of the problem