[Article] Un beau dashboard, tout simplement

[Jean-Michel]

Merci beaucoup @herveaurel. Toujours aussi sympa !

[LeorFinacre]

Je trouve ça aussi très malin, mais j’ai pas compris comment il a fait

[BBE]

Il suffit de demander à @herveaurel comment sont définis ses entités template…

Par exemple le template sur les lumières…

[herveaurel]

      - name: "Portes"
        icon: >
          {% if is_state("binary_sensor.portes", "on") %}
            mdi:door-open
          {% else %}
            mdi:door
          {% endif %}   
        state: >-      
            {%- set entities = expand('binary_sensor.portes') | selectattr('state', 'eq', 'on') | map(attribute='name') | list -%}
            {{ entities | join(', ') if entities else 'off' }}
        attributes: 
          compteur: >
           {%- set entities = expand('binary_sensor.portes') | selectattr('state', 'eq', 'on') | map(attribute='name') | list -%} {{ entities | count }}
          message: > 
              {% if is_state("binary_sensor.portes", "on") %}
                Ouvert
              {% else %}
                Fermé
              {% endif %}    
          Entrée: >   
            {{ state_translated('binary_sensor.porte_entree')}} {{ states.binary_sensor.porte_entree.last_changed | as_timestamp | timestamp_custom('%d/%m %H:%M:%S') }}
          Garage: >   
            {{ state_translated('binary_sensor.porte_garage')}} {{ states.binary_sensor.porte_garage.last_changed | as_timestamp | timestamp_custom('%d/%m %H:%M:%S') }}
          Cagibi: >   
            {{ state_translated('binary_sensor.porte_cagibi')}} {{ states.binary_sensor.porte_cagibi.last_changed | as_timestamp | timestamp_custom('%d/%m %H:%M:%S') }}
          Cuisine: >   
            {{ state_translated('binary_sensor.porte_cuisine')}} {{ states.binary_sensor.porte_cuisine.last_changed | as_timestamp | timestamp_custom('%d/%m %H:%M:%S') }}   
          S. à manger: >   
            {{ state_translated('binary_sensor.porte_salle_a_manger')}} {{ states.binary_sensor.porte_salle_a_manger.last_changed | as_timestamp | timestamp_custom('%d/%m %H:%M:%S') }}     
          Parents: >   
            {{ state_translated('binary_sensor.porte_chambre_parents')}} {{ states.binary_sensor.porte_chambre_parents.last_changed | as_timestamp | timestamp_custom('%d/%m %H:%M:%S') }}

[BBE]

Merci!

@LeorFinacre plus s d’excuses…

Pour plus d’info, il faut chercher comment définir un template en Yaml… Mais on s’éloigne du sujet dashboard…

[cob94440]

Bonjour,
Ce template est un sensor ou un binary sensor?
Merci d’avance de ton retour.

[herveaurel]

C’est un template sensor.

[cob94440]

Merci pour ton retour.
Tu as donc un groupe binary sensor avec tes portes dans cet exemple et ensuite un sensor avec ces infos.
Ce sensor remplace tes sensors (partagés sur ton github)
compteur portes
porte on
compteur porte hs
porte hs
c’est bien ça?

[manu_67]

Propre merci Aurel! D’avoir toujours les idées!

[xtof78]

Sympa ton dashboard, j’aime bien l’idée de regrouper plusieurs éléments dans chaque pièce.
Peux-tu stp nous montrer tes stack-in-card, plus particulièrement comment tu as mis ces icônes en bas à droite de tes pièces ?
Merci

[BBE]

La plupart des intervenants partagent beaucoup de trucs sur le forum… Il suffit de chercher…

@herveaurel sur son github

@WarC0zes et moi sur le forum…

[xtof78]

J’ai essayé de suivre tes conseils, mais je n’ai pas réussi à faire aussi esthétique que @herveaurel .

type: custom:button-card
entity: light.entree
name: Entrée
icon: mdi:lightbulb
styles:
  card:
    - border-radius: 15px
    - padding: 10px
  grid:
    - grid-template-areas: |
        "i n"
        "s s"
        "l l"
    - grid-template-columns: 40px 1fr
    - grid-template-rows: auto auto auto
  icon:
    - color: |
        [[[ return entity.state === 'on' ? 'yellow' : 'gray'; ]]]
    - size: 30px
  name:
    - font-size: 16px
    - font-weight: bold
    - color: white
    - align-self: start
    - justify-self: start
  state:
    - font-size: 14px
    - color: lightgray
    - align-self: start
    - justify-self: start
  custom_fields:
    temperature:
      - font-size: 14px
      - color: lightgray
      - align-self: end
      - justify-self: end
custom_fields:
  temperature: >
    [[[ return `${states['sensor.thermometre_entree_temperature'].state} °C`;
    ]]] 
tap_action:
  action: toggle
hold_action:
  action: more-info

Résultat :

