Trash & Recycling - Issues with slow to update cards causing glitches with entire dashboard

For a while now I have been fighting with issues that cause my main dashboard to be slow as molasses in loading and clicking on buttons does nothing for extended and variable periods of time. One huge issue was related to the loading of 5 IP cameras (4 of which 4K / 8MP). I tried HA’s default picture-glance card, and then the webrtc-camera card, both pulling from the NVR directly. I was overloading the NVR and am therefore now rebroadcasting the streams using Scrypted. While I still have some glitches to deal with, this approach appears to have improved things a lot.

Another issue, is related to loading 2 `plotly-graph’ cards that seem to take a long time. This may in part be due to them waiting for the camera feeds and other cards to finish as they seem better now.

The 3rd issue, which is the main topic of this post, is how I keep track of the trash and recycling pickup. I tried a couple integrations but they were overkill and not free of issues. I am now using a simpler local calendar based solution.

The 4 cards shown below is how I display what gets picked up when. The images can change based on state but I am currently using the same image. The cards used are card-templeter, picture-entity, markdown, horizontal-stack and card-mod.

The schedule is in a local calendar I only use for this, and might use for other home maintenance things in the future. I believe there is no end date on the schedule (and yes it ignores the day delay introduced by the pickup skipped by a holiday in the pickup week, but I don’t care).

The cards load very slowly very often, which the markdown cards (#2 and #4) being the worst offenders. I use templates to generate the custom text. The templates used to be part of the cards, but I then opted to pull them out and put them in my templates.yaml file in hopes it would help fix the issue (maybe evaluate template less often or ???). The issue remained the same.

Trash Templates:

#Controls image of trash can even though for now it is the same one for the 3 states
- sensor:
    - name: "Trash"
      icon: "mdi:trash-can-outline"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.trash', 'start_time') | as_datetime | as_local %}
        {% set delta = event - midnight %}
        {% if delta.days == 0 %}
          0
        {% elif delta.days == 1 %}
          1
        {% elif delta.days > 1 %}
          2
        {% endif %}

- sensor:
    - name: "Trash Pickup Short"
      icon: "mdi:trash-can-outline"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.trash', 'start_time') %}
        {% set event = event | as_datetime | as_local if event is not none else now() %}
        {% set delta = event - midnight %}
        {% if delta.days == 0 %}
          Today
        {% elif delta.days == 1 %}
          Tomorrow
        {% elif delta.days >= 2 %}
          {{delta.days}} days
        {% endif %}

- sensor:
    - name: "Trash Pickup Long"
      icon: "mdi:trash-can-outline"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.trash', 'start_time')  %}
        {% set event = event | as_datetime | as_local if event is not none else now() %}
        {% set delta = event - midnight %} {% if delta.days == 0 %}
          *Bring trash in!*
        {% elif delta.days == 1 %}
          *Put trash out!*
        {% elif delta.days <= 5 %}
          *Friday*
        {% elif delta.days > 5 %}
          *Next Week*
        {% endif %}

Recycling templates:

#Controls image of recycling can even though for now it is the same one for the 3 states
- sensor:
    - name: "Recycling"
      icon: "mdi:recycle"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.recycling', 'start_time') | as_datetime | as_local %}
        {% set delta = event - midnight %}
        {% if delta.days == 0 %}
          0
        {% elif delta.days == 1 %}
          1
        {% elif delta.days > 1 %}
          2
        {% endif %}

- sensor:
    - name: "Recycling Pickup Short"
      icon: "mdi:recycle"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.recycling', 'start_time')  %}
        {% set event = event | as_datetime | as_local if event is not none else now() %}
        {% set delta = event - midnight %}
        {% if delta.days == 0 %}
          Today
        {% elif delta.days == 1 %}
          Tomorrow
        {% elif delta.days >= 2 %}
          {{delta.days}} days
        {% endif %}

- sensor:
    - name: "Recycling Pickup Long"
      icon: "mdi:recycle"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.recycling', 'start_time')  %}
        {% set event = event | as_datetime | as_local if event is not none else now() %}
        {% set delta = event - midnight %} {% if delta.days == 0 %}
          *Bring recycling in!*
        {% elif delta.days == 1 %}
          *Put recycling out!*
        {% elif delta.days < 5 %}
          *This Friday*
        {% elif delta.days < 12 %}
          *Next Week*
        {% elif delta.days < 14 %}
          *Week After Next*
        {% endif %}

Code sourced from these forums with additional assistance from the knights of this forum! The templates were modified based on a forum suggestion to fix errors in my logs, but I believe they made the slow loading issue worse. I can’t recall the exact changes, but they are related to the as_local if event is not none else now() part.

I get the impression that loading these 4 blocks even causes the lovelace engine (name?) to crash. At times it all freezes up, and I believe I’ve seen a disconnected message flash, and I’ve seen the burgundy filled cards with error messages while everything is loading back up.

I am aware the information provided by the cards is overkill (like the number of days to the next pickup) but I like to geek out with HA :slight_smile:

Can anyone suggest what may be causing issues, or better ways of doing this without yet another integration to maintain?

I made changes in an attempt to improve performance, but nothing has really changed. The cards load very slowly (relative to the rest) and seem to cause the rest of the dashboard to hang waiting on them.

I wonder whether it has anything to do with the speed of the Calendar integration. Anyhow, I hope some dashboard experts can review the yaml below in case there are improvements that could help.

I might just get rid of the ability to change the image based on state as right now it shows the same image for all states, but I am still considering whether I might want different images.

image

type: custom:card-templater
card:
  type: picture-entity
  name_template: |
    {{ states('sensor.trash_pickup_short') }}
  show_name: true
  show_state: false
  title: Waste Collection
  entity: sensor.trash
  state_image:
    '0': /local/images/trash_150.png
    '1': /local/images/trash_150.png
    '2': /local/images/trash_150.png
entities:
  - sensor.trash_pickup_short

image

type: markdown
content: |
  **<p><font size="3">Trash<br>Day</font></p>**
  {{ states('sensor.trash_pickup_long') }}
card_mod:
  style: |
    ha-markdown {
      text-align: center;
      font-size: 14px;
      padding: 5px 5px 5px !important;
      }

image

type: custom:card-templater
card:
  type: picture-entity
  name_template: |
    {{ states('sensor.recycling_pickup_short') }}
  show_name: true
  show_state: false
  title: Recycling Collection
  entity: sensor.recycling
  state_image:
    '0': /local/images/recycle_150.png
    '1': /local/images/recycle_150.png
    '2': /local/images/recycle_150.png
entities:
  - sensor.recycling_pickup_short

image

type: markdown
content: |
  **<p><font size="3">Recycling<br>Day</font></p>**
  {{ states('sensor.recycling_pickup_long') }}
card_mod:
  style: |
    ha-markdown {
      text-align: center;
      font-size: 14px;
      padding: 5px 5px 5px !important;
      }

For the cards above to work, I now need to create the following templates. Before they were within the card but I pulled them out hoping it would lighten the dashboard.

Templates in configuration.yaml:

TRASH

#Controls image of trash can even though for now it is the same one for the 3 states
- sensor:
    - name: "Trash"
      icon: "mdi:trash-can-outline"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.trash', 'start_time') | as_datetime | as_local %}
        {% set delta = event - midnight %}
        {% if delta.days == 0 %}
          0
        {% elif delta.days == 1 %}
          1
        {% elif delta.days > 1 %}
          2
        {% endif %}

- sensor:
    - name: "Trash Pickup Short"
      icon: "mdi:trash-can-outline"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.trash', 'start_time') %}
        {% set event = event | as_datetime | as_local if event is not none else now() %}
        {% set delta = event - midnight %}
        {% if delta.days == 0 %}
          Today
        {% elif delta.days == 1 %}
          Tomorrow
        {% elif delta.days >= 2 %}
          {{delta.days}} days
        {% endif %}

- sensor:
    - name: "Trash Pickup Long"
      icon: "mdi:trash-can-outline"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.trash', 'start_time')  %}
        {% set event = event | as_datetime | as_local if event is not none else now() %}
        {% set delta = event - midnight %} {% if delta.days == 0 %}
          *Bring trash in!*
        {% elif delta.days == 1 %}
          *Put trash out!*
        {% elif delta.days <= 5 %}
          *Friday*
        {% elif delta.days > 5 %}
          *Next Week*
        {% endif %}

RECYCLING

#Controls image of recycling can even though for now it is the same one for the 3 states
- sensor:
    - name: "Recycling"
      icon: "mdi:recycle"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.recycling', 'start_time') | as_datetime | as_local %}
        {% set delta = event - midnight %}
        {% if delta.days == 0 %}
          0
        {% elif delta.days == 1 %}
          1
        {% elif delta.days > 1 %}
          2
        {% endif %}

- sensor:
    - name: "Recycling Pickup Short"
      icon: "mdi:recycle"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.recycling', 'start_time')  %}
        {% set event = event | as_datetime | as_local if event is not none else now() %}
        {% set delta = event - midnight %}
        {% if delta.days == 0 %}
          Today
        {% elif delta.days == 1 %}
          Tomorrow
        {% elif delta.days >= 2 %}
          {{delta.days}} days
        {% endif %}

- sensor:
    - name: "Recycling Pickup Long"
      icon: "mdi:recycle"
      state: >
        {% set midnight = today_at() %}
        {% set event = state_attr('calendar.recycling', 'start_time')  %}
        {% set event = event | as_datetime | as_local if event is not none else now() %}
        {% set delta = event - midnight %} {% if delta.days == 0 %}
          *Bring recycling in!*
        {% elif delta.days == 1 %}
          *Put recycling out!*
        {% elif delta.days < 5 %}
          *This Friday*
        {% elif delta.days < 12 %}
          *Next Week*
        {% elif delta.days < 14 %}
          *Week After Next*
        {% endif %}

The fact that you’re using pictures at all is a big part of your problem. The more data you have to transfer, the slower everything is going to be - as you learned with your camera streams.

I’m just using conditional cards to display mushroom chips and coloring them yellow (pickup tomorrow) or green (pickup today).

Super fast dashboard, doesn’t take up a ton of screen real estate just to show me a picture of a trash can, and gets the point across of reminding me what goes out when.

trash chips

- type: conditional
        conditions:
          - entity: input_boolean.display_garbage
            state: 'on'
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: template
              double_tap_action:
                action: none
              entity: sensor.garbage
              icon: mdi:trash-can
              icon_color: |-
                {% if is_state('sensor.garbage', '1') %}
                  yellow
                {% else %}
                  green
                {% endif %}
              tap_action:
                action: none
              hold_action:
                action: none
              content: Trash
      - type: conditional
        conditions:
          - entity: input_boolean.display_recycling
            state: 'on'
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: sensor.recycling
              icon: mdi:recycle
              icon_color: |-
                {% if is_state('sensor.recycling', '1') %}
                  yellow
                {% else %}
                  green
                {% endif %}
              double_tap_action:
                action: none
              content: Recycling
              tap_action:
                action: none
              hold_action:
                action: none

@exx How do you set your trash and recycling sensors?

While I agree with you that using images slows things down, my HA is running in a VM that has all cores of an i7-12700T assigned to it. The other VMs are really light so they should not be slowing down HA in any noticeable way. On top of that, the link between the HA VM and my desktop it 10GbE.

Here you can see an example of the slowness. It is not consistently slow which just makes it harder to figure out. Every time it all goes black is when I reload the page. This is on a test dashboard so there is nothing else other than what you see, on it.

slow_cards.mp4 [video-to-gif output image]

I’m using the old bruxy70 integration that is no longer supported, but basically they are on a calendar and then I’ve got a couple notifications to flip the binary seonsors on and off. They turn on the day before collection, and turn off the day after collection.

The conditional card uses the binary sensor to determine if it should display, and then they are yellow the day before, and green day of.

@exx I need to do something similar where all the states I track (whether actually useful or not) are only evaluated once a day (i.e. just after midnight). Right now I fear they are evaluated once a minute as I believe that is the default update rate of the dashboard. …or maybe it is smarter than that and it is only upon change… no idea

Depends where you’re doing the evaluations.

I used to do a LOT of logic on the fly on my dashboard pages. Made them very slow to load. When I switched to using groups and binary sensors and stuff like that, things got MUCH faster.

1 Like