is there an easy way to write a new undefined state for any light group that only some of the lights are on/off? this whole templating code in homeassistant is way over my head and can’t quite grasp how to create it 
So I was able to finally make this happen, but it required a whole bunch of modifications. I basically got a sensor template recommended by chatGPT and downloaded browsermod plugin to customize the hold action. Also added some animations.
Video demo:
1 Like
This no longer works. Something recently changed.
style: |
ha-card { height: 150px !important; }
Starting from card-mod 3.4.0 it must be:
...other options...
card_mod:
style: |
ha-card { height: 150px !important; }
...other options...
i.e. the “card_mod” keyword introduced in ver. 3 became MANDATORY.
1 Like
I should have done a little more research before I posted. I just found that out and was on my way back to edit my post but you had already commented. Thanks though.
1 Like
For experienced users who deal with card-mod for some time, a necessity to add the “card_mod” keyword is obvious.
Earlier a card-mod code usually worked w/o that “card_mod” keyword (it was only crucial for styling elements inside picture-elements card). But adding the “card_mod” keyword was recommended as a “good practice” for future compatibility.
That is why in Community (like this dedicated card-mod thread) people may find plenty of card-mod examples w/o this “card_mod” keyword; many of these examples may still work with added “card_mod” keyword (with a proper indentation).
I would like to embed cards saved in yaml, but I don’t understand how to insert the style properties to position it, and maybe also some css via card_mod.
that’s what I thought but it doesn’t work.
- type: picture-elements
image: /local/floorplan/out giorno.png
elements:
- !include /config/tablet/pozzetto_cancello.yaml
the card accepts it and places it in the lower left corner.
the next step I would like to take would be the one written above.
- type: picture-elements
image: /local/floorplan/out giorno.png
elements:
- !include /config/tablet/pozzetto_cancello.yaml
# possible codes
style:
top: 50%
left: 50%
card_mod:
style: |
ha-card {
background: rgba(255, 0, 0, 0.01);
}
I wonder if there is a way?
thanks
You cannot use !include this way. May be used for a whole dictionary or a list.
Thanks for the reply.
but unfortunately it is not clear to me where I could use it and I try to do some research.
But is there a way to recall the same cards in different picture elements, or do I have to rewrite the code completely?
This is an off-topic here. Please create a separate thread.
In short:
some_list:
- !include dict.yaml
- !include dict.yaml
- !include dict.yaml
some_list: !include list.yaml
some_dict: !include dict.yaml
where:
dict.yaml is
xxx: xxx
xxx: xxx
xxx: xxx
list.yaml is
- xxx: xxx
- xxx: xxx
yyy: yyy
- xxx: xxx
Thanks, I didn’t mean to be off topic.
My problem is that I can’t style an “include”, which I thought could be done.
Thanks
It’s OK. If you need to continue discussing any “!include” issues in another thread, you are welcome to ping me there (by @).
2 Likes
Hi,
is it possible to truncate state-label (like long error messages or long status information) within picture elements card
thank you
Hi,
This is propably something stupid, but I cannot get this to work.
Inside picture element I would like to move the icon according to detected sensor values. The icon is stuck on the lower left corner.
- type: state-icon
entity: binary_sensor.liiketunnistin_ld2450_presence
title: Olohuone läsnäolo
style:
color: red
card_mod:
style: |
:host {
{% if states('binary_sensor.liiketunnistin_ld2450_presence') == 'off'
and states('binary_sensor.liiketunnistin_ld2450_p0x') > '0.0' %}
left: 23%;
top: 50%;
color: black;
{% else %}
left: {{ 43 - (states('sensor.liiketunnistin_ld2450_p0y') | float / 20) }}%;
top: {{ 88 -((states('sensor.liiketunnistin_ld2450_p0x') | float + 150) / 40) }}%;
color: red;
{% endif %}
}
Convert to float first.
You are comparing strings now.
UPDATE: this is a binary sensor, you cannot convert it to float!!!
No default value specified, the sensor could be unavailable/unknown.
Also,
what do you want to achieve by specifying “color”? It will not work.
Thank you for the fast reply.
Color is not significant, just the icon position, so I can leave that out
Like I wrote, I’m missing the basics.
I get an error trying to convert to float
{% if states('binary_sensor.liiketunnistin_ld2450_presence') == 'off'
and states('binary_sensor.liiketunnistin_ld2450_p0x') | float > 0.0 %}
ValueError: Template error: float got invalid input ‘unknown’ when rendering template ‘- type: state-icon entity: binary_sensor.liiketunnistin_ld2450_presence title: Olohuone läsnäolo style: color: red card_mod: style: | :host { {% if states(‘binary_sensor.liiketunnistin_ld2450_presence’) == ‘off’ and states(‘binary_sensor.liiketunnistin_ld2450_p0x’) | float > 0.0 %} left: 23%; top: 50%; color: black; {% else %} left: {{ 43 - (states(‘sensor.liiketunnistin_ld2450_p0y’) | float / 20) }}%; top: {{ 88 -((states(‘sensor.liiketunnistin_ld2450_p0x’) | float + 150) / 40) }}%; color: red; {% endif %} }’ but no default was specified
Also do not know, how to specify default.
Can you fix my code and I try to learn more with that?
I cannot “fix” it since I do not have your entities.
May only give you suggestions.
The 1st part should be
{% if is_state('binary_sensor.liiketunnistin_ld2450_presence','off') .... %}
And the 2nd part is completely wrong since a binary_sensor may only be on/off.
If this is a sensor - then it should be
and states('sensor.liiketunnistin_ld2450_p0x') | float(default=0) > 0
In general, suggest to discuss jinja templates in separate threads & leave THIS thread for discussing using picture-elements.
Thank you for the suggestions. I will try to fix this now.
And for the record, I am using picture-element and trying to get the icon move according to sensor values in real time.
I am looking for a method to hide the sensors name which is always shown in case of a state-badge.
Previous suggestions had been to use the colour of the background but in this case crossing multiple colours it will not work.
Is there another way to hide this text or replace it for display only ?
instead of using the color of the background just use transparent as the color.
1 Like