The template is not outputting value

georgelza · January 11, 2025, 6:04pm

Strange, the same template as per below works on another HA instance, but not on this one, even though the input percentage field is valid…


# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes


logger:
  default: info
  logs:
    custom_components.load_shedding: debug

recorder:
  db_url: mysql://homeassistant:homeassistant@core-mariadb/homeassistant?charset=utf8mb4
  auto_purge: true
  purge_keep_days: 10
  
  
homeassistant:
  name: Home-JBay
  elevation: 100
  unit_system: metric
  time_zone: Africa/Johannesburg
  country: ZA
#  external_url: "https://ha.tinmanza.com"
  internal_url: "http://xxx.xx.20.19:8123"
  
  
http:
  use_x_forwarded_for: true
  trusted_proxies:
    - 172.16.10.1
    - 192.168.0.1
    - 173.245.48.0/20
    - 103.21.244.0/22
    - 103.22.200.0/22
    - 103.31.4.0/22
    - 141.101.64.0/18
    - 108.162.192.0/18
    - 190.93.240.0/20
    - 188.114.96.0/20
    - 197.234.240.0/22
    - 198.41.128.0/17
    - 162.158.0.0/15
    - 104.16.0.0/12
    - 172.64.0.0/13
    - 131.0.72.0/22  
#    - 0.0.0.0/0
#    - 10.0.0.0/8
#    - 127.0.0.1
#    - 172.30.33.0/24     # You may also provide the subnet mask
#    - 172.16.10.0/24     # Add the IP address of the proxy server
#  ssl_certificate: /ssl/fullchain.pem
#  ssl_key: /ssl/privkey.pem


template:
  - sensor:
      - name: "Garage Tank Level Image"
        state: >
          {% set input_value = states('sensor.garage_tank_percent') | float %}
          {% if 0 < input_value < 2.5 %}
            {{ "/local/TankLevels0000.jpg" }}
          {% elif 2.5 <= input_value < 5 %}
            {{ "/local/TankLevels0025.jpg" }}
          {% elif 5 <= input_value < 7.5 %}
            {{ "/local/TankLevels0050.jpg" }}
          {% elif 7.5 <= input_value < 10 %}
            {{ "/local/TankLevels0075.jpg" }}
          {% elif 10 <= input_value < 12.5 %}
            {{ "/local/TankLevels0100.jpg" }}
          {% elif 12.5 <= input_value < 15 %}
            {{ "/local/TankLevels0125.jpg" }}
          {% elif 15 <= input_value < 17.5 %}
            {{ "/local/TankLevels0150.jpg" }}
          {% elif 17.5 <= input_value < 20 %}
            {{ "/local/TankLevels0175.jpg" }}
          {% elif 20 <= input_value < 22.5 %}
            {{ "/local/TankLevels0200.jpg" }}
          {% elif 22.5 <= input_value < 25 %}
            {{ "/local/TankLevels0225.jpg" }}
          {% elif 25 <= input_value < 27.5 %}
            {{ "/local/TankLevels0250.jpg" }}
          {% elif 27.5 <= input_value < 30 %}
            {{ "/local/TankLevels0275.jpg" }}
          {% elif 30 <= input_value < 32.5 %}
            {{ "/local/TankLevels0300.jpg" }}
          {% elif 32.5 <= input_value < 35 %}
            {{ "/local/TankLevels0325.jpg" }}
          {% elif 35 <= input_value < 37.5 %}
            {{ "/local/TankLevels0350.jpg" }}
          {% elif 37.5 <= input_value < 40 %}
            {{ "/local/TankLevels0375.jpg" }}
          {% elif 40 <= input_value < 42.5 %}
            {{ "/local/TankLevels0400.jpg" }}
          {% elif 42.5 <= input_value < 45 %}
            {{ "/local/TankLevels0425.jpg" }}
          {% elif 45 <= input_value < 47.5 %}
            {{ "/local/TankLevels0450.jpg" }}
          {% elif 47.5 <= input_value < 50 %}
            {{ "/local/TankLevels0475.jpg" }}
          {% elif 50 <= input_value < 52.5 %}
            {{ "/local/TankLevels0500.jpg" }}
          {% elif 52.5 <= input_value < 55 %}
            {{ "/local/TankLevels0525.jpg" }}
          {% elif 55 <= input_value < 57.5 %}
            {{ "/local/TankLevels0550.jpg" }}
          {% elif 57.5 <= input_value < 60 %}
            {{ "/local/TankLevels0575.jpg" }}
          {% elif 60 <= input_value < 62.5 %}
            {{ "/local/TankLevels0600.jpg" }}
          {% elif 62.5 <= input_value < 65 %}
            {{ "/local/TankLevels0625.jpg" }}
          {% elif 65 <= input_value < 67.5 %}
            {{ "/local/TankLevels0650.jpg" }}
          {% elif 67.5 <= input_value < 70 %}
            {{ "/local/TankLevels0675.jpg" }}
          {% elif 70 <= input_value < 72.5 %}
            {{ "/local/TankLevels0700.jpg" }}
          {% elif 72.5 <= input_value < 75 %}
            {{ "/local/TankLevels0725.jpg" }}
          {% elif 75 <= input_value < 77.5 %}
            {{ "/local/TankLevels0750.jpg" }}
          {% elif 77.5 <= input_value < 80 %}
            {{ "/local/TankLevels0775.jpg" }}
          {% elif 80 <= input_value < 82.5 %}
            {{ "/local/TankLevels0800.jpg" }}
          {% elif 82.5 <= input_value < 85 %}
            {{ "/local/TankLevels0825.jpg" }}
          {% elif 85 <= input_value < 87.5 %}
            {{ "/local/TankLevels0850.jpg" }}
          {% elif 87.5 <= input_value < 90 %}
            {{ "/local/TankLevels0875.jpg" }}
          {% elif 90 <= input_value < 92.5 %}
            {{ "/local/TankLevels0900.jpg" }}
          {% elif 92.5 <= input_value < 95 %}
            {{ "/local/TankLevels0925.jpg" }}
          {% elif 95 <= input_value < 97.5 %}
            {{ "/local/TankLevels0950.jpg" }}
          {% elif 97.5 <= input_value <= 100 %}
            {{ "/local/TankLevels0975.jpg" }}
          {% else %}
            {{ "/local/TankLevels1000.jpg" }}
          {% endif %}
    
mqtt:
  
  # https://developers.home-assistant.io/docs/core/entity/sensor
  sensor:
  - state_topic: "home/WaterTankLevels/KenWaterTank_test/json"
    name: "Garage Tank - Percent"
    unit_of_measurement: '%'
    value_template:  "{{ value_json.fields.fill_percentage }}"
    
  - state_topic: "home/WaterTankLevels/KenWaterTank_test/json"
    name: "Garage Tank - Litre"
    unit_of_measurement: 'L'
    value_template: "{{ value_json.fields.water_volume }}"
    
  - state_topic: "home/WaterTankLevels/KenWaterTank_test/json"
    name: "Garage Tank - Cm"
    unit_of_measurement: 'cm'
    value_template: "{{ value_json.fields.water_level }}"

  - state_topic: "home/WaterTankLevels/KenWaterTank_test/json"
    name: "Garage Tank - Value"
    value_template:  "{{ value_json.fields.value }}"
    
  - state_topic: "home/WaterTankLevels/KenWaterTank_test/json"
    name: "Garage Tank - Voltage"
    unit_of_measurement: 'Voltage'
    value_template:  "{{ value_json.fields.voltage }}"

  - state_topic: "home/WaterTankLevels/KenWaterTank_test/json"
    name: "Garage Tank - Last Update"
    value_template:  "{{ value_json.time }}"

Troon · January 11, 2025, 6:07pm

Go to Developer Tools / Template and type in:

{{ states('sensor.garage_tank_percent') }}

What do you get?

georgelza · January 11, 2025, 6:46pm

The correct/Expected value.

G

georgelza · January 11, 2025, 6:59pm

This is actually 2 problems on 2 Rpi, on this one, the template does not results in the correct image name being pushed into the variable.
On the original source Rpi, the template results in the correct image name in the sensor value but this is not then shown… I have checked, the variable is populated with the correct /local/TankLevels0450.jpg value as example.

here is the dashboard code.

