📝 100% Templatable Lovelace Configurations

klogg · August 25, 2019, 3:35pm

Yes, I know that post and it is brilliant.
However this card uses javascript for the templates so I don’t think in this case it will help?

Mariusthvdb · August 25, 2019, 3:59pm

not the exact same thing, but maybe a good pointer for the js script:

it’s on last_triggered, but maybe you can rewrite it for last_changed?

klogg · August 26, 2019, 8:40am

I tried, and failed
My javascript skills weren’t good enough…

DavidFW1960 · August 26, 2019, 9:00am

                - entity: sensor.abb_usage
                  name: "${'Last Update Requested' +'\xa0'.repeat(5) + Number.parseInt((new Date().getTime() - new Date(vars[10])) / 60000)+ '\xa0' + 'minutes ago'}"
                  icon: mdi:clock

Var[10]=states[‘automation.update_abb_usage’].attributes[‘last_triggered’]

klogg · August 26, 2019, 9:10am

Brilliant, thank you.

FWIW, I went with (but I’d never have got there without your example)

title: "${'-- Trains from My Station (at ' + Date(vars[2]).substr(16, 8) + ') --'}"

What would be really nice would be to be able to style the bit in brackets to a smaller font…
No doubt ‘there’s-a-card-for-that’!!

Mariusthvdb · August 28, 2019, 8:24am

building on Auto-entities: template lightning strikes of last hour? where I try to have the wwlln sourced lighting strikes in a card, I (think I have to) turn to the templater card to even have a chance of getting where I want…

Id love to have a Map, showing the strikes of the last hour, and since that seems not to be possible yet, (need a nifty template for that I havent yet been able to construct), I want to show the strikes within a radius of 50 km. Which is easier, because the state.state of the strikes is their distance in km.

so, Id hope the templater card do do something like

${ entities.attributes.source == 'wwlln' && entities.state < 50 }

used in the Map card.

could this be done?

  - type: conditional
    conditions:
      - entity: binary_sensor.lightning_active
        state: 'on'
    card:
      type: custom:config-template-card
      card: 
        type: custom:hui-map
        title: Lightning strikes conditional template map
        entities: `${ entities.attributes.source == 'wwlln' && entities.state < 50 }`

above wont work (and I have also tried entity.state, state.state…):

states.state:

please have a look ho to create a list of entities based on the above criteria?
thanks

TheMunchkins · October 11, 2019, 2:42pm

Your card creates a lot of “render_template” and event websocket API requests, and by a lot I mean up to 4000 times in just a few seconds. This results in HA slowing down and/or crashing the UI due to exceeding the max number of pending http messages.

So if anyone sees something along the lines of
“[homeassistant.components.websocket_api.http.connection] Client exceeded max pending messages [2]: 512”, this card may be the cause of it. However, this isn’t the only one that could cause this. Anything that creates to many http requests could.

iantrich · October 11, 2019, 2:54pm

It doesn’t use the backend to render templates?

TheMunchkins · October 11, 2019, 2:59pm

Can’t really say where exactly the problem lies, but I can confirm that those http requests are being made from your card. Removing it, removes those requests.

I activated the websocket debug logs, which confirmed those requests were coming from your card as well.

logger:
default: info
logs:
homeassistant.components.websocket_api: debug

iantrich · October 11, 2019, 3:38pm

Saying you removed my card doesn’t really mean it was my card. There are cards defined within. Off the top of my head for things I know that use the backend render are card-mod and the markdown card

sharing your configuration would help

TheMunchkins · October 12, 2019, 3:22pm

Removing it may not necessarily mean it’s your card, yea, but along with all the other pointers there’s almost no other possibility. Yes, card-mod and markdown card both do that, and both will cause the exact same problem if they create too many requests which can happen if you use the “style” option from card-mod on too many cards. Unfortunately, I no longer have the configuration I was using while this was occurring as I was forced to remove it. It’s possible that it was conflicting with card-mod which resulted in this happening.

I hope this didnt feel too personal. I just thought it was important to report this as there are a lot of integrations/plugins that unintentionally contribute to this problem without knowing. The result is a very slow running HA.

iantrich · October 12, 2019, 3:41pm

My guess would be that you didn’t restrict the config-template-card entities, which means it updates on every event and as you had it coupled with card-mod it was evaluating a lot of templates on the backend. The entities option should almost always be set, I really can’t think of a good reason that you wouldn’t and maybe it should just be required

