Entity State displays „raw“ Informations

[mcfly2283]

With the latest Version of HA 2023.4.3 the State of a Person inside a Button-Card is displayed as state "home" and "not_home", not as usual with the corresponding German Translation "Zu Hause" or "Abwesend". Other Zones and other Native-Cards are right.

Button-Card Version: [3.5.0] (2023-04-02) latest

In this case it seems there is a Problem related to Button-Card and not with HA.

Button-Card:

Native Card:

Syntax:
- type: custom:button-card
entity: person.XXYY
show_name: false
show_state: true
show_entity_picture: true
styles:
card:
- font-size: 14px
- padding: 10%
icon:
- width: 70px
- height: 70px
- padding: 0px 0px 0px 0px

[FieserOstfriese]

I have a similar problem. After the update, on and off are now displayed and no longer the German designation. The same applies to windows/doors as on/off. In Home Assistant, however, it is correctly displayed as open/closed.

[micium]

I have the same problem in italian language after HA update to 2023.4.3, the entity state is displayed in English language not in italian as in HA 2023.4.2.

[pejotigrek]

it's affecting all entity domains. language translations are ignored in button-card in latest HA.
it just displays "raw" state of an entity:

[pejotigrek]

@mcfly2283 are you able to change the issue's topic? maybe "entity state displays raw information, not local/translated value" or something similar would be more fitting?

[Mariusthvdb]

seems identical to benct/lovelace-multiple-entity-row#292 (comment)

quoting Frontend dev Paul:

With 2023.4, HA core added support for translations attributes and name so entity state translation keys have changed too.
The computeStateDisplay in this repository is outdated and need to be updated with new translation keys.

https://github.com/home-assistant/frontend/blob/dev/src/common/entity/compute_state_display.ts

fixing this would probably also fix the long standing FR/Issue on respecting core configured icons

also, hopefully, setting a rounding in HA core would also be used by button-card if that were to be implemented

[mcfly2283]

@mcfly2283 are you able to change the issue's topic? maybe "entity state displays raw information, not local/translated value" or something similar would be more fitting?

Done 👍

[jjprz]

same problem here but in spanish

[sheminasalam]

same problem here with my door binary sensors.

[gabrymed]

Same problem for me with my gas and fire binary sensors.

[h4nnes]

I have a similar problem. After the update, on and off are now displayed and no longer the German designation. The same applies to windows/doors as on/off. In Home Assistant, however, it is correctly displayed as open/closed.

Same here

[Scoff123]

Same with my Binary Sensors for windows and doors - previously they would show a 'state' of Open or Closed, but now they show the actual Binary state of On or Off

Garage Door Sensor contact (binary_sensor.garage_door_sensor_contact)
MQTT discovery data:
Topic: homeassistant/binary_sensor/0x00158d00090ee999/contact/config
Payload
availability:
  - topic: zigbee2mqtt/bridge/state
    value_template: '{{ value_json.state }}'
  - topic: zigbee2mqtt/Garage Door Sensor/availability
    value_template: '{{ value_json.state }}'
availability_mode: all
device:
  identifiers:
    - zigbee2mqtt_0x00158d00090ee999
  manufacturer: Xiaomi
  model: Aqara door & window contact sensor (MCCGQ11LM)
  name: Garage Door Sensor
  sw_version: 3000-0001
device_class: door
name: Garage Door Sensor contact
payload_off: true
payload_on: false
state_topic: zigbee2mqtt/Garage Door Sensor
unique_id: 0x00158d00090ee999_contact_zigbee2mqtt
value_template: '{{ value_json.contact }}'
platform: mqtt

[micium]

Hi all,
waiting for an updated version that solves the problem, is it possible to apply a workaround?

Kind Regards

[mcfly2283]

Hi all, waiting for an updated version that solves the problem, is it possible to apply a workaround?

Kind Regards

I don‘t think there is a workarounds. This issue is related to every 3rd Party Card. It is a bit courios that there was no breaking change for the devs before…

[jensrossbach]

You could use state_display as workaround.

[micium]

You could use state_display as workaround.

Perfect !! work fine

