šŸ“ 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