Does anyone know how to add animations? I only want animations when my tablet is being charged. Here is the relevant Lovlace Yaml. I’m just guessing on the animation part.
- severity:
- color: Red
from: 0
to: 25
- color: Orange
from: 26
to: 50
- color: Green
from: 51
to: 100
type: 'custom:bar-card'
entities:
- entity: sensor.fire_tablet_battery_level
columns: '0'
positions:
icon: inside
indicator: outside
minmax: 'off'
value: inside
height: '3'
icon: m
animation:
state: 'on'
speed: '50'
entity_id: switch.shelly_1_fire_tablet_power
to: 'on'
columns: 1
square: false
I’m imagining animation that moves left to right inside the bar.
As I understood you need an animation which is displayed all the time without any breaks while the sensor is “charging”. I think this is not easy.
In my opinion, there are two facts:
1.The animation is displayed only just after the state is changed.
2.The animation is displayed for some duration.
The following conditions must be met:
1.The sensor must be updated with a high frequency - a period between two consecutive updates must be close to the animation’s duration.
2.The sensor’s state must be changed after every update.
In your case, the battery_level sensor must be used as the “entity for bar”. And I do not think that this value is changing after every update))).
But you can achieve this animation - even if your sensor is not changing at all.
This can be implemented not by using the native animation feature - but by using card-mod.
and it worked for a few seconds. Not the way I was wanting as the animation was on the tail end of the bar. I was envisioning the entire bar to be used. Sounds like what I’m after is not easily achieved but I appreciate your time trying to help. I know when it is charging because I set up the automation but thought it would be cool for others to see.
This is not good to start a card or row definition with a property which is not a "type: XXXX".
This is not an error but makes life more difficult.
Many many many people do it, unfortunately.
I think when you start with the UI editor and then click on “show editor” it puts it in a random order. I made it more logical but the animation still doesn’t work.
Hi, I was looking to create something similar as well, in my case I wanted to compare various statistics from last month and current month (time on, used kWh, etc.). There’s a trick you can do to achieve something close to what you’re looking for. Create a picture-elements card and stack both bar cards on top of each other. Use transparent picture with a size of the bar card (I use https://www.photopea.com/ to create those) and play with transparency colors to get the result that fits you.
Thanks for code! I was thinking about something similar, but never found the time to investigate
One drawback of this solution is that we have 3 colors here (lower, middle upper parts of the bar). Ideally lower and upper parts should be same color (background) and middle part have bar color. I wanted to use it in weather forecast chart to show daily span of temperatures… yet need to experiment
I see what you mean, for my scenario having 4 colors was a benefit since then I can see whether this month’s result is better or worse compared to last.
What you can do is use the bar color (empty part) for the min value (no transparency) and then whatever color for max value, for example:
Min value - color: black
Max value - color: ‘#a8a8a8’
Result:
It’s little rough around the edges but that’s something that could work out.
