📝 100% Templatable Lovelace Configurations

JTPublic · March 21, 2019, 1:38am

Depending on your states value, this works for me:

  - type: custom:config-template-card
    variables:
      - states['device_tracker.a_phone'].attributes['battery']
      - states['device_tracker.a_phone'].attributes['battery_charging']
    config:
      type: custom:hui-entities-card
      title: TESTING
      entities: 
      - entity: binary_sensor.carport     
        name: "${'Battery Level' + '\xa0'.repeat(16) + vars[0]}"                 
      - entity: binary_sensor.carport     
        name: "${'Battery Level' + '\xa0'.repeat(16) + ((vars[0] >= 100) ? 'Excellent' : (vars[0] > 80) ? 'Good' : (vars[0] > 60) ? 'Fair' : 'Weak')}"

DavidFW1960 · March 21, 2019, 2:00am

I screwed up the state.

This works:

          - type: 'custom:config-template-card'
            variables:
              - states['sensor.sonoff1_2914_status'].attributes['MqttCount']
              - states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff1_2914_status'].state
              - states['sensor.sonoff2_3110_status'].attributes['MqttCount']
              - states['sensor.sonoff2_3110_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff2_3110_status'].state
              - states['sensor.sonoff5_1083_status'].attributes['MqttCount']
              - states['sensor.sonoff5_1083_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff5_1083_status'].state
              - states['sensor.sonoff6_3719_status'].attributes['MqttCount']
              - states['sensor.sonoff6_3719_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff6_3719_status'].state
            entities:
              - sensor.sonoff1_2914_status
              - sensor.sonoff2_3110_status
              - sensor.sonoff5_1083_status
              - sensor.sonoff6_3719_status
            card:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - entity: sensor.sonoff1_2914_status
                  name: "${'Coffee' + '\xa0'.repeat(16) + 'MQTT ' + vars[0] + '\xa0'.repeat(4) + 'WiFi ' + vars[1] + '\xa0'.repeat(2) + ( vars[2] >= 100 ? 'Excellent' : vars[2] >= 80 ? 'Good' : vars[2] >= 60 ? 'Fair' : 'Weak')}"
                - entity: sensor.sonoff2_3110_status
                  name: "${'Toothbrush' + '\xa0'.repeat(7) + 'MQTT ' + vars[3] + '\xa0'.repeat(4) + 'WiFi ' + vars[4] + '\xa0'.repeat(2) + ( vars[5] >= 100 ? 'Excellent' : vars[5] >= 80 ? 'Good' : vars[5] >= 60 ? 'Fair' : 'Weak')}"
                - entity: sensor.sonoff5_1083_status
                  name: "${'Garage' + '\xa0'.repeat(15) + 'MQTT ' + vars[6] + '\xa0'.repeat(4) + 'WiFi ' + vars[7] + '\xa0'.repeat(2) + ( vars[8] >= 100 ? 'Excellent' : vars[8] >= 80 ? 'Good' : vars[8] >= 60 ? 'Fair' : 'Weak')}"
                - entity: sensor.sonoff6_3719_status
                  name: "${'Alarm' + '\xa0'.repeat(17) + 'MQTT ' + vars[9] + '\xa0'.repeat(4) + 'WiFi ' + vars[10] + '\xa0'.repeat(2) + ( vars[11] >= 100 ? 'Excellent' : vars[11] >= 80 ? 'Good' : vars[11] >= 60 ? 'Fair' : 'Weak')}"

iantrich · March 21, 2019, 2:44am

This is so cool and so scary at the same time…

DavidFW1960 · March 21, 2019, 2:49am

I don’t suppose I can calculate anything? like state/2-100 to convert to dBm?

iantrich · March 21, 2019, 2:49am

If you can do it in JS, you can do it in the template; yes

DavidFW1960 · March 21, 2019, 3:23am

Hopefully someone can post an example… I don’t seem to be able to work out how.

JTPublic · March 21, 2019, 3:53am

Would the calculation here help?

DavidFW1960 · March 21, 2019, 4:20am

