Unfortuantely not sure what can be wrong. Seem like some weird issue as it’s working on one person not another. You would have to try to debug it with Chrome inspect tool looking for some errors in the console and checking the html code.
Regarding moving primary_info - you can always add i.e. markdown card to vertical stack with person-card and set the primary_info to none like below:
Edit:
Looking at the documentation of mushroom-person-card there is a parameter called layout. Instead of above code you can just add it to your person card:
- type: custom:mushroom-person-card
name: Irina
entity: person.irina
layout: vertical # Add this line
Thank you. Will try to add this code.
I think you right about Iphone entity’s.
I check battery level and state in dev tools today and it’s still shows yesterday information. Looks like it’s not refreshing data until I open my wife Home assistant companion app. Will do my investigation and report back, maybe someone else struggle with same issue.
Thank you again
edit:
it’s something about state attribute: state or state_not is working fine for my Android phone but not working for Iphone. When I change state from FULL or Charging to anything else it’s always show me phone is CHARGING, even if it’s not.
conditions:
- entity: sensor.irinab_iphone_battery_state
state_not: not charging
ButtonCardJSTemplateError: ReferenceError: float is not defined in 'return `<ha-icon icon="mdi:map-marker-distance" style="width: 20px; height: 20px; color: d...'
Hello all im “new” in HA.
I have a standard layout wich i had to reconfigure after the nest update.
In my old environment i wasnt able to get a new one inserted and started a new clean install. That did it and i have my nest thermostat working now.
I would like to create a personal card, i have seen a lot of nice ones here. but i nowhere can find a youtube video with an explanation how to - install - insert the codes on the right places, in which *.yaml code needs to be pasted , and what card to use… can someone guid me please? im a quick learner so when i visualy have done it i get the hang of it…
Got somehow inspired by development I’ve seen in this thread, so decided to replace old badges with something more visually pleasing… So here the outcome so far:
Background image is dynamically changing based on current zone (so yet need to find nice pictures for all defined zones ). Also planning to replace picture with map view for being away, but not at predefined zone.
Sure, here it goes. I added some comments to the code, so it is easier to understand and also gives some hints how to configure in your particular environments… or improve.
type: custom:config-template-card
variables:
- states['sensor.mirek_icloud_iphone_zone_name'].state # name of zone person is in, it is case sensitive for image selection!
- states['sensor.mireks_iphone_geocoded_location'].state # location address from reverse geocoding
- states['sensor.mireks_iphone_ssid'].state # SSID of WiFi connection provider
- states['sensor.mireks_iphone_sim_1_2'].state # BSSID of mobile provder
- states['sensor.mirek_icloud_iphone_badge'].attributes.entity_picture # person image
- states['device_tracker.mirek_icloud_iphone'].attributes.home_distance # distance to home zone
- states['sensor.mirek_icloud_iphone_dir_of_travel'].attributes.travel_time_min # travel time to home zone
- states['sensor.mirek_icloud_iphone_dir_of_travel'].attributes.arrival_time # estimated arrival time if travel started now
- states['sensor.mireks_iphone_battery_level'].state # mobile battery level
entities:
- device_tracker.mirek_icloud_iphone # device that any change triggers template updates, perhaps more integrations to be added
card:
type: picture-elements
card_mod:
style: |
ha-card {
height: 255px !important;
}
image: ${'/local/' + vars[0] + '.jpg'} # background image file name combined from zone nam (eg. /local/Home.jpg)
elements:
- type: image # here comes semi-transparrent image overlayed 4 times over mackgroud to create darkened area to display card data
image: /local/overlay2.png # could be single image with proper transparency gradient used, but I have no handy one, need to refresh my graphic skills yet :-)
style:
top: 49%
left: 100px
width: 400px
- type: image
image: /local/overlay2.png
style:
top: 49%
left: 110px
width: 400px
- type: image
image: /local/overlay2.png
style:
top: 49%
left: 120px
width: 400px
- type: image
image: /local/overlay2.png
style:
top: 49%
left: 130px
width: 400px
- type: custom:layout-card
style:
top: 0%
left: 0%
transform-origin: left top
transform: translate(-0%,-0%)
layout_type: grid # here comes definition of grid I use to place different markdown cards with details
layout_options:
grid-template-columns: 170px 170px auto
grid-template-rows: 40px 100px 30px 30px
grid-template-areas: |
"pic loc img"
"pic adr img"
"wifi dist img"
"ssid time img"
"bat arr img"
cards:
- type: picture-entity
entity: person.mirek_malinowski
show_name: false
show_state: false
image: ${vars[4]}
view_layout:
grid-area: pic
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 0px;
}
div#states.card-content {
padding: 0px;
}
- type: markdown
content: ${'<ha-icon icon="mdi:map"></ha-icon>' + ' ' + vars[0]}
view_layout:
grid-area: loc
card_mod: # this card mod code is used to remove background of overlay markdown cards, repeated for each card
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 8px;
}
div#states.card-content {
padding: 8px;
}
- type: markdown
content: ${ vars[1]}
view_layout:
grid-area: adr
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 8px;
}
div#states.card-content {
padding: 8px;
}
- type: markdown
content: ${'<ha-icon icon="mdi:wifi"></ha-icon>' + ' ' + vars[2]}
view_layout:
grid-area: wifi
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 8px;
}
div#states.card-content {
padding: 8px;
}
- type: markdown
content: >-
${'<ha-icon icon="mdi:cellphone"></ha-icon>' + ' ' +
vars[3]}
view_layout:
grid-area: ssid
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 8px;
}
div#states.card-content {
padding: 8px;
}
- type: markdown
content: >-
${'<ha-icon icon="mdi:battery-50"></ha-icon>' + ' ' +
vars[8] + '%'}
view_layout:
grid-area: bat
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 8px;
}
div#states.card-content {
padding: 8px;
}
- type: markdown
content: >-
${'<ha-icon icon="mdi:map-marker-distance"></ha-icon>' + ' '
+ vars[5] +' km'}
view_layout:
grid-area: dist
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 8px;
}
div#states.card-content {
padding: 8px;
}
- type: markdown
content: >-
${'<ha-icon icon="mdi:map-clock"></ha-icon>' + ' ' +
vars[6]}
view_layout:
grid-area: time
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 8px;
}
div#states.card-content {
padding: 8px;
}
- type: markdown
content: >-
${'<ha-icon icon="mdi:home-clock"></ha-icon>' + ' ' +
vars[7]}
view_layout:
grid-area: arr
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
h1.card-header {
padding: 8px;
}
div#states.card-content {
padding: 8px;
}
Hi @Mandoliinimies
I think your cards are mega. especially the first card with your photo and the information as icons. Would you have the code for the first card?
Many thanks and best wishes from Switzerland.
The code is currently not working properly. I need to take a closer look at it when I have more time to get it fixed, after which I can share it. Unfortunately, I can’t say a schedule for this. I have been away from HomeAssistant for a long time, but now I’m getting back into it.
This is what I came up with. I have 4 of these on my main dashboard in a 2x2 grid, on touch it opens directly the map view with the last known position. The sensor values are showing:
Known location/zone or “on the way”
Phone battery status (charging or not changes icon) and current level (changing to redish if lower than 35)
Currently connected wi-fi network SSID
Distance to Home-zone
The pictures are bitmoji with removed background. The circle border changes the color using the actual zone the person.entity is in.
It looks really good! I love it!
I’m not familiar with YAML code. I have installed button-card and I can’t get it to work… I made some changes to the code but even with the original code it didn’t work.
Would be easier if you could post your code as a preformatted text instead of picture. In the post editor click </> and paste your code where it says.
PS.
You have to replace all person.xxx occurance with your entity. You can check it by going to Developer Tools → States and in the entity filter search start typing ‘person’.
So here the outcome so far:
