canvas-gauge-card
canvas-gauge-card copied to clipboard
Display problem: passing by 0 at every value change
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).
Confirming that the issue occurs in Safari on mobile and desktop, too.
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.
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.
Link to upstream issue: https://github.com/Mikhus/canvas-gauges/issues/106
Setting both "animation" and "animateOnInit" to false fixed this. Sadly this workaround doesn't fix the issue, Safari on MacOs
Yes, same thing happens to me on chrome. workaround works....but Animation would be great...
I think that issue should have been solved with PR#56.
Nope, I still have the issue even on Firefox... I am running version 0.6
Version 0.6 is from Feb/13. PR#56 has been created March/21. I guess, we need a new release.
Installed version 0.7 and problem still persists...
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.
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.
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.
Later releases should fix the issues