genius actually…

              entities:
                - entity: sensor.sonoff1_2914_status
                  name: "${'Coffee' + '\xa0'.repeat(16) + 'MQTT ' + vars[0] + '\xa0'.repeat(4) + 'WiFi ' + vars[1] + '\xa0'.repeat(3) + ( vars[2] >= 100 ? 'Excellent' : vars[2] >= 80 ? 'Good' : vars[2] >= 60 ? 'Fair' : 'Weak' ) + '\xa0'.repeat(3) + ((parseInt(vars[2]) / 2) - 100 ) + 'dBm'}"
                - entity: sensor.sonoff2_3110_status
                  name: "${'Toothbrush' + '\xa0'.repeat(7) + 'MQTT ' + vars[3] + '\xa0'.repeat(4) + 'WiFi ' + vars[4] + '\xa0'.repeat(3) + ( vars[5] >= 100 ? 'Excellent' : vars[5] >= 80 ? 'Good' : vars[5] >= 60 ? 'Fair' : 'Weak' ) + '\xa0'.repeat(3) + ((parseInt(vars[5]) / 2) - 100 ) + 'dBm'}"
                - entity: sensor.sonoff5_1083_status
                  name: "${'Garage' + '\xa0'.repeat(15) + 'MQTT ' + vars[6] + '\xa0'.repeat(4) + 'WiFi ' + vars[7] + '\xa0'.repeat(3) + ( vars[8] >= 100 ? 'Excellent' : vars[8] >= 80 ? 'Good' : vars[8] >= 60 ? 'Fair' : 'Weak' ) + '\xa0'.repeat(3) + ((parseInt(vars[8]) / 2) - 100 ) + 'dBm'}"
                - entity: sensor.sonoff6_3719_status
                  name: "${'Alarm' + '\xa0'.repeat(17) + 'MQTT ' + vars[9] + '\xa0'.repeat(4) + 'WiFi ' + vars[10] + '\xa0'.repeat(3) + ( vars[11] >= 100 ? 'Excellent' : vars[11] >= 80 ? 'Good' : vars[11] >= 60 ? 'Fair' : 'Weak' ) + '\xa0'.repeat(3) + ((parseInt(vars[11]) / 2) - 100 ) + 'dBm'}"

JTPublic · March 21, 2019, 3:02pm

Is it possible to template something like !secret garage_cam?
This does not work for me, I got Secret ${var[0]+’_cam’} not defined.

  - type: custom:config-template-card
    variables:
      - ('garage')
    config:     
      type: custom:hui-picture-elements-card
      image: !secret "${vars[0]+'_cam'}"
      elements:  ....

iantrich · March 21, 2019, 4:52pm

templates are for the full text, not just portions.

image: "${'!secret ' + vars[0] + '_cam'}"

JTPublic · March 21, 2019, 4:58pm

No go for variables: - (’!secret garage_cam’) either.
Not possible for !secret then?

DavidFW1960 · March 21, 2019, 9:13pm

I’m done screwing with this now I think… I just added some icons as well and reorganised some of the text.

          - type: 'custom:config-template-card'
            variables:
              - states['sensor.sonoff1_2914_status'].attributes['MqttCount']
              - states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff1_2914_status'].state
              - states['sensor.sonoff2_3110_status'].attributes['MqttCount']
              - states['sensor.sonoff2_3110_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff2_3110_status'].state
              - states['sensor.sonoff5_1083_status'].attributes['MqttCount']
              - states['sensor.sonoff5_1083_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff5_1083_status'].state
              - states['sensor.sonoff6_3719_status'].attributes['MqttCount']
              - states['sensor.sonoff6_3719_status'].attributes['WiFi LinkCount']
              - states['sensor.sonoff6_3719_status'].state
            entities:
              - sensor.sonoff1_2914_status
              - sensor.sonoff2_3110_status
              - sensor.sonoff5_1083_status
              - sensor.sonoff6_3719_status
            card:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - entity: sensor.sonoff1_2914_status
                  name: "${'Coffee' + '\xa0'.repeat(16) + 'MQTT ' + vars[0] + '\xa0'.repeat(4) + 'WiFi ' + vars[1] + '\xa0'.repeat(3) + ((parseInt(vars[2]) / 2) - 100 ) + '\xa0' + 'dBm' + '\xa0'.repeat(3) + ( vars[2] >= 100 ? 'Excellent' : vars[2] >= 80 ? 'Good' : vars[2] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[2] >= 100 ? 'mdi:wifi' : vars[2] >= 80 ? 'mdi:wifi-strength-3' : vars[2] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff2_3110_status
                  name: "${'Toothbrush' + '\xa0'.repeat(7) + 'MQTT ' + vars[3] + '\xa0'.repeat(4) + 'WiFi ' + vars[4] + '\xa0'.repeat(3) + ((parseInt(vars[5]) / 2) - 100 ) + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[5] >= 100 ? 'Excellent' : vars[5] >= 80 ? 'Good' : vars[5] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[5] >= 100 ? 'mdi:wifi' : vars[5] >= 80 ? 'mdi:wifi-strength-3' : vars[5] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff5_1083_status
                  name: "${'Garage' + '\xa0'.repeat(15) + 'MQTT ' + vars[6] + '\xa0'.repeat(4) + 'WiFi ' + vars[7] + '\xa0'.repeat(3) + ((parseInt(vars[8]) / 2) - 100 ) + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[8] >= 100 ? 'Excellent' : vars[8] >= 80 ? 'Good' : vars[8] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[8] >= 100 ? 'mdi:wifi' : vars[8] >= 80 ? 'mdi:wifi-strength-3' : vars[8] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"
                - entity: sensor.sonoff6_3719_status
                  name: "${'Alarm' + '\xa0'.repeat(17) + 'MQTT ' + vars[9] + '\xa0'.repeat(4) + 'WiFi ' + vars[10] + '\xa0'.repeat(3) + ((parseInt(vars[11]) / 2) - 100 ) + '\xa0' +  'dBm' + '\xa0'.repeat(3) + ( vars[11] >= 100 ? 'Excellent' : vars[11] >= 80 ? 'Good' : vars[11] >= 60 ? 'Fair' : 'Weak' )}"
                  icon: "${vars[11] >= 100 ? 'mdi:wifi' : vars[11] >= 80 ? 'mdi:wifi-strength-3' : vars[11] >= 60 ? 'mdi:wifi-strength-2' : 'mdi:wifi-strength-1' }"

