šŸ“ 100% Templatable Lovelace Configurations

Share your Projects! Dashboards & Frontend
,
1

:tada: Lovelace Templates :tada:

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!

78 Likes
2

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!

1 Like
3

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.

4

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.

5

F#&@ing awesome thanks @iantrich

6

Love to see some examples of this card in actionā€¦

2 Likes
7

Amazing! Now I can get rid of a whole bunch of template sensors Iā€™m only using for my front end. :grinning:

8

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

9

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

10

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 :smiley:

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 :slight_smile:
Andrea

11

Everything you have here would go under ā€œconfigā€ after you fix the template

12

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

1 Like
13

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.

14

Nice one Ian! :clap: :tada:

1 Like
15

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'}"
3 Likes
16

If only there was some way for anyone to submit proposed changesā€¦ :thinking:

5 Likes
20

:sunglasses::+1:
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ā€¦ :woman_shrugging:

5 Likes
22

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.

24

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

25

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'}

c e w

1 Like