Yeah, core switched to lazy loading some cards which are the ones you are seeing as not loading
Ah I see, they are listed down the side although that friendly name is sometimes not the same as the card name itself. Ok thanks.
I just accessed github to help with updating the readme, but I see you have already done so. Nice.
The example youāve provided is quite complex, which is good to show the capabilities, but it was a bit overwhelming for me to understand fully.
Hereās a very simple example which has solved a problem that many have struggled with - how to ensure a webpage url is updated so the browser refresh occurs automatically.
card:
type: iframe
url: >-
${'https://myhassio.duckdns.org:8123/local/recordings/front_door.mp4?v='+states['input_text.mp4_timestamp'].state}
entities:
- input_text.mp4_timestamp
type: 'custom:config-template-card'
The webhook in your card senses any update to the timestamp entity, and within seconds, I see the lovelace iframe card updated with the most current mp4 (or image, whateverā¦)
Love it!
5 Likes
Gary, you have no idea how long I was searching for this solution! Thanks!!!
Thatās great this little solution worked for your needs too! Yeah, I had been struggling with coming up with a way to solve playing MP4 clips for quite a while - or automatically refreshing web content in general. Just knew there had to be a way. Thanks for posting!
Any chance of helping a complete lovelace noob with something really quite simple? I keep trying to utilise some of the examples in this thread but I donāt know if Iām getting the indentations wrong or missing out a level of metadata because the result is always a blank view.
Basically Iām trying to build a page which will show the incoming callerās image. The local image URL is held as an sensor value, eg /local/custom_ui/dashboard/images/radio/mary.png but I just canāt figure out how to get the card to show any content. Iāve got lots of other lovelace stuff sorted like card tools and custom header, but this has me beat so far. Iām sorry. I think itās just that the documentation possibly presumes a level of competence with the raw config file that I donāt have. I find YAML and Lovelace to be a sometimes impenetrable combination. THANKS!
You can use either the Picture Card or the Webpage card, both of which just needs the image path to your png file.
Thatās all you need to display the image. However, it wonāt automatically update the image when it changes because of browser caching. You will need to press CTRL-F5 to force the browser to refresh.
Now, as I mentioned in my earlier post, I found a solution to automatic refresh using this lovelace config-template-card, with the code listed above. This will require you to switch from the lovelace visual editor to the code editor where you can insert this code.
If you still donāt see the image being displayed, as a diagnostic test, try entering your https://<your HA URL>/local/custom_ui/dashboard/images/radio/mary.png` to see if it displays.
But would this work with
basically the sensor value will change several times a day and the image ideally should keep up!
Thanks
Try this:
card:
type: picture
image: >-
${states['sensor.incoming_call'].state+'?v='+states['sensor.png_timestamp'].state}
tap_action:
action: none
entities:
- sensor.png_timestamp
type: 'custom:config-template-card'
You will need a new sensor or other entity that changes whenever the png is updated (shown here as sensor.png_timestamp) It doesnāt have to be an actual timestamp, it can be any text string to be appended to the path, as long as it changes to something new.
The sensor.incoming_call is what is what contains the path to the image.
I havenāt tested to see if the ?v= trick actually works for a picture card. If not, change it from picture to āiframeā (webpage card), and image to url. I know it works for it.
Hello everybody. I use custom:color-lite-card in my lovelace card.
- type: custom:color-lite-card
entity: light.zal_rgbw_controll_85
tap_action:
action: none
color_image:
ā/local/ui/floorplan_v2/livingroom_led.pngā
style:
top: 29.7%
left: 45.1%
width: 25.5%
I need to change a color_image src via config-template-card. Someone can help me?
I tried to do so, but it does not work
- type: "custom:config-template-card"
config:
entity: light.zal_parent_glazki_91
name: Spot
type: "custom:color-lite-card"
color_image: >-
${this.hass.states['light.zal_parent_glazki_91'].state === 'on' ? '/local/ui/floorplan_v2/livingroom_led.png' :
this.hass.states['light.zal_parent_glazki_91'].state === 'off' ? '/local/ui/floorplan_v2/livingroom_led4.png'}
This is the best I can come up with @serega.pte to help you to get on track. Iām by no means an expert on this card.
This card lets you use JavaScript syntax in the ā${ }ā template. So you have a check for a state that is āonā, then following the ā?ā will be the value color_image is set to, and if not āonā the ā:ā means āelseā the value that follows. You didnāt need a separate test for off.
This logic will be triggered only when the state of light.zal_parent_glazki_91 changes.
cards:
- type: 'custom:config-template-card'
entities:
- light.zal_parent_glazki_91
card:
type: 'custom:color-lite-card'
entity: light.zal_parent_glazki_91
name: Spot
color_image: >-
${this.hass.states['light.zal_parent_glazki_91'].state === 'on' ?
'/local/ui/floorplan_v2/livingroom_led.png' : '/local/ui/floorplan_v2/livingroom_led4.png' }
EDIT: corrected placement of entities: field.
1 Like
Thanks for helping me Gary. I tried to implement your card like this
- badges: []
cards:
- elements:
card:
type: picture
image: >-
${states['sensor.sim_1'].state+'?v='+states['sensor.png_timestamp'].state}
tap_action:
action: none
entities:
- sensor.png_timestamp
type: 'custom:config-template-card'
layout: horizontal
path: radio2
title: Radio2
type: 'custom:layout-card'
but I just get an error: No card defined
I CAN get it to work with:
- badges: []
cards:
- elements:
- card:
entity: sensor.sim_1
image: '${states[''sensor.sim_1''].state}'
type: 'custom:hui-image-element'
entities:
- sensor.next_liverpool_fixture_home_team
type: 'custom:config-template-card'
image: /local/dashboard/background2.png
type: picture-elements
layout: horizontal
path: radio2
title: Radio2
type: 'custom:layout-card'
but the only problem is I donāt really āneedā the background image, I just canāt figure out how to make it work withoutā¦is it just me or is lovelace really non-intuitive? Or is it that once you āget itā you get it?! Find lovelace MUCH harder than understanding python, javascript or CSS etc etc
Have also just tried this but it moans about a mapping pair for the last line missing a colon
- badges: []
cards:
- card:
type: picture
image: >-
${states['sensor.incoming_call'].state+'?v='+states['sensor.png_timestamp'].state}
tap_action:
action: none
entities:
- sensor.png_timestamp
type: 'custom:config-template-card
layout: horizontal
path: radio2
title: Radio2
type: 'custom:layout-card'
In the first block of code, ā- elementsā is ONLY used in a picture-elements card. This is probably what you need:
- badges: []
cards:
- type: 'custom:config-template-card'
entities:
- sensor.png_timestamp
card:
type: picture
image: >-
${states['sensor.sim_1'].state+'?v='+states['sensor.png_timestamp'].state}
tap_action:
action: none
if you donāt plan on having a tap_action, you can leave it out. Sorry, Iām not familiar with the custom layout card, so you will need to retrofit those statements.
Thanks a lot, but it isnāt working.
I get a message:
I really like: config-template-card, but I donāt understand how to combine it with color-lite-card
Your problem is not the color-lite-card, your problem is that you have skipped a required field of the config-template-card; entities. https://github.com/iantrich/config-template-card#options
Edit: Looks like you have it inside the color-lite-card config, instead of the config-template-card config.
type: custom:config-template-card
entities:
- light.zal_parent_glazki_91
card:
...etc
1 Like
Thanks Ian for the correction. I had my example correct in my test setup with the required entities: aligned properly at the top. I just hate how HA rearranges your Lovelace code after a save. It put entities: at the very bottom and when I copy/pasted for this post, it got mistaken for the color-lite config.
1 Like
@GaryOkie and @iantrich
Thanks for the help guys. It works great.
- type: 'custom:config-template-card'
entities:
- light.zal_parent_glazki_91
- light.zal_osnovnoi_svet_93
- light.zal_rgbw_controll_85
style:
top: 29.7%
left: 45.1%
width: 25.5%
card:
type: 'custom:color-lite-card'
entity: light.zal_rgbw_controll_85
color_image: >-
${this.hass.states['light.zal_parent_glazki_91'].state === 'on' || this.hass.states['light.zal_osnovnoi_svet_93'].state === 'on'?
'/local/ui/floorplan_v2/livingroom_led.png' : '/local/ui/floorplan_v2/livingroom_led4.png'}
1 Like
Hi there! 
So I feel like Iām super close. Iāve included everything you recommended (a timestamp is now sent with the path in a JSON MQTT message) and in a way it sort of works.
Weirdly, however, the first time the lovelace page updates following the sensor changing/updating, you get a broken image. If I then refresh the page, the image then loads fully. Thatās odd. Because itās like everything is in place for it to workā¦and it doesnāt for some reason. Thanks for your help. Not sure if @Mrianphill had to counter this problem somehow??
Cheers guys
can you post your lovelace code please? Did you try the webpage card as an alternative to picture? It will also accept an implicit URL starting with /local/ā¦ for the image.
Iāll try the webpage card, thanks for the tip. Upgrading to the latest and greatest HA didnāt solve the issue. Sadly.
I wonder if the error is this one (from Chromeās dev view console)
āUncaught (in promise) DOMException: Failed to execute 'whenDefined' on 'CustomElementRegistry': "picture" is not a valid custom element nameā
This is my lovelace code
- badges: []
cards:
- card:
image: >-
${states['sensor.incoming_caller_picture_path'].state+'?v='+states['sensor.incoming_call_timestamp'].state}
tap_action:
action: none
type: picture
entities:
- sensor.incoming_call_timestamp
type: 'custom:config-template-card'
layout: horizontal
path: radio2
title: Radio2
type: 'custom:layout-card'
Wonder if Iāll just have to go the generic camera route