Picture Elements card not showing in 0.107

Configuration Frontend
1

After upgrading to 0.107 my Picture Elements cards are not showing, I get red boxes with ‘Custom element doesn’t exist: hui-picture-elements-card.’
I use the card to show device tracker states and it’s within a decluttering-card as below;

default:
  - entity: device_tracker.brad_g7
  - image: sunset-water.jpg
card:
    type: picture-elements
    style: |
      ha-card {
          border-radius: 5px;
          font-family: var(--font-family);
          font-size: 16px;
          font-weight: bold;
          color: rgba(250,250,250,1);
      }
    image: '/local/[[image]]'
    elements:
      - type: state-label
        entity: '[[entity]]'
        style:
          top: 90%
          left: 20%

It was working fine up to 0.106.6 but hasn’t worked with any of the 0.107 beta releases, I thought it might have been fixed for the release but no luck.
I found an issue an issue on github #4984 regarding markdown and gauge cards where @iantrich talked about it being caused by lazy-loading.

@balloob suggested making a resource that pre-loads cards and supplied this code, can someone please let me know where this should be placed?

const preloadCard = type => window.loadCardHelpers()
  .then(({ createCardElement }) => createCardElement({type}))

preloadCard("markdown");
preloadCard("gauge");
2

Read upwards from here:

1 Like
3

yes, i added the declutter and picture-elements to preload, now issue is gone
be sure to clear cache when testing, or use incognito

1 Like
4

Thanks @tom_l all working now.

5

This is a bug in the decluttering card. It is not using the helpers to create the cards.

1 Like
6

Thanks @balloob, are you aware of this @RomRider?

7

I didn’t know it was mandatory, I thought it was a nice to have, I’ll fix it ASAP!

1 Like
8

Thanks @RomRider for all your work on this and the button-card, mine and many other lovelace setups wouldn’t be the same without them.

9

0.4.0 is released, please give it a go :slight_smile:

1 Like
10

hmm, updated to 0.4.0 , but now the mini-grah-card is broken with tha declutter 0.4.0
doesnt help if i put declutter in preload or not …

always this error on lovelace page:

Cannot read property 'states' of undefined
type: 'custom:decluttering-card'
template: mini-graph
variables:
  - entities:
      - sensor.kostal_piko_l3_voltage
  - name: L3 Voltage
  - line_color: '#ff0000'
  - graph: bar
  - extrema: true
  - decimals: 0
  - font_size: 65

if i roll back to 0.3.0 it works again

11

I’m having the same issues after upgradng to 0.4.0, all my button-card templates are working fine but templates with mini-graph-cards and the simple-weather card as below are giving the same error.

default:
  - path: weather2
card:
    type: horizontal-stack
    cards:
        - type: custom:simple-weather-card
          style: |
            ha-card {
                box-shadow: none;
                font-family: var(--font-family);
                font-size: 16px;
            }
          entity: weather.openweathermap
          name: " "
          backdrop:
            day: rgba(0,0,0,0)
            night: rgba(0,0,0,0)
            text: var(--button-text-color)
          primary_info:
            - humidity
          secondary_info:
            - precipitation_probability
          custom:
            - temp: sensor.bom_sydney_air_temp_c
            - humidity: sensor.bom_sydney_relative_humidity
            - state: sensor.bom_current_text
            - precipitation: sensor.bom_sydney_rain_today
            - precipitation_probability: sensor.bom_sydney_chance_of_rain_0
          tap_action:
            action: navigate
            navigation_path: '/lovelace/[[path]]'```
12

@BradAU @pergola.fabio, it should work now with 0.4.1

1 Like
13

Just upgraded to 0.4.1 and all working, thanks again.

14

Yes, confirmed working again! Thnx

15

for me not work.
hassio update to 107.4
error…hui-media-control-card.
hui-picture-elements-card.

how is it possible to resolve this issue?