search

home-assistant / frontend

:lollipop: Frontend for Home Assistant
https://demo.home-assistant.io
Other
4.1k stars 2.8k forks source link

picture-glance state image refresh not working correctly #3060

Closed mrsnyds closed 5 years ago

mrsnyds commented 5 years ago

Home Assistant release with the issue: 0.91.0

Last working Home Assistant release (if known): 0.90.2

UI (States or Lovelace UI?): Lovelace UI

Browser and Operating System:

hassio, HassOS 2.10 Saw issue using Google Chrome Version 73.0.3683.86 (Official Build) (64-bit) on a Windows 10 PC; identical behavior on Chrome for Android

Description of problem:

The browser does not automatically refresh the state_image as the state of the entities changes from on to off. Starting with all entities "off", when one of the entities goes "on", the "on" image does not display as it should. Turning that entity off (all entities now "off") the "on" image is displayed, when it should not. Toggling entities on and off will then cause an immediate refresh, but the image displayed is not in synch with the state image that should be displayed. Manually refreshing the browser will cause the correct image to display. For reference, here is the picture-glance card configuration:

  - entities:
      - light.living_room_sue
      - light.living_room_pepe
    entity: light.living_room_lights
    state_image:
      'off': /local/room_light/liv_room_3_bw.jpg
      'on': /local/room_light/liv_room_3_color.jpg
    tap_action:
      action: navigate
      navigation_path: /lovelace/down/
    title: Living Room
    type: picture-glance

Javascript errors shown in the web inspector (if applicable):

Additional information:

mrsnyds commented 5 years ago

Just an update to let you know that none of the fixes in 0.91.1 had any impact. Problem persists. Tried creating a new picture glance, and same problem.

iantrich commented 5 years ago

A dev will comment on here if they look into/fix it

mrsnyds commented 5 years ago

Thanks for explaining. Rather surprised that there are no other comments, as I expect this is a popular card ... unless of course others are not having the same experience

forast3r commented 5 years ago

Have experienced same issues, but only on some of the picture-glances that I use. For example, in a view with six cards, only three of them work randomly. I was using a group of lights for the entity, have also tried changing the group to light. Same results. The group and the light group work as expected.

mrsnyds commented 5 years ago

That's a good clue. Same for me. If the entity used for state_image is a group - either a light group, or a regular group - I see the problem with state image not refreshing. In my example above, entity: light.living_room_lights is a light group. If I change the entity to a single light, then it works as expected. (and just to note, updated to 0.91.3, and same behavior).

iantrich commented 5 years ago

Have you verified that the state is changing as you expect under /dev-state?

forast3r commented 5 years ago

In my case in /dev-state the change is updated instantly

mrsnyds commented 5 years ago

Yes, I see instantaneous state changes in /dev-state for individual entities, as well as for the light groups, or other types of groups that are used as the entity: entry on the type: picture-glance, yet the state_image doesn't work as expected.

BrianKarlsen commented 5 years ago

Same problem here... Any chance that this will be fixed soon?

caphm commented 5 years ago

Same problem here. All light groups are affected.

BrianKarlsen commented 5 years ago

Does anyone know if this will be fixed soon?

steinmaerivoet commented 5 years ago

Same experience

ciaron23 commented 5 years ago

Hey guys, having the same problem here. I'm using picture-glance and state-image to show who's home and who isn't. I have to refresh the browser to update state-image, which isn't exactly ideal when using a hud. currently on 0.91.4

caphm commented 5 years ago

Additionally, this does not only affect state_image, but also the state_filter effect (grayscale) that's automatically applied for entities of the switch and light domains.

cotwild commented 5 years ago

I got the same problem with all group of lights... was working before some HA updates. Any news here? (Is anyone working on this?)

I doubt that this is the same problem... The referred case is a problem regarding default background color? This could as far as I understood be fixed by setting it manually...

iantrich commented 5 years ago

We don't really have many frontend devs. If you know any, ask them to help out šŸ˜„

cotwild commented 5 years ago

We don't really have many frontend devs. If you know any, ask them to help out šŸ˜„

What language is used? I don't have a lot of time to join the team, but I could have a look at the code if the problem can be more or less located...

iantrich commented 5 years ago

JavaScript and TypeScript

cotwild commented 5 years ago

Sorry, don't have any experience with typescript... And I guess I won't be able to identify the causing code error, especially as this came up with some updates.

BTW: Thanks for your great work... HA has become an amazing home automation solution!

