Front end setup

[Makin-Things]

Hey, Thanks for the integration. I thought I would share how I set up the front end to display stuff in a card. Hopefully others might find it useful.

This is what the card looks like.

Card config:

type: grid
cards:
  - type: custom:button-card
    layout: icon_label
    entity_picture: |
      [[[ 
        if (states['binary_sensor.act_garbage_today'].state == 'on' || states['binary_sensor.act_garbage_tomorrow'].state == 'on')
          return '/local/icons/bin_icons/bin_red.png';
        else
          return '/local/icons/bin_icons/bin_grey.png';
      ]]]
    label: |
      [[[
        if (states['binary_sensor.act_garbage_today'].state == 'on')
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:100px">'+'Today'+'</div>';
        else if (states['binary_sensor.act_garbage_tomorrow'].state == 'on')
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:100px">'+'Tomorrow'+'</div>';
        else
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:150px">'+states['sensor.act_garbage_pickup_day'].state+'</div>';
      ]]]
    show_label: true
    show_entity_picture: true
    size: 60px
    entity: sensor.act_garbage_pickup
    variables:
      name: Garbage
    show_name: false
    styles:
      card:
        - height: 64px
        - padding: 0px
      label:
        - justify-self: start
  - type: custom:button-card
    layout: icon_label
    entity_picture: |
      [[[ 
        if (states['binary_sensor.act_recycling_today'].state == 'on' || states['binary_sensor.act_recycling_tomorrow'].state == 'on')
          return '/local/icons/bin_icons/bin_yellow.png';
        else
          return '/local/icons/bin_icons/bin_grey.png';
      ]]]
    label: |
      [[[
        if (states['binary_sensor.act_recycling_today'].state == 'on')
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:100px">'+'Today'+'</div>';
        else if (states['binary_sensor.act_recycling_tomorrow'].state == 'on')
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:100px">'+'Tomorrow'+'</div>';
        else
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:150px">'+states['sensor.act_recycling_pickup_day'].state+'</div>';
      ]]]
    show_label: true
    show_entity_picture: true
    size: 60px
    entity: sensor.act_recycling_pickup
    variables:
      name: Recycling
    show_name: false
    styles:
      card:
        - height: 64px
        - padding: 0px
      label:
        - justify-self: start
  - type: custom:button-card
    layout: icon_label
    entity_picture: |
      [[[ 
        if (states['binary_sensor.act_greenwaste_today'].state == 'on' || states['binary_sensor.act_greenwaste_tomorrow'].state == 'on')
          return '/local/icons/bin_icons/bin_green.png';
        else
          return '/local/icons/bin_icons/bin_grey.png';
      ]]]
    label: |
      [[[
        if (states['binary_sensor.act_greenwaste_today'].state == 'on')
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:100px">'+'Today'+'</div>';
        else if (states['binary_sensor.act_greenwaste_tomorrow'].state == 'on')
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:100px">'+'Tomorrow'+'</div>';
        else
          return '<div style="text-align: left; display:inline-block;width:120px">'+variables.name+':</div><div style="text-align: left; display:inline-block;width:150px">'+states['sensor.act_greenwaste_pickup_day'].state+'</div>';
      ]]]
    show_label: true
    show_entity_picture: true
    size: 60px
    entity: sensor.act_greenwaste_pickup
    variables:
      name: Green Waste
    show_name: false
    styles:
      card:
        - height: 64px
        - padding: 0px
      label:
        - justify-self: start
columns: 1
square: false

Extra needed sensors config:

- platform: template
  sensors:
    act_garbage_pickup_day:
      friendly_name: Next Garbage Pickup Day
      icon_template: mdi:trash-can-outline
      value_template: "{{ (strptime(states('sensor.act_garbage_pickup'), '%d/%m/%Y').date()).strftime('%A')+(' Week' if ((strptime(states('sensor.act_garbage_pickup'), '%d/%m/%Y').date() - strptime(states('sensor.date_time_iso'), '%Y-%m-%dT%H:%M:%S').date()).days > 6) else '') if states('sensor.act_garbage_pickup') != 'unknown' }}"

    act_recycling_pickup_day:
      friendly_name: Next Recycling Pickup Day
      icon_template: mdi:recycle
      value_template: "{{ (strptime(states('sensor.act_recycling_pickup'), '%d/%m/%Y').date()).strftime('%A')+(' Week' if ((strptime(states('sensor.act_recycling_pickup'), '%d/%m/%Y').date() - strptime(states('sensor.date_time_iso'), '%Y-%m-%dT%H:%M:%S').date()).days > 6) else '') if states('sensor.act_recycling_pickup') != 'unknown' }}"

    act_greenwaste_pickup_day:
      friendly_name: Next Greenwaste Pickup Day
      icon_template: mdi:pine-tree-box
      value_template: "{{ (strptime(states('sensor.act_greenwaste_pickup'), '%d/%m/%Y').date()).strftime('%A')+(' Week' if ((strptime(states('sensor.act_greenwaste_pickup'), '%d/%m/%Y').date() - strptime(states('sensor.date_time_iso'), '%Y-%m-%dT%H:%M:%S').date()).days > 6) else '') if states('sensor.act_greenwaste_pickup') != 'unknown' }}"

- platform: time_date
  display_options:
    - "time"
    - "date_time_iso"
    - "time_date"

I have attached the images I used for the card which need to be placed in /config/www/icons/bin_icons

[simonhq]

Hey Makin-Things, this looks great!

I was actually considering moving this into a full integration, haven't looked at what is in involved yet, but this is a nice way of having it displayed.

Obviously you are in the ACT, hit me up if you want to catch up for a chat sometime.

Simon.

[Makin-Things]

I think even as an integration you still end up with a separate front end part. So while you maybe don't need to rely on AppDaemon to run it there will still be a need for some sort of lovelace configuration. You could develop a card for it, but unless it could be made generic (ie. useful for more than just ACT residents there probably is little value).

Also feel free to add this to your repo as a sample card config. Don't worry about attribution if you do.

Would be good to catch up when all the craziness settles again, in the meantime my email is simon@makin-things.com

Cheers Simon

[ozadr1an]

Howdies.. Love the plugin. Been using it a while.. and just did simon's lovelace card setup. Nice!

Silly question though Simon : how have you done the states['sensor.act_greenwaste_pickup_day'].state ? because the default plugin doesn't create that sensor, and at best offers state of the date against states['sensor.act_greenwaste_pickup'].state which is just the actual pickup date.. so it doesn't as per your example list out "Monday week" .

What sauce am I missing :)

Cheers,

Adrian

[Makin-Things]

Hmm, I missed including that bit. I have edited the original post to include the template sensor config I use.

[ozadr1an]

Thanks simon! Also worth noting you need to have enabled the date_time sensors as well to get the date_time_iso working !

[Makin-Things]

Updated to include that part as well.