📝 100% Templatable Lovelace Configurations

Share your Projects! Dashboards & Frontend
,
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
26

Unfortunately somehow is not working and I think 50% of this is my fault :smiley:

             - type: custom:config-template-card
                config:
                  - 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 ]]% - ${this.hass.is_states['binary_sensor.andrea_oneplus5_charging', 'true'] 'Charging' : 'Not Charging'}"
                      - entity: person.xxxxx
                        type: "custom:secondaryinfo-entity-row"
                        secondary_info: "Honor 8 Battery: [[ sensor.xxxxx_honor8_battery ]]%"

This is the code I am using, true is that the line in the template check in HA doesn’t seem to return not an error nor the expected result, so, not sure if it’s me or what :slight_smile:

@Maaniac code aswell does the same in the template test to be fair :slight_smile:

I also tried the same with the mini-graph-card using @Maaniac icon config, still got a configuration error:

                        icon: "${this.hass.states['sensor.dark_sky_temperature'].state >= '10' ? 'mdi:thermometer-chevron-up' : 'mdi:thermometer-chevron-down'}"

My guess in this one is the >= but to be honest, that seems to be correct to me

Any hint please? ^^

Thanks

27

your first one isn’t defining templates correctly ${}. Also, you’ll need to template the full line, not just parts of it. The full thing is evaluated as Javascript code.

on your 2nd one, you’ll need to convert the string to a number to evaluate most likely

28

Thanks @iantrich , I will check that :slight_smile:

29

Side note, the dark_sky sensor return a number as far as I can tell :slight_smile:
image

Also becaue I believe that various graph cards are using those values as they are to generate the graph (but again, I might be wrong)