Icône ne s'affiche pas au premier coup / swiss-army-knife-card

Entraide Home Assistant
1

Salut tout le monde !
Après pas mal de galères pour mettre en place SAK (SWISS ARMY KNIFE card), j’ai un soucis d’affichage des icônes. Elles n’apparaissent pas sur la carte au premier chargement. Il faut quitter la vue et y revenir pour les voir apparaître.
Pas de problème avec les images (.SVG p.e.)

Screenshot_2023-04-30-12-02-30-878_io.homeassistant.companion.android
Screenshot_2023-04-30-12-02-30-878_io.homeassistant.companion.android1080×728 61.9 KB

Screenshot_2023-04-30-12-02-21-070_io.homeassistant.companion.android
Screenshot_2023-04-30-12-02-21-070_io.homeassistant.companion.android1065×681 60.4 KB

C’est pareil avec une carte la plus simple possible …

IMG_20230430_134204
IMG_20230430_1342041080×1380 38.6 KB

Code de la carte 
type: custom:swiss-army-knife-card
entities:
  - entity: sun.sun
aspectratio: 1/1
layout:
  toolsets:
    - toolset: soleil
      position:
        cx: 50
        cy: 50
      tools:
        - type: icon
          position:
            cx: 50
            cy: 50
            icon_size: 20
          entity_index: 0

Si quelqu’un a une idée… :frowning:

Au delà de ça, je n’ai pas l’impression que SAK soit populaire par ici… Malgré le potentiel qui me paraît énorme. C’est dû à la difficulté de mise en place ? De maintenance ?.. Finalement peu d’intérêt ?

SAK v.1.0.0-rc.3

2

bonjour,

Je ne connaissais pas du tout cette carte, elle a l’air sympa.
peux tu partager le code de celle que tu montre afin de voir comment se compose ?
Merci par avance.

3

je viens d’essayer cette carte, mais j’ai dans tous les cas « i.setConfig is not a function »…

4

Bonjour,
bon courage pour la faire fonctionner. Swiss Army Knife Card (AmoebeLabs)

2 « J'aime »
5

effectivement, cela n’a pas l’air simple,…; je vais essayer de passer du temps dessus et de ne pas abandonner de suite :slight_smile:

6

La version 1.0.0-rc.4 corrige ce problème.

IMG_6702
IMG_67022034×663 167 KB

7

Effectivement cette carte n’est pas facile à installer, surtout à cause de la partie manuelle qu’il faut mettre ne place. Mais une fois fonctionnelle, elle permet de créer de belle cartes.

Voici quelque exemples que j’ai faits.

IMG_6703
IMG_67031687×584 332 KB

IMG_6704
IMG_67042060×697 460 KB

IMG_6705
IMG_67051030×1066 500 KB

IMG_6706
IMG_67062732×2048 533 KB

2 « J'aime »
8

La rc4 corrige le problème d’icones ou celui-ci: « i.setConfig is not a function »??

C’est une plaie à mettre en œuvre mais bon… j’aime bien bricoler :smiley:
Attention, il suffit qu’une entité déclarée dans la carte n’existe pas sur ton HA pour que toute la carte soit HS.
Voici le code de ma carte météo:

Code 
#######################
### CARD: SAK Meteo ###
#######################

type: custom:swiss-army-knife-card
entities:
  # index 00
  - entity: sun.sun
  # index 01
  - entity: weather.avignon
    attribute: wind_speed
    decimals: 0
    unit: km/h
    icon: mdi:weather-windy
  # index 02
  - entity: sensor.avignon_wind_gust
  # index 03
  - entity: weather.avignon
    attribute: pressure
    decimals: 0
    unit: hPa
    icon: mdi:gauge
  # index 04
  - entity: weather.avignon
    attribute: wind_bearing
    icon: mdi:windsock
  # index 05
  - entity: sensor.84_weather_alert
  # index 06
  - entity: sun.sun
  # index 07
  - entity: sun.sun
  # index 08
  - entity: sun.sun
  # index 09
  - entity: sun.sun
  # index 10
  - entity: sensor.u_s_air_quality_index
  # index 11
  - entity: weather.avignon
    attribute: humidity
    decimals: 0
    unit: '%'
    icon: mdi:water-percent
  # index 12
  - entity: sensor.u_s_air_pollution_level
    name: AQI
  # index 13
  - entity: sensor.pollens_84_cupressacees
  # index 14
  - entity: sensor.pollens_84_platane
  # index 15
  - entity: sensor.pollens_84_peuplier
  # index 16
  - entity: sensor.pollens_84_urticacees
  # index 17
  - entity: sun.sun
  # index 18
  - entity: sun.sun
  # index 19
  - entity: sun.sun
  # index 20
  - entity: weather.avignon
  # index 21
  - entity: weather.avignon
    attribute: temperature
    decimals: 1
    unit: °C
    icon: mdi:thermometer