tom_l · October 29, 2019, 2:36pm

Hey Ian, can you see what have I done wrong in the following template?

I expected to see a yellow image when the wind speed was 25 knots but I got green instead. I am getting blue images below 10 Knots.

- type: 'custom:config-template-card'
  entities: sensor.bom_hobart_wind_gust_kt
  variables:
    - states['sensor.bom_hobart_wind_gust_kt'].state
  card:
    type: 'custom:hui-picture-entity-card'
    entity: sensor.bom_hobart_wind_direction
    show_name: false
    show_state: false
    state_image:
      CALM: /local/icons/wind/CALM.png 
      E: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'E-blu.png' : 10 < vars[0] <= 20 ? 'E-grn.png' : 20 < vars[0] <= 30 ? 'E-yel.png' : 'E-red.png' ) }"
      ENE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'ENE-blu.png' : 10 < vars[0] <= 20 ? 'ENE-grn.png' : 20 < vars[0] <= 30 ? 'ENE-yel.png' : 'ENE-red.png' ) }"
      ESE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'ESE-blu.png' : 10 < vars[0] <= 20 ? 'ESE-grn.png' : 20 < vars[0] <= 30 ? 'ESE-yel.png' : 'ESE-red.png' ) }"
      'N': "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'N-blu.png' : 10 < vars[0] <= 20 ? 'N-grn.png' : 20 < vars[0] <= 30 ? 'N-yel.png' : 'N-red.png' ) }"
      NE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NE-blu.png' : 10 < vars[0] <= 20 ? 'NE-grn.png' : 20 < vars[0] <= 30 ? 'NE-yel.png' : 'NE-red.png' ) }"
      NNE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NNE-blu.png' : 10 < vars[0] <= 20 ? 'NNE-grn.png' : 20 < vars[0] <= 30 ? 'NNE-yel.png' : 'NNE-red.png' ) }"
      NNW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NNW-blu.png' : 10 < vars[0] <= 20 ? 'NNW-grn.png' : 20 < vars[0] <= 30 ? 'NNW-yel.png' : 'NNW-red.png' ) }"
      NW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NW-blu.png' : 10 < vars[0] <= 20 ? 'NW-grn.png' : 20 < vars[0] <= 30 ? 'NW-yel.png' : 'NW-red.png' ) }"
      S: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'S-blu.png' : 10 < vars[0] <= 20 ? 'S-grn.png' : 20 < vars[0] <= 30 ? 'S-yel.png' : 'S-red.png' ) }"
      SE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SE-blu.png' : 10 < vars[0] <= 20 ? 'SE-grn.png' : 20 < vars[0] <= 30 ? 'SE-yel.png' : 'SE-red.png' ) }"
      SSE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SSE-blu.png' : 10 < vars[0] <= 20 ? 'SSE-grn.png' : 20 < vars[0] <= 30 ? 'SSE-yel.png' : 'SSE-red.png' ) }"
      SSW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SSW-blu.png' : 10 < vars[0] <= 20 ? 'SSW-grn.png' : 20 < vars[0] <= 30 ? 'SSW-yel.png' : 'SSW-red.png' ) }"
      SW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SW-blu.png' : 10 < vars[0] <= 20 ? 'SW-grn.png' : 20 < vars[0] <= 30 ? 'SW-yel.png' : 'SW-red.png' ) }"
      W: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'W-blu.png' : 10 < vars[0] <= 20 ? 'W-grn.png' : 20 < vars[0] <= 30 ? 'W-yel.png' : 'W-red.png' ) }"
      WNW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'WNW-blu.png' : 10 < vars[0] <= 20 ? 'WNW-grn.png' : 20 < vars[0] <= 30 ? 'WNW-yel.png' : 'WNw-red.png' ) }"
      WSW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'WSW-blu.png ': 10 < vars[0] <= 20 ? 'WSW-grn.png' : 20 < vars[0] <= 30 ? 'WSW-yel.png' : 'WSw-red.png' ) }"

JTPublic · October 30, 2019, 2:25pm

Wonder if your states[‘sensor.bom_hobart_wind_gust_kt’].state is returning numbers. My coloring-changing temperature template uses parseInt() or parseFloat() for numeric conditions, maybe try

parseInt(vars[0]) <= 10