type: vertical-stack
cards:
  - type: custom:config-template-card
    entities:
      - sensor.pot_1_level_image
    card:
      type: picture
      image: "{{ states('sensor.pot_1_level_image') }}"
    title: Pot 1
  - type: entities
    entities:
      - entity: sensor.pot_1_litre
      - entity: sensor.pot_1_cm
      - entity: sensor.pot_1_percent

checking “{{ states(‘sensor.pot_1_level_image’) }}” via Developer tools does show the correct file location/name.

georgelza · January 11, 2025, 7:01pm

I got a water tank image, see below… at 2.5% increments, happy to share with anyone thats able to help me get this working.

G

TankLevels0400

georgelza · January 11, 2025, 7:05pm

Retyping, copying etc etc, you know redoing something you’ve done 20 times for another time results in variable being created with the correct file name inserted.

Now to try and get the image displayed.

G

type: vertical-stack
cards:
  - type: custom:config-template-card
    entities:
      - sensor.garage_tank_level_image
    card:
      type: picture
      image: "{{ states('sensor.garage_tank_level_image') }}"
    title: Garage Tank
  - type: entities
    entities:
      - entity: sensor.garage_tank_litre
        name: Volume
      - entity: sensor.garage_tank_cm
        name: Water Level (Cm)
      - entity: sensor.garage_tank_percent
        name: Fill Percentage
  - type: entities
    entities:
      - entity: sensor.garage_tank_last_update
        name: " Last Reading"

Troon · January 11, 2025, 11:37pm

The image of an entities card does not support templates according to the docs:

tom_l · January 12, 2025, 4:02am

A template image entity does though.

configuration.yaml

template:
  - image: 
      - name: Tank Level
        url: "{{ states('sensor.garage_tank_level_image') }}"

Card:

type: vertical-stack
cards:
  - show_state: false
    show_name: false
    camera_view: auto
    entity: image.tank_level
    name: Tank Level
    type: picture-entity
  - type: etc...

georgelza · January 12, 2025, 5:44am

Hi Tom.

Here is my copy/implementation of the above… Not sure what I got wrong.