aspectratio: 2/1
layout:
  toolsets:
    # =================================================================================
    ###### TOOLSET 0X ######
    # =================================================================================
    - toolset: left part
      position:
        cx: 45
        cy: 55
      tools:
        # circle
        - type: circle
          position:
            cx: 50
            cy: 50
            radius: 43
          styles:
            circle:
              fill: var(--primary-background-color)
              stroke: var(--sidebar-background-color)
        # - type: icon
        # # wind
          # entity_index: 01
          # position:
            # cx: 14
            # cy: 14
            # align: center
            # icon_size: 10
          # styles:
            # icon:
              # fill: var(--primary-text-color)
        # wind_speed
        - type: segarc
          entity_index: 01
          position:
            cx: 50
            cy: 50
            start_angle: 31
            end_angle: -88
            width: 5
            radius: 42
          scale:
            width: 1
            offset: -2
            min: 0
            max: 150
          show:
            scale: true
            style: colorstops
          segments:
            colorstops:
              gap: 0.5
              colors:
                '0': var(--theme-gradient-color-01)
                '10': var(--theme-gradient-color-02)
                '30': var(--theme-gradient-color-03)
                '50': var(--theme-gradient-color-04)
                '70': var(--theme-gradient-color-05)
                '90': var(--theme-gradient-color-07)
                '110': var(--theme-gradient-color-09)
                '130': var(--theme-gradient-color-11)
          styles:
            background:
              stroke: var(--secondary-background-color)
              fill: var(--sidebar-background-color)
        # wind_gust
        - type: segarc
          entity_index: 02
          position:
            cx: 50
            cy: 50
            start_angle: 31
            end_angle: -88
            width: 1
            radius: 42
          scale:
            width: 1
            offset: -2
            min: 0
            max: 150
          show:
            scale: false
            style: colorstops
          segments:
            colorstops:
              gap: 0.5
              colors:
                '0': var(--theme-gradient-color-03)
                '10': var(--theme-gradient-color-05)
                '30': var(--theme-gradient-color-07)
                '50': var(--theme-gradient-color-09)
                '70': var(--theme-gradient-color-11)
                '90': var(--nova-gradient-color-08)
                '110': var(--nova-gradient-color-09)
                '130': var(--nova-gradient-color-10)
          styles:
            background:
              stroke: rgb(0,0,0,0)
              fill: rgb(0,0,0,0)
        # wind_speed
        - type: state
          entity_index: 01
          position:
            cx: 44
            cy: 29
          show:
            uom: end
          styles:
            state:
              text-anchor: middle
              font-size: 10em
              font-weight: bolder
              fill: var(--primary-text-color)
            uom:
              text-anchor: middle
              font-size: 10em
              font-weight: bolder
              fill: var(--primary-text-color)
        # wind_bearing
        - type: icon
          entity_index: 04
          position:
            cx: 28
            cy: 36
            align: center
            icon_size: 8
          styles:
            icon:
              fill: var(--primary-text-color)
        # wind_bearing
        - type: state
          entity_index: 04
          position:
            cx: 42
            cy: 39
          locale_tag: ui.card.weather.cardinal_direction.
          derived_entity:
            state: |
              [[[
                //const DIRECTION = ["n", "nne", "ne", "ene", "e", "ese", "se", "sse", "s", "ssw", "sw", "wsw", "w", "wnw", "nw", "nnw", ];
                const DIRECTION = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW", ];
                const dir = Math.floor((state / 22.5) + .5);
                return DIRECTION[(dir % 16)];
              ]]]
          styles:
            state:
              text-anchor: middle
              font-size: 8em
              fill: var(--primary-text-color)
        # -----------------------------------------------------------------------
        - type: line
          position:
            orientation: horizontal
            cx: 35
            cy: 44
            length: 34
          styles:
            line:
              stroke: var(--primary-text-color)
              stroke-width: 0.5em
              opacity: 0.5
        # weather_alert
        - type: icon
          entity_index: 05
          position:
            cx: 45
            cy: 54
            align: center
            icon_size: 10
          styles:
            icon:
              fill: var(--primary-text-color)
          animations:
            - state: Rouge
              styles:
                icon:
                  fill: red
            - state: Jaune
              styles:
                icon:
                  fill: yellow
            - state: Vert
              styles:
                icon:
                  opacity: 0.1
        # -----------------------------------------------------------------------
        - type: line
          position:
            orientation: horizontal
            cx: 38
            cy: 65
            length: 34
          styles:
            line:
              stroke: var(--primary-text-color)
              stroke-width: 0.5em
              opacity: 0.5
        # pressure
        - type: segarc
          entity_index: 03
          position:
            cx: 50
            cy: 50
            start_angle: -219
            end_angle: -92
            width: 5
            radius: 42
          scale:
            width: 1
            offset: -2
            min: 990
            max: 1040
          show:
            scale: true
            style: colorstops
          segments:
            colorstops:
              gap: 0.5
              colors:
                '990': gray
                '1010': var(--theme-gradient-color-01)
                '1016': var(--theme-gradient-color-05)
          styles:
            background:
              stroke: var(--secondary-background-color)
              fill: var(--sidebar-background-color)
        # pressure
        - type: state
          entity_index: 03
          position:
            cx: 47
            cy: 78
          show:
            uom: end
          styles:
            state:
              text-anchor: middle
              font-size: 10em
              font-weight: bolder
              fill: var(--primary-text-color)
            uom:
              text-anchor: middle
              font-size: 10em
              font-weight: bolder
              fill: var(--primary-text-color)
        # - type: icon
        # # pressure
          # entity_index: 03
          # position:
            # cx: 14
            # cy: 86
            # align: center
            # icon_size: 10
          # styles:
            # icon:
              # fill: var(--primary-text-color)
    # =================================================================================
    ###### TOOLSET 1X ######
    # =================================================================================
    - toolset: right part
      position:
        cx: 155
        cy: 55
      tools:
        # circle
        - type: circle
          position:
            cx: 50
            cy: 50
            radius: 43
          styles:
            circle:
              fill: var(--primary-background-color)
              stroke: var(--sidebar-background-color)
        # pollution_level
        - type: icon
          entity_index: 12
          position:
            cx: 56
            cy: 25
            align: center
            icon_size: 10
          styles:
            icon:
              fill: var(--primary-text-color)
        # air_quality_index
        - type: segarc
          entity_index: 10
          position:
            cx: 50
            cy: 50
            start_angle: -31
            end_angle: 88
            width: 5
            radius: 42
          scale:
            width: 1
            offset: -2
            min: 1
            max: 301
          show:
            scale: true
            style: colorstops
          segments:
            colorstops:
              gap: 0.5
              colors:
                '1': var(--nova-gradient-color-03)
                '51': var(--nova-gradient-color-05)
                '101': var(--nova-gradient-color-07)
                '151': var(--nova-gradient-color-08)
                '201': var(--nova-gradient-color-09)
                '251': var(--nova-gradient-color-10)
          styles:
            background:
              stroke: var(--secondary-background-color)
              fill: var(--sidebar-background-color)
        # - type: name
        # # pollution_level
          # entity_index: 12
          # position:
            # cx: 55
            # cy: 29
          # styles:
            # name:
              # text-anchor: middle
              # font-size: 9em
              # font-weight: bolder
              # fill: var(--primary-text-color)
        # -----------------------------------------------------------------------
        - type: line
          position:
            orientation: horizontal
            cx: 62
            cy: 35
            length: 34
          styles:
            line:
              stroke: var(--primary-text-color)
              stroke-width: 0.5em
              opacity: 0.5
        # pollens_84_cupressacees
        - type: icon
          entity_index: 13
          position:
            cx: 54
            cy: 43
            align: center
            icon_size: 10
          styles:
            icon:
              fill: var(--primary-text-color)
          animations:
            - state: '3'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-10)
            - state: '2'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-08)
            - state: '1'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-06)
            - state: '0'
              operator: '=='
              styles:
                icon:
                  opacity: 0.2
        # pollens_84_platane
        - type: icon
          entity_index: 14
          position:
            cx: 70
            cy: 43
            align: center
            icon_size: 10
          styles:
            icon:
              fill: var(--primary-text-color)
          animations:
            - state: '3'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-10)
            - state: '2'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-08)
            - state: '1'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-06)
            - state: '0'
              operator: '=='
              styles:
                icon:
                  opacity: 0.2
        # pollens_84_peuplier
        - type: icon
          entity_index: 15
          position:
            cx: 54
            cy: 56
            align: center
            icon_size: 10
          styles:
            icon:
              fill: var(--primary-text-color)
          animations:
            - state: '3'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-10)
            - state: '2'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-08)
            - state: '1'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-06)
            - state: '0'
              operator: '=='
              styles:
                icon:
                  opacity: 0.2
        # pollens_84_urticacees
        - type: icon
          entity_index: 16
          position:
            cx: 70
            cy: 56
            align: center
            icon_size: 10
          styles:
            icon:
              fill: var(--primary-text-color)
          animations:
            - state: '3'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-10)
            - state: '2'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-08)
            - state: '1'
              operator: '=='
              styles:
                icon:
                  fill: var(--nova-gradient-color-06)
            - state: '0'
              operator: '=='
              styles:
                icon:
                  opacity: 0.2
        # -----------------------------------------------------------------------
        - type: line
          position:
            orientation: horizontal
            cx: 62
            cy: 65
            length: 34
          styles:
            line:
              stroke: var(--primary-text-color)
              stroke-width: 0.5em
              opacity: 0.5
        # humidity
        - type: segarc
          entity_index: 11
          position:
            cx: 50
            cy: 50
            start_angle: 219
            end_angle: 92
            width: 5
            radius: 42
          scale:
            width: 1
            offset: -2
            min: 0
            max: 100
          show:
            scale: true
            style: colorstops
            labelstops: false
          segments:
            colorstops:
              gap: 0.5
              colors:
                '0': var(--theme-gradient-color-02)
                '35': var(--nova-gradient-color-03)
                '65': var(--nova-gradient-color-02)
          styles:
            background:
              stroke: var(--secondary-background-color)
              fill: var(--sidebar-background-color)
        # humidity
        - type: state
          entity_index: 11
          position:
            cx: 56
            cy: 78
          show:
            uom: end
          styles:
            state:
              text-anchor: middle
              font-size: 10em
              font-weight: bolder
              fill: var(--primary-text-color)
            uom:
              text-anchor: middle
              font-size: 10em
              font-weight: bolder
              fill: var(--primary-text-color)
        # - type: icon
            # # humidity
          # entity_index: 11
          # position:
            # cx: 86
            # cy: 86
            # align: center
            # icon_size: 12
          # styles:
            # icon:
              # fill: var(--primary-text-color)
    # =================================================================================
    ###### TOOLSET 2X ######
    # =================================================================================
    - toolset: middle part
      position:
        cx: 100
        cy: 50
      tools:
        # circle
        - type: circle
          position:
            cx: 50
            cy: 50
            radius: 48
          styles:
            circle:
              fill: var(--primary-background-color)
              stroke: var(--sidebar-background-color)
        # temperature
        - type: segarc
          entity_index: 21
          position:
            cx: 50
            cy: 50
            start_angle: -143
            end_angle: 143
            width: 7
            radius: 47
          scale:
            width: 1
            offset: -3
            min: -10
            max: 50
          show:
            scale: true
            style: colorstops
          segments:
            colorstops:
              gap: 0.5
              colors:
                '0': var(--nova-gradient-color-02)
                '5': var(--nova-gradient-color-03)
                '10': var(--nova-gradient-color-04)
                '15': var(--nova-gradient-color-05)
                '20': var(--nova-gradient-color-06)
                '25': var(--nova-gradient-color-07)
                '30': var(--nova-gradient-color-08)
                '35': var(--nova-gradient-color-09)
                '40': var(--nova-gradient-color-10)
                '-10': var(--nova-gradient-color-01)
          styles:
            background:
              stroke: var(--secondary-background-color)
              fill: var(--sidebar-background-color)
        # weather
        - type: state
          entity_index: 20
          position:
            cx: 50
            cy: 68
          styles:
            state:
              text-anchor: middle
              font-size: 10em
              fill: var(--primary-text-color)
              font-weight: bolder
        # temperature
        - type: state
          entity_index: 21
          position:
            cx: 50
            cy: 88
          show:
            uom: end
          styles:
            state:
              text-anchor: middle
              font-size: 12em
              fill: var(--primary-text-color)
              font-weight: bolder
            uom:
              text-anchor: middle
              font-size: 12em
              font-weight: bolder
              fill: var(--primary-text-color)
        # weather
        - type: usersvg
          entity_index: 20
          position:
            cx: 50
            cy: 37
            height: 50
            width: 50
          style: images
          images:
            - default: >-
                /local/community/lovelace-meteofrance-weather-card/icons/weather.svg
            - clear-night-night: >-
                /local/images/weather-icons/night.svg
            - cloudy-day: >-
                /local/images/weather-icons/cloudy-day.svg
            - cloudy-night: >-
                /local/images/weather-icons/cloudy-night.svg
            - exceptional-day:  >-
                /local/images/weather-icons/day.svg
            - fog-day:  >-
                /local/images/weather-icons/fog.svg
            - hail-day: >-
                /local/images/weather-icons/rainy-7.svg
            - lightning-rainy-day: >-
                /local/images/weather-icons/lightning-rainy.svg
            - lightning-day: >-
                /local/images/weather-icons/thunder.svg
            - partlycloudy-day: >-
                /local/images/weather-icons/partlycloudy-day.svg
            - partlycloudy-night: >-
                /local/images/weather-icons/partlycloudy-night.svg
            - pouring-day: >-
                /local/images/weather-icons/rainy-6.svg
            - rainy-day: >-
                /local/images/weather-icons/rainy-3-day.svg
            # - rainy-night: >-
                # /local/images/weather-icons/rainy-3-night.svg
            - sunny-day:  >-
                /local/images/weather-icons/day.svg
            - snowy-rainy-day: >-
                /local/images/weather-icons/snowy-rainy.svg
            - snowy-day: >-
                /local/images/weather-icons/snowy-6.svg
            - windy-day: /local/images/weather-icons/windy-day.svg
            - windy-night: /local/images/weather-icons/windy-night.svg
          animations:
            - state: '[[[ return (state); ]]]'
              image: >
                [[[
                  if (states["sun.sun"].state == 'below_horizon') return (state + '-night');
                  return (state + '-day');
                ]]]
    # =================================================================================
    ###### TECHNICAL TOOLSET ######
    # =================================================================================
    - toolset: more-info_200x100_rectangle
      position:
        cx: 100
        cy: 50
      tools:
        - type: rectangle
          entity_index: 20
          position:
            cx: 50
            cy: 50
            width: 200
            height: 100
            rx: 0
          styles:
            rectangle:
              fill: rgb(0,0,0,0)
          user_actions:
            tap_action:
              actions:
                - action: more-info
1 « J'aime »
9

Peut-être relié à votre problème d’icones SVG.

10

merci, j’ai commencé a regarder, effectivement, c’est une carte ou il faut mettre les mains dans le cambouis a minima pour l’installation.
je regarderais cela demain a tête reposé sur ma machine de dev HA.
Merci.

11

Alors pour le coup, j’étais en RC3, outre mon problème d’affichage d’icones ça allait bien. J’ai passé la maj RC4 via HACS et j’ai la même erreur que toi depuis, sur toutes les cartes SAK: « i.setconfig is not a function ».
Je repasse la RC3 et ça rentre dans l’ordre. Donc tu peux peut-être faire tes premiers essais ave la RC3.

12

C’est bizarre la RC4 a été livré pour corriger ce problème. :flushed: Et pour moi ça fonctioné.

13

Salut,

Je ne trouve pas les définitions des couleurs var(–nova-gradient-color-xx) que vous avez dans votre code. Pouvez-vous m’indiquer dans quel thème elles sont?

14

Mon thème est sur une base de CatPpuccin:
CatPpuccin pour home assistant
Plus ou moins adapté , notamment pour prendre en compte les modules en provenance de HACS.
J’ai pas pu copier/coller (d’ailleurs c’est assez pénible, y’a que moi qui ne peut pas copier du texte depuis le file editor mobile Android???), donc j’te fais un screenshot :
IMG_20230501_205922

1 « J'aime »