📝 100% Templatable Lovelace Configurations

Mariusthvdb · March 14, 2019, 7:23pm

wow that’s very nice. Very nice indeed, and exactly what I was looking for. In the Frontend that is.

But what unreadable, and difficult to debug config file is this going to be, if we need to do that for all entities. Nested Custom cards, modders, what have you, and each entity having its own template…and several cards having their own way of more or less supporting templates, some Jinja, some CSS, and of course JS…

This is ever going to be an interface for the broader public is rather unlikely, and, tbh, it is getting much more difficult by the week…

Don’t get me wrong, I really really need these templates and option to do so, but feel we should get back to the dev’s (or need we say STAFF now) and ask if this can’t be included in the native architecture. reintroduce Customize, or custom-ui even (which still works btw, but was never officially supported)

iantrich · March 14, 2019, 8:05pm

The devs at this point are pretty much me and balloob…need more bodies

klogg · March 15, 2019, 12:12am

I don’t get it, this still doesn’t work…

Does it make any difference that I have a split Lovelace config over several !include files?

title: Test View
cards:

  - type: custom:compact-custom-header

  - type: 'custom:config-template-card'
    config:
      type: custom:hui-entities-card
      title: TESTING
      entities: 
        - entity: switch.hall_light
          icon: "${states['switch.hall_light'].state === 'on' ? 'mdi:music' : 'mdi:sleep'}"

...
followed by more cards
...

Something is attempting to be rendered because I get a slight card misalignment where this card should be.

DavidFW1960 · March 15, 2019, 1:55am

Trying to use this to show a WiFi link count for a sonoff switch…
In the template editor (dev-tools) this shows the number:
{{state_attr(‘sensor.sonoff1_2914_status’ ,‘WiFi LinkCount’)}}

I’ve tried this:

  - type: 'custom:config-template-card'
    config:
      type: 'custom:hui-entity-card'
      entities:
        - entity: sensor.sonoff1_2914_status
          name: "${states['sensor.sonoff1_2914_status'].attributes.WiFi_LinkCount'}"

But it’s just blank. Is there any way I can display this or do I just need to create template sensors?

iantrich · March 15, 2019, 3:05am

custom:hui-entities-card not entity

iantrich · March 15, 2019, 3:11am

I’ve been doing all my testing in storage mode, can’t think of what could make a difference as in the end the front end just has the full configuration. Search the .js file for the console.log statements. Uncomment those and see if there is anything strange being output. I was able to do your exact example, just switching out the entity for mine, without issue.

You sure you don’t have any errors in your browser console?

DavidFW1960 · March 15, 2019, 3:14am

Still blank…

type: 'custom:config-template-card'
config:
  type: 'custom:hui-entities-card'
  entities:
    - entity: sensor.sonoff1_2914_status
      name: "${states.sensor.sonoff1_2914_status.attributes.MqttCount}"
    - entity: sensor.sonoff1_2914_status
      name: "${states.sensor.sonoff1_2914_status.attributes['WiFi LinkCount']}"

Those strings show the correct value in the template editor…

iantrich · March 15, 2019, 3:26am

I didn’t look closely enough at your previous post after seeing the entity thing. This is not like the template editor, this is just Javascript. The states object has each entity on it, so you need to access it appropriately "${states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']}"

DavidFW1960 · March 15, 2019, 3:34am

Ah!!! Thought I tried that…
Now:

Can I make it show the description as well as the state?

type: 'custom:config-template-card'
config:
  type: 'custom:hui-entities-card'
  entities:
    - entity: sensor.sonoff1_2914_status
      name: "${states['sensor.sonoff1_2914_status'].attributes['MqttCount']}"
    - entity: sensor.sonoff1_2914_status
      name: "${states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']}"

iantrich · March 15, 2019, 3:38am

I don’t know what description you are referring to

DavidFW1960 · March 15, 2019, 3:41am

I’d like the icon, text like MQTT Disconnects and then the number (1 in this case)
Similar for WiFi Disconnects. The graphic as I posted it doesn’t show much useful information to see what it is showing… Basically a description on each line for what it is showing.

I have 2 cards at the moment:

I’d love to just have one and show the MQTT & Wifi info for each switch…
The state is just the RSSI and the MQTT and WiFi are attributes of that entity.

DavidFW1960 · March 15, 2019, 4:10am

