Hello everyone,
I’m experimenting a bit with the new card_mod features and would like to display the ring around the icon from 0 to 360 degrees in proportion to the brightness. The color of the ring should also be displayed in proportion of the brightness from dark yellow (1%) to bright yellow (100%). There should be no ring, if the light is off.
Has anyone already implemented such a solution or something similar? I would be very happy if this could be shared here.
type: custom:mushroom-template-card
primary: Tischleuchte
multiline_secondary: true
icon: mdi:lightbulb
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.ikea_tischleuchte_kellerflur
secondary: |-
{% if states(config.entity) =='on'%}
{{'ein: '}}{{as_timestamp(states[config.entity].last_changed)|timestamp_custom('%H:%M')}} Uhr
{%else%}
{{'aus' }}
{%endif%}
color: |2-
{% if is_state(config.entity, 'on') %}
{{ state_attr(config.entity, "rgb_color")[0] }}
{{ state_attr(config.entity,"rgb_color")[1] }}
{{ state_attr(config.entity, "rgb_color")[2] }}
{%else%}
{{'#7E7E7E'}}
{% endif %}
vertical: true
features_position: bottom
card_mod:
style:
ha-tile-icon$: |
.container:before {
display: none;
}
.container:after {
content: "";
position: absolute;
inset: 0;
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
background: radial-gradient(farthest-side, var(--amber-color, #0000FF) 94%, transparent) top/4px 4px no-repeat,
conic-gradient(transparent 30%, var(--amber-color, #0000FF));
animation: spin 2s ease infinite;
will-change: transform;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
ha-card {
margin-top: 0px;
margin-bottom: 0px;
height: 90px !important;
# border: none !important;
--mdc-icon-size: 20px;
--ha-card-border-radius: 0px;
--ha-card-border-color: #3c3c3c;
--ha-card-border-width: 1px;
}
ha-tile-icon {
--mdc-icon-size: 25px;
--tile-icon-size: 30px;
}
#info {
--tile-info-primary-font-size: 12px;
--tile-info-secondary-font-size: 10px;
--tile-info-primary-color: orange;
--tile-info-secondary-color: lime;
}