Last_changed in picture-elements

[ElMaquinista]

Hello there,

i have a picture-elements card and there i display the washing machine icon in either grey for not running and red for running:

  - type: state-icon
    entity: switch.sonoff_10015c8b0e
    style:
      top: 70%
      left: 85%
      '--paper-item-icon-color': red
      '--paper-item-icon-active-color': gray
      transform: scale(3,3)

is there a way to also get the last_changed time? so i could see since when its running?
maybe even a calculation of how long?
and maybe only IF its running?

[Ildar_Gabdullin]

@ElMaquinista

in either grey for not running and red for running:

Is it a question?
I am asking since you provided some code.

@ElMaquinista

last_changed time? so i could see since when its running?
maybe even a calculation of how long?

Anything supported.
Use card-mod.
Go to card-mod thread → 1st post → link at the bottom → styling badges on top, styling badges in picture-elemnts, using “:after” & “:before”

[ElMaquinista]

Thankyou for your help.
It kicked me a bit in the direction of my goal.

i already had card mod installed but didnt know how to ‘activate’ it.
now i found the part for the configuration.yaml

then i tested it and it basically works.

now i tried to follow your path, but i dont know which link at the bottom you mean (1st post bottom has more then one link, depending on what bottom is) and thread bottom also exists.
So i clicked on every link i found and searched for “styling badges on top” or a part of it.
No luck.
i even searched then every page for the :before and :after, even the whole forum search function didnt return a thing.
And on the github page of the mod i also didnt see a thing.
I am autistic, i have trouble getting instructions from NTs.

Can you help me a bit, so i find what you showed me?

[ElMaquinista]

  - type: state-label
    entity: states.switch['sonoff_10015c8b22']
    attribute: last_changed
    style:
      top: 90%
      left: 10%

tried variants with attribute, or directly in entity…

Last_updated State and last-changed in Lovelace

I got Unknown error when trying to convert timezone, {{ as_timestamp( states.binary_sensor['0x00158d000273bbe4_contact'].last_updated + '+06:00') | timestamp_custom('%a %b %-d %-I:%M%p')}} Unknown error rendering template

nothing worked.

[Ildar_Gabdullin]

Here is a link:

This is the link itself.

On that accumulative post you will find links to other posts with examples.

These are examples for badges:

Note that badges may be located:
– on the top of the page - and those examples for this case basically;
– in a dedicated custom:badge-card - see examples for this card on that accumulative post (here is a link);
– in a picture elements card.

Structure of a badge in these 3 cases is basically same.
That means that these styles (picture above) may be used in all these 3 cases - means that these styles are UNIVERSAL.
But:
– in case of custom:badge-card - some additional styles (like “change ALL badges in the card”) are possible (actually, this style is not described in the corresponding post but it is rather easy, ask me if you are interested, I’ll add it);
– in case of picture-elements card - same as above, additional styles like “change ALL badges in the card” are possible.

Regarding picture elements.
Here are styles for it:

Here you will see that in part of badges it is specified like “possible styles for badges may be found here” (with a link for “badges on the top”).

But - picture-elements already has a “style” option for badges.
Some tutorial may be found here (which is about using “style”, not about using card-mod).
And this “style” option allows to change SOME styles.
But:
– it does not allow to change styles for some elements of a badge;
– it does not allow conditional styling (like “if ON → color: white, otherwise red”).
If you need it - use card-mod then.

[Ildar_Gabdullin]

@ElMaquinista

attribute: last_changed

This is not a simple attribute.
Check this example:

type: picture-elements
elements:
  - type: state-label
    entity: sun.sun
    attribute: elevation
    style:
      top: 5%
      left: 40%
  - type: state-label
    entity: sun.sun
    attribute: last_changed
    style:
      top: 12%
      left: 40%
image: https://demo.home-assistant.io/stub_config/floorplan.png

The “elevation” attribute MAY BE displayed.
But “last_changed” - cannot.

These attributes are “called” differently:

To display the “last_changed” attribute for a badge - you need to use “:after”, “:before” methods.
Find a corresponding link in that accumulative post.

[ElMaquinista]

i did read your answer,
i did read the links.
i read many things.

but i am lost.

lets restart this from 0.

i have the following in my dashboard:

  - type: state-icon
    entity: switch.sonoff_10015c8b22
    style:
      top: 50%
      left: 85%
      '--paper-item-icon-color': red
      '--paper-item-icon-active-color': gray
      transform: scale(3,3)

which gives me this:

now i would like to have this:

what do i need to put in the code?

[Ildar_Gabdullin]

@ElMaquinista

lets restart this from 0.

I just noticed that now you are asking me about state-icon, not a badge.
Since you first asked about a badge in a previous thread - I answered you about badges.

@ElMaquinista

now i would like to have this:

To achieve this - you may use at least 2 methods:
– create a template sensor which returns a “running since XXX hours” state, then place this sensor as a “state-label”;
– place ANY state-label (for “sun.sun”, for example) + specify a “states.switch.my_switch.last_changed” as a content for “:after” or “:before” pseudo class (i.e. show this text instead of “Above horizon”).

