Refactor state building (states, animations) and state display (localization, specifics)

[AmoebeLabs]

The Problem To Be Solved

The current state-building and state-display routines have some flaws in correctly handling states for animations and states for localized display. These two should be refactored to differentiate between these two functions: state handling and state display.

The state building and display of the secondary_info should serve as an example. That one already has localization and special formatting options build in for display.

Additional background:

Check the various custom cards on how they process this, especially the display building:

• Home Assistant sources
• Button Card
• Mini Graph Card
• ...

@2023.05.23 Update It is clear that most custom cards are NOT up to date with the latest frontend implementation of localization and state string and number building.

So, with this refactoring, the HA Frontend modules are going to be the basis. I can't reuse them 1:1, as that would mean I have to 'pull' a greater part of the HA frontend into this card.

As other custom cards did in the past: adapt these files, and then use them in your card.

• frontend/compute_state_display.ts (https://github.com/home-assistant/frontend/blob/dev/src/common/entity/compute_state_display.ts)
• frontend/format_number.ts (https://github.com/home-assistant/frontend/blob/dev/src/common/number/format_number.ts)

Adapting these files (to .js) for use in SAK will take some time, but at least it brings SAK up-to-date with the latest and greatest locale implementation of HA.

Related Issues (if any)

(Optional): Suggested Solution

There should be two different functions:

• _BuildState() for building the state string to be used by tools to run animations and such
• _BuildStateRender() for building the output stat string to be displayed by the render methods of the various tools

_BuildState():

• builds the state according to state, attribute, and secondary info in entity config.
• does NOT do any formatting or localization

Might be subdivided into:

• _BuildState()
  • _BuildStateAttr()
  • _BuildStateSecondaryInfo()

_BuildStateRender(): Uses the state as build by _BuildState() to

• formats the state from BuildState with decimals (sensor domain) and formatting
• localize the state string

Flow from set hass():

• entity data comes in, as it has changed
• the state of the entity is determined by:
  • is it a true state
  • is it an attribute
  • is it secondary info
• get the state based on previous variations using _BuildState()
• pass this processed state to the various tools that need it

Flow from render():

• get the processed state
• if state or attribute, process
  • for the sensor domain, decimals
  • apply format specified in entity config
  • apply localization in config or hass
• if secondary info, process
  • apply format specified in entity config
  • apply localization in config or hass
• render the result!

(Optional): Alternative Solutions

[AmoebeLabs]

@2023.05.23 Status

A quick hack with up-to-date localization tags already shows translations. So this direction looks good!

You can see that the Pollen integration does not have Dutch translations for every state! I have checked that in the Chrome console by evaluating the hass.resources.nl strings for the pollen integration.

The AQI integration also does very well:

As does the Person card:

@2023.05.23 Status Part 2 (Evening)

And first results for numbering (only works for states, not for attributes and secondary_info):

• thousand separator
• comma separator for fractions

@2023.05.28 DateTime formats using the 'format: ' option for an entity

@2023.05.29 Status

• Changing number format in profile settings works. SAK follows those settings.
• Documentation updated for localization, formatting and state converters, ie ready for v2.5.1

[AmoebeLabs]

@2023.06.11 Status

Progress with light colors

• converters for rgb_hex and rgb_csv are working (See: #230)

As part of this issue, but described in issue #232, icon states are also updated.

• icons are now the same as HA uses