📝 100% Templatable Lovelace Configurations

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! :smiley:

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

Screenshot 2020-05-07 at 21.00.27

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