If you want to display this text right under the icon - then I would suggest you the 2nd way but you need to add that pseudo class to the icon itself (i.e. w/o adding state-label element).

[ElMaquinista]

i now searched for all occurances of “:after” in this thread:

Card-mod - Add css styles to any lovelace card

Hi, is it possible to style conditionally secondary info entity card inisde auto entities card? This is not working card: show_header_toggle: false title: Rachunki type: entities filter: include: - entity_id: variable.* options: secondary_info: >- Do zapłaty: <b style='color:[[ if({entity}.attributes.czy_oplacony == 'nie', 'green', 'red') ]]'>[[ {entity}.attributes.do_zaplaty ]]</b> type: 'custom:secondaryinfo-entity-row' sort: …

in 3518 replies, there are quite some occurances. unfortunately none of it for state-label or state-icon.
i read every answer containing “:after”

nothing helped on my question of "how to have last_changed displayed on picture-elements.

i never ever asked about badges, i dont even know what a badge is.

i just asked for the code to have last_changed displayed and behind my washing machine icon.

thank you for your answers.

i am giving up here.

[Ildar_Gabdullin]

@ElMaquinista

i now searched for all occurances of “:after” in this thread:

No need to use search.
I told you to go to the accumulative post and find the a link to the post about pseudo classes.

Also I explained in details how to do it:

@Ildar_Gabdullin

To achieve this - you may use at least 2 methods:
– create a template sensor which returns a “running since XXX hours” state, then place this sensor as a “state-label”;
– place ANY state-label (for “sun.sun”, for example) + specify a “states.switch.my_switch.last_changed” as a content for “:after” or “:before” pseudo class (i.e. show this text instead of “Above horizon”).

If you want to display this text right under the icon - then I would suggest you the 2nd way but you need to add that pseudo class to the icon itself (i.e. w/o adding state-label element).

Surely there is no READY code for your case. You need to create it by yourself using examples.

@ElMaquinista

i never ever asked about badges, i dont even know what a badge is.

You did actually.
OK, never mind.

[ElMaquinista]

i also read through what you now sent me again.
still there is no answer on how to do this on my code:

  - type: state-icon
    entity: switch.sonoff_10015c8b22
    style:
      top: 50%
      left: 85%
      '--paper-item-icon-color': red
      '--paper-item-icon-active-color': gray
      transform: scale(3,3)

no state-label, no state-icon.

maybe someone else is willing to help me?

[Ildar_Gabdullin]

Repeat:

@Ildar_Gabdullin

Surely there is no READY code for your case. You need to create it by yourself using examples.

There are many elements in Lovelace.
Example for EVERY element is surely NOT provided.

Seems I’m loosing my time.

[ElMaquinista]

i made MANY attempts based on everything i read in the posts.

none worked.

i can give you an example of what i did:

  - type: state-label
    entity: switch.sonoff_10015c8b0e
    style:
      position: absolute
      transform: translate(0,0)
      bottom: 10px
      left: 10px
    card-mod:
      style:
        hui-generic-entity-row: |
          .text-content::after {
            content: "test"
          }

i dont know, it seems you are not the only one loosing time here…

[Ildar_Gabdullin]

Well, a person who doesn’t owe you anything explained you ideas for all possible variants - and still you are not satisfied since you need SOMEONE TO CREATE EVERYTHING FOR YOU.
No “thanks”, just complains.

[ElMaquinista]

i followed every hint you sent me.

its sad that you think like this.

i feel sorry for you.

[Ildar_Gabdullin]

Once again:

@Ildar_Gabdullin

To achieve this - you may use at least 2 methods:
– create a template sensor which returns a “running since XXX hours” state, then place this sensor as a “state-label”;
– place ANY state-label (for “sun.sun”, for example) + specify a “states.switch.my_switch.last_changed” as a content for “:after” or “:before” pseudo class (i.e. show this text instead of “Above horizon”).

If you want to display this text right under the icon - then I would suggest you the 2nd way but you need to add that pseudo class to the icon itself (i.e. w/o adding state-label element).

There are TWO methods:
– template sensor placed as state-label - you need to create this sensor;
– displaying info placed inside a pseudo class by card-mod.

You need to choose a way.
If 2nd way is chosen - then you should create a code BASED on provided examples (provided you a way to find them many times).
“Based” means - using DOM navigation, specify a path to a needed element.
There are plenty of cards, plenty of elements in Lovelace, plenty of possible use-cases - not easy to provide examples for ALL of them.
People should LEARN how to adapt basic examples for your needs.

Take this READY example and change it for your needs:

type: picture-elements
image: /local/images/white.jpg
elements:
  - type: state-icon
    entity: sun.sun
    style:
      top: 10%
      left: 10%
    card_mod:
      style: |
        state-badge::after {
          content: "{% if is_state('input_boolean.test_boolean','on') -%}
                    Activated
                    {%- else -%}
                    Deactivated
                    {%- endif %}";
        }
        state-badge {
          display: flex;
          flex-direction: row;
          column-gap: 8px;
        }

Here:
– added a “:after” pseudo class with some user-defined text (you should specify your own text);
– the whole “state-badge” element is converted into a flex-row to place the added pseudo class on the right; otherwise the added element will be placed below the icon.