template:
  - sensor:
      - name: "Garage Tank Level Image"
        state: >
          {% set input_value = states('sensor.garage_tank_percent') | float %}
          {% if 0 < input_value < 2.5 %}
            {{ "/local/TankLevels0000.jpg" }}
          {% elif 2.5 <= input_value < 5 %}
            {{ "/local/TankLevels0025.jpg" }}
          {% elif 5 <= input_value < 7.5 %}
            {{ "/local/TankLevels0050.jpg" }}
          {% elif 7.5 <= input_value < 10 %}
            {{ "/local/TankLevels0075.jpg" }}
          {% elif 10 <= input_value < 12.5 %}
            {{ "/local/TankLevels0100.jpg" }}
          {% elif 12.5 <= input_value < 15 %}
            {{ "/local/TankLevels0125.jpg" }}
          {% elif 15 <= input_value < 17.5 %}
            {{ "/local/TankLevels0150.jpg" }}
          {% elif 17.5 <= input_value < 20 %}
            {{ "/local/TankLevels0175.jpg" }}
          {% elif 20 <= input_value < 22.5 %}
            {{ "/local/TankLevels0200.jpg" }}
          {% elif 22.5 <= input_value < 25 %}
            {{ "/local/TankLevels0225.jpg" }}
          {% elif 25 <= input_value < 27.5 %}
            {{ "/local/TankLevels0250.jpg" }}
          {% elif 27.5 <= input_value < 30 %}
            {{ "/local/TankLevels0275.jpg" }}
          {% elif 30 <= input_value < 32.5 %}
            {{ "/local/TankLevels0300.jpg" }}
          {% elif 32.5 <= input_value < 35 %}
            {{ "/local/TankLevels0325.jpg" }}
          {% elif 35 <= input_value < 37.5 %}
            {{ "/local/TankLevels0350.jpg" }}
          {% elif 37.5 <= input_value < 40 %}
            {{ "/local/TankLevels0375.jpg" }}
          {% elif 40 <= input_value < 42.5 %}
            {{ "/local/TankLevels0400.jpg" }}
          {% elif 42.5 <= input_value < 45 %}
            {{ "/local/TankLevels0425.jpg" }}
          {% elif 45 <= input_value < 47.5 %}
            {{ "/local/TankLevels0450.jpg" }}
          {% elif 47.5 <= input_value < 50 %}
            {{ "/local/TankLevels0475.jpg" }}
          {% elif 50 <= input_value < 52.5 %}
            {{ "/local/TankLevels0500.jpg" }}
          {% elif 52.5 <= input_value < 55 %}
            {{ "/local/TankLevels0525.jpg" }}
          {% elif 55 <= input_value < 57.5 %}
            {{ "/local/TankLevels0550.jpg" }}
          {% elif 57.5 <= input_value < 60 %}
            {{ "/local/TankLevels0575.jpg" }}
          {% elif 60 <= input_value < 62.5 %}
            {{ "/local/TankLevels0600.jpg" }}
          {% elif 62.5 <= input_value < 65 %}
            {{ "/local/TankLevels0625.jpg" }}
          {% elif 65 <= input_value < 67.5 %}
            {{ "/local/TankLevels0650.jpg" }}
          {% elif 67.5 <= input_value < 70 %}
            {{ "/local/TankLevels0675.jpg" }}
          {% elif 70 <= input_value < 72.5 %}
            {{ "/local/TankLevels0700.jpg" }}
          {% elif 72.5 <= input_value < 75 %}
            {{ "/local/TankLevels0725.jpg" }}
          {% elif 75 <= input_value < 77.5 %}
            {{ "/local/TankLevels0750.jpg" }}
          {% elif 77.5 <= input_value < 80 %}
            {{ "/local/TankLevels0775.jpg" }}
          {% elif 80 <= input_value < 82.5 %}
            {{ "/local/TankLevels0800.jpg" }}
          {% elif 82.5 <= input_value < 85 %}
            {{ "/local/TankLevels0825.jpg" }}
          {% elif 85 <= input_value < 87.5 %}
            {{ "/local/TankLevels0850.jpg" }}
          {% elif 87.5 <= input_value < 90 %}
            {{ "/local/TankLevels0875.jpg" }}
          {% elif 90 <= input_value < 92.5 %}
            {{ "/local/TankLevels0900.jpg" }}
          {% elif 92.5 <= input_value < 95 %}
            {{ "/local/TankLevels0925.jpg" }}
          {% elif 95 <= input_value < 97.5 %}
            {{ "/local/TankLevels0950.jpg" }}
          {% elif 97.5 <= input_value <= 100 %}
            {{ "/local/TankLevels0975.jpg" }}
          {% else %}
            {{ "/local/TankLevels1000.jpg" }}
          {% endif %}
  - image: 
      - name: Garage Tank Level
        url: "{{ states('sensor.garage_tank_level_image') }}"

And Dashboard yaml

type: vertical-stack
cards:
  - show_state: false
    show_name: false
    camera_view: auto
    entity: image.garage_tank_level
    name: Tank Level
    type: picture-entity
  - type: entities
    entities:
      - entity: sensor.garage_tank_litre
        name: Volume
      - entity: sensor.garage_tank_cm
        name: Water Level (Cm)
      - entity: sensor.garage_tank_percent
        name: Fill Percentage
  - type: entities
    entities:
      - entity: sensor.garage_tank_last_update
        name: " Last Reading"

I was expecting to see my image file name when inspecting value of “image.garage_tank_level” ?

tom_l · January 12, 2025, 6:08am

If you don’t use the sensor for anything else you can get rid of it and put the template directly in the image template:

template:
  - image: 
      - name: Garage Tank Level
        url: >
          {% set input_value = states('sensor.garage_tank_percent') | float %}
          {% if 0 < input_value < 2.5 %}
            {{ "/local/TankLevels0000.jpg" }}
          {% elif 2.5 <= input_value < 5 %}
            {{ "/local/TankLevels0025.jpg" }}
          {% elif 5 <= input_value < 7.5 %}
            {{ "/local/TankLevels0050.jpg" }}
          {% elif 7.5 <= input_value < 10 %}
            {{ "/local/TankLevels0075.jpg" }}
          {% elif 10 <= input_value < 12.5 %}
            {{ "/local/TankLevels0100.jpg" }}
          {% elif 12.5 <= input_value < 15 %}
            {{ "/local/TankLevels0125.jpg" }}
          {% elif 15 <= input_value < 17.5 %}
            {{ "/local/TankLevels0150.jpg" }}
          {% elif 17.5 <= input_value < 20 %}
            {{ "/local/TankLevels0175.jpg" }}
          {% elif 20 <= input_value < 22.5 %}
            {{ "/local/TankLevels0200.jpg" }}
          {% elif 22.5 <= input_value < 25 %}
            {{ "/local/TankLevels0225.jpg" }}
          {% elif 25 <= input_value < 27.5 %}
            {{ "/local/TankLevels0250.jpg" }}
          {% elif 27.5 <= input_value < 30 %}
            {{ "/local/TankLevels0275.jpg" }}
          {% elif 30 <= input_value < 32.5 %}
            {{ "/local/TankLevels0300.jpg" }}
          {% elif 32.5 <= input_value < 35 %}
            {{ "/local/TankLevels0325.jpg" }}
          {% elif 35 <= input_value < 37.5 %}
            {{ "/local/TankLevels0350.jpg" }}
          {% elif 37.5 <= input_value < 40 %}
            {{ "/local/TankLevels0375.jpg" }}
          {% elif 40 <= input_value < 42.5 %}
            {{ "/local/TankLevels0400.jpg" }}
          {% elif 42.5 <= input_value < 45 %}
            {{ "/local/TankLevels0425.jpg" }}
          {% elif 45 <= input_value < 47.5 %}
            {{ "/local/TankLevels0450.jpg" }}
          {% elif 47.5 <= input_value < 50 %}
            {{ "/local/TankLevels0475.jpg" }}
          {% elif 50 <= input_value < 52.5 %}
            {{ "/local/TankLevels0500.jpg" }}
          {% elif 52.5 <= input_value < 55 %}
            {{ "/local/TankLevels0525.jpg" }}
          {% elif 55 <= input_value < 57.5 %}
            {{ "/local/TankLevels0550.jpg" }}
          {% elif 57.5 <= input_value < 60 %}
            {{ "/local/TankLevels0575.jpg" }}
          {% elif 60 <= input_value < 62.5 %}
            {{ "/local/TankLevels0600.jpg" }}
          {% elif 62.5 <= input_value < 65 %}
            {{ "/local/TankLevels0625.jpg" }}
          {% elif 65 <= input_value < 67.5 %}
            {{ "/local/TankLevels0650.jpg" }}
          {% elif 67.5 <= input_value < 70 %}
            {{ "/local/TankLevels0675.jpg" }}
          {% elif 70 <= input_value < 72.5 %}
            {{ "/local/TankLevels0700.jpg" }}
          {% elif 72.5 <= input_value < 75 %}
            {{ "/local/TankLevels0725.jpg" }}
          {% elif 75 <= input_value < 77.5 %}
            {{ "/local/TankLevels0750.jpg" }}
          {% elif 77.5 <= input_value < 80 %}
            {{ "/local/TankLevels0775.jpg" }}
          {% elif 80 <= input_value < 82.5 %}
            {{ "/local/TankLevels0800.jpg" }}
          {% elif 82.5 <= input_value < 85 %}
            {{ "/local/TankLevels0825.jpg" }}
          {% elif 85 <= input_value < 87.5 %}
            {{ "/local/TankLevels0850.jpg" }}
          {% elif 87.5 <= input_value < 90 %}
            {{ "/local/TankLevels0875.jpg" }}
          {% elif 90 <= input_value < 92.5 %}
            {{ "/local/TankLevels0900.jpg" }}
          {% elif 92.5 <= input_value < 95 %}
            {{ "/local/TankLevels0925.jpg" }}
          {% elif 95 <= input_value < 97.5 %}
            {{ "/local/TankLevels0950.jpg" }}
          {% elif 97.5 <= input_value <= 100 %}
            {{ "/local/TankLevels0975.jpg" }}
          {% else %}
            {{ "/local/TankLevels1000.jpg" }}
          {% endif %}

Note that this image won’t have a value until sensor.garage_tank_percent changes. You can do that manually in Developer Tool → States for testing.

Then check what the image looks like in a card. You cant use the template editor to look at the state of image.garage_tank_level as its state is the last time it updated, not the image url. It resolves to a picture in an image card, You can see the URL in Developer Tools → States, look at the image’s entity_picture attribute.

The only remaining question is if the image url option requires a full url (http://…) rather than a path.

georgelza · January 12, 2025, 6:31am

I do use the sensor values in other automations.
Hmm
I can however create 2 sensors from the same Mqtt topic and then use this one in the card… and the other for the automations.

Did think about setting the state… but did not realize that it only will be updated when change…
The other values as in cm, volume etc all chance allot, but the image card only changes at a 2.5% change and that’s def not going to happen on the test system.

G

tom_l · January 12, 2025, 6:34am

No the url sensor. Do you use that anywhere other than for the image?

So change it manually in Dev Tools States. For testing. The change gets overridden when it updates or you restart/reload.

georgelza · January 12, 2025, 6:41am

Just cutting my boys hair quickly
As soon as home will try above and report back.

G

georgelza · January 12, 2025, 8:57am

ok, tried the following…


template:
  - image: 
      - name: Garage Tank Level
        url: >
          {% set input_value = states('sensor.garage_tank_percent') | float %}
          {% if 0 < input_value < 2.5 %}
            {{ "/local/TankLevels0000.jpg" }}
          {% elif 2.5 <= input_value < 5 %}
            {{ "/local/TankLevels0025.jpg" }}
          {% elif 5 <= input_value < 7.5 %}
            {{ "/local/TankLevels0050.jpg" }}
          {% elif 7.5 <= input_value < 10 %}
            {{ "/local/TankLevels0075.jpg" }}
          {% elif 10 <= input_value < 12.5 %}
            {{ "/local/TankLevels0100.jpg" }}
          {% elif 12.5 <= input_value < 15 %}
            {{ "/local/TankLevels0125.jpg" }}
          {% elif 15 <= input_value < 17.5 %}
            {{ "/local/TankLevels0150.jpg" }}
          {% elif 17.5 <= input_value < 20 %}
            {{ "/local/TankLevels0175.jpg" }}
          {% elif 20 <= input_value < 22.5 %}
            {{ "/local/TankLevels0200.jpg" }}
          {% elif 22.5 <= input_value < 25 %}
            {{ "/local/TankLevels0225.jpg" }}
          {% elif 25 <= input_value < 27.5 %}
            {{ "/local/TankLevels0250.jpg" }}
          {% elif 27.5 <= input_value < 30 %}
            {{ "/local/TankLevels0275.jpg" }}
          {% elif 30 <= input_value < 32.5 %}
            {{ "/local/TankLevels0300.jpg" }}
          {% elif 32.5 <= input_value < 35 %}
            {{ "/local/TankLevels0325.jpg" }}
          {% elif 35 <= input_value < 37.5 %}
            {{ "/local/TankLevels0350.jpg" }}
          {% elif 37.5 <= input_value < 40 %}
            {{ "/local/TankLevels0375.jpg" }}
          {% elif 40 <= input_value < 42.5 %}
            {{ "/local/TankLevels0400.jpg" }}
          {% elif 42.5 <= input_value < 45 %}
            {{ "/local/TankLevels0425.jpg" }}
          {% elif 45 <= input_value < 47.5 %}
            {{ "/local/TankLevels0450.jpg" }}
          {% elif 47.5 <= input_value < 50 %}
            {{ "/local/TankLevels0475.jpg" }}
          {% elif 50 <= input_value < 52.5 %}
            {{ "/local/TankLevels0500.jpg" }}
          {% elif 52.5 <= input_value < 55 %}
            {{ "/local/TankLevels0525.jpg" }}
          {% elif 55 <= input_value < 57.5 %}
            {{ "/local/TankLevels0550.jpg" }}
          {% elif 57.5 <= input_value < 60 %}
            {{ "/local/TankLevels0575.jpg" }}
          {% elif 60 <= input_value < 62.5 %}
            {{ "/local/TankLevels0600.jpg" }}
          {% elif 62.5 <= input_value < 65 %}
            {{ "/local/TankLevels0625.jpg" }}
          {% elif 65 <= input_value < 67.5 %}
            {{ "/local/TankLevels0650.jpg" }}
          {% elif 67.5 <= input_value < 70 %}
            {{ "/local/TankLevels0675.jpg" }}
          {% elif 70 <= input_value < 72.5 %}
            {{ "/local/TankLevels0700.jpg" }}
          {% elif 72.5 <= input_value < 75 %}
            {{ "/local/TankLevels0725.jpg" }}
          {% elif 75 <= input_value < 77.5 %}
            {{ "/local/TankLevels0750.jpg" }}
          {% elif 77.5 <= input_value < 80 %}
            {{ "/local/TankLevels0775.jpg" }}
          {% elif 80 <= input_value < 82.5 %}
            {{ "/local/TankLevels0800.jpg" }}
          {% elif 82.5 <= input_value < 85 %}
            {{ "/local/TankLevels0825.jpg" }}
          {% elif 85 <= input_value < 87.5 %}
            {{ "/local/TankLevels0850.jpg" }}
          {% elif 87.5 <= input_value < 90 %}
            {{ "/local/TankLevels0875.jpg" }}
          {% elif 90 <= input_value < 92.5 %}
            {{ "/local/TankLevels0900.jpg" }}
          {% elif 92.5 <= input_value < 95 %}
            {{ "/local/TankLevels0925.jpg" }}
          {% elif 95 <= input_value < 97.5 %}
            {{ "/local/TankLevels0950.jpg" }}
          {% elif 97.5 <= input_value <= 100 %}
            {{ "/local/TankLevels0975.jpg" }}
          {% else %}
            {{ "/local/TankLevels1000.jpg" }}
          {% endif %}

Dashboard code:

type: vertical-stack
cards:
  - show_state: false
    show_name: false
    camera_view: auto
    entity: image.garage_tank_level
    name: Tank Level
    type: picture-entity
  - type: entities
    entities:
      - entity: sensor.garage_tank_litre
        name: Volume
      - entity: sensor.garage_tank_cm
        name: Water Level (Cm)
      - entity: sensor.garage_tank_percent
        name: Fill Percentage
  - type: entities
    entities:
      - entity: sensor.garage_tank_last_update
        name: " Last Reading"

screen grabs from the values on developer tools.
PS: I did update the input percentage value down to 24.2% which would force a image update, and then saw it re-updated back to the 26.2% as my refresh is 8seconds atm.

tom_l · January 12, 2025, 10:04am

Did some searching. A file path is not supported. Has to be a URL. So everywhere you have

{{ "/local/TankLevels... }}

you would need

{{ "http://<ha_ip_address_here>l/config/www/TankLevels...}}

Also you dont need a template for all your outputs, they are just strings, so:

template:
  - image: 
      - name: Garage Tank Level
        url: >
          {% set input_value = states('sensor.garage_tank_percent') | float %}
          {% if 0 < input_value < 2.5 %}
            http://<ip_address_here>/config/www/TankLevels0000.jpg
          {% elif 2.5 <= input_value < 5 %}
            http://<ip_address_here>/config/www/TankLevels0025.jpg
          {% elif 5 <= input_value < 7.5 %}
		    http://<ip_address_here>/config/www/etc...

georgelza · January 12, 2025, 10:25am

tried… direct at browser, not getting image.

http://172.16.20.19/config/www/TankLevels0000.jpg

wonder if something else is the root causing.

images are in …/config/www/*

user and group have read.

I did previously show the image on dashboard via image: /local/TankLevels0000.jpg

G

georgelza · January 12, 2025, 10:30am

I see you specified that url without {{" and "}}

?

G

tom_l · January 12, 2025, 10:40am

Yes. The brackets are only required if you need to resolve something (like states()) you are just outputting a string. So no brackets required.

georgelza · January 12, 2025, 11:00am

thanks for confirming…

I would expect to be able to get to the image if I go http:///config/www/<name.jpg>

G

tom_l · January 12, 2025, 11:04am

Actually no. You woould have to use: http://<ipaddress>:<port>/local/<name.jpg>