Card to show who is home?

Configuration
22

I think you are miss understanding his original intent. He wanted the image of his device tracker to change based on the state of his device tracker. This entity filter doesn’t have a way to change the picture or icon based on the state, neither does the entities card.

23

Right, but his screenshot that he said he wanted it to look like doesn’t do those things either.

24

Yes and my assumption is that he wanted the image to change on that configuration. Which is not possible (without something custom). That’s all I was letting him know.

25

Thanks again.

I have seen some cards where an image is colour for when they are at home, and black and white when they are away.

I have seen full sized photos as well.

The screenshot of the card was from a bigger card which I thought used grey scale, but looking at the image again I think its just a black and white photo for one of the people.

To be fair, I have so little stuff in my configuration at the moment that I am not bothered by what the card looks like, more around managing to do them. Will try the other card suggested just for practice.

@Mariusthvdb would love to see the code for yours. A picture with a background colour based on location sounds nice.

26

sure, I’ve put some extra effort in the templates, for each family member I have a backend template sensor for entity_picture, overlay and background color. Each starts with the name, so I can use that consistency in the button card template:

button_picture_family:
  size: 75%
  show_state: false
  show_label: false
  show_name: false
  show_entity_picture: true
  color_type: card
  aspect_ratio: 1/1
  tap_action:
    action: more-info
    entity: >
      [[[
      var id = entity.entity_id.split('_')[2];
      return 'group.' + id;
      ]]]
    haptic: light
  hold_action:
    action: more-info
    entity: >
      [[[
      var id = entity.entity_id.split('_')[2];
      return 'group.' + id;
      ]]]
    haptic: success
  entity_picture: >
     [[[
     var id = entity.entity_id.split('_')[2];
     return states['sensor.' + id + '_picture'].state;
     ]]]
  styles:
    entity_picture:
      - border-radius: 6px
    custom_fields:
      zone_image:
        - align-items: flex-start
        - justify-content: flex-end
        - padding: 2px 2px
        - position: absolute
        - right: 12%
        - bottom: 10%
        - height: 30%
        - width: 30%
    card:
      - border-radius: 6px
      - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
      - background-color: >
          [[[
          var id = entity.entity_id.split('_')[2];
          return states['sensor.' + id + '_background_color'].state
          ]]]
  custom_fields:
    zone_image: >
      [[[
        var id = entity.entity_id.split('_')[2];
        return `<img src= "${states['sensor.' + id + '_overlay_image'].state}" style="height: 30px; width: 30px;">`
      ]]]

the main card config is:

type: vertical-stack
cards:

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: 'custom:button-card'
        name: Family Presence
        template: button_default_title
        state:
          - operator: template
            value: >
              [[[
              return states['group.family'].state === 'home'
              ]]]
            styles:
              card:
                - background-color: '#008000'
          - operator: default
            styles:
              card:
                - background-color: '#555B65'

      - type: custom:button-card
        template: horizontal-filler

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_picture_family
        entity: device_tracker.life360_name1

      - type: custom:button-card
        template: button_picture_family
        entity: device_tracker.life360_name2

      - type: custom:button-card
        template: button_picture_family
        entity: device_tracker.life360_name3

      - type: custom:button-card
        template: horizontal-filler

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_picture_family
        entity: device_tracker.life360_name4

      - type: custom:button-card
        template: button_picture_family
        entity: device_tracker.life360_name5

      - type: custom:button-card
        template: button_picture_family
        entity: device_tracker.life360_name6

      - type: custom:button-card
        template: horizontal-filler

  - type: custom:button-card
    template: vertical-filler
27

Thanks again.

I’ve now added an entity card too which I like but is there a way of getting a picture instead of the little person logo? I can see you can add an icon but haven’t seen that you can add an image or would this then need to be another type of card?

28

Just use the configuration, customization page and select your “person”. The attribute you want to edit is “entity_picture”.