However, I am currently trying to display my switched-on lights differently. I would like to have them with a yellow button background, preferably a little blurred and the icon itself also in yellow. However, the icon background is very small and I can’t get it any bigger, can anyone help me here, also with the blurred effect?
Hello, can you pls say me: how can I make a smaller this card?
But the card or picture is too big. I will be very happy when it go to half of the height.
The card_mod of the picture-elements card is written after the state-label uses the variable.
I have this issue myself and am still searching for a way to fix it.
If you dont mind re-typing it for each element you could fix it by moving the card_mood to the element itself
PS: Probably a typo in pasting here but your state-label element should be below the elements row
This is wrong.
Either use a “:host” or move card_mod code to the picture-elements card’s level.
Suggest you to check a proper syntax as per info provided in the 1st post.
BTW, in THIS particular case there is no need to use some particular CSS var.
This CSS var can be named like “–my-fictious-climate”. Honestly I have no idea if this “–color-state-climate” does exist. Means - the whole code may be written as
No, it does not matter.
The only reason to define a variable on a picture-element card’s level is “this var is used in many elements”. Otherwise the variable may be defined on a particular element’s level.
Hi everyone, I’m trying to create a very cute way to display my solar panels info, with the same layout used in my solar panels’ application UI. The only thing I miss is changing a rectangle’s height depending on the battery’s level. I wonder if somebody knows how to help me.
I would like to display the operating modes of a building automation center using image-element cards. The number of different operating modes is 16, these will be shown in the images. The location of the captions and data to be displayed is the same in each image. If I use 16 image-element cards, from which I select the visible image with a conditional card, everything works. Is there a simpler solution to this?
The attached program demonstrates what I want, but it doesn’t work like this. I read through this page, but I couldn’t find a solution.
I appreciate your help!
type: picture-elements
image: /local/img/transparent.jpg
elements:
- type: state-label
entity: sensor.blank
prefix: HMV
style:
top: 18%
left: 74%
color: black
font-family: Times New Roman
font-size: 90%
font-weight: bold
- type: state-label
entity: sensor.blank
prefix: tároló
style:
top: 24%
left: 74%
color: black
font-family: Times New Roman
font-size: 90%
font-weight: bold
- type: state-label
entity: sensor.blank
prefix: Kazán
style:
top: 21%
left: 8%
color: black
font-family: Times New Roman
font-size: 90%
font-weight: bold
- type: state-label
entity: sensor.blank
prefix: Hő-
style:
top: 73%
left: 8%
color: black
font-family: Times New Roman
font-size: 90%
font-weight: bold
- type: state-label
entity: sensor.blank
prefix: szivattyú
style:
top: 79%
left: 8%
color: black
font-family: Times New Roman
font-size: 90%
font-weight: bold
- type: state-label
entity: sensor.homerseklet_1
style:
top: 5%
left: 25%
- type: state-label
entity: sensor.homerseklet_2
style:
top: 61%
left: 25%
- type: state-label
entity: sensor.homerseklet_3
style:
top: 84%
left: 25%
- type: state-label
entity: sensor.homerseklet_4
style:
top: 61%
left: 49%
- type: state-label
entity: sensor.homerseklet_5
style:
top: 84%
left: 49%
- type: state-label
entity: sensor.homerseklet_6
style:
top: 28%
left: 90%
- type: state-label
entity: sensor.homerseklet_7
style:
top: 61%
left: 90%
visibility:
- condition: state
entity: switch.c_gepeszet
state: "on"
- condition: and
conditions:
- condition: state
entity: switch.cg_gephaz
state: "on"
title: Hőközpont
card_mod:
style: |-
ha-card {
{% if is_state('switch.r21', 'on') %}
{% set IMAGE = '/local/img/hk1.jpg' %}
{% elif is_state('switch.r22', 'on') %}
{% set IMAGE = '/local/img/hk2.jpg' %}
{% elif is_state('switch.r23', 'on') %}
{% set IMAGE = '/local/img/hk3.jpg' %}
{% else %}
{% set IMAGE = '/local/img/hk0.jpg' %}
{% endif %}
font-size: 17px;
color: white;
background-color: black;
}
Do you know that if switch.r21 is ‘on’ and the state of some of the others is changed to ‘on’, the image will still be for switch.r21? Shouldn’t it be more dynamic?
