Garbage pickup date (mijnafvalwijzer.nl) custom_component

‘this image’ is a stack of elements :wink:

you can try mine, Ive updated it yesterday to use @thomasloven 's new hui-element custom-card, so you can use an entities card as main card, and be done with the stack-in-card or vertical-stack-in-card custom cards, which all have their specific needs.

type: entities
entities:
  - type: custom:hui-element
    card_type: markdown
    style: |
      ha-card {
        box-shadow: none;
        margin: -16px -16px 0px -16px;
        }
    content: >
      # <font color = {{states('sensor.trash_color')}}>Afvalwijzer</font>

      <ha-icon icon= {{'mdi:delete-alert' if states('sensor.saver_trash_today') != 'Geen' else 'mdi:delete-outline'}}> </ha-icon> Vandaag, {{states('sensor.vandaag')}}: <font color= {{states('sensor.trash_color')}}>**{{states('sensor.saver_trash_today')|capitalize}}</font>**

      <ha-icon icon= {{states('sensor.trash_next_icon')}}> </ha-icon> Volgende afval-ophaal over **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.saver_trash_first_next_in_days')}}</font>** {{'dag' if states('sensor.saver_trash_first_next_in_days') == '1' else 'dagen'}} op:

      <ha-icon icon= 'mdi:delete-alert'> </ha-icon> {{states('sensor.trash_first_next_date_formatted')}}: **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.saver_trash_first_next_item')|capitalize}}</font>**

  - type: custom:hui-element
    card_type: horizontal-stack

    cards:
      - type: picture-entity
        style: |
          ha-card {
            box-shadow: none;
            margin: 0px -16px 0px -16px;
            animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
                               states('sensor.saver_trash_today') != 'Geen' %} blink 2s linear infinite;
                       {% else %} none
                       {% endif %}
            }
          @keyframes blink {
            100% {opacity: 0;}
            }

        entity: sensor.saver_trash_today
        name: Vandaag
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft3.png
          'papier': /local/mijnafvalwijzer/papier3.png
          'restafval': /local/mijnafvalwijzer/restafval3.png
          'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png
      - type: picture-entity
        style: |
          ha-card {
            box-shadow: none;
            margin: 0px -16px 0px -16px;
            animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
                               states('sensor.saver_trash_tomorrow') != 'Geen' %} blink 2s linear infinite;
                       {% else %} none
                       {% endif %}
            }
          @keyframes blink {
            100% {opacity: 0;}
            }
        entity: sensor.saver_trash_tomorrow
        name: Morgen
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft3.png
          'papier': /local/mijnafvalwijzer/papier3.png
          'restafval': /local/mijnafvalwijzer/restafval3.png
          'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png
      - type: picture-entity
        style: |
          ha-card {
            box-shadow: none;
            margin: 0px -16px 0px -16px;
            }
        entity: sensor.saver_trash_day_after_tomorrow
        name: Overmorgen
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft3.png
          'papier': /local/mijnafvalwijzer/papier3.png
          'restafval': /local/mijnafvalwijzer/restafval3.png
          'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png

  - type: custom:hui-element
    card_type: custom:auto-entities
    card:
      type: glance
      style: |
        ha-card {
          box-shadow: none;
          margin: 0px -16px 0px -16px;
          }
      title: Next pickups
    filter:
      include:
        - attributes:
            next_pickup_in_days: '! none'
    sort:
      attribute: next_pickup_in_days
      method: attribute
      numeric: true

  - type: divider
#    style: |
#      div {
#        margin: 0 -16px;
#        border-style: solid;
#        border-width: thin;
#        border-color: red;
#      }
  - type: custom:hui-element
    card_type: custom:auto-entities
    card:
      type: entities
      style: |
        ha-card {
          box-shadow: none;
          margin: 0px -16px 0px -16px;
          }
    filter:
      include:
        - entity_id: sensor.*_trash_timestamp
          options:
            type: custom:template-entity-row
            state: >
              {{state_attr(config.entity,'date')}}
    sort:
      method: state

  - type: custom:hui-element
    card_type: entities
    style: |
      ha-card {
        box-shadow: none;
        margin: -16px -16px -16px -16px;
        background: url('/local/mijnafvalwijzer/background.png');
        background-size: cover;
        }
    show_header_toggle: false
    entities:
     - entity: automation.afval_vandaag
       name: Notify vandaag
     - entity: automation.afval_morgen
       name: Notify morgen
     - entity: input_boolean.trash_reminder
     - entity: input_boolean.trash_outside

Note I do use some custom sensors and templates, but you can have a look how it is done.

Also, I use 3 pictures adding ‘Overmorgen’

1 Like

