Display problem: passing by 0 at every value change

[browetd]

Running HA 0.110.4 and canvas 0.4... Display problem, when the value changes, the ticker is moving to 0 before displaying the correct value... I can send you a small screen recording if necessary (file type not supported here). The problem seems only linked with Google Chrome (with Firefox, I do not have that behavior).

[balthisar]

Confirming that the issue occurs in Safari on mobile and desktop, too.

[balthisar]

Adding animation: false is a workaround. I presume at some point, the value is being set to zero before being updated with the new value.

[Olen]

There is definitely something fishy with "animation" (and "animateOnInit") in 0.4.
Showing a 0 would display as "minValue" even if the gauge was having a negative minValue.
And other gauges would always point to "minValue" even if the number displayed in the box was correct.
Setting both "animation" and "animateOnInit" to false fixed this.

[Olen]

Link to upstream issue: Mikhus/canvas-gauges#106

[ipa64]

Setting both "animation" and "animateOnInit" to false fixed this.
Sadly this workaround doesn't fix the issue, Safari on MacOs

[drax-uk]

Yes, same thing happens to me on chrome. workaround works....but Animation would be great...

[rhadamantys]

I think that issue should have been solved with PR#56.

[browetd]

Nope, I still have the issue even on Firefox...
I am running version 0.6

[rhadamantys]

Version 0.6 is from Feb/13. PR#56 has been created March/21. I guess, we need a new release.

[browetd]

Installed version 0.7 and problem still persists...

[rhadamantys]

Can you try to open the page in private browser window? I remember I had some trouble with my browser cache during testing. Make sure, the new .js file is loaded.

[Olen]

It seems like the .js was not recreated for version 0.7. Look at the date.

As far as I can tell, this complied js does not include the changes.

Also, while investigating this, I discovered that the card version is imported from this file:
https://github.com/custom-cards/canvas-gauge-card/blob/a2b47e8147c541cba8d113f6f4cc7a346b37524b/src/const.ts

Which still contains 0.0.4, while this file https://github.com/custom-cards/canvas-gauge-card/blob/master/VERSION has the correct version in it.

[Olen]

I cloned the repo and ran a "npm install; npm run build" and then copied dist/canvas-gauge-card.js to config/www/community/canvas-gauge-card/canvas-gauge-card.js and deleted the ".js.gz" that hacs had created, and can confirm that thr fix seeems to work fine.

Changed all the

          animation: false
          animateOnInit: false

to true, and the gauges are now animated as expected.

[helto4real]

Later releases should fix the issues