mrsnyds commented 5 years ago

WORK AROUND. I sat down tonight, determined to find a work around ... and I found one. Thought I would share this in case it might give an insight to someone who might have the skills to fix it.

If I take my picture-glancecard that is not working, and nest it inside a particular custom card, then the state_image works again, and the image changes to the "on" and "off" pictures as expected. I only tried this with the lovelace-card-templater, so I don't know if nesting inside other cards will do the same trick. (NOTE: the respository linked above is no longer on GitHub, as of this moment, but it was there when I posted. I checked the link. Honest.)

Here is the config that DID NOT work:

entities:
  - light.living_room_sue
  - light.living_room_pepe
  - binary_sensor.wyze_motion_1
entity: light.living_room_lights
state_image:
  'off': /local/room_light/liv_room_3_bw.jpg
  'on': /local/room_light/liv_room_3_color.jpg
tap_action:
  action: toggle
title: Living Room
type: picture-glance

And here is the config that DOES WORK. Same config, just inside another custom card:

card:
  entities:
    - light.living_room_sue
    - light.living_room_pepe
    - binary_sensor.wyze_motion_1
  entity: light.living_room_lights
  state_image:
    'off': /local/room_light/liv_room_3_bw.jpg
    'on': /local/room_light/liv_room_3_color.jpg
  tap_action:
    action: toggle
  title: Living Room
  type: picture-glance
entities:
  - light.living_room_lights
type: 'custom:card-templater'
cotwild commented 5 years ago

Sadly I didn't get it working... Your link is broken and I cannot find the "lovelace-card-templater" module... I tried it with other cards - but without any success...

chelming commented 5 years ago

It appears that this only happens when using groups as the entity for a picture-glance card. Also, refreshing the page causes the state to be displayed correctly.

Example broken config:

entities:
  - light.couch_lamp
  - light.front_lamp
entity: light.living_room_lights
image: /local/rooms/livingroom.png
title: Living room
type: picture-glance
light:
  - platform: group
    name: Living Room Lights
    entities:
      - light.couch_lamp
      - light.front_lamp

initial state: group off -> grayscale switch group to on -> color switch group to off -> color switch group to on -> grayscale refresh page -> color

chelming commented 5 years ago

just confirmed this with a hue group too.

initial state: group off -> grayscale switch group on -> grayscale switch group off -> color

mrsnyds commented 5 years ago

Sadly I didn't get it working... Your link is broken and I cannot find the "lovelace-card-templater" module... I tried it with other cards - but without any success...

Sorry about that broken link. It worked when I posted, but the repository no longer exists. Bad news for me because I really liked the way that card worked!

Also, I can confirm the same as what you stated: if the entity: for the picture-glance is a single light, and not a group or a light group, then it works as expected ... but you really want it to be a group of some sort if the card has multiple entities.

iantrich commented 5 years ago

That's weird, the dev just deleted their full account. Probably didn't care for bug reports šŸ˜„

You can use my config-template-card which is the same concept but is javascript templates instead of jinja

mrsnyds commented 5 years ago

Thanks. I had just become comfortable with jinja, and haven't really learned js, but I'll give that a whirl.

iantrich commented 5 years ago

https://community.home-assistant.io/t/lovelace-card-templater-card-jinja2-card-templating-in-lovelace/114268/7

Looks like it should be back up soon

cotwild commented 5 years ago

@mrsnyds I somehow still struggle getting the config-template-card to work...? Any ideas? Module (of iantrich) is installed as instructed (https://github.com/custom-cards/config-template-card) - but somehow your workarround isn't working with this card...

I tried the "- entity: light.led_dusche ...." form under entities, I removed the hold_action... still not working.

image

Here is the part in the ui-lovelace.yaml:

              - type: 'custom:config-template-card'
                entities:
                  - light.licht_dusche
                card:
                  - type: 'picture-glance'
                    title: "Dusche"
                    entities:
                      - sensor.temperature_158d000272cee3
                      - sensor.humidity_158d000272cee3
                      - light.spiegelschrank_dusche
                      - light.spot_dusche_fenster
                      - light.spots_dusche
                      - entity: light.led_dusche
                        name: LED Dusche
                      - cover.dusche
                      - cover.dusche_fenster
                    entity: light.licht_dusche
                    state_image:
                      "on": /local/dusche_light_on.png
                      "off": /local/dusche_light_off.png
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
cotwild commented 5 years ago

Ok - I noticed that the "card-templater"is available again... but I still got no luck... Now I only get an empty red-bar without any error text...

image

              - type: 'custom:card-templater'
                entities:
                  - light.spot_dusche_fenster
                card:
                  - type: entities
                    title: Test
                    entities:
                      - entity: light.spot_dusche_fenster
                        name: fenster
              - type: 'custom:card-templater'
                entities:
                  - light.licht_dusche
                card:
                  - type: 'picture-glance'
                    title: "Dusche"
                    entities:
                      - sensor.temperature_158d000272cee3
                      - sensor.humidity_158d000272cee3
                      - light.spiegelschrank_dusche
                      - light.spot_dusche_fenster
                      - light.spots_dusche
                      - entity: light.led_dusche
                        name: LED Dusche
                      - cover.dusche
                      - cover.dusche_fenster
                    entity: light.licht_dusche
                    state_image:
                      "on": /local/dusche_light_on.png
                      "off": /local/dusche_light_off.png
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info

Is that module incompatible with some other modules? Here my list of used modules/js:

resources:
  - url: /customcards/github/custom-cards/tracker-card.js?track=true
    type: module
  - url: /customcards/github/maykar/compact-custom-header.js?track=true
    type: module
  - url: /local/kiosk.js
    type: js
  - url: /local/surveillance-card.js?v=0
    type: module
  - url: /customcards/github/thomasloven/card-tools.js?track=true
    type: js
  - url: /customcards/github/thomasloven/layout-card.js?track=true
    type: js
  - url: /customcards/github/thomasloven/popup-card.js?track=true
    type: js
  - url: /local/card-modder.js?v=0.1
    type: js 
  - url: /local/mini-graph-card-bundle.js?v=0.3.3
    type: module
  - url: /local/light-entity-card.js?track=true
    type: js
  - url: /local/custom/bar-card.js?v=1.0.0
    type: js
  - url: /local/slideshow-card.js
    type: js
  - url: /local/config-template-card.js
    type: module
  - url: /customcards/github/custom-cards/button-card.js?track=true
    type: module
  - url: /local/useful-markdown-card.js
    type: js
  - url: /customcards/github/gadgetchnnel/lovelace-card-templater.js?track=true
    type: js

Here are the versions according the updater card:

image

Here my HA infos... there is no relevant entry in the error log.

image

mrsnyds commented 5 years ago

@cotwild Hi - I think this area is for developers, which I am not. I only shared the work around and information about my config to help them understand the state-image issue behavior I was seeing. I think the best way for you (us) to get assistance with other cards would be to first search the forum for assistance from the community, and if you don't find the solution there, post your question there: Home Assistant Community Cheers, and good luck!

forast3r commented 5 years ago

A fast update on this issue: the same light that in a picture-glance card does not update the image, with a picture-elements card it is working. I have basic javascript knowledge, where can we start looking?

juanraesalua commented 5 years ago

I also have the same problem, it is a shame since it is a very useful card

fleshinachair commented 5 years ago

same issue here

Exit2Studios commented 5 years ago

Same issue. I'm using a input_boolean as the entity to trigger the background change. Was working previously.

MrTOffice commented 5 years ago

I think I knew the problem but don't know how to fix it. First I thought state-image is randomly show the state, but found out that the card use the previous state to show the state-image. I noticed since I used glance card to control 4Ch(16 images applied for state-image), the action of shown state is always the previous one not the current actual state. My solution is to use picture-elements instead.

iantrich commented 5 years ago

Looks to be an issue in the shouldUpdate function: https://github.com/home-assistant/home-assistant-polymer/blob/dev/src/panels/lovelace/cards/hui-picture-glance-card.ts#L79 If I bypass it, the state_image updates correctly.

MrTOffice commented 5 years ago

Sorry to ask, how can I bypass the function "shouldUpdate" as you mention? I use hassio. As I know, glance is included with typical lovelace. Or do I need to be hassbian? Thank you in advance.

iantrich commented 5 years ago

You'd have to be running a development environment, which is not recommended. Just commented to state I found the issue but not the solution yet so that there is note of it

gmcmicken commented 5 years ago

I found an easy work-around is to put your light group (main entity) into the entities array.

forast3r commented 5 years ago

I found an easy work-around is to put your light group (main entity) into the entities array.

Can you explain your work around please?

iantrich commented 5 years ago

Update to latest and it should be resolved

26tajeen commented 4 years ago

Hi Ian & co! My HA is a few months out of date, this is my issue, do you think this is the issue that is fixed by updating to latest? Thanks!