Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon not show on mobile app if horseshow are in conditional card #76

Open
andbad opened this issue Sep 29, 2023 · 1 comment
Open

Icon not show on mobile app if horseshow are in conditional card #76

andbad opened this issue Sep 29, 2023 · 1 comment

Comments

@andbad
Copy link

andbad commented Sep 29, 2023

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):

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
WhatsApp Image 2023-09-29 at 17 11 02

@eddysteurs
Copy link

I have the same problem when adding a restrictrions card
When I remove the 5 first lines the icons show on my iphone app

type: custom:restriction-card
restrictions:
pin:
code: 1234
card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.droogkast_socket_1_power
attribute: power
name: Droogkast ori
decimals: 1
unit: W
area: Berging
tap_action:
action: more-info
- entity: switch.droogkast_socket_1
attribute: null
icon: mdi:tumble-dryer
decimals: 0
unit: ''
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.droogkast_socket_1
- entity: climate.thermostaat
attribute: temperature
icon: null
decimals: 0
unit: null
tap_action:
action: more-info
show:
horseshoe_style: lineargradiant
animations:
entity.1:
- state: 'on'
circles:
- animation_id: 11
styles:
- fill: lightgreen;
- opacity: 0.5;
- transform-origin: center;
- animation: jello 1s ease-in-out both;
icons:
- animation_id: 10
styles:
- fill: orange;
- state: 'off'
circles:
- animation_id: 11
styles:
- fill: lightblue;
- transform-origin: 50% 60%;
icons:
- animation_id: 20
styles:
- fill: lightblue;
layout:
states:
- id: 0
entity_index: 0
animation_id: 0
xpos: 50
ypos: 28
uom_font_size: 1.5
styles:
- font-size: 2.5em;
- opacity: 0.9;
names:
- id: 0
animation_id: 0
entity_index: 0
xpos: 50
ypos: 90
styles:
- font-size: 1.2em;
- opacity: 0.7;
icons:
- id: 0
animation_id: 10
xpos: 50
ypos: 55
entity_index: 1
icon_size: 3.5
styles:
- color: lightgreen;
- id: 0,
animation_id: 20
xpos: 70
ypos: 55
entity_index: 2
icon_size: 0.5
styles:
- color: lightblue;
circles:
- animation_id: 3
xpos: 50
ypos: 50
radius: 45
entity_index: 1
styles:
- fill: var(--primary-background-color);
- animation_id: 11
xpos: 50
ypos: 50
radius: 40
entity_index: 1
styles:
- fill: orange;
- animation_id: 2
xpos: 50
ypos: 50
radius: 25
entity_index: 1
styles:
- fill: var(--primary-background-color);
horseshoe_scale:
min: 0
max: 4000
color_stops:
'100': lightgreen
'200': green
'500': yellow
'750': orange
'2000': red

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants