add icon-color to Tile card

[Mariusthvdb]

continuing from #1 (reply in thread)
seems the logical progression, with Tile card getting more and more popular to, have this plugin also colorize the icon on that card.

I copied the code used for the button card and edited, but this is not working yet ofc.

// Install a hook to update the Tile card with custom styling
  installTileCardStylingHook() {
    customElements.whenDefined("hui-tile-card").then(() => {
        const tileCard = customElements.get("hui-tile-card");
        if (!tileCard) return;
        if (tileCard.prototype?.updated) {
            const originalUpdated = tileCard.prototype.updated;
            tileCard.prototype.updated = function customUpdated(changedProps) {
                if (!changedProps.has('_stateObj')) {
                    return;
                }
                const { _stateObj } = this;
                if (_stateObj.attributes?.icon_color) {
                    this.style?.setProperty('--tile-icon-color', _stateObj.attributes.icon_color);
                }
                originalUpdated.call(this, changedProps);
            }
        }
    });
  },

card_modding the Tile card is less obvious than other cards, so maybe there is much more to is getting this plugin to touch the Tile card too

Hope it can be done without too much effort, or complexity.

[elchininet]

@Mariusthvdb,
Try with this:

customElements.whenDefined("hui-tile-card").then(() => {
    const tileCard = customElements.get("hui-tile-card");
    if (!tileCard) return;
    if (tileCard.prototype?.updated) {
        const originalUpdated = tileCard.prototype.updated;
        tileCard.prototype.updated = function customUpdated(changedProps) {
            if (
                !changedProps.has('_config') ||
                !changedProps.has('hass')
            ) {
                return;
            }
            const { _config, hass } = this;
            const entityId = _config?.entity;
            const states = hass?.states;
            const iconColor = states?.[entityId]?.attributes?.icon_color;
            if (iconColor) {
                this.style?.setProperty('--icon-primary-color', _stateObj.attributes.icon_color);
            }
            originalUpdated.call(this, changedProps);
        }
    }
});

[elchininet]

but anyways, this also indicates its not the Updating that is the issue, but the template not being applied to certain cards.

No of course, that is not related to the issue that you had but you were interested in the recurrent number of times that method was executed.

To detect the issue you to check what I mentioned earlier:

The method is called sending the value of the changedProps attribute, open that object and check that the _config property is inside (I am seeing that the hass is) and also check if the config object contains the entity property and it has a value.

[elchininet]

now you understand why I have been looking for a way to only update on entities that actually have a customization template set, and not on any state change in the system

For this, you can use the same method that kiosk-mode uses: https://github.com/NemesisRE/kiosk-mode/blob/c4cde606ea6f8ccfe6ebb0ea67f9c26bc839535a/src/kiosk-mode.ts#L674-L695

[Mariusthvdb]

uhm, that is remotely understandable to me, and I do see what it tries to do.
However, way beyond my coding skills (and ive never used those protected functions.

event.event_type === STATE_CHANGED_EVENT &&
			entities.includes(event.data.entity_id)

looks exactly like what we're after!

I suppose you couldnt have a look in my current code of custom-ui-only and suggest a PR to do so?
it would be the most amazing update ever since the initial release many years ago.....

[elchininet]

Let me know in which repo you need it and I will try to simulate the same. But I need you to test if it works because you have the set up ready for that.

[Mariusthvdb]

it is for the custom-ui repo, and specifically for the current custom-ui-only (will be renamed soon to custom-ui, and the existing custom-ui will be phased out, as it still uses more-info functionality we now modernized in custom more-info)

this repo is the plugin that uses the customize templates, so needs the updating

[Mariusthvdb]

To detect the issue you to check what I mentioned earlier:

The method is called sending the value of the changedProps attribute, open that object and check that the _config property is inside (I am seeing that the hass is) and also check if the config object contains the entity property and it has a value.

its impossible..... the list of those Updates is endless and super fast..

I took out the first console and changed the second to

console.log('Does iconColor exist?', states?.[entityId], states?.[entityId]?.attributes?.icon_color);

and that has some funny but interesting results, though I need to refresh the view for them to keep logging (is that a cue in itself;f?)

so the top listed shows an entity_id and an icon_color,
second shows green, but ... and no entity_id,
and the 3d shows and entity, but is undefined....

I believe the entity's that are listed without a color are the ones not being used on this view, (and they dont have a customized template either)

It would be good if we could stop them from being evaluated in the first place.

the listed colors without an entity are a mystery to me yet. its happening on the input_number.intercom_volume in the test view, but as the logging doesnt list it.

It does use the experimental jinja style of setting an icon_color (opposed to the customize javascript templates):

      - unique_id: intercom_volume
        state: >
          {{states('input_number.intercom_volume')}}
        icon: >
          {% set state = this.state|float(0) %}
          {% if state == 0.0 %} mdi:volume-off
          {% elif state <= 0.3 %} mdi:volume-low
          {% elif state <= 0.6 %} mdi:volume-medium
          {% else %} mdi:volume-high
          {% endif %}
# experimental
        attributes:
          icon_color: >
            {% set vol = this.state|float(0) %}
            {% if vol == 0.0 %} gray
            {% elif vol <= 0.3 %} dodgerblue
            {% elif vol <= 0.6 %} green
            {% elif vol <= 0.8 %} orange
            {% else %} red
            {% endif %}

Hoewever, I cant imagine that would be the cause. Because first of all, the other cards are not either by this (remember, entities card and button card are spot on), and secondly, some of the entities that do use a javascript icon_color template are also not displayed correctly on the tile card....

[Mariusthvdb]

happening on a fresh loading of the view in the dashboard (icons get colored):

this is on a reload of the same view:

and nothing logged.
I need to go out of the dashboard (left side menu) and come back again for the Tile cards to again update their color

[Mariusthvdb]

I have checked your code. The update is done in entities that have a template property in their attributes, if the entity doesn‘t have that property the code doesn‘t continue. So the reason about those entities being updated is not in that code.

Yes I have stared at that too... the thing that makes me wonder how and why though, is that it does actually work properly when used on entities in an entities card (StateBadge) and the Button card now. they are updated on each and every change that induces another color

[elchininet]

Hey @Mariusthvdb,

About this:

happening on a fresh loading of the view in the dashboard (icons get colored)
this is on a reload of the same view:
and nothing logged.
I need to go out of the dashboard (left side menu) and come back again for the Tile cards to again update their color

Could be the case that the code is not executed in those situations? Place a console.log in installCustomHooks and check if it is being called in all those cases.

[Mariusthvdb]

what should I add there?

// Install the hooks for updating states, entity cards, and state badges
  installCustomHooks() {
    window.customUI.installEntityCardStylingHook();
    window.customUI.installButtonCardStylingHook();
    window.customUI.installTileCardStylingHook();
    window.customUI.installStateBadgeStylingHook();
  },

[elchininet]

what should I add there?

Just a console.log with some random text to check if it is called in all those cases.

[chillymattster]

Hi,
I'm not 100% sure if I understood everything of the ongoing discussion, but I after reading everything and spending some time, I found a way that enables automatic update if tile card. I created a pull request to share my work 😃

From my understanding the problem is, that on every update of the hass-object there is an additional check for an updated config as well. But the config is only updated once and then kept "as is" which prevents further updates of the icon color.
By changing the checks for an updated hass-object and just the existence of a config, automatic updates are possible.

Furthermore, just setting --icon-primary-color changes the default behaviour of the tile card. Using --tile-color of ha-cardinside the tile card component leads to color changes that are visibly equal to the default behaviour.