Would like to have a lovelace card showing last_online and level information from my steam account. I am using glance card but it doesn’t display last_online or level (just when clicked). How should I configure it?
Thanks
take a screenshot of the entity and attributes inside developer tools/states page please.
make a template sensor:
sensor:
- platform: template
sensors:
steam_last_online:
friendly_name: Steam Last Online
value_template: "{{ state_attr('sensor.steam_76561197972608569','last_online') }}"
device_class: timestamp
Then display that in the UI.
That works great, thank you!
Should I add state_attrs to the value_template if I want to display more info?
The ui will only display the state.
Then should I create a template sensor for every property I want to display (last online, level…) and then use a Glance or entities card to see them all?
Yes, if that’s what you want. There are also custom lovelace cards that display attributes.
EDIT: I already made this into an official card 
I have just the solution for you!
I really wanted to be able to create a card for steam without having extra sensors for each thing I want to show in a card. This led me to a solution that uses only the steam sensor for the card itself.
I did that since I wanted to have additional cards for some of my steam friends and didn’t want my sensors to get crowded with template sensors for every attribute I wanted in each card
How the card looks
away \ offline state
online state
while playing a game
Code
Just copy and paste this YAML into a manual card in home-assistant.
You need to change every <steam_id> instance with the sensor you want to use for the card
cards:
- entities:
- entity: sensor.steam_<steam_id>
type: glance
- content: |-
<ha-icon icon="mdi:shield"></ha-icon> <span>
{{ states.sensor.steam_<steam_id>.attributes.level }}
</span>
style: |
ha-icon {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
/* add this back and play with this if the levelis not completely aligned inside the shield */
transform: translateY( -.1em);
width: 2em;
height: 2em;
}
span {
position: absolute;
left: 0;
top: -1em;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
color: var(--primary-background-color)
}
type: markdown
- content: >-
<span>
<ha-icon icon="mdi:clock-outline"></ha-icon>
{% if states.sensor.steam_<steam_id>.state == 'online' %} Online Since {% else %} Last Online {% endif %}
</span> <span> {{
relative_time(states.sensor.steam_<steam_id>.attributes.last_online)
}} ago </span>
style: |
ha-icon {
transform: translateY( -2px);
margin-right: 1em;
}
ha-markdown {
display: flex !important;
justify-content: space-between;
}
type: markdown
- entity: sensor.steam_<steam_id>
attribute: game
icon: ' '
name: Now Playing
style: |
ha-card {
display: none !important;
display: {% if states.sensor.steam_<steam_id>.attributes.game %} block !important{% endif %};
}
type: entity
- content: >-
style: |
ha-card {
display: none;
display: {% if states.sensor.steam_<steam_id>.attributes.game %} block {% endif %};
}
type: markdown
title: Steam
type: 'custom:vertical-stack-in-card'
Dependencies
This might look complicated, but it uses only built-in cards. The only mod that is needed for this is card-mod which can be installed using HACS or manually.
Card parts and logic
The card is built from:
- glance card to show the steam user itself (username, profile image, online state)
- markdown card to show level shield centered
- markdown card to show last online attribute parsed as a timestamp
- (conditional) now playing attribute state
- (conditional) markdown showing the game image
Conditions
I’m showing\hiding the “now playing” parts using CSS and templating provided by the card-mod plugin. This allows me to check if the game attribute exists on the sensor (something I had a little trouble to do with a conditional card for some reason).
Basically, if the game attribute exists, change the CSS of the card from display: block to display: none. I use the !important keyword to override the card’s CSS even so my selector is weaker.
Friends Card
If you want a more compact solution for all of your steam friends, you can use this entities card. I did a few tweaks to show the online status (the dot next to the profile picture) and the game attribute (now playing) instead of the sensor’s state:
same thing, You need to change every <steam_id> instance with the sensor you want to use for the card. Copy and pass the same entity and put a different steam_id in each copy to add more friends (notice that the steam id also exists in the style attribute)
show_header_toggle: false
type: entities
title: Steam Friends
entities:
- entity: sensor.steam_<steam_id>
type: attribute
attribute: game
style: |
hui-generic-entity-row::before {
z-index: 1;
position: absolute;
bottom: 0;
left: 2em;
width: 1em;
height: 1em;
border-radius: 50%;
background: #646464;
background-image: radial-gradient(top, #616161 0%, #616161 20%, #535353 60%);
box-shadow: {% if states.sensor.steam_<steam_id>.state == 'online' %} 0 0 1em #1C1C17,
0 0 1em #FF4242{% endif %};
content: '';
background: {% if states.sensor.steam_<steam_id>.state == 'online' %} #FF4F4F {% endif %};
}
Shouldn’t this be a custom card?
I’m planning to do something to make this a lot simpler. I’ll keep you posted for an actual custom card on HACS if you’re interested
Caveats
The steam sensor takes a long time to get updated. I tried to set the scan_interval to 30 seconds but I can still see a delay from when I come online to when home assistant is being updated. If anyone has a solution, please let me know!
If anyone decides to use this, please sent a picture of your card! I would love to see this in other people’s setup. Also, feel free to contact me and give feedback
Changes:
- thanks to @petro I changed the timestamp to a relative timestamp instead of showing the actual date
3 Likes
That timestamp is pretty ugly in the UI, if you go this route you’d want to support using the hui-relative-timestamp element so that it shows similar to last_changed/last_updated.
Yeah, that’s the only thing I couldn’t get. how to change it to “time ago”.
Are you saying if you go this route, you mean if I create a custom component? Or are you saying there’s a solution to the timestamp in this card configuration?
I tried googling hui-relative-timestamp and didn’t find anything
update: I was able to figure it out! changed it in the code. thanks!
the hui-relative-timestamp is for when/if you make a custom card. Seems like you got it working anyways.
yeah I’m still planning to make a custom card to hide all the ugly configuration. But at least it looks better in the meanwhile.
Great job on this!
1 Like
Thanks!
This is now a card on HACS if you’re interested
1 Like
I know this is very old but very confused by this…
Here is what it looks like in the more info popup
But here is what it displays
My sensor code:
- name: "Steam Last Online"
state: "{{ state_attr('sensor.steam_76561198194162311','last_online') }}"
device_class: timestamp
The states under the hood are untranslated, where what you see in the UI is translated. If you’re using a template to get the state, that’s what will appear in the UI. It seems this image is using a template, which is your problem.
1 Like