Carte de désencombrement

[voyagers21]

Bonjour

je cherche a comprendre l'utilité et la mise en place d'une carte de désemcombrement pour mon modèle.

Quelqu'un peut 'il m'aider par un exemple et m'expliquer l'interet?

merci a vous

type: custom:button-card
aspect_ratio: 4/3
name: Cuisine
entity: light.cuisine
show_state: true
state_display: >
  [[[ return
  `${parseFloat(states['sensor.temperature_radiateur_cuisine'].state).toFixed(0)}`
  + ' °C' 

  + ` |
  ${parseFloat(states['sensor.sonde_salle_a_manger_humidite'].state).toFixed(0)}`
  + ' %' 

  ]]]
show_entity_picture: true
size: 40%
state:
  - value: "on"
    styles:
      card:
        - "-webkit-box-shadow": 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
        - transition: all 2s ease
    color: yellow
  - value: "off"
    color: "#318CE7"
styles:
  icon:
    - left: 5%
    - top: 25%
  name:
    - color: white
    - top: 5%
    - left: 6%
    - font-size: 19px
    - font-weight: bold
    - position: absolute
  state:
    - color: "#87CEFA"
    - top: 27%
    - left: 5%
    - font-size: 12px
    - position: absolute
  custom_fields:
    radiateur:
      - top: 20%
      - left: 75%
      - width: 35px
      - position: absolute
    fenetre:
      - top: 45%
      - left: 55%
      - width: 35px
      - position: absolute
    media:
      - top: 70%
      - left: 75%
      - width: 35px
      - position: absolute
    store:
      - top: 45%
      - left: 75%
      - width: 35px
      - position: absolute
    volet:
      - top: 70%
      - left: 55%
      - width: 35px
      - position: absolute
tap_action:
  action: navigate
  navigation_path: /lovelace/4
hold_action:
  action: toggle
custom_fields:
  store:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: cover.store_cuisine
      show_name: false
      show_entity_picture: true
      size: 50%
      styles:
        card:
          - background-color: transparent
      state:
        - value: open
          icon: mdi:awning
          color: red
        - value: closed
          icon: mdi:awning-outline
          color: "#318CE7"
      tap_action:
        action: more-info
  volet:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: cover.volet_cuisine
      show_name: false
      show_entity_picture: true
      size: 50%
      icon: |
        [[[
          if (states['cover.volet_cuisine'].attributes.current_position >= 16)
          return "mdi:window-shutter-open"; else return "mdi:window-shutter";
        ]]]
      styles:
        icon:
          - color: |
              [[[
                if (states['cover.volet_cuisine'].attributes.current_position >= 16)
                return "#318CE7"; else return "red";
              ]]]
        card:
          - background-color: transparent
      tap_action:
        action: more-info
  media:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: media_player.enceinte_cuisine
      show_name: false
      show_entity_picture: false
      size: 50%
      state:
        - value: playing
          color: yellow
        - value: "off"
          color: "#318CE7"
      styles:
        card:
          - background-color: transparent
      tap_action:
        action: more-info
  radiateur:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: climate.radiateur_cuisine
      show_name: false
      size: 50%
      state:
        - operator: template
          value: >-
            [[[ return
            states['climate.radiateur_cuisine'].attributes.hvac_action == 'idle'
            ]]]
          icon: mdi:radiator-off
          color: "#318CE7"
        - operator: template
          value: >-
            [[[ return
            states['climate.radiateur_cuisine'].attributes.hvac_action ==
            'heating' ]]]
          icon: mdi:radiator
          color: red
        - operator: template
          value: >-
            [[[ return
            states['climate.radiateur_cuisine'].attributes.hvac_action == 'off'
            ]]]
          icon: mdi:radiator-disabled
          color: "#318CE7"
      styles:
        card:
          - background-color: transparent
  fenetre:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: binary_sensor.fenetre_cuisine_contact
      show_name: false
      size: 50%
      styles:
        card:
          - background-color: transparent
      state:
        - value: "on"
          icon: mdi:window-open-variant
          color: yellow

j'ai mis que le code 1 piece

[WarC0zes]

Bonjour,
qu’est-ce que tu appelles une carte de désemcombrement ?

[voyagers21]

Decluttering Card

Nouvelle intégration : AtmoFrance - Qualité de l'air

Je pense à un souci avec la carte swipe-card. @Stef_42 a eu le même problème et je n’ai pas trouvé de solution. J’utilise la carte depuis 2 ans et peut-être pour les nouveaux qui l’installent de HACS 2.0, ça pose un problème. tenter un vidage du cache du navigateur. Au pire, changer swipe-card par tabbed-card quand j’ai 5min, je ferais un exemple avec tabbed-card et les cartes j0 et j+1.

on a un exemple ici.

en faite je cherche a comprendre si je peux pas épurer tout ce code dans la partie carte.

[WarC0zes]

@voyagers21

Decluttering

AH !! tu as écris la traduction de la carte decluterring. Il fallait suivre

Après comme tu utilises button-card, tu as le button-card template qui ressemble au decluterring.

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

Tu as un sujet qui donne pas mal d’information :

[CARTE] Decluttering-card (reduire ses lignes de code lovelace)

Bonjour à tous, Je suis nouveau depuis quelques jours sur ce forum et lors d’un échange on m’a invité à partager une astuce pour organiser ou dépoussiérer fichier lovelace.yaml. Nous sommes beaucoup à vouloir découper notre configuration et à repartir proprement dans un dossier a part. exemple: #configuration.yaml group: !include_dir_merge_named group/ automation: !include automations.yaml scene: !include_dir_merge_list scene/ sensor: !include_dir_merge_list sensor/ zone: !include zone/zones.…

Et même une nouvelle carte qui reprend les bases de decluttering-card et améliorer :

GitHub - brunosabot/streamline-card: Streamline your Lovelace configuration with with a...

[voyagers21]

en gros je pense qu’il dois y avoir un intérêt mais j’arrive pas a visualiser cette intérêt dans mon cas précis. surtout ça mise en place

[WarC0zes]

L’intérêt est de minimiser les codes de carte , quand tu utilises les mêmes modèles de carte.

un exemple, sur ton dashboard tu utilises 10 cartes button-card avec le même code. Au lieu de faire dix fois le même code, tu fais une carte decluterring et utilise le template de la carte decluterring sur ton dashboard. Tu auras juste les entités à changer.

C’est le même principe avec les button-card template.

[voyagers21]

ok ca me parait compliqué a mettre en place

[WarC0zes]

Ou placer le decluterring template:

Nouvelle intégration : AtmoFrance - Qualité de l'air

les templates decluttering se mettent dans l’éditeur de configuration [image] [image] avant le views: [image]

un exemple de decluterring template.

Le template ( 24 lignes de code ):

decluttering_templates:
  atmofrance:
    card:
      type: custom:button-card
      entity: '[[sensor]]'
      size: 100%
      aspect_ratio: 1.4/1
      show_state: true
      show_label: true
      name: >
        [[[ return entity.attributes.friendly_name.replace('-xxxxx-xxxx','')
        + ': ' ]]]
      label: |
        [[[ return entity.state ]]]         
      state_display: '[[[ return entity.attributes.Libellé ]]]'
      styles:
        icon:
          - color: '[[[return entity.attributes.Couleur]]]'
        name:
          - font-size: 14px
        state:
          - font-weight: bold
          - font-size: 13px
          - color: '[[[return entity.attributes.Couleur]]]'
        label:
          - font-size: 13px
          - color: '[[[return entity.attributes.Couleur]]]'

le code de la carte a utiliser dans le dashboard ( 4 lignes de code ) :

type: custom:decluttering-card
template: atmofrance
variables:
  - sensor: sensor.pm10_xxxx

Voila l'intérêt du decluttering .

[team18fr]

Bonjour à tous,

Je sais que je sors du sujet initial, mais vous faite comment pour avoir ce dashboard. J'ai copier le code et l'ai dupliqué mais cela ne reste pas sur 3 colonnes et cela prends toute la page.

[WarC0zes]

tu es en vue section ?
son code est utilisé dans une colonne, on dirais que tu utilise un button par colonne.
Dans une colonne utilise la carte pile horizontal et ajoute 3 button-card.

[voyagers21]

oui j’ai bien compris mais j’arrive pas a visualiser ce que je peux mettre dans le template
et ce que je dois laisser dans la carte.

en faite il est la mon problème

[WarC0zes]

tu met dans le template le code d'un button-card avec les styles ou autre que tu as besoin.
puis tu modifie les entité a utilise par une variable.

@WarC0zes

entity: '[[sensor]]'

dans ta carte decluterring, tu n'auras que la variable a renseigné avec l'entité

un autre exemple, au lieu de mettre ta couleur ou taille de police, tu utilise une variable

      styles:
        icon:
          - color: '[[color]]'
        name:
          - font-size: '[[size]]'

type: custom:decluttering-card
template: atmofrance
variables:
  - sensor: sensor.pm10_xxxx
  - color: green
  - size: 16px

@voyagers21

exemple, tu as chambre et bureau qui sont les mêmes code. Tu as juste les entités qui changent. Au lieu d'utiliser deux fois le code complet. Tu fais un template avec decluterring et utilise decluterring-card a la place dans ton dashboard. tu aura moins de ligne de code.

[team18fr]

Ok je n’avais pas pensé à la pile horizontal