I added the statement in the card :

  state_display: |
    [[[
      if (entity.state == 'open') return 'aperta';
      if (entity.state == 'opening') return 'in apertura';
      if (entity.state == 'closing') return 'in chiusura';
      if (entity.state == 'closed') return 'chiusa';
      else return '??';
    ]]]

I can set the state to my liking .. in italian.

Many thanks

[FieserOstfriese]

So I can't get it with the state_display somehow. No matter how I embed it, it doesn't work. There won't be an update anymore because the button card is no longer maintained, right? Maybe someone has a code example how to include state_display exactly?

[Mariusthvdb]

what are you trying to do? we cant help you if you dont give us anything.
btw, this is better suited for the Community, as there is no 'bug' here, and config questions shouldnt be littering these repo issues.

state_display is really easy btw.
just set a value to display, (template or not) and also use the show_state: true option of course.

[FieserOstfriese]

what are you trying to do? we cant help you if you dont give us anything. btw, this is better suited for the Community, as there is no 'bug' here, and config questions shouldnt be littering these repo issues.

state_display is really easy btw. just set a value to display, (template or not) and also use the show_state: true option of course.

I've tried everything. It just doesn't work. Only on or off is displayed. I think I'm just too stupid for that g

type: custom:button-card
template: container
name: Fenster & Türen
custom_fields:
  buttons:
    card:
      type: horizontal-stack
      cards:
        - entity: binary_sensor.fenster_kuche_contact
          label: Küche
          name: Küche
          icon: mdi:window-closed-variant
          show_state: true
          state_color: true
          show_name: false
          show_label: true
          device_class: window
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            card:
              - width: 117px
              - height: 90px
        - entity: binary_sensor.fenster_kinderzimmer_contact
          label: Kinderzimmer
          name: Kinderzimmer
          icon: mdi:window-closed-variant
          show_state: true
          show_name: false
          state_color: true
          show_label: true
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            card:
              - width: 117px
              - height: 90px
        - entity: binary_sensor.fenster_schlafzimmer_contact
          label: Schlafzimmer
          icon: mdi:window-closed-variant
          show_state: true
          show_name: false
          state_color: true
          show_label: true
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            card:
              - width: 117px
              - height: 90px
        - entity: binary_sensor.badezimmerfenster_contact
          label: Badezimmer
          icon: mdi:window-closed-variant
          show_state: true
          show_name: false
          state_color: true
          show_label: true
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            card:
              - width: 117px
              - height: 90px
        - entity: binary_sensor.garagentur_contact
          label: Garagentür
          icon: mdi:door-closed
          show_state: true
          show_name: false
          state_color: true
          show_label: true
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            card:
              - width: 117px
              - height: 90px
        - entity: binary_sensor.haustur_contact
          label: Haustür
          icon: mdi:door-closed
          show_state: true
          show_name: false
          state_color: true
          show_label: true
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            card:
              - width: 117px
              - height: 90px
        - entity: binary_sensor.terassentur_contact
          label: Terassentür
          icon: mdi:door-closed
          show_state: true
          show_name: false
          state_color: true
          show_label: true
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            card:
              - width: 117px
              - height: 90px
        - entity: binary_sensor.garagentor_contact
          label: Garagentor
          icon: mdi:garage
          show_state: true
          show_name: false
          state_color: true
          show_label: true
          type: custom:button-card
          styles:
            grid:
              - grid-template-areas: '"l" "i" "n" "s"'
              - grid-template-rows: min-content 1fr min-content min-content
              - grid-template-columns: 1fr
            card:
              - width: 117px
              - height: 90px

[Mariusthvdb]

uhm.... you dont have state_display set at all?

also, always post a minimal failing config, not complete dashboards.....

there is a lot wrong here:

        - entity: binary_sensor.fenster_kuche_contact
          label: Küche
          name: Küche
          icon: mdi:window-closed-variant
          show_state: true
          state_color: true
          show_name: false
          show_label: true
          device_class: window

label and name are identical
no state_display:
device_class ??
why show_name: false And set a name...
state_color: ??

you should really read the docs, and move to the community.

try:

        - type: custom:button-card
          entity: binary_sensor.fenster_kuche_contact
          name: Küche
          show_state: true
          show_last_changed: true # uses the label space
          state_display: >
            [[[ return (entity.state === 'on') ? 'Open' : 'Closed'; ]]]
          icon: >
             [[[ return (entity.state === 'on') ? 'mdi:door-open' : 'mdi:door-closed'; ]]]

