Hi,
I’m using picture cards to display the SoC of a battery and range of a car. I would also like to show an additional icon per card when the battery or the car is charging. Home Assistant has this information, but is it possible to add it in this card type, or is there any other way to achieve this?
Yes, this is possible. See documentation of icon element in picture-element: Picture elements card - Home Assistant
Thanks, I haven’t tried this element yet. Technically it’s working for what I’m trying to do, but positioning elements is a nightmare. It looks different on every device and in preview.
It shouldn’t make a difference which device you are using. The elements are positioned with a percentage of the image size. If for some reason your image size different per device, you could use the conditional element and use the screen size tag.
Please note you can use xx,xx as a percentage, so that might tweak it a little.
Just to show you what I mean, here’s the diffence between Desktop and Mobile App:
The CSS for the bottom left text is:
bottom: 0px
left: 38%
font-size: 1.12em
Are you using differenti themes?
Just to be sure, can you maybe post your entire card yaml?
Yes, I’m using the default theme on Desktop and ios-light-mode-blue-red-alternative on Mobile.
Here’s the YAML:
type: picture-elements
elements:
- type: state-label
entity: sensor.cupra_born_range_in_kilometers
prefix: 'Reichweite: '
title: Reichweite
style:
bottom: 0px
left: 38%
font-size: 1.12em
- type: conditional
elements:
- type: icon
style:
left: 90%
top: 13%
icon: mdi:battery-charging
conditions:
- condition: state
entity: sensor.cupra_born_charging_state
state: charging
title: Lädt
image: /local/images/cupra_born_square.jpg
Why are you using em and absolute bottom?
I also suggest using percentage for the position. The change of text color is because you are using two different themes.
I was able to set the color in the card, but regarding position, nothing is really working. The reason is that the aspect ratio changes based on the viewport. This can easily be tested be resizing the browser window and watch the card stretching in one direction. It’s especially bad with this layout:
