📝 100% Templatable Lovelace Configurations

[iantrich (Ian)]

Lovelace Templates

I’ve gone and made a crazy card that allows you to pretty much template anything in Lovelace for your card configurations using any information available on the frontend; states, attributes, user, etc.

Want state/attribute-based icons? DONE!
Want dynamic stacks; vertical vs horizontal based on user? DONE!
Want OR conditionals? DONE!

The list is pretty much endless and I’m sure you all will come up with some crazy stuff. Be sure to share.

Go nuts! Enjoy!

iantrich/config-template-card

[capstan1 (Capstan)]

Looks very promising! Gonna check it out this afternoon.
Maybe we should get a git for collecting templates, I expect the examples to number in size within weeks!

[hulkhaugen]

This sounds amazing, having custom cards like this instead of a buttload of template sensors, and my TV and Xbox can finally say on/off instead of home/away :). Is it also possible to colorize the icons, and have more than two options, say three possible “states” depending on sensor value? Looking forward to seeing some more examples of usage.

[iantrich (Ian)]

If you can explicitly do it in the config for a card for 1 scenario, you can template it out. That’s all I can say about it. It takes ANY valid javascript and has access to the this.hass object.

[jimpower]

F#&@ing awesome thanks @iantrich

[DavidFW1960 (David)]

Love to see some examples of this card in action…

[Gluwc (Lucas Bramlage)]

Amazing! Now I can get rid of a whole bunch of template sensors I’m only using for my front end.

[dubsix (Rick)]

very interesting, I’m looking forward to seeing some example and scenarios thrown around for this

[cjsimmons (Chris Simmons)]

This looks good. I’m keen to see more examples to get a better understanding for how to use this.

[SeLLeRoNe (Andrea Iannucci)]

That is amazing! I was looking for something like this a few days ago!
Now I don’t remember for what, but it is absolutely good to have this option now

Would you mind point me to the right direction in this scenario?

              - type: entities
                title: House Members
                show_header_toggle: false
                entities:
                  - entity: person.andrea
                    type: "custom:secondaryinfo-entity-row"
                    secondary_info: "OnePlus 5 Battery: [[ sensor.andrea_oneplus5_battery ]]%"

What I would like to do i add a “- Charging” if binary_sensor.andrea_oneplus5_charging is true.
The templating is not the problem here, my issue is, where do I put the “type: custom:config-template-card” bit in this scenario?

Thanks
Andrea

[iantrich (Ian)]

Everything you have here would go under “config” after you fix the template

[aidbish (Adrian)]

gonna be looking at your config after you have been let loose with this card

[rhodges (Randell)]

Any way to get a better example? I can’t seem to figure it out for some reason…maybe I just haven’t gotten enough sleep…

Figured it out. In the documentation, you have

  - type: custom:config-template-card
    card:
      type: entity-button
      name: "${this.hass.states['media_player.office'].state === 'playing' ? 'Rocking' : 'Not Rocking'}"
      entity: 
      icon: "${this.hass.states['media_player.office'].state === 'playing' ? 'mdi:music' : 'mdi:sleep'}"

But I think card: should be config: ?

I think this has a lot of potential. It would be interesting to apply this concept over to templating entity rows.

[kalkih (Karl Kihlström)]

Nice one Ian!

[Maaniac (Yoav Tigelman)]

I got it to work using the below config. Readme needs to be updated.

- type: 'custom:config-template-card'
  config:
    type: 'custom:hui-entity-button-card'
    name: "${this.hass.states['media_player.office'].state === 'playing' ? 'Rocking' : 'Not Rocking'}"
    entity: media_player.office
    icon: "${this.hass.states['media_player.office'].state === 'playing' ? 'mdi:music' : 'mdi:sleep'}"

[iantrich (Ian)]

If only there was some way for anyone to submit proposed changes…

[iantrich (Ian)]

Part of being open source is having people contribute back. If you think a push towards having someone do that for the good of the community, then, well…

[klogg]

I tried this hours ago and could not for the life of me get it to work, I’m glad I wasn’t the only one and thanks to those of you who worked out how ‘off’ the readme was because I tried loads of things to no avail.

This looks like being an amazingly useful card! Thank you.

[vjmindlab]

really nice work and really useful for many case scenario in my setup working on them and i will post examples here and submit them after on your Git. Thank you again for that wonderful card

[vjmindlab]

I was able to have the ‘circle-sensor-card’ working with non numerical sensor, it absolutely needs a numerical state for the color change. So i made a 3 state color change here is the code i use.
(this is how the lovelace editor conform it)

On Clear it is green, on Warning it is yellow and Emergency red

type: 'custom:config-template-card'
config:
  entity: sensor.co
  name: CO
  show_card: true
  stroke_width: 20
  fill: 'rgba(100,100,100,0.0)'
  type: 'custom:circle-sensor-card'
  stroke_color: >-
    ${this.hass.states['sensor.co'].state === 'Clear' ? '#55f26e' :
    this.hass.states['sensor.co'].state === 'Warning' ? '#e8e400' : '#d30000'}