or any other translation you want ofc

[octaviz]

It has worked for me by simply adding
"state_display: Inactivo" Obviously you have to have the show_state: true.

[pejotigrek]

guys, let's remember, that the state_display trick, especially if it involves templates or state conditions, is just a dirty and uber-temporary solution for a few cards.

while it sure works, and I thought about that in the first place - there are many situations it can't and won't be used [unfortunately adding this "patch" to all cards on bigger dashboards is just ridiculous pain in the... you know ;) my dashboard is one of them..]

[Mariusthvdb]

You really should have added the 'imho' there...

[pejotigrek]

you think? I don't see it as just "my opinion" :)
this is clearly an issue - I am not telling "me good, button-card bad" [because button-card is one of the best additions to the HA that I'm using], but this [probably] is caused by some changes in the HA, so using state_display is just a quick workaround, not the desired "go-to" setting. as far as it is a good fix [no matter if I'll use it or not] it is just a way of dealing with something that [I hope] will be eventually fixed in the card's code itself. I am not ranting or something, I am just wishing to keep this issue open, so with a dash of good luck we'll see states working correctly in near or at least not so far future ;)

believe me, if I'd know a bit about developing cards/extensions/integrations, I'd be more than happy to prepare pull request and fix it. but sadly I am total noob in terms of dealing with python, or programming at all ;(

[Mariusthvdb]

Well, state_display is capable of way more than fixing this, so it is hardly a hack, but has been a long standing main feature.

And yes, it would be great if the HA change could be adapted by button-card. But that too has been posted at least 2 weeks ago.

So agreed on the latter, however no use stating it over and over.

Meanwhile, adapt your cards. On the positive side: you won't be forced to use the sometimes silly official lokalizations...

[pejotigrek]

Well, state_display is capable of way more than fixing this, so it is hardly a hack, but has been a long standing main feature.

OMG. dude, this is a hack in THIS particular situation!
we all know this is a normal, legit, main feature of the button-card! I use it on a daily basis in some other scenarios.
but in case of wrongly displayed translations, caused by HA modification - this is a hack to fix the issue.

Meanwhile, adapt your cards. On the positive side: you won't be forced to use the sometimes silly official lokalizations...

this is plainly a joke, right?
it's not up to you to judge the localizations I, or others from above comments, want to use.. if yours are silly, well, I feel bad for you. but please don't try to push your agenda to us all.

[ildar170975]

Test this:
#692

[github-actions]

🎉 This issue has been resolved in version 4.0.0-dev.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[Mariusthvdb]

HI Rom,

thanks for updating, many issues have been resolved, also those state translations (binary_sensor motion now no longer show on/off and battery sensors show there correct device_class icon And color ;-)

Again, thank you very much for that, device_class has been a long standing wish, even from far before the translations issue...
Guess I can close that now ;-)

Now you're back, please let m quickly followup with this
I still see eg this 'rainy':

while it should translate to Regenachtig:

confg:

type: custom:button-card
template:
  - styles_cf_notification
  - styles_cf_notification_left
show_entity_picture: true
entity_picture: >
  [[[ return states['sensor.weather_animated_icon'].attributes.entity_picture; ]]]
show_state: true
show_name: false
size: 100%
aspect_ratio: 1
show_icon: false
entity: sensor.buienradar_condition

please have another look at that?

[RomRider]

@Mariusthvdb, I'm about to release a new version with support for new actions that should also fix this translation issue.

[Mariusthvdb]

@Mariusthvdb, I'm about to release a new version with support for new actions that should also fix this translation issue.

confirmed:

great.

Btw, for this specific integration (entity): why wouldn't this show the set entity_picture. this is a buienradar entity, and the integration sets an entity_picture as you can see in the screenshot above. Currently it is Cloudy (translates to Bewolkt), ent the entity_picture shows as:

---

silly me.... I hadn't set the card to show it......

type: custom:button-card
entity: sensor.buienradar_condition
show_state: true
show_entity_picture: true

it now does, however ugly in this size. just showing for reference, all perfect now:

[Mariusthvdb]