So I’m down to this now:

          - type: 'custom:config-template-card'
            config:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - sensor.sonoff1_2914_status
                - entity: sensor.sonoff1_2914_status
                  name: "${states['sensor.sonoff1_2914_status'].attributes['MqttCount']}"
                - entity: sensor.sonoff1_2914_status
                  name: "${states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']}"
                - sensor.sonoff2_3110_status
                - entity: sensor.sonoff2_3110_status
                  name: "${states['sensor.sonoff2_3110_status'].attributes['MqttCount']}"
                - entity: sensor.sonoff2_3110_status
                  name: "${states['sensor.sonoff2_3110_status'].attributes['WiFi LinkCount']}"
                - sensor.sonoff5_1083_status
                - entity: sensor.sonoff5_1083_status
                  name: "${states['sensor.sonoff5_1083_status'].attributes['MqttCount']}"
                - entity: sensor.sonoff5_1083_status
                  name: "${states['sensor.sonoff5_1083_status'].attributes['WiFi LinkCount']}"
                - sensor.sonoff6_3719_status
                - entity: sensor.sonoff6_3719_status
                  name: "${states['sensor.sonoff6_3719_status'].attributes['MqttCount']}"
                - entity: sensor.sonoff6_3719_status
                  name: "${states['sensor.sonoff6_3719_status'].attributes['WiFi LinkCount']}"

Still ugly, duplicates the RSSI on all 3 lines and I can’t tell it it’s displaying MQTT or WiFi… so if I could get rid of the extra RSSI’s and label the MQTT and Wifi that would be perfect…

DavidFW1960 · March 15, 2019, 4:36am

OK how about this…

          - type: 'custom:config-template-card'
            config:
              type: 'custom:hui-entities-card'
              title: MQTT & Wifi Connections
              show_header_toggle: false
              entities:
                - entity: sensor.sonoff1_2914_status
                  name: "${'Coffee MQTT ' + states['sensor.sonoff1_2914_status'].attributes['MqttCount'] + ' WiFi ' + states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff2_3110_status
                  name: "${'Toothbrush MQTT ' + states['sensor.sonoff2_3110_status'].attributes['MqttCount'] + ' WiFi ' + states['sensor.sonoff2_3110_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff5_1083_status
                  name: "${'Garage MQTT ' + states['sensor.sonoff5_1083_status'].attributes['MqttCount'] + ' WiFi ' + states['sensor.sonoff5_1083_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff6_3719_status
                  name: "${'Alarm MQTT ' + states['sensor.sonoff6_3719_status'].attributes['MqttCount'] + ' WiFi ' + states['sensor.sonoff6_3719_status'].attributes['WiFi LinkCount']}"

Great card and I learned a bunch. Thanks @iantrich

Any way to line up the MQTT and Wifi over to the right a bit? It seems to ignore spacing

iantrich · March 15, 2019, 5:34am

&nbsp maybe?

DavidFW1960 · March 15, 2019, 5:41am

not sure how to add those… it goes blank if I add here
"${'Garage &nbsp MQTT ’ + states
"${‘Garage’ + &nbsp + 'MQTT ’ + states
"${‘Garage’ + ‘&nbsp’ + ’ MQTT ’ + states

any other ways I can do that?

thomasloven · March 15, 2019, 8:27am

 

…

Sometimes the 10 character minimum allowed length of a forum post is kind of anoying, don’t you think?

klogg · March 15, 2019, 9:44am

Ok, so yes I do have console errors…

Just to be clear, with this config, the button card works but the entities card doesn’t:

  - type: 'custom:config-template-card'
    config:
      type: 'custom:hui-entity-button-card'
      name: "${this.hass.states['switch.hall_light'].state === 'on' ? 'light is on' : 'Light is off'}"
      entity: switch.hall_light
      icon: "${this.hass.states['switch.hall_light'].state === 'on' ? 'mdi:music' : 'mdi:sleep'}"

  - type: 'custom:config-template-card'
    config:
      type: 'custom:hui-entities-card'
      title: TESTING
      show_header_toggle: false
      entities:
        - entity: switch.hall_light
          name: "${this.hass.states['switch.hall_light'].state === 'on' ? 'light is on' : 'light is off'}"
        - entity: switch.hall_light
          icon: "${this.hass.states['switch.hall_light'].state === 'on' ? 'mdi:music' : 'mdi:sleep'}"

and this is the console error:

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js?track=true:2309)
    at Object.entries.forEach.entry (config-template-card.js?track=true:2313)
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js?track=true:2309)
    at Object.entries.forEach.entry (config-template-card.js?track=true:2313)
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js?track=true:2309)
    at Object.entries.forEach.entry (config-template-card.js?track=true:2313)
    at Array.forEach (<anonymous>)
