Picture-elements card no longer documents the ability to control colours of icon based on state

[KennethLavrsen]

Feedback

The Picture-Elements card has as its main selling element that you can create a very powerful graphical display of your house and include entities for both control or visual status.

When you use a backgroud picture and icons - the standard colours from the theme are not always optimal.
And the power of the picture-elements card is that you can choose alternative icons or alternative graphics for an entity.

For example you can have a sofa with a sensor and you change the colour of the sofa shows as an icon based on the state. You are likely to not want to use the same on and off colours as used in the genetic theme.

The 2023.2.0 introduced much more control of theme colours for each type of entity. I can change the on and off colours of all binary sensors in my theme. But the point with the picture-elements card is that I can show a few single binary sensors entities with state colours that are different from all the other binary-sensors incl those used other places in the same picture-elements card.

The picture-elements card provides that you can set the style for every element.

The documentation used to describe exactly how to define the on and off colours. It was broken in 2022.12. And even more broken in 2023.2. But the ability is still there. Just not documented. And it has become much more difficult because now you have to really know what is going on with CSS and theme styles to control the colours. I would not be able to update the docs. I would make a PR if I understood how it works now.

Removing the documentation is really just to show that none seem to care for the picture-elements card any longer.

The picture-elements card should have this documented. I have managed to get a few items working and it is a bit of a cut and try without documentation. Using the theme style names seems to be much more picky with how you do it.

Before December you only needed to know two style names (paper names) and that would override whatever colour defined in the themes. And that is how it is supposed to be. If I want the bed to be blue when vacant and red when occupied while all other binary_sensors are grey/yellow then I should be able to.

When you see people brag about their cool Home Assistant dash boards, it is always a picture-elements card where you see a house groundplane or a 3D perspective drawing with cool things displayed with state colours. This is a flag ship Lovelace card. I do not understand why it is not getting any love anymore.

URL

https://www.home-assistant.io/dashboards/picture-elements/

Version

2023.2.0

Additional information

No response

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved.
If this issue is still relevant, please let us know by leaving a comment 👍
This issue has now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[KennethLavrsen]

Still the case and with the css changes it us hard to do without a good reference to the css names and syntax

[alex1255]

I still have the problem too! It is also very difficult for me to determine the colors. Always have to find out the style elements very laboriously with the Chrome developer tools.... Unfortunate

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved.
If this issue is still relevant, please let us know by leaving a comment 👍
This issue has now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[KennethLavrsen]

Ping

[ildar170975]

@KennethLavrsen
Before:
--paper-input-item-active-color (if spelled correctly) was used by "binary" domains and sun.sun.
So Docs could mention this var as a "universal" method.

Now:
Each domain may have its own variable.
So Docs should cover ALL possible domains - or not to mention ANY variable - or simply have this link to required info.

Anyone may propose a PR to edit docs, including you.

[KennethLavrsen]

Yes. I know how it is and it has become awful. My hope was that the front end devs would implement a bit extra ciode, either as yaml for the card or an additional layer of CSS to be used in situations like the picture elements card where you want to change a single entity and not an entire domain. You could never use such css in a theme as it would alter everything but it could work for control of individual entities. Documenting the current situation for picture-elements would be a couple of screens of detailed CSS soup that only few will understand. I am personally very weak on the subject of CSS and I simple follow recipes by helpful community members in the forum

[ildar170975]

like the picture elements card where you want to change a single entity and not an entire domain

It may be easily done like this:

type: picture-elements
elements:
  - type: state-icon
    entity: input_boolean.test_boolean
    style:
      top: 10%
      left: 30%
      '--state-input_boolean-on-color': red
      '--state-input_boolean-off-color': cyan
  - type: state-icon
    entity: input_boolean.test_boolean
    style:
      top: 10%
      left: 70%
      '--state-input_boolean-on-color': magenta
      '--state-input_boolean-off-color': brown
  - type: state-label
    entity: input_boolean.test_boolean
    style:
      top: 20%
      left: 50%
image: /local/images/test/white.jpg

Probably the best way is NOT to mention any particular CSS vars in Picture elements docs at all... It is specified that style section may contain CSS properties, this is enough. Particular methods to style particular things should be added as examples, but they cannot cover all cases (here - all domains, all states).

[KennethLavrsen]

Yes, BUT

that only works for input_booleans. If it is a binary sensor the css would be e.g '--state-binary_sensor-inactive-color': green

There are many binary types and each have their css which you have to know. That makes sense for themes. But it makes it hard for a simple non dev user that just want some alternative on off colors for a few entities.

before the same paper css worked for any bool/binary/switch. Now you need a two page manual to explain which css to use when. Surely you and I know now. But I think about the noob users

[ildar170975]

that only works for input_booleans

Similar for other domains:

There are many binary types and each have their css which you have to know.

They are all described here.

But I think about the noob users

Agree, but I at some moment of time I stopped thinking about noob users since HA became more and more "noob-oriented" (with loss of usability for experienced users), for instance:

• use names instead of unique entity_ids (more than 1 year was needed to restore displaying entity_id in "Dev tools -> Set state");
• use nice but sometimes useless more-info for switches, booleans & lights.

As for the current issue - well, I have nothing against "enriching" Docs...

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved.
If this issue is still relevant, please let us know by leaving a comment 👍
This issue has now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[KennethLavrsen]

Still relevant

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved.
If this issue is still relevant, please let us know by leaving a comment 👍
This issue has now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[KennethLavrsen]

Ping bot

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved.
If this issue is still relevant, please let us know by leaving a comment 👍
This issue has now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[KennethLavrsen]

Ping

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved.
If this issue is still relevant, please let us know by leaving a comment 👍
This issue has now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[KennethLavrsen]

Ping

[MankiniChykan]

SIMPLE AIR COMFORT CARD HAS THE DETAILS FOR CHANGING THE BACKGROUND SVG COLOURS, BASED ON STATE

[ildar170975]

@MankiniChykan your post is unrelated.