AmoebeLabs / AmoebeLabs/flex-horseshoe-card
Icon not show on mobile app if horseshow are in conditional card
- Dominant language
- JavaScript
- Stars
- 397
- Forks
- 66
- Avg merge
- 7m
- Merged PRs (30d)
- 81
Description
**Home Assistant**: 2023.9.3
**Frontend**: 20230911.0
**Home Assistant Mobile App**: 2023.4
I created a condition card with the horseshow card nested.
In the mobile app the icon is not displayed, however in the desktop browser it works correctly.
Ex.
The card is not working properly (the icon does not appear in the mobile app):
```type: conditional
conditions:
- entity: binary_sensor.pdc_visibile
state: 'on'
card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.potenza_pdc
decimals: 0
name: ' '
area: Esterno
unit: W
tap_action:
action: more-info
- entity: switch.pdc_interruttore_raw
name: PdC
icon: hass:water-boiler
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.pdc_interruttore_raw
- entity: group.ts
name: info
icon: hass:information-outline
tap_action:
action: more-info
animations:
entity.1:
- state: 'on'
circles:
- animation_id: 11
styles:
- fill: var(--light-primary-color);
- animation: jello 1s ease-in-out both;
- transform-origin: center;
icons:
- animation_id: 0
styles:
- color: var(--secondary-background-color);
- state: 'off'
circles:
- animation_id: 11
reuse: true
styles:
- transform-origin: center;
- animation: zoomOut 1s ease-out both;
icons:
- animation_id: 0
styles:
- color: var(--light-primary-color);
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 28
uom_font_size: 1.5
styles:
- font-size: 2.5em;
- opacity: 1.0;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 100
styles:
- font-size: 1.2em;
- opacity: 0.7;
- id: 1
entity_index: 1
xpos: 50
ypos: 95
styles:
- font-size: 1.6em;
- opacity: 0.8;
icons:
- id: 0
animation_id: 0
xpos: 50
ypos: 55
entity_index: 1
icon_size: 3.5
- id: 1
animation_id: 1
xpos: 92
ypos: 12
entity_index: 2
icon_size: 3
styles:
- color: var(--secondary-background-color);
circles:
- id: 0
animation_id: 0
xpos: 50
ypos: 50
radius: 35
styles:
- fill: var(--secondary-background-color);
- id: 1
animation_id: 11
xpos: 50
ypos: 50
radius: 30
entity_index: 1
horseshoe_scale:
min: 0
max: 3000
color: var(--secondary-background-color)
color_stops:
'0': var(--primary-background-color)
'3000': var(--light-primary-color)
horseshoe_state:
width: 12
```
The card works correctly (icon also visible in the mobile app):
```
type: custom:flex-horseshoe-card
entities:
- entity: sensor.potenza_totale_luci
decimals: 0
name: ' '
area: Esterno
unit: W
tap_action:
action: more-info
- entity: light.tutte_le_luci
name: Luci
icon: hass:lightbulb
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.tutte_le_luci
- entity: group.ts
name: info
icon: hass:information-outline
tap_action:
action: more-info
animations:
entity.1:
- state: 'on'
circles:
- animation_id: 11
styles:
- fill: var(--light-primary-color);
- animation: jello 1s ease-in-out both;
- transform-origin: center;
icons:
- animation_id: 0
styles:
- color: var(--secondary-background-color);
- state: 'off'
circles:
- animation_id: 11
reuse: true
styles:
- transform-origin: center;
- animation: zoomOut 1s ease-out both;
icons:
- animation_id: 0
styles:
- color: var(--light-primary-color);
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 28
uom_font_size: 1.5
styles:
- font-size: 2.5em;
- opacity: 1.0;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 100
styles:
- font-size: 1.2em;
- opacity: 0.7;
- id: 1
entity_index: 1
xpos: 50
ypos: 95
styles:
- font-size: 1.6em;
- opacity: 0.8;
icons:
- id: 0
animation_id: 0
xpos: 50
ypos: 55
entity_index: 1
icon_size: 3.5
- id: 1
animation_id: 1
xpos: 92
ypos: 12
entity_index: 2
icon_size: 3
styles:
- color: var(--secondary-background-color);
circles:
- id: 0
animation_id: 0
xpos: 50
ypos: 50
radius: 35
styles:
- fill: var(--secondary-background-color);
- id: 1
animation_id: 11
xpos: 50
ypos: 50
radius: 30
entity_index: 1
horseshoe_scale:
min: 0
max: 1500
color: var(--secondary-background-color)
color_stops:
'0': var(--primary-background-color)
'1500': var(--light-primary-color)
horseshoe_state:
width: 12
```
SX: icon not visible - DX: icon visibile

Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.