yes there is, but only referring to the title:
type: entities
title: Luchtreinigers
card_mod:
class: class-header-margin
entities:
but, in the pond dashboard there is no other mod. Just in case, I just tested it without and that still makes the icon rotate uncentered
Hm. Then I don’t have any clue, because
type: entities
entities:
- type: custom:template-entity-row
entity: binary_sensor.tankerkoenig_aral_gyhum_status
icon: mdi:pump
card_mod:
style:
div#wrapper: |
state-badge {
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
background: steelblue;
}
100% {
background: steelblue;
}
}
is rotating centered here in Desktop Chrome/Safari. With fan and pump.
remarkable.
for the fun of it I just fired up Microsoft Edge, Firefox and Chrome and they all show the off-center swirl
this is on Mac OS btw
cleared out all, completely empty page, no card-mod-themes. still the same…
this makes it a bit clearer:
icon: >
{{'mdi:record-circle-outline' if is_state(config.entity,'on') else 'mdi:fan-off'}}
Mariusthvdb:
yes, I hope so, still, on a design site, that would be an issue
anyways, I filed an issue, and added that to it.
On the examples page you can see this as well on mouse-down:
Of course, this will not be wanted.
1 Like
MrThiemann
(Mr Thiemann)
May 19, 2022, 3:43pm
3200
hey, I’m looking for something exactly like the picture to implement.
does anyone have an idea?
only thing that comes close that I know of is flip down timer… but I guess this isnt counting down is it
MrThiemann
(Mr Thiemann)
May 19, 2022, 3:58pm
3202
no, it’s not a countdown… it’s supposed to simulate the electricity meter.
but I can’t find any way how to implement it.
Haha, yes I figured as much.
Guess some things can’t be had. Why not make a picture of it and use that as header or background for some regular states entities.
Might not be live, but still has the touch of the meter
really odd, I took my iPhone out, and the button with the fan does still show some off center behavior on mobile… While the picture-glance looks way better (maybe because its smaller?)
the incomparable HA modifications never cease to amaze.
update
It’s visible on desktop too, when zooming in to the max:
which are supposed to be nicely centered icons
Dear Ildar,
Seems to be that animation of resizing is not working on iPhones OS? Or did I miss something else to activate it?
Please post your code which is not working on iPhone.
And specify the iOS version…
Dear Ildar,
Just from your sample of animations:
entity: sun.sun
name: resizing
icon: ‘mdi:radio-tower’
style:
hui-generic-entity-row:
$: |
state-badge {
animation: resizing 1s linear infinite alternate;
}
@keyframes resizing {
0% {
–mdc-icon-size: 10px;
}
25% {
–mdc-icon-size: 15px;
}
50% {
–mdc-icon-size: 20px;
}
75% {
–mdc-icon-size: 26px;
}
100% {
–mdc-icon-size: 32px;
}
}
IOS latest 15.5, it works on other platforms, but only the iPhone is problem. Icon didnt change size, just stay as it is.
Regards
Sorry for wrong format
Correct
Thanks, I see. Would be nice from your side
Resizing is fixed, check that post .
Also, there is a problem with flipping, will see what I can do…
Actually, flipping is OK, I am using it as well. Your code is work well
No way! Could you send me a video from iOS device with flipping???
Test this code:
type: entities
entities:
- entity: sun.sun
- entity: sun.sun
name: flipping (rotateX)
icon: mdi:timer-sand
card_mod:
style:
hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
animation: flipping 1s linear infinite;
}
@keyframes flipping {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
- entity: sun.sun
and this:
type: entities
entities:
- entity: sun.sun
- entity: sun.sun
name: flipping (rotateX)
icon: mdi:timer-sand
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
animation: flipping 1s linear infinite;
}
@keyframes flipping {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
- entity: sun.sun
For me, iOS is too buggy in part of CSS.
P.S. Safari on Mac: flipping is OK on Edit page (when this card is edited) and same glitches otherwise.
Update 18.04.23 : flipping is OK on iOS 15.7.3 (Companion App)
100% working attached video based on old code
Processing: RPReplay_Final1653051066.MP4…
Seems that it’s not allowed attach video
You may upload the clip to some cloud.
Anyway, to be sure - both cards I posted above (same code w/o any changes) work properly?
Only first code is OK
Second one animation with flickering and 3rd entity (sun) disappear