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

Felix62 · Mai 7, 2021, 10:51

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...

barto_95 · Mai 7, 2021, 8:05

Merci pour le partage

McFly · Mai 7, 2021, 9:18

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

Merci pour le partage

Mib68 · Mai 13, 2021, 5:27

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

Clemalex · Mai 13, 2021, 6:48

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 :

Cedric_BOITTE · Janvier 3, 2022, 2:37

Un tout grand merci pour cette explication … je galérais depuis quelques temps avec cette carte !

UraReng3 · Janvier 23, 2022, 1:32

Salut ! Je me lance dans la personnalisation et j’ai attrapé le github de Roman pour m’aider un peu.
Toute ces decluttering-card sont dans le dossier decluttering-templates.yaml. J’ai donc suivi la même méthode.

Mais si j’ai bien compris, pour les utiliser via l’interface graphique il faut que je les enregistre également dans la configuration du tableau de bord ?? Sauf que si je les colle la, ca ne fonctionne pas du tout donc ma question est : que dois je faire ??

Pulpy · Juin 7, 2022, 6:32

Salut,

Un petit partage parce que plus je joue avec ça, plus je suis fan !!

############################
A - Pour compter les membres d’un groupe de volets en fonction des états

  cover_count:
    element:
      type: custom:hui-element
      card_type: markdown
      content: >-
        {% set positions = expand('group.volets_[[groupe]]'|lower) |
        map(attribute='attributes.current_position')|list -%} {% set open =
        positions | reject("!=",100) |list |count -%} {% set closed = positions
        | reject("!=",0) |list |count -%} {% set other = positions|list|count -
        open - closed -%} [[groupe]] : <ha-icon
        icon=mdi:window-shutter></ha-icon>={{ closed }} <ha-icon
        icon=mdi:window-shutter-open></ha-icon>={{ open }} <ha-icon
        icon=mdi:window-shutter-alert></ha-icon>={{ other }}

      - type: custom:decluttering-card
        template: cover_count
        variables:
          - groupe: Tous

############################

B- Pour gérer mes vannes de chauffage (OK, actuellement ça sert à rien mais je suis prêt pour cet hiver):

  slider_danfoss:
    element:
      type: custom:stack-in-card
      mode: horizontal
      title: Chauffage
      cards:
        - type: thermostat
          entity: climate.radiateur_[[room]]
          name: Consigne
        - type: custom:mini-graph-card
          entities:
            - sensor.radiateur_[[room]]
          hour24: true
          points_per_hour: 4
          line_color: red
          name: Historique
          show:
            extrema: true

    - type: custom:decluttering-card
      template: slider_danfoss
      variables:
        - room: sdbb

Felix62 · Juin 7, 2022, 8:18

Merci pour ce partage fort utile @Pulpy

Pulpy · Juin 22, 2022, 11:58

Allez une petite nouveauté avec un moyen d’afficher un input_select sous forme des boutons
select

le template

  input_select_generic:
    default:
      ratio: 1/1
    element:
      type: custom:button-card
      icon: '[[icon]]'
      aspect_ratio: '[[ratio]]'
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: '[[input_select]]'
          option: '[[newstate]]'
      hold_action:
        action: more-info
      show_icon: true
      show_name: true
      entity: '[[input_select]]'
      name: '[[newstatelabel]]'
      styles:
        card:
          - background-color: rgb(59,64,72)
      state:
        - value: '[[newstate]]'
          styles:
            card:
              - background-color: white
              - color: rgb(59,64,72)
            icon:
              - color: rgb(59,64,72)

la carte

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:decluttering-card
        template: input_select_generic
        variables:
          - newstatelabel: Auto.
          - newstate: Automatique
          - icon: mdi:refresh-auto
          - input_select: input_select.test
          - ratio: 2/1
      - type: custom:decluttering-card
        template: input_select_generic
        variables:
          - newstatelabel: Manuel
          - newstate: Manuel
          - icon: mdi:gesture-double-tap
          - input_select: input_select.test
          - ratio: 2/1
      - type: custom:decluttering-card
        template: input_select_generic
        variables:
          - newstatelabel: Forcé 1
          - newstate: Force1
          - icon: mdi:numeric-1-box-multiple
          - input_select: input_select.test
          - ratio: 2/1
      - type: custom:decluttering-card
        template: input_select_generic
        variables:
          - newstatelabel: Forcé 2
          - newstate: Force2
          - icon: mdi:numeric-2-box-multiple
          - input_select: input_select.test
          - ratio: 2/1
      - type: custom:decluttering-card
        template: input_select_generic
        variables:
          - newstatelabel: Eteinds
          - newstate: OFf
          - icon: mdi:close-circle-outline
          - input_select: input_select.test
          - ratio: 2/1

  - type: entities
    entities:
      - entity: input_select.test

L’input

test:
  options:
    - Automatique
    - Manuel
    - Force1
    - Force2
    - OFf

Pas besoin d’automatisation ni de se farcir le code des actions à chaque fois