100% Templatable Lovelace Configurations

templates
lovelace
Tags: #<Tag:0x00007fd07736a318> #<Tag:0x00007fd07736a070>

#104

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:

image

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

#105

Thanks for your work, great card


#106

Good job @iantrich :tada:


#107

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

Cheers


#108

Hi @iantr
did you have any chance to look into my tests?

So far I didn’t manage to have anything working with this card (well, I tested two things to be fair :D)


#109

Tried that as well… still doesn’t work… Can you show how to use it in my template please?


#110

If you use Tasmota version 6.2.1.21 or so there’s a new MQTT status that pops up automagically as a sensor. You can see my config in the template to display it here. (I am using MQTT Discovery so I have 2 sensors for each switch a status one and a control one)


#111

You don’t have the most recent code orneed to clear your cache


#112

I don’t use MQTT Discovery, so I guess I’ll have to create it myself :slight_smile:

Thanks


#113

You’re right I didn’t…
But the Tracker Card was telling me I did!

image

I’ve now copied the latest code across manually and it works.
Thanks and sorry for the misunderstanding.


#114

I ran into the same issue as you klogg, same error, then same custom_updater thing. I posted over on the issue on github and found the source of the problem. Not sure who “owns” the issue, probably custom_updater.


#115

Just want to say thanks to this awesome card!!
Opens up so much options and possibilities, also keep making changes so much easier, changes used to required restart now can be done all in lovelace yaml with a refresh.

I vote for the temp_var also.


#116

Just to post another example, I managed to color a group of person entities based on their individual states. As I mentioned in the comment with it, it’s probably better to just use CustomUI for stuff like this:


#117

Maybe it would be possible to support any number of temp_vars:

temp_vars:
  var_1: "..."
  var_2: "..."

Although you could probably still achieve that by just returning an object to temp_vars directly:

temp_vars: "{'var_1': '...', 'var_2': '...'}"

#118

Thanks to @iantrich got it working. In case anyone else is interested:

image

           - 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' + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + 'MQTT ' + states['sensor.sonoff1_2914_status'].attributes['MqttCount'] + '\xa0\xa0\xa0\xa0' + 'WiFi ' + states['sensor.sonoff1_2914_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff2_3110_status
                  name: "${'Toothbrush' + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + 'MQTT ' + states['sensor.sonoff2_3110_status'].attributes['MqttCount'] + '\xa0\xa0\xa0\xa0' + 'WiFi ' + states['sensor.sonoff2_3110_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff5_1083_status
                  name: "${'Garage' + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + 'MQTT ' + states['sensor.sonoff5_1083_status'].attributes['MqttCount'] + '\xa0\xa0\xa0\xa0' + 'WiFi ' + states['sensor.sonoff5_1083_status'].attributes['WiFi LinkCount']}"
                - entity: sensor.sonoff6_3719_status
                  name: "${'Alarm' + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + 'MQTT ' + states['sensor.sonoff6_3719_status'].attributes['MqttCount'] + '\xa0\xa0\xa0\xa0' + 'WiFi ' + states['sensor.sonoff6_3719_status'].attributes['WiFi LinkCount']}"

#119

Good looking card; god awful configuration :rofl: it looks hideous, lol


#120

It looks even worse in the GUI editor… the above is my yaml version where I do my edits and then paste into the raw editor… the GUI version is even worse…
I’m open to any suggestions on how to improve it but am just grateful I can show the information without creating sensors.
Here’s the GUI version:

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

I tell a lie… it’s changed even from what I saw last time… Note it’s changed the spaces as well…


#121

This may be a dumb question, but can you replace:

'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'

with

'\xa0'.repeat(16)


#122

well shit! yes you can! Thanks.


#123

It does? Where?