tom_l · October 30, 2019, 2:27pm

Solution (thanks to Thomas Loven):

- type: 'custom:config-template-card'
  entities: sensor.bom_hobart_wind_gust_kt
  variables:
    - states['sensor.bom_hobart_wind_gust_kt'].state
  card:
    type: 'custom:hui-picture-entity-card'
    entity: sensor.bom_hobart_wind_direction
    show_name: false
    show_state: false
    state_image:
      CALM: /local/icons/wind/CALM.png 
      E: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'E-blu.png' : vars[0] <= 20 ? 'E-grn.png' : vars[0] <= 30 ? 'E-yel.png' : 'E-red.png' ) }"
      ENE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'ENE-blu.png' : vars[0] <= 20 ? 'ENE-grn.png' : vars[0] <= 30 ? 'ENE-yel.png' : 'ENE-red.png' ) }"
      ESE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'ESE-blu.png' : vars[0] <= 20 ? 'ESE-grn.png' : vars[0] <= 30 ? 'ESE-yel.png' : 'ESE-red.png' ) }"
      'N': "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'N-blu.png' : vars[0] <= 20 ? 'N-grn.png' : vars[0] <= 30 ? 'N-yel.png' : 'N-red.png' ) }"
      NE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NE-blu.png' : vars[0] <= 20 ? 'NE-grn.png' : vars[0] <= 30 ? 'NE-yel.png' : 'NE-red.png' ) }"
      NNE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NNE-blu.png' : vars[0] <= 20 ? 'NNE-grn.png' : vars[0] <= 30 ? 'NNE-yel.png' : 'NNE-red.png' ) }"
      NNW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NNW-blu.png' : vars[0] <= 20 ? 'NNW-grn.png' : vars[0] <= 30 ? 'NNW-yel.png' : 'NNW-red.png' ) }"
      NW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'NW-blu.png' : vars[0] <= 20 ? 'NW-grn.png' : vars[0] <= 30 ? 'NW-yel.png' : 'NW-red.png' ) }"
      S: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'S-blu.png' : vars[0] <= 20 ? 'S-grn.png' : vars[0] <= 30 ? 'S-yel.png' : 'S-red.png' ) }"
      SE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SE-blu.png' : vars[0] <= 20 ? 'SE-grn.png' : vars[0] <= 30 ? 'SE-yel.png' : 'SE-red.png' ) }"
      SSE: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SSE-blu.png' : vars[0] <= 20 ? 'SSE-grn.png' : vars[0] <= 30 ? 'SSE-yel.png' : 'SSE-red.png' ) }"
      SSW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SSW-blu.png' : vars[0] <= 20 ? 'SSW-grn.png' : vars[0] <= 30 ? 'SSW-yel.png' : 'SSW-red.png' ) }"
      SW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'SW-blu.png' : vars[0] <= 20 ? 'SW-grn.png' : vars[0] <= 30 ? 'SW-yel.png' : 'SW-red.png' ) }"
      W: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'W-blu.png' : vars[0] <= 20 ? 'W-grn.png' : vars[0] <= 30 ? 'W-yel.png' : 'W-red.png' ) }"
      WNW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'WNW-blu.png' : vars[0] <= 20 ? 'WNW-grn.png' : vars[0] <= 30 ? 'WNW-yel.png' : 'WNw-red.png' ) }"
      WSW: "${'/local/icons/wind/' + ( vars[0] <= 10 ? 'WSW-blu.png ': vars[0] <= 20 ? 'WSW-grn.png' : vars[0] <= 30 ? 'WSW-yel.png' : 'WSw-red.png' ) }"

You can’t chain m < x < n comparisons like I did.

iantrich · November 18, 2019, 12:09pm

Grab the file from the release or use HACS

tom_l · November 22, 2019, 5:59am

Hey Ian, This appears to be stopping firefox from responding (Chrome seems to ignore it):

Not sure if it’s my config (which seems to be working) or the card.

I opened an issue.

HITChris · January 14, 2020, 4:53am

David’s ‘minutes ago’ conversion is a good start, but has anyone come up with a good way of converting attr last_changed to relative time?

SeLLeRoNe · January 14, 2020, 9:48am

Hey @tom_l
Would you mind sharing the outcome of that?
I am curious to see what it does

Thanks

tom_l · January 14, 2020, 9:58am

More here: Yet another wind compass - with wind speed indication