didnt notice it when I posted above, but now that I did:
because of the change to the entities card listing entities, among these the horizontal stack with picture entities, the formatting went off… If you look closely you see the right picture to be larger than the other 2, the middle being smallest.
Ive tried to take out the style formatting for the 3 picture elements, and bring that 1 level up to the horizontal stack, but that doesnt work.

what does work (almost) is changing the styling to:

left image: margin: 0px 0px 0px -16px;
middle: margin: 0px -8px 0px -8px;
right image: margin: 0px -16px 0px 0px;

but even with that, there s a tiny scratch of separation visible, which I find very annoying. Especially since that wasnt the case before, so I’ll return to the previous setup.

second thing I noticed: my afvalwijzer apparently stopped ending plastic, but now does pbd… no issue of course, but just explaining why the above image shows an mdi icon (and ‘none’ ) instead of the nice button image…

nice plugin! i’am new to Home Assistant…Is it possible to add two addresses? I created a second trash.yaml (inside /packages)
changed all sensor.trash_xxx to sensor.trash_xxx_2 but that unfortunately doesnt work.

I added the top part of your code with the new hui-element but getting the following message. Any ideas?

Expected a value of type {entity,name,icon} | entity-id for entities.0.type but received "custom:hui-element".

no idea, without the full section. Note I described why I stopped the entities card using custom:ui-element cards for this setup. Couldn’t get the style for the images correct.

this it what I use:

type: custom:stack-in-card
keep:
  background: 'true'
cards:
  - type: custom:hui-element
    card_type: markdown
    content: >
      # <font color = {{states('sensor.trash_color')}}>Afvalwijzer</font>

      <ha-icon icon= {{'mdi:delete-alert' if states('sensor.saver_trash_today') != 'Geen' else 'mdi:delete-outline'}}> </ha-icon> Vandaag, {{states('sensor.vandaag')}}: <font color= {{states('sensor.trash_color')}}>**{{states('sensor.saver_trash_today')|capitalize}}</font>**

      <ha-icon icon= {{states('sensor.trash_next_icon')}}> </ha-icon> Volgende afval-ophaal over **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.saver_trash_first_next_in_days')}}</font>** {{'dag' if states('sensor.saver_trash_first_next_in_days') == '1' else 'dagen'}} op:

      <ha-icon icon= 'mdi:delete-alert'> </ha-icon> {{states('sensor.trash_first_next_date_formatted')}}: **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.saver_trash_first_next_item')|capitalize}}</font>**
1 Like

Got someone a idea?

Hi Bert, this is not possible at the moment.

I dont know if you have managed to get it any further with auto sorting it.
I did the following :

image

I gave the formatted date an attribute with the date as Y M D and then sort them numeric on attribute

