Placing text inside picture-elements card

[ohadbenita]

I was wondering whether I could place text with some properties inside the picture-elements card

Thanks

[Ralf]

Hello,

same question from me.
Already treid the type: markdown but it doesn’t work.

Anyone an idea for configuration?
Well, i could do with a picture…

Tahnks, Ralf

[JTPublic (JT)]

You can use type: state-label with a dummy sensor and place the text in prefix.
I have one with non-existence sensor.blank to display the text “Front Door” in my picture-elements:

    - type: state-label
      entity: sensor.blank
      prefix: "Front Door "
      style:
        top: 90%
        left: 14%
        font-size: 1.1vw
        color: white
        font-weight: bold

[silvrr]

Wondering if you have solved this with a more recent release @JTPublic. This just produces a yellow warning triangle now.

[JTPublic (JT)]

Yes, latest HA tightened entities, that ‘hack’ would work anymore.
You’ll have to use something valid, like define an input_text entity for state-label.

[Holdestmade]

I use this:

custom-cards/text-element

[almighty59]

@Holdestmade the custom-cards/text-element was recently depreciated. Do you know of any other options.?

[Holdestmade]

It’s only archived, so no more development, still works fine. I’ve removed it from HACS and manually installed it

Not aware of any other way to do it.

[bkr1969 (Brian)]

It does not still work fine.

[Holdestmade]

Works for me with manual install

[bkr1969 (Brian)]

Try this alternantive:

Picture Element Text

I created a workaround to allow text to be added to picture-elements using the state-label without having to add the text to the picture itself and not having to create sensor for each label. To do this I created a sensor that has a special ASCII ‘blank’ or ‘space’, it is not an actual space it is a special character, so copy and paste it and don’t just put in a space. This is done since either a blank or null or space results in an error seen when putting on a picture-element. # in sensor.ya…

[skank]

2024 now.
Anyone know how i add just text to an element?

[Raydo]

Greetings!
In order to display the text and other necessary information, I made a new sensor. With this you can display whatever information you want. The sensor code is located in the template.yaml file.
I added the following line to the configuration.yaml file:

# include
template: !include template.yaml

In template.yaml:

  - sensor:
    - name: 'Greeting'
      state: >
          {%- if states('sensor.time') > '22:00' and states('sensor.time') < '06:00' %}Good night!
          {%- elif states('sensor.time') >'06:00' and states('sensor.time') < '12:00' %}Good morning!
          {%- elif states('sensor.time') > '12:00' and states('sensor.time') < '18:00' %}Good day!
          {%- elif states('sensor.time') > '18:00' and states('sensor.time') < '21:59' %}Good evening!
          {%- endif %}
           MORE TEXT HERE IF YOU WANT

An example. Sensor information in the upper right corner:

I hope it helps someone. I am a beginner and have no programming knowledge.
Best wishes!

[iamroberthanson (Robert)]

The original solution of using a state-label still works (2024.09), but you will need to create a fake sensor that you can address.

Add this to configuration.yaml:

sensor:
  - platform: template
    sensors:
      blank_blank:
        friendly_name: "Blank Blank"
        value_template: " "

Then just like the original solution you can use a state-label, but the only change is that you need to reference your fake blank_blank sensor.

  - type: state-label
    entity: sensor.blank_blank
    prefix: Living Room
    style:
      left: 51%
      top: 65%
      font-size: 1.5em
      color: rgb(200,200,200)
      font-weight: bold