Garbage Collection Card not showing garbage type image at all!

Hi Folks,

I’ve been trying to figure this out for a week now, unfortunately without success. I’m still using the Carbage collection card designed by @xirixiz and am still very happy with its functionality.

As you can see, I’m using some garbage types with the corresponding images. All of the images are shown except the one for “Best-tas.”

image

However, when I click on “Best-tas,” the correct image is shown, as you can see in the next image. So, in my opinion, the image is there and functioning.

image

The question is, why won’t it show up in the garbage types card?

  1. I’ve cleared the cache on my phone and the browser’s cache as well, but with no result.
  2. I’ve rebooted the whole system several times.
  3. I’ve checked the code several times, and I cannot find any mismatches in the code.

Any help would be greatly appreciated.

Regards, Herman

type: custom:mod-card
card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
    }
card:
  type: vertical-stack
  cards:
    - type: custom:button-card
      name: Afvalwijzer
      template: null
      hold_action:
        action: navigate
        navigation_path: |
          [[[ return window.location.pathname.split('/')[2] == 'calendar'
              ? '/ui-overview/home_summary' : null; ]]]
      styles:
        card:
          - background-color: var(--background-color-off)
          - color: Darkgreen
          - font-size: 20px
          - font-weight: Bold
          - padding: 12px
        name:
          - justify-self: left
    - type: custom:hui-element
      card_type: markdown
      card_mod:
        style: |
          ha-card.type-markdown {
          box-shadow: none;
          }
      content: >
        <ha-icon icon= {{'mdi:delete' if states('sensor.afvalwijzer_today') ==
        'Geen' else 'mdi:delete-outline'}}> </ha-icon> Vandaag,
        {{states('sensor.today')}}: **{{states('sensor.afvalwijzer_today') |
        capitalize}}**

        <ha-icon icon= {{states('sensor.afvalwijzer_next_icon')}}> </ha-icon>
        Volgende afval-ophaaldag over
        **{{states('sensor.afvalwijzer_next_in_days')}}** {{'dag' if
        states('sensor.afvalwijzer_next_in_days') == '1' else 'dagen'}} op:

        <ha-icon icon= 'mdi:delete'> </ha-icon>
        {{states('sensor.afvalwijzer_next_date')}}:
        **{{states('sensor.afvalwijzer_next_type') | capitalize}}**
    - type: horizontal-stack
      cards:
        - type: picture-entity
          card_mod:
            style: |
              ha-card {
                box-shadow: 5px;
                animation: {% if is_state('persistent_notification.trash_notification_today','notifying') and
                                   states('sensor.afvalwijzer_today') != 'Geen' %} blink 2s linear infinite;
                           {% else %} none
                           {% endif %}
              }
              @keyframes blink {
                100% {opacity: 0;}
              }
          entity: sensor.afvalwijzer_today
          name: Vandaag
          show_state: false
          state_image:
            gft: /local/afvalwijzer/gft.png
            papier: /local/afvalwijzer/papier.png
            restafval: /local/afvalwijzer/restafval.png
            pmd: /local/afvalwijzer/pmd.png
            best-tas: /local/afvalwijzer/best-tas.png
            Snoeiafval: /local/afvalwijzer/snoeiafval.png
            Geen: /local/afvalwijzer/geen.png
        - type: picture-entity
          card_mod:
            style: |
              ha-card {
                color: red;
                box-shadow: none;
                animation: {% if is_state('persistent_notification.trash_notification_tomorrow','notifying') and
                                   states('sensor.afvalwijzer_tomorrow') != 'Geen' %} blink 2s linear infinite;
                           {% else %} none
                           {% endif %}
              }
              @keyframes blink {
                100% {opacity: 0;}
              }
          entity: sensor.afvalwijzer_tomorrow
          name: Morgen
          show_state: false
          state_image:
            gft: /local/afvalwijzer/gft.png
            papier: /local/afvalwijzer/papier.png
            restafval: /local/afvalwijzer/restafval.png
            pmd: /local/afvalwijzer/pmd.png
            best-tas: /local/afvalwijzer/best-tas.png
            Snoeiafval: /local/afvalwijzer/snoeiafval.png
            Geen: /local/afvalwijzer/geen.png
        - type: picture-entity
          entity: sensor.afvalwijzer_day_after_tomorrow
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
              }
          name: Overmorgen
          show_state: false
          state_image:
            restafval: /local/afvalwijzer/restafval.png
            gft: /local/afvalwijzer/gft.png
            papier: /local/afvalwijzer/papier.png
            pmd: /local/afvalwijzer/pmd.png
            best-tas: /local/afvalwijzer/best-tas.png
            Snoeiafval: /local/afvalwijzer/snoeiafval.png
            Geen: /local/afvalwijzer/geen.png
    - type: custom:auto-entities
      card:
        type: entities
      filter:
        exclude:
          - entity_id: sensor.afvalwijzer*next*
          - entity_id: sensor.afvalwijzer*to*
          - entity_id: sensor.afvalwijzer*until*
        include:
          - entity_id: sensor.afvalwijzer_*
            options:
              type: custom:template-entity-row
              image: >
                {% set type = config.entity.split('afvalwijzer_')[1] %}
                /local/afvalwijzer/{{type}}.png
              state: >
                {% set trash = config.entity %} {% set today =
                state_attr(trash,'is_collection_date_today') %} {% set future =
                state_attr(trash,'days_until_collection_date') %} {% if future
                is none or
                   (is_state(trash,'Geen') and future == 0) %} Tba
                {% else %} {{as_timestamp(strptime(states(trash),'%d-%m-%Y'))
                                |timestamp_custom('%-d %b')}}
                {% endif %}
              secondary: >
                {% set trash = config.entity %} {% set today =
                state_attr(trash,'is_collection_date_today') %} {% set future =
                state_attr(trash,'days_until_collection_date') %} {% if future
                is none or
                   (is_state(trash,'Geen') and future == 0) %} Nog niet gepubliceerd
                {% else %}
                  {% set count = state_attr(trash,'days_until_collection_date')|int(default=0) %}
                  {% set day = as_timestamp(strptime(states(trash),'%d-%m-%Y'))
                     |timestamp_custom('%A') %}
                  {% set dagen =
                    {'Monday': 'Maandag',
                    'Tuesday': 'Dinsdag',
                    'Wednesday': 'Woensdag',
                    'Thursday': 'Donderdag',
                    'Friday': 'Vrijdag',
                    'Saturday': 'Zaterdag',
                    'Sunday': 'Zondag'} %}
                  {% set dag = dagen[day] if day in dagen else day %}
                  {% set unit = 'dag' if count == 1 else 'dagen' %}

                  {% if count >= 28 %} {% set phrase = dag + ' over 4 weken' %}
                  {% elif count >= 21 %} {% set phrase = dag + ' over 3 weken' %}
                  {% elif count >= 14 %} {% set phrase = dag + ' over 2 weken' %}
                  {% elif count >= 7 %} {% set phrase = 'Volgende week ' + dag %}
                  {% elif count >= 3 %} {% set phrase = 'komende ' + dag %}
                  {% elif count == 2 %} {% set phrase = dag + ', overmorgen' %}
                  {% elif count == 1 %} {% set phrase = 'morgen, ' + dag %}
                  {% else %} {% set phrase = 'Vandaag, ' + dag %}
                  {% endif %}
                  {{phrase}} {% if count != 0 %} ({{count}} {{unit}}) {% endif %}
                {% endif %}
      sort:
        method: attribute
        attribute: days_until_collection_date
        numeric: true
      entities: null

