Hi
I have used and adapted the “Flexible Horseshoe Card for Lovelace” from Hacs. On my pc this works perfectly. When i use it on my iPhone i have a problem.
The intention is if you click eg the icon “silent”, that the color changes from orange to red or vice versa.
On my iPhone that only happens when I refresh my image by pulling the image down.
What could be the problem?
is the card too extensive or are there other causes?
My card:
type: 'custom:flex-horseshoe-card'
entities:
- entity: input_number.maestro_ambient_temperature
attribute: temperature
decimals: 1
name: MCZ
unit: °C
- entity: input_text.maestro_stove_state
attribute: state
name: Stove State
- entity: input_number.maestro_power_level
attribute: power
name: Power Level Up
icon: 'mdi:fan'
- entity: input_number.maestro_temperature_setpoint
attribute: temperature
decimals: 1
unit: °C
name: Temperature Setpoint Up
icon: 'mdi:thermometer'
- entity: input_boolean.maestro_eco_mode
name: Eco
icon: 'mdi:nature'
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.maestro_eco_mode
- entity: input_boolean.maestro_silent_mode
name: Silent
icon: 'mdi:weather-windy'
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.maestro_silent_mode
- entity: input_boolean.maestro_chronostat
name: Chrono
icon: 'mdi:timer'
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.maestro_chronostat
- entity: input_boolean.maestro_control_mode
name: Hand/Auto
icon: 'mdi:fire'
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.maestro_control_mode
- entity: input_boolean.maestro_power
name: Off/On
icon: 'mdi:power-settings'
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.maestro_power
- entity: input_boolean.maestro_control_mode
name: Hand/Auto
icon: 'mdi:hand'
- entity: input_number.maestro_power_level
icon: 'mdi:chevron-up'
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.maestro_power_level
- entity: input_number.maestro_temperature_setpoint
decimals: 1
icon: 'mdi:chevron-up'
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.maestro_temperature_setpoint
- entity: input_boolean.maestro_toggle_level
icon: 'mdi:chevron-down'
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.maestro_toggle_level
- entity: input_boolean.maestro_toggle_temperature
icon: 'mdi:chevron-down'
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.maestro_toggle_temperature
animations:
entity.4:
- state: 'on'
icons:
- animation_id: 0
styles:
- color: orange;
- opacity: 0.9;
- state: 'off'
icons:
- animation_id: 0
styles:
- fill: var(--primary-text-color);
entity.5:
- state: 'off'
icons:
- animation_id: 1
styles:
- color: red;
- opacity: 0.9;
- state: 'on'
icons:
- animation_id: 1
styles:
- color: orange;
- opacity: 0.9;
entity.6:
- state: 'on'
icons:
- animation_id: 2
styles:
- color: orange;
- opacity: 0.9;
- state: 'off'
icons:
- animation_id: 2
styles:
- fill: var(--primary-text-color);
entity.7:
- state: 'on'
icons:
- animation_id: 3
styles:
- color: orange;
- opacity: 0.9;
- state: 'off'
icons:
- animation_id: 3
styles:
- fill: var(--primary-text-color);
action: call-service
service: browser_mod.lovelace_reload
service_data:
deviceID: this
entity.8:
- state: 'on'
icons:
- animation_id: 4
styles:
- color: orange;
- opacity: 0.9;
- state: 'off'
icons:
- animation_id: 4
styles:
- fill: var(--primary-text-color);
entity.9:
- state: 'on'
icons:
- animation_id: 5
styles:
- fill: var(--primary-text-color);
- state: 'off'
icons:
- animation_id: 5
styles:
- color: orange;
- opacity: 0.9;
show:
horseshoe_style: lineargradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 39
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
vlines:
- id: 0
xpos: 48
ypos: 53
length: 10
styles:
- stroke: white;
- opacity: 0.5;
- stroke-width: 2;
- stroke-linecap: round;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 24
styles:
- font-size: 2em;
- id: 1
entity_index: 1
xpos: 50
ypos: 34
styles:
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 33
ypos: 56
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 3
entity_index: 3
xpos: 55
ypos: 56
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 2
xpos: 25
ypos: 56
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 1
entity_index: 3
xpos: 92
ypos: 56
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 2
animation_id: 0
entity_index: 4
xpos: 32
ypos: 78
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 3
animation_id: 1
entity_index: 5
xpos: 55
ypos: 78
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 4
animation_id: 2
entity_index: 6
xpos: 78
ypos: 78
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 5
animation_id: 3
entity_index: 7
xpos: 32
ypos: 93
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 6
animation_id: 4
entity_index: 8
xpos: 55
ypos: 93
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 7
animation_id: 5
entity_index: 9
xpos: 78
ypos: 93
align: end
size: 1.3
- id: 8
entity_index: 10
xpos: 42
ypos: 47
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 9
entity_index: 11
xpos: 71
ypos: 47
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 10
entity_index: 12
xpos: 42
ypos: 64
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
- id: 11
entity_index: 13
xpos: 71
ypos: 64
align: end
size: 1.3
styles:
- fill: var(--primary-text-color);
names:
- id: 0
entity_index: 0
xpos: 90
ypos: 8
- id: 1
entity_index: 4
xpos: 26
ypos: 69
styles:
- font-size: 0.5em;
- id: 2
entity_index: 5
xpos: 49
ypos: 69
styles:
- font-size: 0.5em;
- id: 3
entity_index: 6
xpos: 72
ypos: 69
styles:
- font-size: 0.5em;
horseshoe_scale:
min: 0
max: 30
color_stops:
'16': '#FFF6E3'
'17': '#FFE9B9'
'18': '#FFDA8A'
'19': '#FFCB5B'
'20': '#FFBF37'
'21': '#ffb414'
'22': '#FFAD12'
'23': '#FFA40E'
'24': '#FF9C0B'
'25': '#FF8C06'