P.S. Just for a record. You seem to be rather ungrateful man.

[ElMaquinista]

works like a charm, thank you very much!

  - type: state-icon
    entity: switch.sonoff_10015c8b22
    style:
      position: absolute
      top: 20px
      right: 100px
      '--paper-item-icon-color': red
      '--paper-item-icon-active-color': gray
      transform: scale(3,3)
    card_mod:
      style: |
        state-badge::after {
          content: "{%- set entity_id = 'switch.sonoff_10015c8b22' -%}
                    {%- if is_state(entity_id, 'off') -%}
                    {%- set runningsince = (now()) - ((states[entity_id].last_changed)) -%}
                    {%- set runningsinceseconds = runningsince.total_seconds()|round -%}
                    {%- set runningsincedays = (runningsinceseconds / 86400)|int|string -%}
                    {%- set runningsincedaystext = 'Tagen' -%}
                    {%- if runningsincedays|int == 1 -%}
                    {%- set runningsincedaystext = 'Tag' -%}
                    {%- endif -%}
                    {%- set runningsincehours = (runningsinceseconds % 86400 / 3600)|int|string -%}
                    {%- set runningsincehourstext = 'Stunden' -%}
                    {%- if runningsincehours|int == 1 -%}
                    {%- set runningsincehourstext = 'Stunde' -%}
                    {%- endif -%}
                    {%- set runningsinceminutes = (runningsinceseconds % 3600 / 60)|int|string -%}
                    {%- set runningsinceminutestext = 'Minuten' -%}
                    {%- if runningsinceminutes|int == 1 -%}
                    {%- set runningsinceminutestext = 'Minute' -%}
                    {%- endif -%}
                    {%- if runningsincedays|int > 0 -%}
                    {{ runningsincedays + ' ' + runningsincedaystext + ' ' + runningsincehours + ' ' + runningsincehourstext + ' und ' + runningsinceminutes + ' ' + runningsinceminutestext }}
                    {%- elif runningsincehours|int > 0 -%}
                    {{ runningsincehours + ' ' + runningsincehourstext + ' und ' + runningsinceminutes + ' ' + runningsinceminutestext }}
                    {%- else -%}
                    {{ runningsinceminutes + ' ' + runningsinceminutestext }}
                    {%- endif -%}
                    {%- endif -%}"
        }
        state-badge {
          font-size: 4px;
          color: black;
          width: 90px;
          display: flex;
          flex-direction: row;
        }

[ElMaquinista]

now with black text and state-dependent-color for the icon:

  - type: state-icon
    entity: switch.sonoff_10015c8b22
    style:
      position: absolute
      top: 20px
      right: 100px
      transform: scale(3,3)
    card_mod:
      style: |
        state-badge::after {
          content: "{%- set entity_id = 'switch.sonoff_10015c8b22' -%}
                    {%- if is_state(entity_id, 'off') -%}
                    {%- set runningsince = (now()) - ((states[entity_id].last_changed)) -%}
                    {%- set runningsinceseconds = runningsince.total_seconds()|round -%}
                    {%- set runningsincedays = (runningsinceseconds / 86400)|int|string -%}
                    {%- set runningsincedaystext = 'Tagen' -%}
                    {%- if runningsincedays|int == 1 -%}
                    {%- set runningsincedaystext = 'Tag' -%}
                    {%- endif -%}
                    {%- set runningsincehours = (runningsinceseconds % 86400 / 3600)|int|string -%}
                    {%- set runningsincehourstext = 'Stunden' -%}
                    {%- if runningsincehours|int == 1 -%}
                    {%- set runningsincehourstext = 'Stunde' -%}
                    {%- endif -%}
                    {%- set runningsinceminutes = (runningsinceseconds % 3600 / 60)|int|string -%}
                    {%- set runningsinceminutestext = 'Minuten' -%}
                    {%- if runningsinceminutes|int == 1 -%}
                    {%- set runningsinceminutestext = 'Minute' -%}
                    {%- endif -%}
                    {%- if runningsincedays|int > 0 -%}
                    {{ runningsincedays + ' ' + runningsincedaystext + ' ' + runningsincehours + ' ' + runningsincehourstext + ' und ' + runningsinceminutes + ' ' + runningsinceminutestext }}
                    {%- elif runningsincehours|int > 0 -%}
                    {{ runningsincehours + ' ' + runningsincehourstext + ' und ' + runningsinceminutes + ' ' + runningsinceminutestext }}
                    {%- else -%}
                    {{ runningsinceminutes + ' ' + runningsinceminutestext }}
                    {%- endif -%}
                    {%- endif -%}"
        }
        state-badge {
          font-size: 4px;
          width: 90px;
          display: flex;
          flex-direction: row;
          --card-mod-icon-color: {%- if is_state('switch.sonoff_10015c8b22', 'off') -%}
                                 red
                                 {%- else -%}
                                 gray
                                 {%- endif %};
          color: black;
        }

what helped me on this, was this link:

GitHub - thomasloven/lovelace-card-mod: Add CSS styles to (almost) any lovelace card