Bubble Animation for Battery SOC Bar

Hello Together,

For some time i’m running a WLED Strip showing the SOC of our home Battery. Currently i’m using the Percent Animation with WLED 0.10.0. I would like to extend the Visualisation with an animation of the charge/discharge power. I would like to showe faster or slower moving “bubbles” up or down in the remaining part. Is there a suitable animation for this task?

Additionally the control of percents in 1 Percent step was quite hard so sometimes 1 LED changed per percent - sometimes 2. Is it possible to transit fricton percents to the controller?

Thanks much,

1 Like

Hi Markus!
That is an amazing application!
While there is no pre-made effect for this, an alternative to using the Percent effect could be creating two segments in Solid mode and dynamically setting their lengths to essentially match what Percent does, but with the added benefit that you can set any effect in the remaining section. Running for example would look nice, you can easily change the speed and reverse the segment direction and/or color to distinguish charging and discharging :slight_smile:

Thanks for the idea. I havn’t thought of this attempt. But i’m kinda worried tht this might kill the flash over time. And this might get flickery when changing the segment while a moving animation?

I thought of rendering the LED values in Node red or similar, but i think it will be vulnerable for jerking.

Maybe i need to dive deeper in to the custom UI animations. But this looks like a quite deep dive :grinning_face_with_smiling_eyes:.

Sorry for my late reply :slight_smile:

No worries, changing the segments does not write to flash, only saving presets does (unless you are using the auto-save usermod), so this approach has no negative impact on the lifetime of your setup!

You are correct that changing the segments causes an instant transition, however, this shouldn’t be very noticable with a charge/discharge meter, as likely only a single LED would change per update. Some effects might reset/jerk though if their segment is updated, but e.g. with the Running effect, it is not very noticable.

1 Like

@Aircoookie @hani After reading through this enhancement thread again, I had a thought that could certainly apply this application as well as many others.

Is it possible to configure a segment to be the “AND” of 2 effects? In this application, the “background” effect would be Percent, or Solid Green with variable length, and the foreground effect would be something that gives “bubbles” where the effect speed is scaled to power consumption - proportional to [discharge rate - charge rate], or charge rate.

If that can be accomplished, I see value in this application where green background be battery charge with # of bubbles & speed indicating charge rate. And, alternatively, maybe every minute, toggling to background of red for power consumption, and # bubbles & speed indicates discharge rate.

If the “AND” were possible, the json api could adjust the % and rate and select the proper preset as well as a nice transition time, like, fade to black, then switch presets with intensity 0, and then increase to normal intensity smoothly using current transition speed setting(s).

It feels like this is as its core a rather generic application with a specific use case.


1 Like

Definitely, I would like to support overlaying multiple effects or segments soon!
The plan is to have most effects support some sort of “transparancy” rather than setting every LED to a fixed color.
As a side effect, this would allow for smooth transitions between effect modes.


How could i miss all those comments :grinning_face_with_smiling_eyes:

Today a played a bit around with my test ESP and I believe i will make a segment with the running animation and a second with a marking LED. The rest will be black
I hope the tranistion is not too hard. I will try this out and let you know.


Ok, i was able to implement my solutionm, but i have the problem, that every time i update the ix value to change the speed of the “Running” Animation the internal variable for the current position of the stripes gets reset resulting in an annoying flicker

additionaly, when i invert the stripes direction it will result in a flicker too.

If there is no easy way around, i might need to implement a run forward and backward animation based on the Running with ix=0 full speed back, ix=127 stop and ix= 254 full forward.