Card to show who is home?

Configuration
8

Can someone also just confirm if I am even using the right card?

Can a picture-glance card be used to give this:

image

9

Bro, did you read my post? You’re config is still wrong here:

      entity:
      - device_tracker.matts_iphone

which is producing this incorrectly
image

It needs to have this configuration, i’m guessing you didn’t try my last post?

    - type: picture-glance
      title: Home
      entity: device_tracker.matts_iphone
      state_image:
        "not_home": /local/Matt_Away.png
        "Work": /local/Matt_Home.png
        "home": /local/Matt_Home.png
10

To get the look in the image, you need to use a entities card, but the image will not changed based on your state.

12

Your screenshot says otherwise. "entities": wouldn’t have a [] if it were correct.

1 Like
13

I am restarting HA now to see if that helps but I didnt think you needed to restart if making changes to the Lovelace file.

Now this is the error:

image

14

You don’t need to restart when editing Lovelace

15

Thought so, thanks.

Still not working so must be something else. Thanks for helping guys just dont think I am ever going to get the hang of HA, thought it would be something someone with no experience could pick up but dont think I have the coding knowledge to do this.

16

So I am sitting here looking at the picture glance card configuration (which is not the same thing as your screenshot prior)

I think what you want is the ENTITIES CARD.

17

The error is that you are missing the required attribute entities, which displays a series of entities at the bottom of the picture-glance.

Change to a picture-entity card instead with the same configuration. The picture-entity card does not require a list of entities to display.

    - type: picture-entity
      title: Home
      entity: device_tracker.matts_iphone
      state_image:
        "not_home": /local/Matt_Away.png
        "Work": /local/Matt_Home.png
        "home": /local/Matt_Home.png
18

fwiw, I use an extended button-card setup for that, with dedicated images for the state and an overlay for the zone my family is in, displayed in the bottom right corner. Added to that I use a colored background to help identifying the state. Green for home, white for abroad, purple for zoning in life360 and grey for not_home :wink:

43

it needs 3 pictures for all family members, and an image for each zone.

19

Thanks Guys!

I changed my code to that provided by petro and the card works, show the picture and shows the name of the device and status “Away”

It is not the card I was after but might leave it for now. I think the card I need is as per flamingm0e says which is an entity card so will give that a read and see how I get on.

Thank you for all the help!

20

Just remember, that card doesn’t have the ability to change the picture based on the state.

21

This states otherwise.

By default it uses entities card model.

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”.