MatthewFlamm · March 23, 2019, 3:03pm

This is awesome. Thanks @iantrich!

I have a custom component that has weather forecasts, and I was starting down the road trying to figure out how to configure existing custom weather cards to simply display the text forecast. Using your card, with the existing markdown card makes it very straightforward!

One question: How can I covert a datetime like:
2019-03-23T10:00:00-04:00
Into a day off the week like Saturday?

I currently have Day0 but would like the day of week.

- type: 'custom:config-template-card'
  variables:
    - states['weather.home'].attributes['forecast'][0].detailed_description
  entities:
    weather.home
  card:
    type: 'custom:hui-markdown-card'
    title: Weather Forecast
    content: "${'**Day0** <br/>' + vars[0]}"

iantrich · March 23, 2019, 3:17pm

new Date(dateString).getDay()

I believe should work.

MatthewFlamm · March 23, 2019, 5:07pm

Holy cow! We can define reusable functions too!

I cant figure out if the template can be split onto multiple lines, is this possible?

- type: 'custom:config-template-card'
  variables:
     - states['weather.home'].attributes['forecast'][0].datetime
     - states['weather.home'].attributes['forecast'][0].detailed_description
     - states['weather.home'].attributes['forecast'][2].datetime
     - states['weather.home'].attributes['forecast'][2].detailed_description

   entities:
      weather.home
   card:
     type: 'custom:hui-markdown-card'
     title: Weather Forecast
     content: "${function weekday(datetime){var options={ weekday: 'long'}; return new Date(datetime).toLocaleDateString('en-US', options);} '**' + weekday(vars[0])  +  '**<br/>' + vars[1] + '<br/>**' + weekday(vars[2])  +  '** <br/>' + vars[3]}"

iantrich · March 23, 2019, 5:11pm

https://yaml-multiline.info/

MatthewFlamm · March 23, 2019, 5:30pm

i have tried >, >-, |, and |- with no luck

Example:

content: >-
        "${function weekday(datetime){var options={ weekday: 'long'}; return new Date(datetime).toLocaleDateString('en-US', options);} '**' + weekday(vars[0])  +  '** <br/>' + vars[1] + '<br/>**' + weekday(vars[2])  +  '** <br/>' + vars[3]}"

Nevermind, the whitespace is super-super sensitive here. I had to get rid of a lot of internal and trailing whitespace. |- ended up working

MatthewFlamm · March 24, 2019, 12:46am

Thanks for the help, here is what I’ve landed on for now.

- type: 'custom:config-template-card'
  variables:
      - states['weather.home'].attributes['forecast']
  entities:
    weather.home
  card:
    type: 'custom:hui-markdown-card'
    title: Weather Forecast
    content: |-
      "${function forecast(item){var options={ weekday:'long'};
      var day = '**' + new Date(item.datetime).toLocaleDateString('en-US', options) + '**';
      if(!item.daytime){var day = day + ' **Night**';}
      return  day + '<br/>' + item.detailed_description;}
      var text='';
      for(var i=0; i<5; i++){var text=text+forecast(vars[0][i]) + '<br/>';}
      text}"

JTPublic · March 24, 2019, 1:02am

Does the same function still work if, let say, you have a second markdown card without declaring it again?

MatthewFlamm · March 24, 2019, 1:07am

Doesn’t seem to work for me, but I am a javascript novice.