Awesome! Be sure to give likes on the helpful posts in this thread.
2 Likes
Note that you CANNOT use templates here - Picture elements card (and none of stock cards, only Markdown) does not support templates.
That is why it was proposed to use card-mod for this.
Check the 1st post:
1 Like
Pretty happy with my current picture element floorplan.
1: But would like to have a slightly nicer state badge than the red ones. Because I’ve noticed that it’s not possible to add prefix or subfix words to them, it’s kind of invisible in the picture. The only text that is there is how the entity is named, which I don’t want to be that way. So now I’ve tested color: transparent which removes the text. There’s a box in the gui called heading but if I write something there it’s nowhere to be seen either.
So can I somehow add my own text there???
2: If I want completely different push buttons, is type: custom button-card the one that applies?
Or from your post no. 15 type: custom: hui elements
row_type: toogle-entity for an entity’s list with side slider.?
3: Is it possible to get “Nuvarande: -954 w” electricity consumption to be in red text when the value is +plus, and green text when the value is -minus?
Other improvment i should do?
PS: Great job with all the guides at the beginning of the thread. You are the best and so helpful =)
I’d suggest posting your current card code so folks can work through your multiple questions.
Hi Everyone, i want to create a interaktiv Floor Plan that has adjustable size.
i managed to get a good result by testing with the picture card. You can ignore the media aspect ratios.
type: picture
image: /local/Dashboard/Grundriss_Zeichenfläche_2160px.png
card_mod:
style: |
ha-card {
width: 100% !important;
height: 90vh !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
background: transparent;
}
img {
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
}
@media (min-aspect-ratio: 19/9) and (max-aspect-ratio: 23/9) {
ha-card {
height: 80vh !important;
}
}
@media (min-aspect-ratio: 23/9) and (max-aspect-ratio: 80/9) {
ha-card {
height: 80vh !important;
}
}
@media (min-aspect-ratio: 80/9) {
ha-card {
height: 50vh !important;
}
}
if i switch the type from “picture” to “picture-elements” the view i wrong and my css code seems not to work anymore. Seems that the “img-Tag” can not be used with “picture-elements”
If someone has a solution, or a better way to automaticly size the Floorplan iam open for every solution.
(wrong with type: picture-elements)
(target with type: picture)
Do you mean that card-mod does not work for the image as expected? Since PE is a different card, you cannot blindly use same card-mod code from another card for PE. Suggest to check with Code Inspector for a proper card-mod path (coild be correct though but you need to confirm it).
yeah okay, but i need a solution for PE. And the question is, why is PE not programmed that it work like normal picture or even give me the option to tag it as a picture
This is not a proper place to ask similar questions, suggest to create a discussion in Frontend discussions on GitHub.
Note that card-mod related questions are better to ask in the main card-mod thread. This particular thread is mainly for using stock features.
i dont know where i can find it… i just need help… i cant solve the problem… worken on it for 3 days…
I understand. Cannot help you myself these days, away from PC. That is why you should better ask in main card-mod thread, may be you will get a help faster.
You could possibly add your picture: card including its card mod css to the picture-elements: card as an element. Picture elements card - Home Assistant
You will need a base picture for the picture elements card. Can be a blank svg.
All this effort is much appreciated. However, I’ve been racking my brain for a while on something: How can I override the rgb color of a state-icon? e.g. Light reports color red, icon is therefore shown red but I’d like to have it black. Been trying to solve this for about four hours now and still got nowhere. Some of the things I’ve tried:
'--state-light-active-color': '#000000'
'--state-icon-color': lightgrey
color: >
[[[
return entity.state === 'on'
? '#000000'
: 'lightgrey';
]]]
style: | #with and without card_mod keyword
:host {
--mdc-icon-size: 1.4vw;
--state-light-active-color: #000000;
--state-icon-color: lightgrey;
filter: {% if is_state(config.entity, 'on') %} brightness(0) saturate(100%) {% else %} none {% endif %};
align-items: center;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 100%;
display: flex;
height: 3vw;
justify-content: center;
left: [[left]];
margin-left: -1.5vw;
margin-top: -1.5vw;
top: [[top]];
transform: scale(1.2);
width: 3vw;
}
you mean these elements ?:
- type: icon
icon: mdi:bell
style:
top: 6%
left: 20%
card_mod:
style: |
ha-icon {
--card-mod-icon: mdi:home;
--card-mod-icon-color: green;
animation: blink 2s ease infinite;
}
@keyframes blink {
100% {opacity: 0}
};
- type: state-icon
icon: mdi:bell
entity: sun.sun
style:
bottom: 6%
left: 20%
card_mod:
style: |
:host {
--card-mod-icon: mdi:flash;
--card-mod-icon-color: blue;
animation: blink 2s ease infinite;
}
@keyframes blink {
100% {opacity: 0}
};
2 Likes
Note that these things may be set without cardmod.
Probably yes.
I was however showing the power of card-mod overriding the built in options.
And adding some animation as a bonus 
btw, I need some help here Lovelace: Decluttering Card - #644 by Mariusthvdb where I hope to find a way to add the styling (card_mod_ of the picture-elements card into a decluttering.
the styling itself works, so I didnt post it here, it seems to be a decluttering issue specific to picture-elements
How do I force a custom card element within a picture-elements card to scale with the background image? I have placed an apexcharts-card on top of a picture of the earth so that a ring graph show the progress around the earth. For now, I have scaled the graph with style: width: 57%. This sort of works but is not ideal. When picture element card size changes, the diameter and line width of the radial bar graph do not quite scale with the background image. I suspect that I need to do this with card_mod but can’t figure it out and much googling and reading this thread have not shown me the solution. Here is my code for this card:
type: picture-elements
elements:
- type: custom:apexcharts-card
style:
top: 51.5%
left: 18.0%
width: 57.0%
transform: translate(-50%,-50%) scale(100%,100%)
series:
- entity: sensor.solar_current_trip_around_the_earth
name: " "
color: EE2347
show:
legend_value: false
in_header: false
name_in_header: false
offset_in_name: false
header:
show: false
chart_type: radialBar
apex_config:
legend:
show: false
plotOptions:
radialBar:
hollow:
size: 75.0%
dataLabels:
show: false
card_mod:
style: |
ha-card {
--ha-card-background: rgba(0, 0, 0, 0);
--ha-card-border-width: 0; /* Optional: Remove border */
}
- type: image
style:
top: 51.5%
left: 18.0%
width: 7.0%
transform: var(--my-angle-style)
"--mdc-image-size": 100%
image: /api/image/serve/6dfa8a3acd61879b3d114923e5e5753f/512x512
entity: sensor.solar_trips_around_the_earth
- type: state-label
entity: sensor.solar_trips_around_the_earth
style:
left: 18.0%
top: 51.5%
font-size: 14px
color: red
- type: image
title: Rocket Right
entity: sensor.solar_trips_to_the_moon
image: /api/image/serve/348d6e03ceb77b91e349ae8ba5215a3c/512x512
style:
top: 50.0%
width: 7%
transform: var(--my-transform-style)
"--mdc-image-size": 100%
card_mod:
style: |
:host {
left: {{ states('sensor.rocket_position') }}%;
}
- type: state-label
style:
top: 40.0%
font-size: 14px
color: white
entity: sensor.solar_trips_to_the_moon
card_mod:
style: |
:host {
left: {{ states('sensor.rocket_position') }}%;
}
image: /api/image/serve/7ea660183d997fa7a8665afa89e54a4c/512x512
grid_options:
columns: full
visibility:
- condition: user
users:
- bbb8aeba6bb34acdac156ea9b48d40fa
- 1c52e099336747cabe7cc70d12c46b01
- 9c6767cc5d8b49ebbb392b0b0214a8bd
card_mod:
style: |
ha-card {
{% set ANGLE = states('sensor.rocket_orientation')|int %}
--my-transform-style: translate(-50.0%, -50.0%) rotate({{ANGLE}}deg);
}
ha-card {
{% set ANGLE = states('sensor.solar_current_trip_around_the_earth')|float * 360 / 100 %}
--my-angle-style: translate(-50.0%, -50.0%) rotate({{ANGLE}}deg);
}
hui-state-image-element:
$ state-badge$: |
:host {
width: 100% !important;
height: 100% !important;
}
This is what the card should look like:
At the worst end of the poor scaling, this is how it sometimes looks:
As you can see, both the diameter of the radial bar graph and the line thickness of the graph have shrunk too much. Any tips how to get this to scale properly with the background image?
If the car is the full width of the dashboard you could try viewport width vw rather than %.
Unsure if any scaling I used in the below can help?
Thanks for the reply. The card is not the full width of the dashboard. It’s in a Sections layout view configuration.