Dashboard simplification

Bonjour à tous

Je découvre le dashboard, ainsi que les cartes et les multiples possibilités qui semblent être infini :slight_smile:


image

J’ai fait une page résumé des ouvrants sur les bases de la carte Mushroom.
J’ai fait des petits sous groupes avec en titre un résumé du groupe.

Ma question est étant donné que c’est super long long à faire quelques dizaines de lignes de codes (même en copier / coller) existe t il un moyen pour simplifier et surtout pour avoir un template dans un coin qui prendrait en considération l’entité que je lui donnerais ?
Bon au passage je sais que j’ai un soucis de position de l’icone porte ou fenêtre que j’ai du mal à ajuster en fonction de l’usage PC, Tablette et Téléphone et typiquement rentrer dans chaque carte unitaire pour modifier margin-left: -18px !important; en margin-left: -22px !important; c’est pas compliqué mais vraiment pénible.

J’ai cherché s’il y avait un sujet la dessus mais je ne dois pas chercher avec les bons termes, les bons mots car je ne trouve pas mon bonheur et je suis persuadé qu’il y a déjà un sujet, tutoriel la dessus.

Merci de votre aide, guidage, coup de pouce

Code de mon titre de sous groupe
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Sous-Sol
    tap_action:
      action: navigate
      navigation_path: bathroom
    hold_action:
      action: toggle
    double_tap_action:
      action: more-info
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    secondary: |
      {% set all = expand('group.grp_pte_ssol')| list -%}
      {% set closed = all | selectattr('state','eq','off')|list|count%}
      {% set open = all | selectattr('state','eq','on')|list|count%}
      Fermés : {{closed}} / Ouverts : {{open}}
    icon: |
      {% if is_state('group.grp_pte_ssol', 'on') %} 
        mdi:door-open
      {% else %}
        mdi:door-closed
      {% endif %}
    icon_color: |
      {% if is_state('group.grp_pte_ssol','on') %}
        red
      {% else %}
        green
      {% endif %}
    badge_icon: >-
      {% set all = expand('group.grp_pte_ssol')| list -%}  {% set open1 = all |
      selectattr('state','eq','on')|list|count%} {% set closed1 = all |
      selectattr('state','eq','off')|list|count%}       {% if open1 == 1 %}
        mdi:numeric-1
      {% elif open1 == 2 %}
        mdi:numeric-2
      {% elif open1 == 3 %}
        mdi:numeric-3
      {% elif open1 == 4 %}
        mdi:numeric-4
      {% elif open1 == 5 %}
        mdi:numeric-5
      {% elif open1 == 6 %}
        mdi:numeric-6
      {% elif open1 == 7 %}
        mdi:numeric-7
      {% elif open1 == 8 %}
        mdi:numeric-8
      {% elif open1 == 9 %}
        mdi:numeric-9
      {% elif open1 == 10 %}
        mdi:numeric-10
      {% else %}
        mdi:numeric-4
      {% endif %}
    badge_color: |
      {% set all = expand('group.grp_pte_ssol')| list -%} 
      {% set open = all | selectattr('state','eq','on')|list|count%}
      {% if open == 0 %}
        green
      {% else %}
        red
      {% endif %}
    card_mod:
      style: |
        :host {
          --mush-badge-icon-size: 0.95em;
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
        mushroom-badge-icon {
          left: 60px;
          top: 6px;
        }
Code d'une carte du groupe
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Buanderie
    secondary: '🔋{{ states(''sensor.pte_buanderie_battery'') }}% '
    tap_action:
      action: navigate
      navigation_path: bathroom
    hold_action:
      action: toggle
    double_tap_action:
      action: more-info
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    icon: |
      {% if is_state('binary_sensor.pte_buanderie_contact', 'on') %} 
        mdi:door-open
      {% else %}
        mdi:door-closed
      {% endif %}
    icon_color: |
      {% if is_state('binary_sensor.pte_buanderie_contact','on') %}
        red
      {% else %}
        green
      {% endif %}
    card_mod:
      style: |
        :host {
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }

Ma configuration


Système
version core-2022.11.3
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.10.7
os_name Linux
os_version 5.15.74
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 4997
Installed Version 1.28.3
Stage running
Available Repositories 1153
Downloaded Repositories 77
Home Assistant Cloud
logged_in true
subscription_expiration 13 décembre 2022 à 01:00
relayer_connected true
remote_enabled true
remote_connected true
alexa_enabled true
google_enabled false
remote_server eu-central-1-1.ui.nabu.casa
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 9.3
update_channel stable
supervisor_version supervisor-2022.10.2
agent_version 1.4.1
docker_version 20.10.18
disk_total 30.8 GB
disk_used 16.6 GB
healthy true
supported true
board ova
supervisor_api ok
version_api ok
installed_addons Samba share (10.0.0), File editor (5.4.2), Terminal & SSH (9.6.1), Studio Code Server (5.4.1), Check Home Assistant configuration (3.11.0), Network UPS Tools (0.11.0), Samba Backup (5.2.0), Home Assistant Google Drive Backup (0.109.2), Dropbox Sync (1.3.0), Node-RED (13.5.3), TheengsGateway (1.3.0), ESPHome (2022.11.1), AppDaemon (0.10.1)
Dashboards
dashboards 3
resources 47
views 40
mode storage
Recorder
oldest_recorder_run 12 novembre 2022 à 09:10
current_recorder_run 17 novembre 2022 à 20:54
estimated_db_size 3909.42 MiB
database_engine sqlite
database_version 3.38.5
___

Salut.
Jette un œil sur ça par exemple

Bonjour @Pulpy-Luke

Merci pour ton retour je vais regarder le sujet pour voir comment simplifier le mode copier/coller.
:wink:

Après lecture, j’ai mis en place dans mon fichier de config l’include nécessaire :

decluttering_templates: !include decluttering_templates.yaml

Au préalable j’ai installé via HACS → Interface ceci
image

j’ai aussi créer le fichier à la racine www -> customlovelace -> decluttering_templates.yaml
Ce que je comprends c’est que dans ce fichier je vais y mettre les templates de cartes que je souhaite reproduire comme ceci par exemple :

Config dans le decluttering_templates.yaml
carte_batterie:
  card:
    - type: custom:stack-in-card
      cards:
        - type: custom:mushroom-template-card
          primary: [[name]]
          secondary: '{{''{0:,.0f}''.format(states(entity)|int)}} %'
          icon: >
            {% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
            {% if battery_level == 100 %}
              mdi:battery
            {% elif battery_level > 0 %}
              mdi:battery-{{ battery_level }}
            {% else %}
              mdi:battery-alert-variant-outline
            {% endif %}
          entity: [[entity_battery]]
          icon_color: |-
            {% set battery_level = states(entity) | int %}
            {% if battery_level > 90 %} 
              green
            {% elif battery_level > 60 %}
              light-green
            {% elif battery_level > 50 %}
              lime
            {% elif battery_level > 40 %}
              yellow
            {% elif battery_level > 30 %}
              amber
            {% elif battery_level > 20 %}
              orange
            {% elif battery_level > 10 %}
              deep-orange
            {% else %}
              red
            {% endif %}
          fill_container: true
          layout: horizontal
          multiline_secondary: false
          card_mod:
            style: |
              :host {
                --mush-icon-size: 76px;
                height: 66px;
                margin-left: -24px !important;
              }
              ha-card {
                box-shadow: none;
                --card-primary-font-size: 12px;
                --card-secondary-font-size: 20px;
              }
        - type: custom:mushroom-chips-card
          chips:
            - type: conditional
              conditions:
              - entity: [[entity_contact]]
                state: 'on'
              chip:
                type: template
                icon_color: red
                icon: mdi:motion-sensor
            - type: conditional
              conditions:
              - entity: [[entity_contact]]
                state: 'off'
              chip:
                type: template
                icon_color: green
                icon: mdi:motion-sensor-off
          alignment: end
          card_mod:
            style: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0;
                top: -36px;
              } 
  card_mod:
    style: |
      ha-card {
        height: 66px;
      }

Puis dans la création de mon locelace je mettrais une carte « Manuel » par exemple comme ceci :

Carte dans le lovelace
- type: custom:decluttering-card
  template: carte_batterie
  variables:
    - name: CH Parents     
    - entity_battery: sensor.pte_ch_parents_battery
    - entity_contact: binary_sensor.pte_ch_parents_contact

Mais mon 1er soucis c’est qu’il ne prend pas l’include dans le fichier de configuration.yaml
image

Logique…
Configuration est dans le répertoire /config (ou son équivalent hors container)… Et tu cherches un fichier yaml en relatif …
Physiquement ton fichier de template est à coté (voire très loin) dans /local/www/customlovelace
Le plus simple c’est de la mettre dans /config (ou en desous)

Ok je l’ai remonté d’un cran
Mais du coup nouveau soucis

il m’annonce qu’il ne trouve pas l’intégration !

J’ai donc commenté la ligne d’include et redémarré HA
Refait la manip mais rien n’y fait toujours le même message alors que j’ai bien l’intégration

Je ne cerne pas du tout la mise en place pour le coup là

Ce qui est vraiment étrange c’est que c’est pas la configuration du template car quand je colle mon template ici :
image

Tout se passe très bien, j’ai le bon résultat c’est vraiment que la partie include

Je ne comprends vraiment pas où je dois et comment je dois faire pour mettre
decluttering_templates: !include decluttering_templates.yaml

J’ai testé dans le fichier de configuration cela ne passe pas, mais je le mets peut être pas au bon endroit non plus.
J’ai testé dans l’éditeur de configuration du locelace et bien non

L’idée était quand même d’avoir mes templates dans un fichier dédié accessible via VSCode
Surtout s’il y a plusieurs modèles

@jerome6994 Salut,

J’en suis au même point que toi, tu as dû avancer depuis ces messages de nov.
Tu as fait comment finalement ? Je bloque comme toi

Merci 1000 fois

@Sigalou @jerome6994 Pour les templates, oubliez les includes…
Le plus simple c’est de coller le bloc decluttering_templates: dans l’ui : Menu à 3 point en haut à droite => Modifier le dashboard => RE Menu à 3 point en haut à droite => Editeur de configuration.
Le bloc est à placer AVANT la première view

Au top @Pulpy-Luke , copie @jerome6994

J’y suis arrivé, très bien, assez simple.

Je suis arrivé à remplacer :

  - type: image
    entity: light.lumieres_chambre_de_coralie
    tap_action:
      action: none
    style:
      width: 100%
      top: 50%
      left: 50%
    state_image:
      'on': /local/maison/1920x1000/light.lumieres_chambre_de_coralie.png
      'off': /local/maison/1920x1000/transparent.png

par :

  - type: custom:decluttering-card
    template: image_zone
    variables:
      - zone: light.lumieres_chambre_de_coralie

grâce à :

decluttering_templates:
  image_zone:
    element:
      type: image
      entity: '[[zone]]'
      style:
        width: 100%
        top: 50%
        left: 50%
      state_image:
        'on': /local/maison/1920x1000/[[zone]].png
        'off': /local/maison/1920x1000/transparent.png

image

C’est top, 4 lignes au lieu de 11 par zone, donc beaucoup plus simple à gérer pour toutes mes 12 zones.

1 « J'aime »

Exactement.
La contrainte derrière c’est d’avoir une convention de nom entre les appareils, les entités, les images etc…
Parce que sinon le templating [[zone]] est ingérable

Du coup, @Pulpy-Luke je pense qu’on ne peut pas, mais tu crois qu’on peut remplacer plusieurs cartes par une seule de format decluttering ?
Genre remplacer :

  - type: custom:decluttering-card
    template: image_zone
    variables:
      - zone: light.lumiere_chambre_parents
  - type: custom:decluttering-card
    template: image_zone
    variables:
      - zone: light.lumieres_du_dressing
  - type: custom:decluttering-card
    template: image_zone
    variables:
      - zone: light.lumiere_chambre_de_manon
  - type: custom:decluttering-card
    template: image_zone
    variables:
      - zone: light.lumiere_chambre_de_coralie

Par un genre de

  - type: custom:decluttering-card
    template: image_zones_etage

Il faut tester. Je sais que je suis tombé sur des limites mais j’ai des templates de templates de mémoire

Visiblement non, ou alors il faudrait faire une carte de type picture-elements ou encore custom:vertical-stack-in-card par exemple, des cartes qui contiennent plusieurs éléments.
Mes cartes sont type : image, et on ne peut mettre qu’un image à chaque fois donc une carte par image.
Si je trouve autre chose, je vous dis.

1 « J'aime »

Oui, je crois qu’il faut que ce soit une carte ‹ valable › et pas un morceau de carte

1 « J'aime »

Sorry @Sigalou j’avais pas vu ton message ici
Mais oui j’ai laissé tomber les includes.

C’est dommage car plus pratique je trouve dans l’organisation et l’écriture mais c’est ainsi.

Top tu avances super vite :wink:

@Pulpy-Luke merci pour tes conseils avisés heureusement que ton poisson d’avril était un poisson pour la communauté :joy: