Skip to content

Ultra Card doesn't re-renders when helper state changes #61

@Tomcose96

Description

@Tomcose96
Screen.Recording.2026-03-10.at.12.15.43.mov

Hi,
Not sure if this has been already reported but I designed a room card, the icon, icon_color and text of the modules should change based on icon, icon_color and card_content template helpers I created, but it doesn't unless I refresh the browser and I don't understand why.
The expected behaviour should be the room icon turning blue, the power-plug icon turning blue and the number or sockets that are on turning from 3 to 4

I have attached below the yaml code of my room card, can someone explain what I am doing wrong? Also I would like to apologise in advance if I am not following any guideline for opening the issue, but it's the first time I open one.
Thanks in advance

type: custom:ultra-card
card_background: var(--card-background-color, var(--ha-card-background, white))
card_border_radius: 12
card_border_color: var(--divider-color)
card_border_width: 1
card_padding: 10
layout:
rows:
- id: row-1767635625167-7am9q4tnn
columns:
- id: col-1767635625167-0-7am9q4tnn
modules:
- id: bar-1767635625167-2-7am9q4tnn
type: bar
entity: sensor.sensore_corridoio_su_temperature
percentage_type: entity
percentage_entity: ""
percentage_attribute_entity: ""
percentage_attribute_name: ""
percentage_current_entity: ""
percentage_total_entity: ""
percentage_template: ""
time_progress_start_entity: ""
time_progress_end_entity: ""
time_progress_direction: forward
time_progress_update_interval: 1000
range_start_entity: ""
range_start_attribute: ""
range_end_entity: ""
range_end_attribute: ""
range_current_entity: ""
range_current_attribute: ""
range_current_color: var(--accent-color)
percentage_min: 10
percentage_max: 30
percentage_min_template_mode: false
percentage_min_template: ""
percentage_max_template_mode: false
percentage_max_template: ""
height: 8
bar_direction: left-to-right
bar_size: medium
bar_radius: round
bar_style: flat
bar_width: 100
bar_alignment: center
border_radius: 0
glass_blur_amount: 8
label_alignment: space-between
show_percentage: false
show_value: true
percentage_text_size: 14
percentage_text_alignment: center
percentage_text_bold: false
percentage_text_italic: false
percentage_text_strikethrough: false
value_position: inside
left_title: ""
left_entity: ""
left_condition_type: none
left_condition_entity: ""
left_condition_state: ""
left_template_mode: false
left_template: ""
left_title_size: 14
left_value_size: 14
left_title_color: ""
left_value_color: ""
left_enabled: false
left_tap_action:
action: default
left_hold_action:
action: nothing
left_double_tap_action:
action: nothing
right_title: ""
right_entity: ""
right_enabled: false
right_condition_type: none
right_condition_entity: ""
right_condition_state: ""
right_template_mode: false
right_template: ""
right_title_size: 14
right_value_size: 14
right_title_color: ""
right_value_color: ""
right_tap_action:
action: default
right_hold_action:
action: nothing
right_double_tap_action:
action: nothing
bar_color: rgba(255, 51, 51, 0.77)
bar_background_color: rgba(153, 153, 153, 0.09)
bar_border_color: transparent
percentage_text_color: ""
dot_color: ""
minimal_icon_enabled: false
minimal_icon: ""
minimal_icon_mode: icon-in-dot
minimal_icon_size: 24
minimal_icon_size_auto: true
minimal_icon_color: ""
minimal_icon_use_dot_color: true
use_gradient: true
gradient_display_mode: cropped
gradient_stops:
- id: "1"
position: 100
color: "#e81a42"
- id: "3"
position: 0
color: "#108945"
- id: stop-6
position: 50
color: "#f6ab1a"
limit_entity: ""
limit_color: ""
show_scale: false
scale_divisions: 5
scale_show_labels: true
scale_label_size: 10
scale_label_color: ""
scale_position: below
animation: true
template_mode: false
template: ""
unified_template_mode: false
unified_template: ""
bar_animation_enabled: false
bar_animation_entity: ""
bar_animation_trigger_type: state
bar_animation_attribute: ""
bar_animation_value: ""
bar_animation_type: none
bar_animation_override_entity: ""
bar_animation_override_trigger_type: state
bar_animation_override_attribute: ""
bar_animation_override_value: ""
bar_animation_override_type: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
display_mode: always
display_conditions: []
smart_scaling: true
background_color: transparent
margin_top: "0"
margin:
top: "0"
bottom: "-0.1em"
left: "0"
right: "0"
margin_right: "0"
margin_bottom: "-0.1em"
margin_left: "0"
padding_top: "0"
padding:
top: "0"
bottom: "0"
left: "0"
right: "0"
padding_right: "0"
padding_bottom: "0"
padding_left: "0"
border_color: transparent
border:
radius: 0
style: none
width: 0px
color: transparent
border_width: 0px
module_name: Ingresso Temperature Bar
- id: horizontal-1767635625167-1-7am9q4tnn
type: horizontal
alignment: space-around
vertical_alignment: center
gap: 0.7
wrap: false
modules:
- id: info-1760740100903-s5fxx8awb
type: info
info_entities:
- name: Sensore Ingresso Temperature
icon: mdi:thermometer
icon_color: var(--primary-color)
show_name: false
icon_position: left
state_color: var(--primary-text-color)
unified_template_mode: true
unified_template: |-
{
"icon": "{{states('sensor.ultra_icon_sensore_ingresso_temperature')}}",
"icon_color": "{{states('sensor.ultra_icon_color_sensore_ingresso_temperature')}}",
"state_text": "{{states('sensor.ultra_icon_content_sensore_ingresso_temperature')}}"
}
show_icon: true
show_units: false
show_state: true
name_value_gap: 1
name_value_layout: vertical
icon_gap: 1
content_distribution: space-between
overall_alignment: center
name_alignment: start
icon_alignment: center
state_alignment: start
icon_size: 26
text_size: 14
entity: sensor.sensore_ingresso_temperature
tap_action:
action: more-info
entity: sensor.sensore_ingresso_temperature
module_name: Temperature Info
icon_size: 24
design:
margin_top: "2"
margin_bottom: "2"
margin_left: "2"
margin_right: "2"
padding_top: "7"
padding_bottom: "7"
padding_left: "7"
padding_right: "7"
margin_top: "2"
margin_bottom: "2"
margin_left: "2"
margin_right: "2"
padding_top: "7"
padding_bottom: "7"
padding_left: "7"
padding_right: "7"
hold_action:
action: more-info
entity: sensor.sensore_ingresso_temperature
double_tap_action:
action: more-info
entity: sensor.sensore_ingresso_temperature
- id: info-1770804036338-vr11vpwmp
type: info
info_entities:
- entity: group.ingresso_monitoring_group
name: Ingresso Monitoring Group
icon: ""
show_name: false
show_state: false
unified_template_mode: true
unified_template: |-
{
"icon": "{{states('sensor.ultra_icon_room_ingresso')}}",
"icon_color": "{{states('sensor.ultra_icon_color_room_ingresso')}}",
"state_text": "{{states('sensor.ultra_icon_content_room_ingresso')}}"
}
icon_size: 34
icon_gap: 1
content_distribution: space-between
icon_color: rgb(128,128,128)
module_name: Ingresso Room Icon
tap_action:
action: navigate
navigation_path: /dashboard-home/ingresso
hold_action:
action: more-info
entity: group.ingresso_monitoring_group
double_tap_action:
action: none
- id: info-1760740144105-lqy1627we
type: info
info_entities:
- entity: sensor.sensore_ingresso_humidity
name: Sensore Ingresso Humidity
icon: mdi:battery-50
icon_color: "#6666FF"
show_name: false
id: info-entity-1760740144105-1x6mou5l9
icon_position: right
unified_template_mode: true
unified_template: |-
{
"icon": "{{states('sensor.ultra_icon_sensore_ingresso_humidity')}}",
"icon_color": "{{states('sensor.ultra_icon_color_sensore_ingresso_humidity')}}",
"state_text": "{{states('sensor.ultra_icon_content_sensore_ingresso_humidity')}}"
}
icon_gap: 1
name_value_gap: 1
content_distribution: space-between
name_alignment: end
state_alignment: end
show_units: false
tap_action:
action: more-info
entity: sensor.sensore_ingresso_humidity
module_name: Humidity Info
design:
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
margin_bottom: "2"
margin_right: "2"
padding_bottom: "7"
padding_right: "7"
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
margin_bottom: "2"
margin_right: "2"
padding_bottom: "7"
padding_right: "7"
hold_action:
action: more-info
entity: sensor.sensore_ingresso_humidity
double_tap_action:
action: more-info
entity: sensor.sensore_ingresso_humidity
tap_action:
action: nothing
hold_action:
action: nothing
double_tap_action:
action: nothing
display_mode: always
display_conditions: []
design:
base: {}
height: 50px
- id: bar-1767635625167-0-7am9q4tnn
type: bar
entity: sensor.sensore_corridoio_su_humidity
percentage_type: entity
percentage_entity: ""
percentage_attribute_entity: ""
percentage_attribute_name: ""
percentage_current_entity: ""
percentage_total_entity: ""
percentage_template: ""
time_progress_start_entity: ""
time_progress_end_entity: ""
time_progress_direction: forward
time_progress_update_interval: 1000
range_start_entity: ""
range_start_attribute: ""
range_end_entity: ""
range_end_attribute: ""
range_current_entity: ""
range_current_attribute: ""
range_current_color: var(--accent-color)
percentage_min_template_mode: false
percentage_min_template: ""
percentage_max_template_mode: false
percentage_max_template: ""
height: 8
bar_direction: left-to-right
bar_size: medium
bar_radius: round
bar_style: flat
bar_width: 100
bar_alignment: center
border_radius: 0
glass_blur_amount: 8
label_alignment: space-between
show_percentage: false
show_value: true
percentage_text_size: 14
percentage_text_alignment: center
percentage_text_bold: false
percentage_text_italic: false
percentage_text_strikethrough: false
value_position: inside
left_title: ""
left_entity: ""
left_condition_type: none
left_condition_entity: ""
left_condition_state: ""
left_template_mode: false
left_template: ""
left_title_size: 14
left_value_size: 14
left_title_color: ""
left_value_color: ""
left_enabled: false
left_tap_action:
action: default
left_hold_action:
action: nothing
left_double_tap_action:
action: nothing
right_title: ""
right_entity: ""
right_enabled: false
right_condition_type: none
right_condition_entity: ""
right_condition_state: ""
right_template_mode: false
right_template: ""
right_title_size: 14
right_value_size: 14
right_title_color: ""
right_value_color: ""
right_tap_action:
action: default
right_hold_action:
action: nothing
right_double_tap_action:
action: nothing
bar_color: rgba(0, 0, 255, 0.70)
bar_background_color: rgba(153, 153, 153, 0.09)
bar_border_color: transparent
percentage_text_color: ""
dot_color: ""
minimal_icon_enabled: false
minimal_icon: ""
minimal_icon_mode: icon-in-dot
minimal_icon_size: 24
minimal_icon_size_auto: true
minimal_icon_color: ""
minimal_icon_use_dot_color: true
use_gradient: true
gradient_display_mode: cropped
gradient_stops:
- id: "1"
position: 0
color: "#00ffff"
- id: "3"
position: 100
color: "#0000ff"
- id: stop-5
position: 40
color: "#0099ff"
- id: stop-6
position: 60
color: "#0066ff"
limit_entity: ""
limit_color: ""
show_scale: false
scale_divisions: 5
scale_show_labels: true
scale_label_size: 10
scale_label_color: ""
scale_position: below
animation: true
template_mode: false
template: ""
unified_template_mode: false
unified_template: ""
bar_animation_enabled: false
bar_animation_entity: ""
bar_animation_trigger_type: state
bar_animation_attribute: ""
bar_animation_value: ""
bar_animation_type: none
bar_animation_override_entity: ""
bar_animation_override_trigger_type: state
bar_animation_override_attribute: ""
bar_animation_override_value: ""
bar_animation_override_type: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
display_mode: always
display_conditions: []
smart_scaling: true
background_color: transparent
margin_top: "-0.1em"
margin:
top: "-0.1em"
bottom: "0"
left: "0"
right: "0"
margin_right: "0"
margin_bottom: "0"
margin_left: "0"
padding_top: "0"
padding:
top: "0"
bottom: "0"
left: "0"
right: "0"
padding_right: "0"
padding_bottom: "0"
padding_left: "0"
border_color: transparent
border:
radius: 0
style: none
width: 0px
color: transparent
border_width: 0px
module_name: Ingresso Humidity Bar
- id: horizontal-1770245956925-kx8263bzc
type: horizontal
alignment: center
vertical_alignment: top
gap: 0.3
wrap: false
modules:
- id: info-1770384598317-01efwgwka
type: info
info_entities:
- icon: ""
state_color: var(--primary-text-color)
show_name: false
show_units: false
show_state: true
name_value_layout: vertical
name_value_gap: 2
icon_position: top
icon_size: 23
text_size: 13
icon_gap: 5
icon_color: "#ffffff"
show_icon: true
unified_template_mode: true
unified_template: |-
{
"icon": "{{states('sensor.ultra_icon_climate_ingresso')}}",
"icon_color": "{{states('sensor.ultra_icon_color_climate_ingresso')}}",
"state_text": "{{states('sensor.ultra_icon_content_climate_ingresso')}}"
}
id: info-entity-1770384598317-fqg65jc9p
name: Ingresso
entity: climate.ingresso
template_mode: false
module_name: Ingresso Climate
tap_action:
action: more-info
entity: climate.ingresso
design:
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
hold_action:
action: none
double_tap_action:
action: none
- id: info-1770384573573-95fzxjkb2
type: info
info_entities:
- entity: sensor.switches_on_studio
icon: ""
state_color: var(--primary-text-color)
show_name: false
show_units: false
show_state: true
name_value_layout: vertical
name_value_gap: 2
icon_position: top
icon_size: 23
text_size: 13
icon_gap: 5
icon_color: "#ffffff"
show_icon: true
unified_template_mode: true
unified_template: |-
{
"icon": "{{states('sensor.ultra_icon_finestre_ingresso')}}",
"icon_color": "{{states('sensor.ultra_icon_color_finestre_ingresso')}}",
"state_text": "{{states('sensor.ultra_icon_content_finestre_ingresso')}}"
}
id: info-entity-1770384573573-6y0qegovl
name: Switches On Studio
module_name: Ingresso Windows
tap_action:
action: more-info
entity: sensor.switches_on_studio
design:
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
hold_action:
action: none
double_tap_action:
action: none
- id: info-1770391222046-1bfbchbdh
type: info
info_entities:
- icon: mdi:video
state_color: var(--primary-text-color)
show_name: false
show_units: false
show_state: true
name_value_layout: vertical
name_value_gap: 2
icon_position: top
icon_size: 23
text_size: 13
icon_gap: 5
icon_color: "#ffffff"
show_icon: true
unified_template_mode: true
unified_template: |-
{
"icon": "{{states('sensor.ultra_icon_telecamera_ingresso')}}",
"icon_color": "{{states('sensor.ultra_icon_color_telecamera_ingresso')}}",
"state_text": "{{states('sensor.ultra_icon_content_telecamera_ingresso')}}"
}
id: info-entity-1770391222046-m3xve8v02
name: Telecamera Ingresso Online
entity: binary_sensor.telecamera_ingresso_online
module_name: Ingresso Telecamera
tap_action:
action: navigate
navigation_path: /dashboard-home/security
design:
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
hold_action:
action: more-info
entity: binary_sensor.telecamera_ingresso_online
double_tap_action:
action: none
- id: info-1770245901537-n85w34ehv
type: info
info_entities:
- entity: sensor.lights_on_ingresso
icon: mdi:lightbulb-group
state_color: var(--primary-text-color)
show_name: false
show_units: false
show_state: true
name_value_layout: vertical
name_value_gap: 2
icon_position: top
icon_size: 23
text_size: 13
icon_gap: 5
icon_color: "#ffffff"
show_icon: true
unified_template_mode: true
unified_template: |-
{
"icon": "{{states('sensor.ultra_icon_lights_on_ingresso')}}",
"icon_color": "{{states('sensor.ultra_icon_color_lights_on_ingresso')}}",
"state_text": "{{states('sensor.lights_on_ingresso')}}"
}
name: Lights On Ingresso
module_name: Ingresso Lights On
tap_action:
action: more-info
entity: sensor.lights_on_ingresso
design:
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
hold_action:
action: none
double_tap_action:
action: none
- id: info-1770374271671-lby1er6rh
type: info
info_entities:
- entity: sensor.switches_on_ingresso
icon: mdi:power-plug
state_color: var(--primary-text-color)
show_name: false
show_units: false
show_state: true
name_value_layout: vertical
name_value_gap: 2
icon_position: top
icon_size: 23
text_size: 13
icon_gap: 5
icon_color: "#ffffff"
show_icon: true
unified_template_mode: true
unified_template: |-
{
"icon": "{{states('sensor.ultra_icon_switches_on_ingresso')}}",
"icon_color": "{{states('sensor.ultra_icon_color_switches_on_ingresso')}}",
"state_text": "{{states('sensor.switches_on_ingresso')}}"
}
id: info-entity-1770374271671-3aeto7mh1
name: Switches On Ingresso
module_name: Ingresso Switches On
tap_action:
action: more-info
entity: sensor.switches_on_ingresso
design:
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
margin_top: "2"
margin_left: "2"
padding_top: "7"
padding_left: "7"
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: nothing
hold_action:
action: nothing
double_tap_action:
action: nothing
display_mode: always
display_conditions: []
design:
base: {}
margin_top: "2"
margin:
top: "2"
left: "2"
padding_top: "7"
padding:
top: "7"
left: "7"
margin_left: "2"
padding_left: "7"
vertical_alignment: stretch
horizontal_alignment: stretch
design:
border_radius: 8px
overflow: hidden
margin_top: "0"
margin_right: "0"
margin_bottom: "0"
margin_left: "0"
padding_top: "0"
padding_right: "0"
padding_bottom: "0"
padding_left: "0"
base:
border_radius: 8px
overflow: hidden
margin_top: "0"
margin_right: "0"
margin_bottom: "0"
margin_left: "0"
padding_top: "0"
padding_right: "0"
padding_bottom: "0"
padding_left: "0"
column_layout: 1-col
design:
margin_top: "0"
margin_bottom: "0"
margin_right: "0"
margin_left: "0"
padding_top: "0"
padding_right: "0"
padding_bottom: "0"
padding_left: "0"
base:
margin_top: "0"
margin_bottom: "0"
margin_right: "0"
margin_left: "0"
padding_top: "0"
padding_right: "0"
padding_bottom: "0"
padding_left: "0"
card_name: Ingresso Climate Info
card_shadow_enabled: false
grid_options:
columns: 12
rows: auto

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions