Person Cards - Show Off Yours

Hi, would it be possible to post the code that integrates the travel time to location X? Thanks in advance

Hi @Thomas1509,

Sure. I am using the Waze Travel Time integration (Waze Travel Time - Home Assistant) so there is not much coding to show.

You just have to get the integration working with a Origin and Destination (you just need to use a device_tracker.mobile_phone as origin and define the destination. This will create a sensor that is the one that you need to include on the card.

Hope it helps

2 Likes

Alternatively iCloud3 if you have iPhones, that gives you a lot of sensors for distance, time, etc.

1 Like

Just finished mine. Background is picture of zone, border around photo is sleep status/phone activity. Bar card is for travel time and all lower are app sensors

8 Likes

Mind sharing your code as reference for others?

image

type: custom:vertical-stack-in-card
style: |
  ha-card{
   box-shadow: none;

  }
cards:
  - variables:
      person: person.agata
      bg: |
        [[[
          if (states['person.agata'].state == 'home' )
            return '#191f2b';
          return 'url(/local/agata/' + states['person.agata'].state +
        '.png';
        ]]]
    type: custom:button-card
    triggers_update: all
    show_name: false
    show_icon: false
    show_state: false
    show_label: false
    styles:
      card:
        - box-shadow: none
        - border-radius: 15px 15px 0 0 var(--primary-background-color)
        - padding: 0
        - height: 140px
        - background: var(--primary-background-color)
      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
        - row-gap: 0px
    custom_fields:
      item1:
        card:
          type: custom:button-card
          styles:
            card:
              - height: 20px
              - border-radius: 0
              - border: 0px solid var(--primary-background-color)
              - box-shadow: 1px black
              - padding: 0
              - background: var(--primary-background-color)
      item2:
        card:
          type: custom:button-card
          entity: '[[[ return variables.person ]]]'
          show_entity_picture: true
          show_name: false
          show_icon: false
          styles:
            card:
              - padding: 0
              - height: 120px
              - box-shadow: none
              - border-radius: 3px 3px 0 0
              - background: null
              - background-image: '[[[ return variables.bg  ]]] '
              - background-size: cover
              - background-position: center
              - overflow: visible
            img_cell:
              - width: 80px
              - height: 80px
              - border-radius: 509%
              - border: 4px solid
              - border-color: |

                  [[[
                    if (states['sensor.agata_sleep_status'].state == 'Awake' )
                      return "var(--state-icon-active-color)";
                    return "var(--state-icon-color)";
                  ]]]
              - place-self: center
              - position: relative
              - top: '-29%'
            grid:
              - grid-template-areas: '"i"'
            entity_picture:
              - width: 85px
              - filter: |
                  [[[
                    if (states['person.agata'].state != 'home' )
                      return 'grayscale(100%)';
                    return 'null';
                  ]]]
  - type: custom:bar-card
    max: 500
    height: 12
    style: |
      bar-card-value {
       margin: auto;
       margin-top: -4px;
         
       text-shadow: 0px 2px #000000;
      color: gray;
      } 
      ha-card{
       background: rgba(0, 0, 0, 0.0);
       margin-top: -45px;
      }
    entities:
      - entity: sensor.agata_do_domu
    positions:
      icon: 'off'
      indicator: 'on'
      minmax: 'off'
      value: inside
    name: ' '
  - type: horizontal-stack
    cards:
      - entity: proximity.agata
        show_entity_picture: true
        show_name: false
        font-size: 11px
        show_state: true
        icon: mdi:map-marker-distance
        styles:
          card:
            - height: 55px
            - border-top: 1px solid var(--state-icon-color)
            - background: none
            - padding-top: 9px
            - margin-bottom: 2px
            - font-size: 11px
        state:
          - operator: '=='
            value: 0
            color: var(--state-icon-color)
          - operator: '!='
            value: 0
            color: var(--state-icon-active-color)
        type: custom:button-card
      - entity: sensor.oneplus_a6000_poziom_baterii
        show_entity_picture: true
        show_name: false
        show_state: true
        show_label: true
        font-size: 11px
        styles:
          card:
            - height: 55px
            - border-top: 1px solid var(--state-icon-color)
            - background: none
            - padding-top: 9px
            - margin-bottom: 2px
            - font-size: 11px
          icon:
            - color: |
                [[[
                  if (states['binary_sensor.oneplus_a6000_czy_sie_laduje'].state == 'on' )
                    return "var(--state-icon-active-color)";
                  return "var(--state-icon-color)";
                ]]]
        state:
          - operator: '>'
            value: 90
            icon: |
              [[[
                if (states['binary_sensor.oneplus_a6000_czy_sie_laduje'].state == 'on')
                  return 'mdi:battery-charging-100';
                  return 'mdi:battery';
              ]]]
          - operator: <
            value: 89
            icon: |
              [[[
                if (states['binary_sensor.oneplus_a6000_czy_sie_laduje'].state == 'on')
                  return 'mdi:battery-charging-' + Math.ceil(entity.state / 10) * 10;
                 return 'mdi:battery-' + Math.ceil(entity.state / 10) * 10;
              ]]]
        type: custom:button-card
      - entity: sensor.oneplus_a6000_wykryta_aktywnosc
        show_entity_picture: true
        show_name: false
        show_last_changed: true
        show_state: false
        show_label: true
        styles:
          card:
            - height: 55px
            - border-top: 1px solid var(--state-icon-color)
            - background: none
            - padding-top: 9px
            - margin-bottom: 2px
            - font-size: 11px
        state:
          - value: still
            icon: mdi:human-female
            label: null
            color: var(--state-icon-color)
            font-size: 11px
          - value: in_vehicle
            label: null
            color: var(--state-icon-active-color)
            font-size: 11px
        type: custom:button-card
      - entity: sensor.oneplus_a6000_stan_telefonu
        show_entity_picture: true
        show_name: false
        font-size: 11px
        show_state: false
        show_last_changed: true
        styles:
          card:
            - height: 55px
            - border-top: 1px solid var(--state-icon-color)
            - background: none
            - padding-top: 9px
            - margin-bottom: 2px
            - font-size: 11px
        state:
          - value: ringing
            icon: mdi:phone-ring
            color: var(--state-icon-active-color)
          - value: idle
            icon: mdi:phone-hangup
            color: var(--state-icon-color)
          - value: offhook
            icon: mdi:phone-in-talk
            color: var(--state-icon-active-color)
        type: custom:button-card
      - entity: sensor.czas_do_alarmu_agata
        show_entity_picture: true
        show_name: false
        show_state: true
        icon: mdi:alarm
        state:
          - value: none
            color: var(--state-icon-color)
          - operator: '!='
            value: none
            color: var(--state-icon-active-color)
        styles:
          card:
            - height: 55px
            - border-top: 1px solid var(--state-icon-color)
            - background: none
            - padding-top: 9px
            - margin-bottom: 2px
            - font-size: 11px
        type: custom:button-card

6 Likes

Hi,

How do you get more than one device tracker into Waze Travel Time - Home Assistant ?

Hi. Just add the integration again. You may add as much as you need.

Hi,

I tried to add the integration in configuration.yaml but the sensor didn’t show up. When I added the integration as an ordinary integration it worked, but then I can only have one. Do you know what I’m doing wrong?

I think that Waze integration can only be done through the UI. On the Integrations screen, click Add Integration and choose “Waze Travel Time”… fill everything and you should get another sensor. It is working for me.

Thanks, that’s worked perfectly! Appreciate the help :grin:

1 Like

xbox-button-card
I specifically created an account on this forum to thank you for your code and images of your person cards, I’ve been wanting to create a dashboard for my Xbox friends and with your help and little google/hacking out your design, I finally created something I’m happy with! Thank you! Also CSS grids are still a mystery to me, I just got lucky :smiley:

4 Likes

Thanks very much for sharing this - Would you have any idea why my cards look like the below when yours look a lot tidier?! (Specifically the size of the image and the size of the card itself)
image

Edit: I’ve resolved the above issues by putting two cards side by side in a horizontal stack (which is what it looks like you’ve done). Oddly though, I can’t get the coloured backgrounds / rings around my images, even though I’ve copied your configuration for that section verbatim - Any clues there?

image

6 Likes

Here’s mine/ours.

  • 1st row: pictures of wife and me with zone status
  • 2nd row: obviously battery gauges for our phones
  • 3rd row: shortcuts for both of us for ringer mode, bluetooth state, charger state and finde_my_phone-script → the shortcuts are clickable and rotate between the ringer mode between ringer, vibrate and silent, bluetooth on/off or starting a script that rings the phone to find it in the house

Additionally we have a car card with picture an zone status and in the second row clicable buttons to close/open door lock, windows, sunroof and of course tank and pedometer. Colors and icons change depending on the status.

Not all is super tidy an fitting but everything works for now and is especially easy to use from our mobile phones.

3 Likes

Mine & my family (by picture-elements card).

2 Likes

Hi. Could you share the code to that. That looks very nice. Would be great. Thanks

1 Like

@TillTaucher :
Here’s the link to the topic of the one who created it initially;

The code of the card is partially in there.

Thanks. That was the essential hint. That worked. Great :+1:

Hi - lovely card.

Where is button_card_templates: in relation to type: custom:button-card in yaml?

I use yaml for my Lovelace, but cannot get that template to be accepted.

Edit: worked it out - thanks anyway!

1 Like