Adding images to a Template Sensor

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

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

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

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

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

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

1 Like

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?

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.

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?

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.

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?

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”.

This is what I see when I do that:

Should I see something else?

click this
image

I did, but not sure what I’m looking for?

It still lists the correct clothing combo, but no image.

Do you have this png in /www/josie folder?
Also, the created entity ends with “_2” - are you sure that you use same entity inside a Picture-entity card? And it is definitely not “sensor.josie_pjs”.

The images are here:

And I have the Unique ID as: unique_id: sensor.josie_pjs but for some reason that doesn’t show up?

The only sensor I can see that shows any info on the clothing is:

sensor.what_should_josie_wear_to_bed_2

That is the one that lists the clothing on my dashboard, I currently see:

image

This is the sensor information that is currently showing in the Developer Tools:

Now add this sensor to the picture-entity card. What you posted above is Entity card.

I get this:

image

As I said, cannot test myself.
Try adding this entity to Entities card - will you see an image then? (instead of icon)
Or just open more-info for this entity.

Also , just in case, remove everything from “picture: …” and set some image with a short name like “/local/josie/orange.jpg” (ofc this file should exist).

I altered the sensor back to this:

template:
  - sensor:
      - name: "What Should Josie Wear to Bed?"
        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 %}
        availability: "{{ 'sensor.bedroom_temperature_sensor_temperature' | has_value }}"

And then set the Picture Entitiy code to:

show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: sensor.what_should_josie_wear_to_bed
state_image:
  2 tog bag, Sleep suit, Long sleeve, Socks, Mittens, Hat: /local/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks,-Mittens,-Hat.png
  2 tog bag, Sleep suit, Long sleeve, Socks: /local/josie/2-tog-bag,-Sleep-suit,-Long-sleeve,-Socks.png
  1 tog bag, Sleep suit, Long sleeve: /local/josie/1-tog-bag,-Sleep-suit,-Long-sleeve.png
  1 tog bag, Sleep suit, Short sleeve: /local/josie/1-tog-bag,-Sleep-suit,-Short-sleeve.png
  0.5 tog bag, Sleep suit: /local/josie/0.5-tog-bag,-Sleep-suit.png
  0.5 tog bag, Short sleeve: /local/josie/0.5-tog-bag,-Short-sleeve.png
  Short sleeve: /local/josie/Short-sleeve1.png

And now finally, the pictures are displaying correctly:

image

Thanks for your help with this, we got there in the end!