Are you using this map to show a current status of vacuum cleaning?
Have a look
It creates a camera entity which can be zoomed, trimmed and rotated and even placed above a floor plan.
Ofc you can still use your current approach, just FYI.
Iāve been using that for a couple years, but recently switched to the core Roborock integration which isnāt supported by that card. It also has pretty bad performance when switching between multiple maps. Iāve made my own solution that seems to be working better so far for my needs, just stuck trying to figure out this last issue with the image.
well there is progress:
- background: >
[[[ var rgb = (entity.state === 'on')
? entity.attributes.rgb_color : '211,211,211';
var rgba = 'rgba(' + rgb + ',0.2)';
if (entity.state === 'on')
return `radial-gradient(${rgba} 80%,transparent calc(60% + 1px)),
conic-gradient(var(--button-card-light-color) ${Math.round(entity.attributes.brightness/2.55)}% 0%,
var(--card-background-color) 0% 100%)`;
return `${rgba}`; ]]]
and
triggers_update:
- entity
does a lot of good, thanks to @khaisilk1910 for helping me in Discord!
the final thing I need now is get rid of the actual conic, and have the background inside the img_cell only show that conic in the outer borderā¦
just like in the print cartridge buttonsā¦
I cant see it though
alternative since there is no apparent way to do as I hoped:
img_cell:
- justify-content: center
- background: >
[[[ var rgb = entity.state === 'on'
? entity.attributes.rgb_color : '211,211,211';
var rgba = 'rgba(' + rgb + ',0.2)';
return entity.state === 'on'
? `radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient(var(--button-card-light-color) ${Math.round(entity.attributes.brightness/2.55)}% 0%,
${rgba} 0% 100%)`
: `${rgba}`; ]]]
but, this has developed into a card-mod post, so Ill refrain from elaborating here, my pardon
Out of curiousity: Why is the ā+1pxā inside that percentage calculation? And why is that needed?
it has to do with the left over section of the overlay (but no, it didnt make any difference in solar I could find out)
Iāve found another solution now though:
I am using the same info custom filed, and I overlay it exactly over the icon img_cell of the button-card. It feels a bit hacky, and ofc its not 100% linked to the img_cell itself (not all as a matter of fact, it;'s just a custom field after all) but is is the best I could come up with for now.
Click to unhide this `custom:button-card` yaml, it's off topic here....
custom_fields:
info: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) {
var brightness = Math.round(entity.attributes.brightness/2.54);
var rgb = (entity.state === 'on')
? entity.attributes.rgb_color : '211,211,211';
var rgba = 'rgba(' + rgb + ',0.2)';
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}"
stroke="var(--button-card-light-color,var(--active-color))" stroke-width="2" fill="${rgba}"
style="transform: rotate(-90deg);transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
</svg>
`;
}
]]]
styles:
custom_fields:
info:
- position: absolute
- left: 2%
- top: 4%
- width: 48px
Hello community,
maybe you could help me quickly.
I would like to remove the space above the first entity entry.
Thank you!
My current code is
type: entities
entities:
- entity: sensor.siegesplatz_first_departure
name: 26A (Siegesplatz)
secondary_info: none
- entity: sensor.aspern_zachgasse_first_departure
name: 92A (Zachgasse)
- entity: sensor.oberdorfstrasse_first_departure
name: 25 (OberdorfstraĆe)
show_header_toggle: false
card_mod:
style: |
ha-card {
--mdc-icon-size: 16px;
}
.card-content div {
margin-top: 0px !important;
margin-bottom: 0px !important;
margin-left: -15px !important;
height: 17px;
}
you should always try to target the root element of what is causing your āissueā, otherwise it can get messy.
Youāve targeted .card-content div - but these donāt have a height assigned, instead they get their height from their children.
The height is assigned by the children of this element by setting the line-height:
meaning that this is pretty much all you need to do:
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 16px;
}
hui-sensor-entity-row$:
hui-generic-entity-row$: |
* {
line-height: unset;
}
and then you can still further reduce the top/bottom padding if required by using this instead:
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 16px;
}
.card-content {
padding-top: 5px;
padding-bottom: 5px;
}
hui-sensor-entity-row$:
hui-generic-entity-row$: |
* {
line-height: unset;
}
Thank you loocd for your help.
I do not have any experience in ccs coding, but with some try and error I have completed your code.
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 16px;
}
.card-content {
padding-top: 5px;
padding-bottom: 5px;
}
hui-sensor-entity-row$:
hui-generic-entity-row$: |
* {
line-height: unset;
margin-top: 0px !important;
margin-bottom: 0px !important;
margin-left: 0px !important;
height: 17px;
}
Elseway the icons and text would be shifted.
Thanks again!
youāre right - it seems there was one more change in my dev tools that I didnāt notice was there.
change it to the following and it should work like a charm:
* {
line-height: unset;
height: unset;
}
I have used this code on an other card, but unfortunately there is no change in the card when I modify any value within āhui-generic-entity-row$ā
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 20px;
}
.card-content {
padding-top: 5px;
padding-bottom: 5px;
}
hui-sensor-entity-row$:
hui-generic-entity-row$: |
* {
line-height: unset;
margin-top: 0px !important;
margin-bottom: 0px !important;
margin-left: -20px !important;
height: 17px;
Thatās because you are targeting things that arenāt there.
With CSS you always need to target an element that you can find in the html. So the starting point is always to look at your browserās dev tools:
Card mod starts at ha-card. you are targeting all hui-generic-entity-row that are within a hui-sensor-entity-row.
But if you look at the screenshot above, youāll see that there isnāt a hui-sensor-entity-row in the html tree.
Youāll need to adjust accordingly.
Let me know if you get stuck 
Thank you loocd!
Yes you are right - it should be ācoverā
type: entities
entities:
- entity: cover.kids_room_roller_shutter_3
- entity: cover.roof_roller_shutter_3
- entity: cover.bedroom_roller_shutter
- entity: cover.kitchen_roller_shutter
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 20px;
}
.card-content {
padding-top: 0px;
padding-bottom: 0px;
}
hui-cover-entity-row$:
hui-generic-entity-row$: |
* {
line-height: unset;
height: unset;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
How can I reduce the distance between the entities?
same thing here - you need to go through the document tree and figure out where the sizing is coming from.
If you do that youāll notice that the buttons have huge padding around them:
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 20px;
}
.card-content {
padding-top: 0px;
padding-bottom: 0px;
}
hui-cover-entity-row$:
hui-generic-entity-row$: |
* {
line-height: unset;
height: unset;
}
ha-cover-controls$:
ha-icon-button$:
mwc-icon-button$: |
button {
padding-top: 5px !important;
padding-bottom: 5px !important;
height: unset !important;
}
thereās still some margin left between the four rows, but you can get rid of them in the same way by looking at your dev tools, finding the element that adds that margin and then removing it.
Styling badges 2024.8:
Default:
Even more beautified:
Now try to unsee it )))
And yes, it is card-modded like old-style badges:
code
type: entity
show_name: true
show_state: true
show_icon: true
entity: zone.home
name: some very long long long name
card_mod:
style:
ha-badge $: |
span.label {
color: magenta;
font-size: 14px;
transform: translateY(50px);
line-height: 14px;
}
.badge {
background-color: lightblue !important;
width: 100px !important;
height: 100px !important;
flex-direction: column !important;
border-radius: 50% !important;
border: 2px solid red !important;
}
.info {
align-items: center !important;
}
.content {
transform: translateY(-40px) !important;
}
.: |
:host {
--primary-color: green;
}
ha-state-icon {
--mdc-icon-size: 36px;
margin-top: 24px;
}
state-display {
color: blue;
font-size: 18px;
}
How was it achieved?
It is patched card-mod.js: replace āhui-state-badge-elementā with āhui-entity-badgeā.
Very brute-force way w/o thinking about consequencesā¦
About circular progress indicator:
type: entities
entities:
- entity: input_number.test_level_1
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
{% set THICKNESS = "60%" -%}
{% set RING_OPACITY = "0%" -%}
{%- set MASK_COLOR = "rgba(255,255,255,0.8)" -%}
{%- set BACK_COLOR = "rgba(127,127,127,0.1)" -%}
{%- set RING_COLOR = "rgb(252,109,9)" -%}
background:
radial-gradient(
{{MASK_COLOR}} {{THICKNESS}},
transparent {{RING_OPACITY}}
),
conic-gradient(
{{RING_COLOR}} {{states(config.entity)|round(0)}}% 0%,
{{BACK_COLOR}} 0% 100%
);
}
1 Like
Nice!
Iāve adapted it quickly to use the brightness of a light entity:
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
{% set THICKNESS = "60%" -%}
{% set RING_OPACITY = "0%" -%}
{% set brightness = state_attr(config.entity,'brightness')/2.54 %}
{%- set MASK_COLOR = "rgba(255,255,255,0.8)" -%}
{%- set BACK_COLOR = "rgba(127,127,127,0.1)" -%}
{%- set RING_COLOR = "rgb(252,109,9)" -%}
background:
radial-gradient(
{{MASK_COLOR}} {{THICKNESS}},
transparent {{RING_OPACITY}}
),
conic-gradient(
{{RING_COLOR}} {{brightness}}% 0%,
{{BACK_COLOR}} 0% 100%
);
}
however, it suffers the same issue I have in other places: a darker background shines through:
it also does not change when turning off (making brightness effectively 0)ā¦
unless we reload the view.
so to catch that we might need to add a condition for the entity being āonā, which is a bit of a nuisance really
thx i was just stupidā¦
Iām trying to write a single loop that conditionally changes the formatting of an entities list. Iāve got as far as being able to loop over the entities and correctly pick out the corresponding elements.
To test stuff out, Iāve got the following test setup:
type: entities
entities:
- entity: sensor.master_bath_temperature
secondary_info: last-changed
- entity: sensor.master_bed_temperature
secondary_info: last-changed
type: custom:multiple-entity-row
entities:
- entity: sensor.master_bed_humidity
name: false
format: precision1
card_mod:
style: |
{% for entity in config.entities %}
#states div:nth-child({{ loop.index }}):before {
{% if true %}
content: "{{loop.index}} {{entity.entity is string}} {{entity.entity}} {{states}}";
color: green;
{% endif %}
}
{% endfor %}
In reality, the list of entities is 20-30 long.
The above shows that loop.index, entity.entity, and states are all the correct type and values. However when I add states(entity.entity), the template fails:
{% for entity in config.entities %}
#states div:nth-child({{ loop.index }}):before {
{% if true %}
content: "{{loop.index}} {{states(entity.entity)}}";
color: green;
{% endif %}
}
{% endfor %}
despite previously showing that states and entity.entity appear to be the right type.
Is the problem somehow that states is not populated at this point, or is it something else? When I put states('sensor.master_bath_temperature'), the correct state is returned, so it doesnāt seem to the a missing state.
Is there an alternative way to loop over the entities programmatically to style them?
EDIT: I realized I had a type: section in there that is NOT an entity type, and that was killing the entire template!
This conditional fixes that:
card_mod:
style: |
{% for entity in config.entities %}
{% if entity.entity is string %}
#states div:nth-child({{ loop.index }}):before {
content: "{{loop.index}} {{states(entity.entity)}}";
color: green;
}
{% endif %}
{% endfor %}
UPDATE 2: The following now works perfectly to highlight which updates appear to be taking too long:
card_mod:
style: |
{% for entity in config.entities %}
{% if entity.entity is string %}
{% if as_timestamp(now()) - as_timestamp(states[entity.entity].last_changed) > 60*30 %}
#states div:nth-child({{ loop.index }}) {
--secondary-text-color: yellow;
}
{% endif %}
{% endif %}
{% endfor %}