[CARTE] Decluttering-card (reduiser vos lignes de code lovelace)

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
#1

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.yaml
input_select: !include_dir_merge_named input_select/ 
script: !include_dir_merge_named script/

C’est pourquoi je souhaiterai vous faire connaitre pour celle et ceux qui n’ont pas eu connaissance du decluterring-card.

Simple d’utilisation il suffit de creer un fichier decluttering_templates.yaml dans >un dossier creer à la racine www → customlovelace → decluttering_templates.yaml

Suite à son installation vous pourrez l’employer comme ceci.
voici un exemple d’utilisation réalisé avec le code de station essence.

Citation
Merci a son auteur @MiquelAlvarez.

####################################################################################################################################################################################################################################################################################################################################################     
####    CARBURANT GAZOIL (template à coller dans decluttering_templates.yaml)
######################################################################################################################################################################################
carburantgasoil:
  card:
    type: 'custom:button-card'
    entity: "[[entity]]"
    color_type: icon
    custom_fields:
      price: |
        [[[
         return `
           <span style="color: var(--text-color-sensor);">${entity.attributes.Gasoil} €/L</span>`
        ]]]
    name: "[[name]]"
    show_icon: false
    show_last_changed: false
    show_name: true
    styles:
      card:
        - border: 2px solid var(--primary-color)
        - border-radius: 5px
        - height: 1em
      custom_fields:
        price:
          - background-color: 'rgba(0, 0, 0, 0)'
          - position: absolute
          - bottom: '-10px'
          - right: 5px
          - font-size: 15px
          - line-height: 20px
      #    - '--text-color-sensor': |
      #        [[[
      #          if ( (states['sensor.essence_sp95_best_price'].state == 'intermarche') ) return 'green';
      #          else return 'var(--primary-color)';
      #        ]]]
      grid:
        - position: relative
      name:
        - font-variant: small-caps
        - justify-self: start
        - padding: 0 15px
      #  - color: |
      #      [[[
      #        if ( (states['sensor.essence_sp95_best_price'].state == 'intermarche') ) return 'green';
      #        else return 'var(--primary-color)';
      #      ]]]

Et dans votre lovelace cela donne:

      - type: custom:decluttering-card
        template: carburantgasoil
        variables:
          - name: #le nom que vous souhaiter afficher       
          - entity: sensor.prixcarburant_8888888 #le sensor de la station qui contient les differents attribut E95 E10 Gasoir ect...
5 J'aime
[CARTE] text-divider-row - Titre pour vos Carte
#2

Merci pour le partage :slight_smile:

#3

Pas mal ca aussi cela permet de garder une sauvegarde de ses cartes.

Merci pour le partage

#4

Salut @Felix62 j’aimerais bien utiliser décluterring card mais je n’arrive pas à comprendre comment le faire fonctionné, faut il obligatoirement avoir des tableau de bord en yaml ou l’on peu le faire avec des tableau de bord « classique ».

J’ai creer un fichier decluttering_templates.yaml dans >un dossier creer à la racine www → customlovelace → decluttering_templates.yaml

J’y ai mis le code model qu’il y a dans le github, et ajouter le code dans lovelace mais ca me donne :

The template « my_first_template » doesn’t exist in decluttering_templates
type: ‹ custom:decluttering-card ›
template: my_first_template
variables:

  • name: Test Button
  • icon: arrow-up

Je ne comprend pas ou es le soucis, si tu pourrais me donner une piste ca serais top

#5

Ce qui n’est pas dit, c’est que le fichier cité :

doit être inclus et que pour être inclus, cela ne se peut que sur les tableaux de bord en mode YAML.

Pour les tableaux de bord gérés en mode graphique, la méthode est la suivante :

Copier le code suivant pour tester :

decluttering_templates:
  entity:
    default:
      - name: Soleil
      - entity: sun.sun
      - icon: weather-sunny
    card:
      type: entities
      entities:
        - entity: '[[entity]]'
          name: '[[name]]'
          icon: 'mdi:[[icon]]'
          secondary_info: last-updated

Le coller dans la configuration du tableau de bord (Modifier le tableau de bord → Editeur de configuration) au dessus de la clé views.

Enregistrer le tableau de bord puis fermer l’éditeur de configuration.

Copier le code suivant et le coller dans une carte pour vérifier le bon fonctionnement :

type: 'custom:decluttering-card'
template: entity

Ce qui en images donne :