Adding images to a Template Sensor

Configuration Frontend
1

Hi there,

I’ve set up a template sensor which uses the temperature in our baby’s nursery and tells us what she should wear to bed (e.g. if it’s under 19% then she should wear a 1 tog sleeping bag, a sleep suit and a short sleeve vest).

At the moment, I then have an entity card which lists the items that she should wear dependent on the temperature. Works great, although, I’d rather have images displaying to make it easier to view on my wall dashboard.

I have added attributes to the bottom of the template sensor with images for each combination of clothes, but I’m not sure if I’ve done it right as I cannot get it to display.

Can anyone help?

Here is my current template sensor:

template:
  - sensor:
      - name: "What Should Josie Wear to Bed?"
        unique_id: sensor_josie_pjs
        icon: mdi:tshirt-crew
        state: >-
          {% set temp = states('sensor.bedroom_temperature_sensor_temperature') | float %}
          {% if temp <= 16 %}
            2 tog bag, Sleep suit, Long sleeve, Socks, Mittens, Hat
          {% elif temp <= 17 %}
            2 tog bag, Sleep suit, Long sleeve, Socks
          {% elif temp <= 19 %}
            1 tog bag, Sleep suit, Long sleeve
          {% elif temp <= 21 %}
            1 tog bag, Sleep suit, Short sleeve
          {% elif temp <= 23 %}
            0.5 tog bag, Sleep suit
          {% elif temp <= 25 %}
            0.5 tog bag, Short sleeve    
          {% else %}
            Short sleeve
          {% endif %}
        attributes:
          image: >-
            {% if temp <= 16 %}
              /local/www/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks,-Mittens,-Hat.png
            {% elif temp <= 17 %}
              /local/www/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks.png
            {% elif temp <= 19 %}
              /local/www/josie/1-tog-bag,-Sleep-suit,-Long-sleeve.png
            {% elif temp <= 21 %}
              /local/www/josie/1-tog-bag,-Sleep-suit,-Short-sleeve.png
            {% elif temp <= 23 %}
              /local/www/josie/0.5-tog-bag,-Sleep-suit.png
            {% elif temp <= 25 %}
              /local/www/josie/0.5-tog-bag,-Short-sleeve.png
            {% else %}
              /local/www/josie/Short-sleeve1.png
            {% endif %}               
        availability: "{{ 'sensor.bedroom_temperature_sensor_temperature' | has_value }}"
2

Suggest to use “float(default=17)” to have some default value in case of a sensor’s failure.
Not critical here, since you use “has_value()” in “availability”, just a matter of a habit…

The “temp” variable is undefined here - the template should contain the same definition as for “state”.

Should be a “picture” and not in “attributes”, i.e.:

template:
  - sensor:
      - name: xxx
        state: ...
        picture: ...
        ...
        attributes:
          ...
1 Like
3

I’ll give this a go, thanks for answering.

Will I be able to have a different picture for each variable?

Or do I need separate sensors for each one?

4

Picture option supports templates.

5

In my case, where would I put the picture sentence, and how would I state one image for each combo?

Sorry, I’m not good at templates.

6

Where to place - see my example above.
How to template - see your own example )))

7

Sorry, so this is now what I have based on your advice:

template:
  - sensor:
      - name: "What Should Josie Wear to Bed?"
        unique_id: sensor_josie_pjs
        icon: mdi:tshirt-crew
        state: >-
          {% set temp = states('sensor.bedroom_temperature_sensor_temperature') | float(default=17%}
          {% if temp <= 16 %}
            2 tog bag, Sleep suit, Long sleeve, Socks, Mittens, Hat
          {% elif temp <= 17 %}
            2 tog bag, Sleep suit, Long sleeve, Socks
          {% elif temp <= 19 %}
            1 tog bag, Sleep suit, Long sleeve
          {% elif temp <= 21 %}
            1 tog bag, Sleep suit, Short sleeve
          {% elif temp <= 23 %}
            0.5 tog bag, Sleep suit
          {% elif temp <= 25 %}
            0.5 tog bag, Short sleeve    
          {% else %}
            Short sleeve
          {% endif %}
        picture: >-
          {% if temp <= 16 %}
            /local/www/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks,-Mittens,-Hat.png
          {% elif temp <= 17 %}
            /local/www/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks.png
          {% elif temp <= 19 %}
            /local/www/josie/1-tog-bag,-Sleep-suit,-Long-sleeve.png
          {% elif temp <= 21 %}
            /local/www/josie/1-tog-bag,-Sleep-suit,-Short-sleeve.png
          {% elif temp <= 23 %}
            /local/www/josie/0.5-tog-bag,-Sleep-suit.png
          {% elif temp <= 25 %}
            /local/www/josie/0.5-tog-bag,-Short-sleeve.png
          {% else %}
            /local/www/josie/Short-sleeve1.png
          {% endif %}   
        availability: "{{ 'sensor.bedroom_temperature_sensor_temperature' | has_value }}"

Now how do I add that to a Lovelace card so that the images display instead of the text?

8

See my comment above - this variable is undefined, it must be declared here in this template.

9

Hello, I’m not entirely sure what you mean by declaring it?

10

Same as here. The “temp” variable is declared and can be used now only here.
So you need to add “temp” to “picture” too.

11

Ah ok, sorry that makes sense. I’ll give it a go

12

This isn’t correct. It should just be /local/josie.

/local/... maps to config/www/...

1 Like
13

This what I now have thanks to all of your inputs:

template:
  - sensor:
      - name: "What Should Josie Wear to Bed?"
        unique_id: sensor_josie_pjs
        icon: mdi:tshirt-crew
        state: >-
          {% set temp = states('sensor.bedroom_temperature_sensor_temperature') | float %}
          {% if temp <= 16 %}
            2 tog bag, Sleep suit, Long sleeve, Socks, Mittens, Hat
          {% elif temp <= 17 %}
            2 tog bag, Sleep suit, Long sleeve, Socks
          {% elif temp <= 19 %}
            1 tog bag, Sleep suit, Long sleeve
          {% elif temp <= 21 %}
            1 tog bag, Sleep suit, Short sleeve
          {% elif temp <= 23 %}
            0.5 tog bag, Sleep suit
          {% elif temp <= 25 %}
            0.5 tog bag, Short sleeve    
          {% else %}
            Short sleeve
          {% endif %}
        picture: >-
          {% set temp = states('sensor.bedroom_temperature_sensor_temperature') | float %}
          {% if temp <= 16 %}
            /local/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks,-Mittens,-Hat.png
          {% elif temp <= 17 %}
            /local/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks.png
          {% elif temp <= 19 %}
            /local/josie/1-tog-bag,-Sleep-suit,-Long-sleeve.png
          {% elif temp <= 21 %}
            /local/josie/1-tog-bag,-Sleep-suit,-Short-sleeve.png
          {% elif temp <= 23 %}
            /local/josie/0.5-tog-bag,-Sleep-suit.png
          {% elif temp <= 25 %}
            /local/josie/0.5-tog-bag,-Short-sleeve.png
          {% else %}
            /local/josie/Short-sleeve1.png
          {% endif %}   
        availability: "{{ 'sensor.bedroom_temperature_sensor_temperature' | has_value }}"

But how do I now show the individual images on my dashboard?

I’ve tried this in a Picture Entity card:

type: picture-entity
entity: sensor.josie_pjs
name: "What Should Josie Wear to Bed?"
image: >-
  {% set temp = states('sensor.bedroom_temperature_sensor_temperature') | float %}
  {% if temp <= 16 %}
    /local/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks,-Mittens,-Hat.png
  {% elif temp <= 17 %}
    /local/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks.png
  {% elif temp <= 19 %}
    /local/josie/1-tog-bag,-Sleep-suit,-Long-sleeve.png
  {% elif temp <= 21 %}
    /local/josie/1-tog-bag,-Sleep-suit,-Short-sleeve.png
  {% elif temp <= 23 %}
    /local/josie/0.5-tog-bag,-Sleep-suit.png
  {% elif temp <= 25 %}
    /local/josie/0.5-tog-bag,-Short-sleeve.png
  {% else %}
    /local/josie/Short-sleeve1.png
  {% endif %}
show_name: true
show_state: true

But that doesn’t seem to be working?

14

You can’t template in the frontend. If you want a picture-entity that’s always changing, you likely need to make a generic camera or a template image.

Otherwise, what Ildar helped you with changes the icon to a picture.

15

This is getting back to my original post, I’ve created the above template which shows what our baby should wear to bead depending on the temperature in the nursery.

Presently, it lists the various combinations in text, depending on the temperature. But I want to show some images instead of text.

What is the best way to go about that? As I’m not entirely sure what you mean by create a generic camera or template image?

I feel like template image is what I’m trying to do above, so that sounds like the best option?

16

If you created a template sensor properly (with valid paths) - then it will have both dynamic state and entity_picture dependently on a temperature.
Have you tried placing this entity on a picture-entity card? Without using an “image” option - then entity_picture will be used. Away from PC, cannot test myself.

17

Are you saying the template sensor about is not correct with valid paths?

I’ve got as far as this through taking bits of code from various sources, so my knowledge is limited to how to adjust this.

I’ve tried putting the entity on a picture entity card with no image option and it says No image source defined?

18

Use a code posted here to create a sensor.
Go to Dev tools → State and select this sensor to make sure that it has valid state and entity_picture.
Make sure that you have images in “www/josie”.

19

This is what I see when I do that:

image
image1303×99 15.7 KB

Should I see something else?

20

click this
image