I have a data feed that feeds the tanks filler percentage into a sensor value,
then use the below template to create a state.council_1_level_image
I then try and use the follow code on dashboard to try and show the image as per the above state…
needless to say not showing the image… if i replace the variable with actual path (/local/TankLevels0650) then image is shown.
Happy to share my tank images with anyone, they are at 2.5% increments.
Dashboard yaml
theme: Backend-selected
title: Water
path: water
badges: []
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.council_1_percent
decimals: 0
unit: "%"
name: Council
- entity: sensor.council_1_litre
decimals: 1
unit: L
- entity: sensor.council_1_cm
decimals: 2
unit: cm
- entity: sensor.council_1_last_update
show:
horseshoe_style: autominmax
layout:
hlines:
- id: 0
xpos: 50
ypos: 40
length: 70
styles:
- opacity: 0.2;
- id: 0
xpos: 50
ypos: 60
length: 70
styles:
- opacity: 0.2;
vlines:
- id: 0
xpos: 50
ypos: 50
length: 18
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 33
styles:
- font-size: 3em;
- opacity: 0.9;
- id: 1
entity_index: 1
xpos: 44
ypos: 53
styles:
- font-size: 1.5em;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 55
ypos: 53
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 3
entity_index: 3
xpos: 52
ypos: 75
styles:
- font-size: 0.8em;
- text-anchor: center;
icons:
- id: 0
entity_index: 1
xpos: 30
ypos: 52
align: start
size: 1
names:
- id: 1
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-size: 1.2em;
- id: 2
entity_index: 0
xpos: 85
ypos: 12
styles:
- font-size: 0.5em;
- text-anchor: start;
horseshoe_scale:
min: 0
max: 100
width: 6
color_stops:
"10": "#FFF6E3"
"20": "#FFE9B9"
"30": "#FFDA8A"
"40": "#FFCB5B"
"50": "#FFBF37"
"60": "#ffb414"
"70": "#FFAD12"
"80": "#FFA40E"
"90": "#FF9C0B"
"100": "#FF8C06"
card_mod:
style: |
ha-card {
--ha-card-background: var(--card-background-color);
color: var(--primary-color);
}
- type: vertical-stack
cards:
- type: glance
entities:
- entity: sensor.council_1_percent
- entity: sensor.council_1_litre
- entity: sensor.council_1_cm
- type: custom:config-template-card
entities:
- sensor.council_1_level_image
card:
type: custom:hui-image-element
entity: sensor.council_1_level_image
image: "{{ states('sensor.council_1_level_image') }}"
style:
top: 45%
left: 35%
width: 5%
height: 5%
transform: translate(0%,2%)
title: Council Tank
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.pot_1_percent
decimals: 0
unit: "%"
name: Pot 1
- entity: sensor.pot_1_litre
decimals: 1
unit: L
- entity: sensor.pot_1_cm
decimals: 2
unit: cm
- entity: sensor.pot_1_last_update
show:
horseshoe_style: autominmax
layout:
hlines:
- id: 0
xpos: 50
ypos: 40
length: 70
styles:
- opacity: 0.2;
- id: 0
xpos: 50
ypos: 60
length: 70
styles:
- opacity: 0.2;
vlines:
- id: 0
xpos: 50
ypos: 50
length: 18
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 33
styles:
- font-size: 3em;
- opacity: 0.9;
- id: 1
entity_index: 1
xpos: 44
ypos: 53
styles:
- font-size: 1.5em;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 55
ypos: 53
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 3
entity_index: 3
xpos: 52
ypos: 75
styles:
- font-size: 0.8em;
- text-anchor: center;
icons:
- id: 0
entity_index: 1
xpos: 30
ypos: 52
align: start
size: 1
names:
- id: 1
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-size: 1.2em;
- id: 2
entity_index: 0
xpos: 85
ypos: 12
styles:
- font-size: 0.5em;
- text-anchor: start;
horseshoe_scale:
min: 0
max: 100
width: 6
color_stops:
"10": "#FFF6E3"
"20": "#FFE9B9"
"30": "#FFDA8A"
"40": "#FFCB5B"
"50": "#FFBF37"
"60": "#ffb414"
"70": "#FFAD12"
"80": "#FFA40E"
"90": "#FF9C0B"
"100": "#FF8C06"
card_mod:
style: |
ha-card {
--ha-card-background: var(--card-background-color);
color: var(--primary-color);
}
- type: vertical-stack
cards:
- type: glance
entities:
- entity: sensor.pot_1_percent
- entity: sensor.pot_1_litre
- entity: sensor.pot_1_cm
- type: custom:config-template-card
entities:
- sensor.pot_1_level_image
card:
type: custom:hui-image-element
entity: sensor.pot_1_level_image
image: "{{ states('sensor.pot_1_level_image') }}"
style:
top: 45%
left: 35%
width: 5%
height: 5%
transform: translate(0%,2%)
title: Pot 1 Level
Template code
template:
- sensor:
- name: "Council 1 Level Image"
state: >
{% set input_value = states('sensor.council_1_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 %}