_enqueueUpdate	@	config-template-card.js?track=true:1838
async function (async)		
_enqueueUpdate	@	config-template-card.js?track=true:1824
requestUpdate	@	config-template-card.js?track=true:1809
set	@	config-template-card.js?track=true:1554
setConfig	@	config-template-card.js?track=true:2292
create_card_element_createElement	@	4013522….chunk.js:4823
createCardElement	@	4013522….chunk.js:4823
createCardElement	@	4013522….chunk.js:5614
_rebuildCard	@	4013522….chunk.js:5693
element.addEventListener.ev	@	4013522….chunk.js:5614
fireEvent	@	app-1011b616.js:966
customElements.whenDefined.then	@	4013522….chunk.js:4823
Promise.then (async)		
createCardElement	@	4013522….chunk.js:4823
createCardElement	@	4013522….chunk.js:5614
config.cards.forEach	@	4013522….chunk.js:5693
_createCards	@	4013522….chunk.js:5693
updated	@	4013522….chunk.js:5693
performUpdate	@	app-1011b616.js:93
_enqueueUpdate	@	app-1011b616.js:93
async function (async)		
_enqueueUpdate	@	app-1011b616.js:93
requestUpdate	@	app-1011b616.js:93
set	@	app-1011b616.js:93
hui_view_HUIView	@	4013522….chunk.js:5614
_selectView	@	4013522….chunk.js:5913
async function (async)		
_selectView	@	4013522….chunk.js:5913
updated	@	4013522….chunk.js:5913
performUpdate	@	app-1011b616.js:93
_enqueueUpdate	@	app-1011b616.js:93
async function (async)		
_enqueueUpdate	@	app-1011b616.js:93
requestUpdate	@	app-1011b616.js:93
set	@	app-1011b616.js:93
hui_root_HUIRoot	@	4013522….chunk.js:5693
_clone	@	app-1011b616.js:444
_commitTemplateResult	@	app-1011b616.js:215
commit	@	app-1011b616.js:215
render	@	app-1011b616.js:366
shady_render_render	@	app-1011b616.js:81
update	@	app-1011b616.js:127
performUpdate	@	app-1011b616.js:93
_enqueueUpdate	@	app-1011b616.js:93
async function (async)		
_enqueueUpdate	@	app-1011b616.js:93
requestUpdate	@	app-1011b616.js:93
set	@	app-1011b616.js:93
_fetchConfig	@	4013522….chunk.js:5943
async function (async)		
_fetchConfig	@	4013522….chunk.js:5943
firstUpdated	@	4013522….chunk.js:5943
performUpdate	@	app-1011b616.js:93
_enqueueUpdate	@	app-1011b616.js:93
async function (async)		
_enqueueUpdate	@	app-1011b616.js:93
requestUpdate	@	app-1011b616.js:93
set	@	app-1011b616.js:93
ha_panel_lovelace_LovelacePanel	@	4013522….chunk.js:5913
loadingProm.then	@	app-1011b616.js:3074
Promise.then (async)		
updated	@	app-1011b616.js:3074
performUpdate	@	app-1011b616.js:93
_enqueueUpdate	@	app-1011b616.js:93
async function (async)		
_enqueueUpdate	@	app-1011b616.js:93
requestUpdate	@	app-1011b616.js:93
set	@	app-1011b616.js:93
commit	@	app-1011b616.js:215
commit	@	app-1011b616.js:215
update	@	app-1011b616.js:444
_commitTemplateResult	@	app-1011b616.js:215
commit	@	app-1011b616.js:215
render	@	app-1011b616.js:366
shady_render_render	@	app-1011b616.js:81
update	@	app-1011b616.js:127
performUpdate	@	app-1011b616.js:93
_enqueueUpdate	@	app-1011b616.js:93
async function (async)		
_enqueueUpdate	@	app-1011b616.js:93
requestUpdate	@	app-1011b616.js:93
set	@	app-1011b616.js:93
commit	@	app-1011b616.js:215
commit	@	app-1011b616.js:215
update	@	app-1011b616.js:444
_commitTemplateResult	@	app-1011b616.js:215
commit	@	app-1011b616.js:215
update	@	app-1011b616.js:444
_commitTemplateResult	@	app-1011b616.js:215
commit	@	app-1011b616.js:215
render	@	app-1011b616.js:366
shady_render_render	@	app-1011b616.js:81
update	@	app-1011b616.js:127
performUpdate	@	app-1011b616.js:93
_enqueueUpdate	@	app-1011b616.js:93
async function (async)		
_enqueueUpdate	@	app-1011b616.js:93
requestUpdate	@	app-1011b616.js:93
set	@	app-1011b616.js:93
_updateHass	@	app-1011b616.js:3137
services	@	app-1011b616.js:3137
n	@	core-671132a8.js:1
(anonymous)	@	core-671132a8.js:1
Promise.then (async)		
c	@	core-671132a8.js:1
subscribe	@	core-671132a8.js:1
I	@	core-671132a8.js:1
window.hassConnection.then	@	core-671132a8.js:1
Promise.then (async)		
150	@	core-671132a8.js:1
__webpack_require__	@	core-671132a8.js:1
(anonymous)	@	core-671132a8.js:1
(anonymous)	@	core-671132a8.js:1

Klagio · March 15, 2019, 10:06am

Thanks for your work, great card

ludeeus · March 15, 2019, 10:22am

Good job @iantrich

SeLLeRoNe · March 15, 2019, 11:12am

Hi @DavidFW1960 would you mind share the sensor config? I am interested on having those infos too

Cheers