Jump in visualization when values update

[hiatsu0]

I’ve noticed some jumps in the animation associated with the values being updated (every 30sec in my case) and it may be proportional to the number of digits: When the current value drops from 3 digits to just 2, the jump appears larger than otherwise. The values themselves on that line move slightly sideways too and there is a miniscule jump in L3 even if the # of digits there remains the same.

Please see screen capture below. The values change from ~12A to ~9A here:

[hiatsu0]

A quick update: I was able to change the Shelly update interval from static ~30sec to some ”update on change” mode, and that makes the jumping pretty comical :)

[Sese-Schneider]

@hiatsu0 thank you for your report.
I was aware of this bug, but haven't found a way to avoid it yet ...
I have to spend a bit more trying out solutions.

[hiatsu0]

Have you had time to try any solutions?

I discussed the issue with GPT4’s Ask The Code and it suggested adding something like below to energy-overview-card.ts
However I’m not competent to say if this makes any sense at all, likely not:

”
The animation's key points (keyPoints) are set to either 1;0 or 0;1 based on the inverted variable, which determines the direction of the animation.

The issue arises because every time the power value is updated, the animation's key points are reset, causing the sphere to jump to the starting position of the animation. To fix this, we need to maintain the sphere's current position when updating its speed.

Here's a potential solution:

1. Calculate the current position of the sphere based on the elapsed time of the current animation cycle.
2. Use this position as the starting point for the next animation cycle.
3. Update the animation's speed (duration) based on the new power value.

// ... existing code ...

// Calculate the elapsed time of the current animation cycle
const elapsedTime = (Date.now() - animationStartTime) % animationSpeed;

// Calculate the current position of the sphere based on the elapsed time
const currentPosition = inverted ? 1 - (elapsedTime / animationSpeed) : elapsedTime / animationSpeed;

// Update the animation's key points based on the current position
const newKeyPoints = inverted ? `${currentPosition};0` : `0;${currentPosition}`;

// Update the animation's duration based on the new power value
const newAnimationSpeed = clamp(y, animMin, animMax);
if (newAnimationSpeed === animMax) newAnimationSpeed = 0;

// Update the animation element with the new key points and duration
const animationElement = this.shadowRoot.querySelector('animateMotion');
animationElement.setAttribute('keyPoints', newKeyPoints);
animationElement.setAttribute('dur', `${newAnimationSpeed}s`);

// ... existing code ...

”

[Sese-Schneider]

@hiatsu0 I've spent a lot of time now trying to implement the solution or different approaches.
I've managed to dynamically change the animation speed with the dur attribute, but the result still doesn't look good.

I think to fix this properly I have to reimplement the whole animation to not be a SVG animation.