Animation Not working as expected

[wouzer]

Animation of gauge not working as expected. It doesn't animate from the old value to the new, but 0 to the new. According to the description of the canvas-gauges (https://canvas-gauges.com/documentation/user-guide/configuration), it should animate the needle from old to new value.

Here is my (lovelace) config of the card:

card_height: 175
entity: sensor.verbruik_current
gauge:
animation: true
animationDuration: 1500
animationRule: linear
borderInnerWidth: 0
borderMiddleWidth: 0
borderOuterWidth: 0
borderShadowWidth: 0
borders: false
height: 175
highlights:
- color: 'rgba(200, 50, 50, .75)'
from: 4000
to: 5000
majorTicks:
- '0'
- ' '
- '1000'
- ' '
- '2000'
- ' '
- '3000'
- ' '
- '4000'
- ' '
- '5000'
maxValue: 5000
minValue: 0
minorTicks: 5
startAngle: 45
strokeTicks: false
ticksAngle: 270
title: Verbruik (W)
type: radial-gauge
valueBox: true
valueDec: 0
width: 200
type: 'custom:canvas-gauge-card'

[dhover]

Same issue here!

[Olen]

That is probably caused by this upstream issue:
Mikhus/canvas-gauges#106
Which should be fixed there.

Edit:
Just checked the code, and the version I have already has the latest canvas-gauges:
* @version 2.1.7 so it seems like either the bug is not properly fixed in 2.1.3, or this is another problem.

[eBoon123]

Animation of gauge not working as expected. It doesn't animate from the old value to the new, but 0 to the new. According to the description of the canvas-gauges (https://canvas-gauges.com/documentation/user-guide/configuration), it should animate the needle from old to new value.

Here is my (lovelace) config of the card:

card_height: 175
entity: sensor.verbruik_current
gauge:
animation: true
animationDuration: 1500
animationRule: linear
borderInnerWidth: 0
borderMiddleWidth: 0
borderOuterWidth: 0
borderShadowWidth: 0
borders: false
height: 175
highlights:

• color: 'rgba(200, 50, 50, .75)'
  from: 4000
  to: 5000
  majorTicks:
• '0'
• ' '
• '1000'
• ' '
• '2000'
• ' '
• '3000'
• ' '
• '4000'
• ' '
• '5000'
  maxValue: 5000
  minValue: 0
  minorTicks: 5
  startAngle: 45
  strokeTicks: false
  ticksAngle: 270
  title: Verbruik (W)
  type: radial-gauge
  valueBox: true
  valueDec: 0
  width: 200
  type: 'custom:canvas-gauge-card'

I'm seeing the same thing. Just installed 0.4.1. Had to turn animation to False to avoid the annoying flickering back to 0 on every update. These gauges are very cool though - thanks for making this available to Home Assistant!!!

[cooperised]

Same issue here, not that it needs much confirmation at this point. It would be great to know the cause!

[kaijk]

At least I can stop chasing this in my configuration. I'd love a fix as well.
Thanks!

[lloyda]

Would also love to see a fix for this.

[wuast94]

any uptade to this?

[seganku]

animation: false helps a lot, but it would be great to be able to keep animation without the constant jump to zero.

[rhadamantys]

I did some debugging recently, and I figured, that the gauge card gets initialized every time, a new value is reported. That means, that the current value (the value, that the needle shows) is reset to zero and thus, the animation always starts at zero. I tried to add some additional members and store values, they all get reset as well. So my guess is, that the embedding of the gauge in home assistant causes the trouble. The gauge itself is working fine.

[Olen]

Hm. You seem to be right.
The function updated(_) is actually initializing the card on each update.

Could it be as easy as wrapping everything from

canvas-gauge-card/src/canvas-gauge-card.ts

Line 123 in 929c18a

var gauge;

to

canvas-gauge-card/src/canvas-gauge-card.ts

Line 145 in 929c18a

this._gauge = gauge;

in a if this_gauge != none { } or something?

[rhadamantys]

@Olen: you were right. It is actually if (this._gauge == null) { } in the canvas-gauge-card.ts file. Now it is working locally on my home assistant instance. Thanks a lot for the suggestion!

I created a Pull Request #56

[helto4real]

Should be fixed in version 0,7
https://github.com/custom-cards/canvas-gauge-card/releases/tag/0.7

[Habile2019]

Thank you for this @helto4real - I'm not sure the fixed JS made it into the release though? I don't see the changes after updating.

[reisfni]

Thank you for this! I'm not sure the JS made it into the release though? I don't see the changes after updating.
+1