Is there a way to strip unit of measurement from picture elements card entities?

Configuration Frontend
1

Whenever I use picture elements card with the image and state-label elements, I tell it to display a temperature sensor entity which has a state that is just a number, but when it is displayed it adds its unit of measurement to it. I have tried telling it to display something like {{states(‘sensor.temperature’) }} which only returns the state number, but I guess the card doesn’t support that?
Is there a way to do this without making templates or am I doing something wrong?

Ideally I want something like this to work:

  - entity: sensor.temperature
    value_template: '{{states.sensor.temperature.state}}'
    style:
      text-align: center
      left: 20%
      top: 20%
    type: state-label
1 Like
2

Just figured this one out, leaving it here in case it’s of use to anyone, as I hadn’t found a post asking this question which gave a satisfying answer, other than to create a template sensor duplicating every one of my temperature sensors.

  - type: custom:config-template-card
    variables:
      - states['sensor.bedroom_temperature'].state 
    entities:
      - sensor.bedroom_temperature
    element:
      type: state-label
      entity: sensor.blank_blank
      prefix: '${vars[0]}'
    style: 
      top: 8%  
      left: 20%

Note that the style for positioning must be applied to the config-template-card, and not the element.

I did have to create one template sensor - a blank, dummy sensor, using the method I found in this post. This allowed me to have a text label (the prefix field), which config-template-card allowed to become a template referencing the value of the temperature sensor.

I wish it was a little neater of a solution, but it beats having a whole bunch of new template sensors with no units cluttering up the entities list.

1 Like
3

So it looked like it had worked when I posted the above…

On desktop via web browser it works.
On mobile via Fennec (firefox fork from F-Droid) it works
On the mobile app, (how I primarily interact with home assistant) it doesn’t work.

All instances where I’ve wrapped an entity inside a config-template-card don’t work, don’t appear on the mobile app.

But! They do appear in the preview when editing the yaml of the picture elements card.
And! If I make any changes to the that yaml, they remain visible in the app.
But this only lasts until I reload the app, when they disappear again.

But if I make any sort of edit and tap on ‘save’, even if the edit was adding and removing the same space, resulting in no net change to the yaml - then the custom elements appear and remain until the next time the app is restarted.

I’ve tested this with a custom element which isn’t the config-template-card, the simpler text element card and this has the same bizarre behaviour, which leads me to conclude that the problem is with custom cards in general, not just the config-template-card.

This behaviour is too weird for me to be able to diagnose, so sadly it looks like I’ll just be making those template sensors after all…

Edit: Updating from 2022.12.8 > 2023.1.4 made the text element card work now, but the config-template-card still behaves as documented above.

Interestingly, editing any card will suffice, not just the picture-elements card. Weird.

4

It works on the mobile app for me. Version 2022.12.0-full from the playstore

5

I’m the same version

Update: Further testing has revealed this glitch to only present in a limited case:

  • Only in the HA app
  • Only on the initial view tab when HA app loads
    AND
  • Only when picture-elements is below (no necessarily directly below) a card which features nested stacks, for instance a horizontal stack containing a vertical stack. This applies to stack-in-card too.

Edit #2: The problem disappears if you aren’t in Masonry view. Masonry view + Initial view + HA app + nested stacks.

Since I don’t use the desktop browser to navigate, Sidebar view looks the same as Masonry in the app, a single column. For the ultimate solution I’d be eventuallyy looking to figure out how to make it load in masonry on desktop browser while in sidebar for the android HA app.