Currently I have the following configuration: that seems to function properly:
type: custom:config-template-card
entities:
- sensor.wirelesstag_east_intake_temperature
- sensor.wirelesstag_main_office_temperature
- sensor.wirelesstag_water_heater_room_temperature
- sensor.wirelesstag_asic_room_temperature
- sensor.wirelesstag_south_hot_temp_temperature
- sensor.wirelesstag_main_building_front_door_sensor_temperature
- sensor.wirelesstag_network_building_door_sensor_temperature
variables:
setBadgeColor: |
temp => {
if (temp <= 35) {
return 'blue';
}
else if (temp <= 90) {
return 'green';
}
return 'red';
}
card:
type: picture-elements
image: /local/images/river-road_floorplan.svg
elements:
- element: null
type: state-badge
entity: sensor.wirelesstag_east_intake_temperature
style:
'--label-badge-red': >-
${
setBadgeColor(states['sensor.wirelesstag_east_intake_temperature'].state)
}
top: 41.5%
left: 96.5%
- element: null
type: state-badge
entity: sensor.wirelesstag_main_office_temperature
style:
'--label-badge-red': >-
${
setBadgeColor(states['sensor.wirelesstag_main_office_temperature'].state)
}
top: 20%
left: 87%
- element: null
type: state-badge
entity: sensor.wirelesstag_water_heater_room_temperature
style:
'--label-badge-red': >-
${
setBadgeColor(states['sensor.wirelesstag_water_heater_room_temperature'].state)
}
top: 14%
left: 9.5%
- element: null
type: state-badge
entity: sensor.wirelesstag_asic_room_temperature
style:
'--label-badge-red': >-
${
setBadgeColor(states['sensor.wirelesstag_asic_room_temperature'].state)
}
top: 41.5%
left: 20.5%
- element: null
type: state-badge
entity: sensor.wirelesstag_south_hot_temp_temperature
style:
'--label-badge-red': >-
${
setBadgeColor(states['sensor.wirelesstag_south_hot_temp_temperature'].state)
}
top: 33%
left: 37.5%
- element: null
type: state-badge
entity: sensor.wirelesstag_main_building_front_door_sensor_temperature
style:
'--label-badge-red': >-
${
setBadgeColor(states['sensor.wirelesstag_main_building_front_door_sensor_temperature'].state)
}
top: 11%
left: 41%
- element: null
type: state-badge
entity: sensor.wirelesstag_network_building_door_sensor_temperature
style:
'--label-badge-red': >-
${
setBadgeColor(states['sensor.wirelesstag_network_building_door_sensor_temperature'].state)
}
top: 91%
left: 86.3%
style: |
:host {
--primary-text-color: transparent;
--label-badge-text-color: black;
--label-badge-background-color: white;
}
It seems that the config-template card recommends only applying the config-template card to individual elements inside the picture=element card like so:
type: picture-elements
image: http://hs.sbcounty.gov/CN/Photo%20Gallery/_t/Sample%20Picture%20-%20Koala_jpg.jpg?Mobile=0
elements:
- type: 'custom:config-template-card'
variables:
- states['light.bed_light'].state
entities:
- light.bed_light
- sensor.light_icon_color
element:
type: icon
icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
style:
'--paper-item-icon-color': '${ states[''sensor.light_icon_color''].state }'
style:
top: 47%
left: 75%
It seemed to me that would have created much more code than was necessary and I wanted all the picture elements to be able to use the same function that I defined once in the config -template-card variables.
Can anyone enlighten me as to why the way I am doing it is not recommended? Or what problems I might run into that I may be unaware of doing it like this.
Thank you for any help in advance!