I am not sure, but since the hyphen (or dash) is a special character in Yaml, could this be caused by the hyphen in the name best-tas?
What happens when you change this into best_tas or besttas?

          state_image:
            gft: /local/afvalwijzer/gft.png
            papier: /local/afvalwijzer/papier.png
            restafval: /local/afvalwijzer/restafval.png
            pmd: /local/afvalwijzer/pmd.png
            best-tas: /local/afvalwijzer/best-tas.png
            Snoeiafval: /local/afvalwijzer/snoeiafval.png
            Geen: /local/afvalwijzer/geen.png


          state_image:
            gft: /local/afvalwijzer/gft.png
            papier: /local/afvalwijzer/papier.png
            restafval: /local/afvalwijzer/restafval.png
            pmd: /local/afvalwijzer/pmd.png
            best_tas: /local/afvalwijzer/best_tas.png
            Snoeiafval: /local/afvalwijzer/snoeiafval.png
            Geen: /local/afvalwijzer/geen.png

You off course have to rename the image file as well.

Hi @thusassistant,

Thank you for your response.

Unfortunately, this is not the case. Even when I replace the “Dash” with an “Underscore,” it still does not work. I have also noticed that the sensor’s state also displays “best-tas.”

I have witnessed it working flawlessly before, so I’m unsure about what suddenly occurred.