J’ai également essayé avec les stack-in-card, mais ca ne donne toujours rien :

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: light.entree
        name: Entrée
        icon: mdi:lightbulb
        layout: icon_name_state
        styles:
          card:
            - border-radius: 15px
            - padding: 10px
          icon:
            - color: |
                [[[ return entity.state === 'on' ? 'yellow' : 'gray'; ]]]
            - size: 30px
          name:
            - color: white
            - font-size: 16px
            - font-weight: bold
          state:
            - color: lightgray
            - font-size: 14px
          grid:
            - grid-template-areas: |
                "i n"
                "s s"
            - grid-template-columns: 40px 1fr
            - grid-template-rows: auto auto
        tap_action:
          action: toggle
        hold_action:
          action: more-info
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        custom_fields:
          temperature: >
            [[[ return `${states['sensor.thermometre_entree_temperature'].state}
            °C`; ]]]
        styles:
          card:
            - background-color: transparent
            - box-shadow: none
          custom_fields:
            temperature:
              - color: lightgray
              - font-size: 14px
              - justify-self: start
        show_name: false
        show_icon: false
        show_state: false
      - type: custom:button-card
        custom_fields:
          door: >
            [[[ return states['binary_sensor.porte_entree_contact'].state ===
            'on' ? "🚪 Ouvert" : "🚪 Fermé"; ]]]
        styles:
          card:
            - background-color: transparent
            - box-shadow: none
          custom_fields:
            door:
              - color: lightgray
              - font-size: 14px
              - justify-self: start
        show_name: false
        show_icon: false
        show_state: false

Je suis preneur d’aide et de conseils

Merci

[BBE]

Regardes dans ma description… Il y a la manière dont je fais moi…

[herveaurel]

type: custom:stack-in-card
cards:
  - type: tile
    entity: light.entree_et_couloir
    tap_action:
      action: navigate
      navigation_path: /lovelace/Entrée
    icon_tap_action:
      action: more-info
  - type: heading
    icon: ""
    heading_style: title
    badges:
      - type: entity
        show_state: false
        show_icon: true
        entity: binary_sensor.porte_entree
        tap_action:
          action: more-info
        color: state
      - type: entity
        show_state: false
        show_icon: true
        entity: binary_sensor.mouv_couloir
        tap_action:
          action: more-info
        color: state
      - type: entity
        show_state: true
        show_icon: false
        entity: sensor.temp_couloir_rdc
        tap_action:
          action: more-info
        color: state
      - type: entity
        show_state: false
        show_icon: false
        entity: input_button.home
        tap_action:
          action: none
        color: state
grid_options:
  columns: 6
  rows: null

ASTUCE :
Afin de ne pas utiliser card_mod, je mets une entité quelconque en dernier, dans mon cas toujours ‹ input_button.home › , sans icone ni état ni nom, ce qui crée un espace afin que les entités ne soient pas collées au bord droit de la carte.
Le fait de mettre une entité avec un état (température), permet de créer un espace en bas de la carte.
Le tout sans card_mod ! Sinon les « sous boutons » sont archi collés au bords de la carte.

[BBE]

Pour le rendu de @herveaurel tout est dans la manière de définir les entités qu’il utilise…

Comme expliqué dans les quelques messages au dessus qui détaillent ses entités template…

Et pour comment customiser une carte en-tête ( heading) il faut juste lire l’article en début de ce fil…

[xtof78]

Excellente idée de d’avoir une entité « invisible » pour espacer du bord ! Je l’aurai appelé « spacer » ou un truc du style s’il n’a d’autres rôles que d’apporter du « vide » pour ces cartes.

[herveaurel]

Merci.
Je n’ai pas créé cette entité spécialement pour ca, j’utilise juste celle de mon bouton HOME que je mets en haut de mes onglets.
Dans les cartes pièces, cette entité ne sert a rien, sauf à créer un espace, car les lignes card-mod, ral le bol.

[BBE]

Bonjour à tous

Je viens de découvrir une petite astuce dans Chrome que je vous livre ici, pour tester sur PC vos dashboards mobiles et tablette:

1. Tapez F12

2. Tapez Ctrl-Shift-M ou appuyez sur le bouton « écran »
   

   

3. Sélectionnez votre équipement dans la liste ou tapez sa résolution
   

   

4. Testez votre dashboard en direct sur PC (grand écran, clavier, souris… pour des modifs plus confortables)…

Test tablette:

Test téléphone:

Bien sur on peut passer de portrait à paysage avec la petite icone:

[freetronic]

Hello,

ça fonctionne aussi sous firefox avec les mêmes raccourcis pour info

cdt

[xtof78]

Hello,

J’essaie de changer la couleur des icones de Tiles lorsque l’entité est activé, mais je n’y arrive pas :

Même dans le customize.yaml, ca ne change rien :

light.buanderie:
  icon_color: >
    {{ 'red' if is_state('light.buanderie', 'on') else 'gray' }}

Si vous avez des idées, je suis preneur

Merci.