[BUG] Dots animation stops

jzielke84 commented 1 year ago

Describe the bug Animation of dots stops after some time and only resumes on reload of browser. Watts values in the card keep changing constantly though.

To Reproduce Steps to reproduce the behavior:

Add card to dashboard
Watch dashboard for a couple of minutes
See animation stop (but values still changing)
Reload browser

Expected behavior Continue dot animation idenfinately.

Desktop (please complete the following information):

OS: iOS, Android, OSX... choose what you want
Browser: Chrome
Version latest

Smartphone (please complete the following information): see "Desktop"

**Log Chrome console throws the following:

power-flow-card-plus.js?hacstag=6180818150096:322 Uncaught (in promise) TypeError: Failed to execute 'setCurrentTime' on 'SVGSVGElement': The provided float value is non-finite.
    at power-flow-card-plus.js?hacstag=6180818150096:322:17551
    at Array.forEach (<anonymous>)
    at ae.render (power-flow-card-plus.js?hacstag=6180818150096:322:17437)
    at ae.update (power-flow-card-plus.js?hacstag=6180818150096:23:294)
    at o.update (card-mod.js?hacstag=190927524322:5:1322)
    at ae.performUpdate (power-flow-card-plus.js?hacstag=6180818150096:11:5085)
    at ae.scheduleUpdate (power-flow-card-plus.js?hacstag=6180818150096:11:4732)
    at ae._$Ej (power-flow-card-plus.js?hacstag=6180818150096:11:4640)
(anonymous) @ power-flow-card-plus.js?hacstag=6180818150096:322
render @ power-flow-card-plus.js?hacstag=6180818150096:322
update @ power-flow-card-plus.js?hacstag=6180818150096:23
o.update @ card-mod.js?hacstag=190927524322:5
performUpdate @ power-flow-card-plus.js?hacstag=6180818150096:11
scheduleUpdate @ power-flow-card-plus.js?hacstag=6180818150096:11
_$Ej @ power-flow-card-plus.js?hacstag=6180818150096:11
await in _$Ej (async)
requestUpdate @ power-flow-card-plus.js?hacstag=6180818150096:11
set @ power-flow-card-plus.js?hacstag=6180818150096:11
value @ hui-stack-card.ts:63
_$AE @ reactive-element.ts:1380
performUpdate @ reactive-element.ts:1345
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
value @ hui-stack-card.ts:63
_$AE @ reactive-element.ts:1380
performUpdate @ reactive-element.ts:1345
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
(anonymous) @ hui-view.ts:151
value @ hui-view.ts:149
performUpdate @ reactive-element.ts:1331
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
value @ hui-root.ts:598
_$AE @ reactive-element.ts:1380
performUpdate @ reactive-element.ts:1345
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
j @ lit-html.ts:1871
_$AI @ lit-html.ts:1813
p @ lit-html.ts:1181
$ @ lit-html.ts:1528
_$AI @ lit-html.ts:1375
G @ lit-html.ts:2172
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1331
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
value @ partial-panel-resolver.ts:112
value @ hass-router-page.ts:93
performUpdate @ reactive-element.ts:1331
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
j @ lit-html.ts:1871
_$AI @ lit-html.ts:1813
p @ lit-html.ts:1181
$ @ lit-html.ts:1528
_$AI @ lit-html.ts:1375
G @ lit-html.ts:2172
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1331
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
j @ lit-html.ts:1871
_$AI @ lit-html.ts:1813
p @ lit-html.ts:1181
$ @ lit-html.ts:1528
_$AI @ lit-html.ts:1375
G @ lit-html.ts:2172
update @ lit-element.ts:165
performUpdate @ reactive-element.ts:1331
scheduleUpdate @ reactive-element.ts:1263
_$Ej @ reactive-element.ts:1235
await in _$Ej (async)
requestUpdate @ reactive-element.ts:1210
set @ reactive-element.ts:726
value @ hass-base-mixin.ts:52
_updateHass @ context-mixin.ts:95
(anonymous) @ connection-mixin.ts:190
s @ store.js:19
(anonymous) @ entities.js:74
e.subscribeMessage.type @ entities.js:76
(anonymous) @ connection.js:23
_handleMessage @ connection.js:15

Please make sure all of this applies and check the checkboxes, by writing "X" inside of them.

[x] I understand that this is a channel for reporting bugs, not a support forum (If you need help configuring the card, go to: Discussions).
[X] I have the latest version of the card installed.
[X] I have cleared my browser cache after installing, updating and configuring the card.

flixlix commented 1 year ago

I am not experiencing this behavior even after 15 minutes. After how much time did your dots stop flowing? I did experience this if an entity went offline

Edit: I only experienced this while testing. I now tried to reproduce this issue by setting an entity as unavailable manually and am not experiencing this atm

jzielke84 commented 1 year ago

This is happening in conjunction with meter readings provided by https://github.com/klaasnicolaas/home-assistant-glow. However, the instance providing the data doesn't go offline. The number in the power-flow card even changes after the dot has stopped moving. This happens like after 5 minutes but don't nail me down on the exact minute. This also happens throughout many different devices (my Mac, my iPhone and an Huawei tablet on the wall).

This is my card configuration:

type: custom:power-flow-card-plus
entities:
  grid:
    entity: sensor.stromzahler_power_consumption
    color_circle: true
    color:
      production: var(--energy-solar-color)
    consumption: sensor.stromzahler_power_consumption
kw_decimals: 1
watt_threshold: 999
max_flow_rate: 5
min_flow_rate: 2
clickable_entities: true
title: Stromverbrauch

Have you looked at the Javascript error I've provided?

Uncaught (in promise) TypeError: Failed to execute 'setCurrentTime' on 'SVGSVGElement': The provided float value is non-finite.

This clearly looks like a code issue to me.

flixlix commented 1 year ago

Your configuration is incorrect. It should look like this:

type: custom:power-flow-card-plus
entities:
  grid:
    entity: sensor.stromzahler_power_consumption
    color_circle: true
    color:
      production: var(--energy-solar-color)
kw_decimals: 1
watt_threshold: 999
max_flow_rate: 5
min_flow_rate: 2
clickable_entities: true
title: Stromverbrauch

Or, in case you have one entity for each direction

type: custom:power-flow-card-plus
entities:
  grid:
    entity: 
      consumption: sensor.stromzahler_power_consumption
      production: sensor.stromzahler_power_production
    color_circle: true
    color:
      production: var(--energy-solar-color)
kw_decimals: 1
watt_threshold: 999
max_flow_rate: 5
min_flow_rate: 2
clickable_entities: true
title: Stromverbrauch

jzielke84 commented 1 year ago

Thanks for clarifying. I've changed it and will report back to you.

Edit: @flixlix Same thing. I've notice that when my meter reports usage of 0W (when using less power than being served by the solar panels) the dot stops immediately and the reported wattage also sticks to it's last positive value. When tuning on the oven to overcome the solar production amount, the number's change again, but the dot is still stuck. So my guess is, that the card simply can not handle changes from say 2000 Watts usage to 0 and back again. This probably has to do with the flow rate calculation which is not working out like that (? divided by 0). This might also be the reason for the browser throwing the calculation error and the whole animation script crashing. A value of zero should make the dot simply disappear and also change the wattage to 0 as well.

flixlix commented 1 year ago

I'm pretty busy ATM, but I'll test this behaviour and report with you later

flixlix commented 1 year ago

I just tried replicating this behavior and unfortunately I wasn't able to get the bug to appear:

https://user-images.githubusercontent.com/61006057/235728666-7b35532f-1494-4c83-8363-e7e079425cf4.mov

It is very difficult for me to debug this issue without it appearing on my end, even after trying to force it.

Does this issue occur on all of your systems, including app / website, desktop / mobile / tablet?
Have you tried this with the beta?
Does the issue occur if you only populate it with input_numbers or other similar helpers?
This one's a long shot, but: Do you have this toggle enabled or disabled in your user settings?

jzielke84 commented 1 year ago

Does this issue occur on all of your systems, including app / website, desktop / mobile / tablet? Yes

Have you tried this with the beta? What beta? Homeassistant?

Does the issue occur if you only populate it with input_numbers or other similar helpers? The issue occurs if a sensor value changes to 0.

This one's a long shot, but: Do you have this toggle enabled or disabled in your user settings? Tried it - same result

I could reproduce this while manipulating the sensor value in realtime:

https://user-images.githubusercontent.com/13448042/235787342-9c71ec60-042e-4c24-b691-9912635ea99c.mov

It also happens if I change the value on my desktop to 0 and watch the card on my cell phone. Have you tried this with a single sensor in your card? You have plenty of them in your example.

flixlix commented 1 year ago

What beta? Homeassistant?

The version 0.1beta of this card

Have you tried this with a single sensor in your card? You have plenty of them in your example.

Tried here with one entity only, bug doesn't occur.

https://user-images.githubusercontent.com/61006057/235739422-95e716e0-c45f-4ab4-9b58-6381f1ca2815.mov

This is the config:

type: custom:power-flow-card-plus
entities:
  grid:
    display_state: one_way
    entity: input_number.grid_power_consumption
w_decimals: 0
kw_decimals: 2
min_flow_rate: 0.9
max_flow_rate: 6
max_expected_flow_w: 0
watt_threshold: 1000000
clickable_entities: true
title: Power Flow Card Plus

I am using the beta version of this card

jzielke84 commented 1 year ago

Tried everything I could:

installed your beta version
reinstalled the card completely
copied your card config
created a whole new dashboard with just this card
create a card with a number helper

Every time once it's 0 the dot stops and the script error occurs, referring to this line:

            t.setCurrentTime(t.getCurrentTime() * (Nn[e] / this.previousDur[e])),

flixlix commented 1 year ago

Can you try this file? Your Browser Console, should log this:

Otherwise, you don't have the card correctly integrated. In this case, clear your browser's cache.

power-flow-card-plus.js.zip

jzielke84 commented 1 year ago

Did that to no avail. It also shows up in my debug console:

Browser cache has also been emptied. Btw: When I add a new power-flow-card, the editor shows this:

Is that normal?

flixlix commented 1 year ago

When I add a new power-flow-card, the editor shows this

That is a known bug related to this issue: https://github.com/flixlix/power-flow-card-plus/issues/133

Basically it means there's a conflict between this card and the current version of card mod.

Now, in the case, of the console, it seems you still have the HACS version installed. Please remove that resource and add the www/power-flow-card-plus.js resource. Also, you need to unzip the file I sent you

jzielke84 commented 1 year ago

Now, in the case, of the console, it seems you still have the HACS version installed. Please remove that resource and add the www/power-flow-card-plus.js resource. Also, you need to unzip the file I sent you

Sorry, forgot about removing the other ressource. There you go (still same error):

flixlix commented 1 year ago

Nice, now you have the right version. Is it still the same error? Shouldn't be, since I changed the line to this:

flowSVGElement.setCurrentTime(flowSVGElement.getCurrentTime() * (newDur[flowName]));

Either that or the issue was not the dividing by 0

jzielke84 commented 1 year ago

I don't see that line in the file you have provided me?!

flixlix commented 1 year ago

It's the same as the previous line that you provided to me:

t.setCurrentTime(t.getCurrentTime() * (Nn[e] / this.previousDur[e])),

But the one I sent is not compiled yet, it's in typescript

jzielke84 commented 1 year ago

Ah ok, well the error is still happening. Same line, same script message.

Edit: @flixlix I have updated the video format in case of you still can't open it: https://github.com/flixlix/power-flow-card-plus/issues/131#issuecomment-1531845466

flixlix commented 1 year ago

Thank you for updating the video format, now I can see it. What I noticed, is that when you set the state to 0, in the card, the grid displayed 290. This is also not expected behavior, maybe it has something to do with it. This state you are forcing is also not expected, because home should always be consuming something, either from the grid or from another source. What happens if you have a solar entity that is still producing when the grid goes to 0?

jzielke84 commented 1 year ago

That's just because the esphome sensor from my power meter is still delivering data. The 0 causes the dot to stop and further updates of the sensor only change the number within the circle.

This state you are forcing is also not expected, because home should always be consuming something, either from the grid or from another source.

Well I'm still waiting for my power sensor to arrive so I can measure the delivered power from my panels. Right now, when I consume less energy than my solar panels are delivering, the main power meter stops (it's a one-directional Norax 3D). Hence a 0 is because the meter's pulse led changes to a steady light, meaning there is no power delivered from the grid but only to it.

What happens if you have a solar entity that is still producing when the grid goes to 0?

I'll try that and report back to you.

jzielke84 commented 1 year ago

Using this partial configuration the dot also stops:

entities:
  grid:
    entity:
      consumption: sensor.stromzahler_power_consumption
      production: input_number.testwatt
    color_circle: true
    color:
      production: var(--energy-solar-color)

Then I've tried the following configuration:

entities:
  grid:
    entity: sensor.stromzahler_power_consumption
    color_circle: true
  solar:
    entity: input_number.testwatt

Here are the test results:

Solar Power 0 and Grid 0 > Increment Solar power > dots star moving > reverting solar power to 0 > value of solar power stays and will only change again when > 0
Solar Power 0 and Grid 10 > grid dots move > Increment solar power > solar dots star moving too > reverting solar power to 0 > solar dots stop moving and value changes to 0, grid dots keep moving
Solar Power 10 and Grid 10 > bot dots move > change grid to 0 > grid dot stops, solar dot continues > change grid back to 10 > grid dots move again

So from what I'm seeing here is, that you card can not handle a state where all values are 0 and also the solar indicator will only change to 0 if the grid value is > 0 itself. Sure this might be a state which rarely occurs, but the solar panels might report 0 and the meter sensor needs some time to go from 0 (from the state where the panels were delivering enough to make it stop) to the wattage it's now delivering from the grid, because it needs some time to count x number of pulses to calculate. Hence I suggest you first check if all entities report 0 and only if not, then start calculating the animation stuff.

flixlix commented 1 year ago

Ok, that narrows it down. Though I still find it weird that with the same configuration and version of the card, I'm not experiencing this. Does this issue still occur when you use the new flow rate model?

jzielke84 commented 1 year ago

Does this issue still occur when you use the new flow rate model?

What's that? Please specify.

Edit, never mind, found it :)

flixlix commented 1 year ago

https://github.com/flixlix/power-flow-card-plus#new-flow-formula

jzielke84 commented 1 year ago

Tried it like this, still the same:

type: custom:power-flow-card-plus
entities:
  grid:
    entity: sensor.stromzahler_power_consumption
    color_circle: true
  solar:
    entity: input_number.testwatt
kw_decimals: 1
watt_threshold: 999
clickable_entities: true
title: Stromverbrauch
calculate_flow_rate: true
min_expected_power: 0

When everything is 0, the card goes bonkers.

flixlix commented 1 year ago

Should be like this:

type: custom:power-flow-card-plus
entities:
  grid:
    entity: sensor.stromzahler_power_consumption
    color_circle: true
  solar:
    entity: input_number.testwatt
kw_decimals: 1
watt_threshold: 999
clickable_entities: true
title: Stromverbrauch
min_expected_power: 0
use_new_flow_rate_model: true

jzielke84 commented 1 year ago

Sorry, still need my second coffee ☕ ;-)

Yay that works! Thank you so much for your help. Maybe this model calculation should be made the default (e.g. true)?

flixlix commented 1 year ago

I'm glad that worked :)

Yeah, I thought about having the new flow rate model be default...

The issue is still not solved for the old flow rate model, so I'll try and see what the issue is there. For now, thank you very much for your cooperation 😊 and sorry for the thousands of questions from my side 😅

jzielke84 commented 1 year ago

Never mind the questions, that's how you sometimes have to narrow down things. I bought you some "coffee". You deserve it! I'll leave this bug open for you to decide when/if it should be closed.

flixlix commented 1 year ago

Should be fixed in this PR #142 :) Fix available in the next version of the card

flixlix / power-flow-card-plus

[BUG] Dots animation stops #131