Cheers,
Herman

Some additional information:

When I use the following YAML code, it displays the following:

type: custom:button-card
entity: sensor.afvalwijzer_best_tas
show_state: true
show_label: true
show_icon: true

image

Shouldn’t I see the correct image here?

Regards, Herman

One more test to troubleshoot this: what happens when you temporarily interchange two of the images, like for instance:

          state_image:
            gft: /local/afvalwijzer/gft.png
            papier: /local/afvalwijzer/papier.png
            restafval: /local/afvalwijzer/restafval.png
            pmd: /local/afvalwijzer/pmd.png
            best-tas: /local/afvalwijzer/snoeiafval.png
            Snoeiafval: /local/afvalwijzer/best-tas.png
            Geen: /local/afvalwijzer/geen.png

And now that I am on it, one other suggestion (I amit to be a muggenzifter sometimes ;-): I would change the code like this to get more consistent grammar:

                  {% if count >= 28 %} {% set phrase = dag + ' over 4 weken' %}
                  {% elif count >= 21 %} {% set phrase = dag + ' over 3 weken' %}
                  {% elif count >= 14 %} {% set phrase = dag + ' over 2 weken' %}
                  {% elif count >= 7 %} {% set phrase = 'Volgende week ' + dag %}
                  {% elif count >= 3 %} {% set phrase = 'komende ' + dag %}
                  {% elif count == 2 %} {% set phrase = dag + ', overmorgen' %}
                  {% elif count == 1 %} {% set phrase = 'morgen, ' + dag %}
                  {% else %} {% set phrase = 'Vandaag, ' + dag %}
                  {% endif %}
                  {{phrase}} {% if count != 0 %} ({{count}} {{unit}}) {% endif %}
                {% endif %}


                  {% if count >= 28 %} {% set phrase = dag + ' over 4 weken' %}
                  {% elif count >= 21 %} {% set phrase = dag + ' over 3 weken' %}
                  {% elif count >= 14 %} {% set phrase = dag + ' over 2 weken' %}
                  {% elif count >= 7 %} {% set phrase = 'Volgende week ' + dag %}
                  {% elif count >= 3 %} {% set phrase = 'Komende ' + dag %}
                  {% elif count == 2 %} {% set phrase = dag + ', overmorgen' %}
                  {% elif count == 1 %} {% set phrase = 'Morgen, ' + dag %}
                  {% else %} {% set phrase = 'Vandaag, ' + dag %}
                  {% endif %}
                  {{phrase}} {% if count != 0 %} ({{count}} {{unit}}) {% endif %}
                {% endif %}

When I dissect the code, the following part of it should be responsible for displaying the correct image.

As I mentioned earlier, I’m not a coding expert, but is it possible that the result of this code is ‘best_tas.png’?

type: custom:template-entity-row
              image: >
                {% set type = config.entity.split('afvalwijzer_')[1] %}
                /local/afvalwijzer/{{type}}.png

Regard Herman

Thanks for brainstorming with me @thusassistint,

But is it possible that I’m not seeing any changes?
Of course, it could be that I’m in a state of confusion…:slight_smile:

Cheers Herman

You mean the grammar changes?
I just changed “komende” into “Komende” and “morgen” into “Morgen”.
You know, starting a new sentence with a capital :wink:

But the more important change was that I interchanged two of the image names (best-tas with snoeiafval).

LOL, now I see it. By the way, there’s nothing wrong with being a ‘muggenzifter’. You’re talking to one as well… LOL :slight_smile:

Once again, thanks for brainstorming! I appreciate it.

I’ve changed ‘best-tas.png’ to ‘best_tas.png’ everywhere in the code. I’ve also updated the image name to ‘best_tas.png.’

Looks like it’s working now!

Thanks, @thusassistant, for the insights and the bonus :wink:

Great!
So in the end it apparently was indeed a problem with using hyphens in image file names.
Then it is good to know that this is better avoided.