getting back to this... sorry

I am using many buttons that have a template with

  custom_fields:
    notification: >
      [[[ return entity.state; ]]]

these are not translated and get the 'raw' core state:

note that in this screen, also the name of the right button gets Cover: Closed because of its template in state_display:

state_display: >
  [[[ return 'Cover: ' + entity.state; ]]]

The entity.state does get a capital in the state_display (not in the notification circle), so some translation is done ;-)

please see if this is expected, or, maybe still needs enhancement so we can see these templates translated correctly too?

for reference, using the entity as is, so without anything set on state other than show_state: true:

the state Is translated correctly, which is terrific. I might even leave it at that for this button.
Its just that using the template, it would be great if these could be translated too

[RomRider]

This translation will be possible in the next beta release. I just commited the code for that @Mariusthvdb

[Mariusthvdb]

just installed b6, but still those entity templates use the raw value, was this supposed to have changed with that? (also, still need that .toString() on the notification custom field

[RomRider]

Yes, check the documentation, you need to use a function.

• localize(entity, state?): a function which localizes a state (eg. localize(entity)) and returns a string. Takes an entity object as argument (not the state of the entity as we need context) and takes an optional state string as argument. If state is not provided, it localizes the state of the entity (Eg. localize(entity) or localize(states['weather.your_city'])). If state is provided, it localizes state in the context of the entity (eg. : localize(states['weather.your_city'], states['weather.your_city'].attributes.forecast[0].condition))

For you that would be as simple as:
[[[ return localize(entity); ]]]

or for the other one: [[[ return 'Cover: ' + localize(entity); ]]]

[Mariusthvdb]

right, I completely didnt do that, thinking I could blindly keep my configs as always..

you're completely making sense though, and I will follow instructions.

just to give you an idea of the power if this localize:

    [[[ return (entity.state === 'open' && entity.attributes.current_position != 100)
        ? entity.attributes.current_position + '%'
        : localize(entity); ]]]

in stead of

    [[[ return (entity.state === 'open' && entity.attributes.current_position != 100)
        ? entity.attributes.current_position + '%'
        : entity.state; ]]]

is all that is takes..

bit more elaborate:

  state_display: >
    [[[ var id = entity.entity_id.split('.')[1];
        var power = states['sensor.' + id + '_actueel'].state;
        var fakestate = `<span style="color: var(--active-color);"> ${localize(entity)}</span>`;
        var fakestateOff = `<span style="color: var(--active-background-color);"> ${localize(entity)}</span>`;
        var powerState = `<span style="color: var(--power-color);"> ${power} W</span>`;
        return (entity.state === 'on') ? fakestate +': ' + powerState :
        (entity.state === 'off' && power > 0) ? fakestateOff +': ' + powerState : null; ]]]

as if it has always been like this....except it hasn't.
I've never ever seen those buttons in my own language, so I am very very happy with this latest development!!
really nice

[Mariusthvdb]

Jerome,

on localizing attributes, might be cool to also add the to the documentation, on translating local 'entity' attributes

  [[[ return localize( entity, entity.attributes.forecast[0].condition ); ]]]

in addition to what you posted above on localizing..

[RomRider]

It's in the example of the documentation, am I wrong? : localize(states['weather.your_city'], states['weather.your_city'].attributes.forecast[0].condition)

EDIT: Oh I see what you mean, about 'local' entity. The entity of the card itself... I'll add an example

[Mariusthvdb]

no not wrong.... it took me a while to figure out this (using an external entity)

[[[ return localize(states['weather.your_city'], states['weather.your_city'].attributes.forecast[0].condition); ]]]

would work likewise for a local entity

[[[ return localize( entity, entity.attributes.forecast[0].condition ); ]]]

just believe it would help prevent questions ;-)

[Mariusthvdb]

EDIT: Oh I see what you mean, about 'local' entity. The entity of the card itself... I'll add an example

exactly that yes. Might me be, but since I learned the hard way that templating those global variables hurts the UI performance much more than local variables, my eye is just focussed on it, and I try to prevent it as much a possible.

Not sure if from your perspective this still holds ( I mean, the warning was written in a completely different stage of HA development, actually still using the states frontend....) but still, can hurt to be aware.

[github-actions]

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