Example code of the template sensor:

       kerstbomen_formatted:
        entity_id: sensor.trash_kerstbomen
        friendly_name: Kerstbomen
        value_template: >
          {%- set tracker_timestamp = as_timestamp(strptime(states('sensor.trash_kerstbomen'), "%d-%m-%Y")) %}
          {%  set months = ["Jan", "Feb", "Mrt", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"] %}
          {%- set wdays = ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"] %}
          {%- set wday =  tracker_timestamp | timestamp_custom('%w') | int %}
          {%- set month =  tracker_timestamp | timestamp_custom('%m') | int %}
          {{ tracker_timestamp | timestamp_custom(wdays[wday] + ' ' '%d' ' ' + months[month-1] ) }}
        attribute_templates:
          Afval datum: >-
            {{ as_timestamp(strptime(states('sensor.trash_kerstbomen'), "%d-%m-%Y")) | timestamp_custom("%Y%m%d") }}

ha, yes, clever! keep forgetting about the power of attribute_templates, and this certainly is a good example.

I use it like this:

      restafval_trash_timestamp:
        friendly_name: 'Restafval'
        value_template: >
          {{as_timestamp(strptime(states('sensor.saver_trash_restafval'),'%d-%m-%Y'))}}
        attribute_templates:
          date: >
            {{as_timestamp(strptime(states('sensor.saver_trash_restafval'),'%d-%m-%Y'))|timestamp_custom('%a %d %b')}}
        device_class: timestamp

only thing I still feel this integration or setup should do is leave out the ‘today’s pickup’ of the next pickups.

  - type: custom:hui-element
    card_type: custom:auto-entities
    card:
      type: glance
      title: Next pickups
    filter:
      include:
        - attributes:
            next_pickup_in_days: '! none'
    sort:
      attribute: next_pickup_in_days
      method: attribute
      numeric: true

  - type: custom:hui-element
    card_type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - entity_id: sensor.*_trash_timestamp
          options:
            type: custom:template-entity-row
            state: >
              {{state_attr(config.entity,'date')}}
    sort:
      method: state

rephrase: If today has a pickup, the group of next pickups, should begin with the pickup following today’s pickup, and not include it. There’s no way I can get it to do that unfortunately. Or is there. I could maybe exclude it from the Lovelace config…? not sure if there are 4 sensors available though in the case of a pickup on the current day…

Yes that’s what I noticed yesterday on the pick up of GFT.
It was also shown in the next upcoming days of pick ups.

I’ll also have a think about this with you. When I might be on the something I will share it here ofcourse :smiley:

we probably cant do it with the attribute next_pickup_in_days, but we could do it if we had the full list of pickup days, which Saver provides, but the integration doesn’t yet import.

@xirixiz would that be a FR you could allow? so we have more than the first 4 next dates created by the integration?

Of course, if the integration would import more than the first 4 dates, it could also calculate the next_pickup_in_days attribute for those. And then we could again use it in the auto-entities :wink:

Correct the only thing now possible is to really exclude the “todays pickup type”
Meaning you would only see 2 type in the next pick up days part.

Edit:
Alho we do have trash_first_next_date and sensor.trash_first_next_item
But that would be really hard putting it altogether in the auto sorting part :smiley:

the only thing now is the configuration option count_today: true but this doesn’t do what I seek.

Or really excluding the today’s date in the auto-sorting entity part in lovelace.

That would mean you would end up with missing the today's pickup type for one day completely.
That’s still an option but not a perfect one :wink:

yes that’s what I meant here:

and no, that isnt really an option since it would have to be conditional for having a todays’ pickup. And would require yet again an extra binary_sensor on which we could do that. Even so, if we had it, we wouldn’t have the next 4 dates for the various trash-types.

1 Like

@Mariusthvdb
With the help of a friend i got it finally the way i like it.
There are only 2 sensors that i cannot get working.

First 1 is: sensor.trash_next_icon
I think i should be using this for it but when i add it to sensors it gives me errors (invalid slug) and adding it to customize.yaml doesn’t do anything.

sensor.trash_next:
friendly_name: Days to next pickup
templates:
icon: >
if (state === ‘Geen’) return ‘mdi:calendar-question’;
if (state === ‘0’ || state === ‘1’ || state === ‘2’ || state === ‘3’ || state === ‘4’
|| state === ‘5’ || state === ‘6’ || state === ‘7’ || state === ‘8’ || state === ‘9’)
return ‘mdi:numeric-’ + state + ‘-box-multiple-outline’;
return ‘mdi:numeric-9-plus-box-multiple-outline’;

And the second missing sensor is: sensor.trash_color

I found some old post (“markdown-card-with-template-wont-format-correctly”) but cannot figure out how to fit this in my setup.

dont know what your setup looks like, so not sure where you need help.

both sensors you mention above are standalone, and not parts of the template sensor you quote. Ive also added the trash_next_color, to use that in the markdown (and custom-header tab icon :wink: )

      trash_next_icon:
        value_template: >
          {% set days = states('sensor.saver_trash_first_next_in_days') %}
          {% if days != 'Geen' %}
            {% if days <= '9'%} mdi:numeric-{{days}}-box-multiple-outline
            {% else %} mdi:numeric-9-plus-box-multiple-outline
            {% endif%}
          {% else %} mdi:checkbox-blank-outline
          {% endif %}

      trash_next_color:
        value_template: >
          {% set next = states('sensor.saver_trash_first_next_item') %}
          {% set mapper = {'papier':'#00b2ef',
                          'gft':'green',
                          'pbd':'orange',
                          'restafval':'black'} %}
          {% set color = mapper[next] if next in mapper else 'grey' %}
          {{color}}

      trash_color:
        value_template: >
          {% set vandaag = states('sensor.saver_trash_today') %}
          {% set mapper = {'papier':'#00b2ef',
                          'gft':'green',
                          'pbd':'orange',
                          'restafval':'black'} %}
          {% set color = mapper[vandaag] if vandaag in mapper else 'grey' %}
          {{color}}

Note I have prefixed all my senors with saver_ so if you dont use that, take it out of the templates.

Hi thanks for your help (again).
Most is based on your code posted 19 days ago but this should get me further in finalizing the details.

Not 100% sure but for the icon changing part I think you also need CustomUI installed on your HA system.
Correct me if I’m wrong @Mariusthvdb

sure, but that would be useful for changing the icon of another sensor to show in the frontend. You can see here how to do that.

My sensor above is a template sensor with a value_template for the icon. This sensor isn’t used in the frontend itself, it is used in the markdown card to show an icon here:

I do that in places where the config of the markdown card, or other style sections would become to complicated and error prone, let alone difficult to read. using the state of this sensor is hassle free.

update

to illustrate what is happening even better, please see below. We have a pickup today: Papier.
the next_pickup_in_days shows todays pickup ( 0 days) ,

resulting in todays pickup still being listed under ‘Next pickups’ (which of course is my own Title, but you get the idea):


while we should preferably see the 4 next pickup days, next to todays pickup:

Note: there is no help in changing to count_today: false here.

1 Like