Remove or replace "unavailable" in picture-element labels

Configuration Frontend
1

Some entities that I have come and go. Some are just disconnected and not needed. I usually have a state-label for everything (>50 entities) but not all are relevant. For example, my EVSE is unplugged and don’t need to show the kW power. I haven’t found a clean way to do this, except the snippet below:

type: picture-elements
elements:
  - type: custom:config-template-card
    row:
      type: section
      label: ${ vars[0]!='unavailable' ? 'EV '+vars[0] : '~' }
    variables:
      - states["sensor.charge_kw"].state
    entities:
      - sensor.charge_kw
    style:
      top: 72%
      left: 15%

Seems a bit convoluted. Also converting from state-label to section also messes up the positioning, but that’s neither here nor there.

2

First, it is not supposed to be used like that.
For elements inside a picture-element card, you are supposed to use an “element” option of CTC (config-template-card).

Next, if you need to show a “type: section” inside picture-elements - you:

  1. Either need to place this row inside Entities card (the only proper place to show this “type: section” row) + wrap this whole Entities card into a custom:hui-element card;
  2. Or place the “type: section” inside the mentioned custom:hui-element & only then place it into the picture-elements card.

The easiest way - create a template sensor with a needed text and then place it in state-label. Easy. Manageable. Proper.

3

Thanks, I didn’t get the first suggestion. I used it as it was shown in the CTC readme, unless I misread.

I don’t want to create 20 custom entities, which is why I am looking for an integrated or on-the-fly solution.

4

I am the current maintainer of CTC. Among with other people, I am trying to make the card better if possible & when I can. If anything is wrong in Docs - this should be improved - so feel free to criticise.
But in this particular case, the understanding you got is a bit wrong. The example in Docs says about using CTC for a row in ENTITIES card - where it is normal to use the “type: section” row. Not in picture-elements card.
The picture-elements card contains so called “elements”. There are standard elements like “state-label”, “icon”, “image” etc. But also you can place a CUSTOM card (not a standard card) as an element. Check Docs for this card for details.
Means - you may place a standard Entities card as an element (if you need) only if you “wrap” it inside a custom card (the mentioned custom:hui-element card is the best choice) - because a standard card cannot be placed as an element.

I see, but this is a way which is preferable instead of using 2 sandwiched custom cards (custom CTC containing a custom hui-element containing a needed “type: section”).

There is another thing.
What is a “section”? In the Entities card, the row is a text label with a divider line above, a width of the line = width of a “content” area in Entities card (in general, larger than a label’s length).
You asked about a dynamic label - this may be achieved with a standard “state-label” with a template sensor (and then you need to bother about “how to add a line above”), or with proposed sandwiches
– “picture-elements - CTC - hui-element - section”
or
– “picture-elements - CTC - hui-element - Entities card - section”
or
– “picture-elements - hui-element - Entities card - CTC - section” (example from CTC docs).

1 Like
5

Many thanks for maintaining the CTC!

I think I mixed the two examples from the readme, for picture-elements and for entities since I could not get it to work (at that time) in another way. I will need to study up a bit and see how it can be done in a better way. Many thanks for the reply.

1 Like