🎹 [Mon Dashboard] - @Clemalex

Ajout de la maintenance du roborock (temps + bouton de reinitialsation)

Vraiment trĂšs chouette, Ă©purĂ© ! j’aime beaucoup !
Tes captures des « volets » et « capteurs » m’intĂ©resse. J’aime l’idĂ©e d’avoir plusieurs info sur la mĂȘme tuile ! ça Ă©vite un nombre important de tuile :smiley:

J’ai reussi Ă  le faire pour les caractĂ©ristiques de Pi, mais je n’arrive pas Ă  reproduire pour mes capteurs par exemple, j’aimerai rĂ©aliser ce que tu as fait pour ces derniers :grimacing:
J’ai des soucis au niveau des unitĂ©es par exemple 


A quoi sert le « cadena » dans la tuile garage ? Une sorte de code à taper pour rentrer sur la page ?

C’est une des options des la carte button-card qui empĂȘche dans mon cas l’ouverture accidentel du garage (il faut appuyer une premiĂšre fois sur le bouton pour enlever le cadena et une seconde fois pour activer l’action).

3 « J'aime »

Je teste mais j’ai un soucis au niveau de l’indentation
 tu l’intùgre ou exactement le bout de code ? à la fin ? au debut ?

Ouvre un fil de discussion en expliquant ce que tu veux :+1:

Ca permettra un meilleur rĂ©fĂ©rencement plutĂŽt qu’ici
 mais voici le code de mes boutons :

image image

Code de la carte (changement de couleur)
color: auto
color_type: icon
entity: cover.volet_rue_2
icon: 'mdi:chevron-down'
name: Descendre
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
styles:
  card:
    - border-radius: 10px
    - height: 75px
    - width: 75px
    - margin: 5px 5px 0px 11px
    - padding: 0px 0px
    - background-color: |
        [[[
          if (entity.attributes.current_position == '0') return 'var(--primary-background-inactive-color)';
          else return 'var(--primary-background-active-color)';
        ]]]
  grid:
    - position: relative
  icon:
    - position: absolute
    - left: 2px
    - top: '-15px'
    - color: |
        [[[
          if (entity.attributes.current_position == '0') return 'var(--grey-color)';
          else return 'var(--primary-color)';
        ]]]
  name:
    - position: absolute
    - left: 5px
    - bottom: 5px
    - font-variant: small-caps
    - font-size: 14px
    - color: |
        [[[
          if (entity.attributes.current_position == '0') return 'var(--grey-color)';
          else return 'var(--primary-color)';
        ]]]
tap_action:
  action: call-service
  service: cover.close_cover
  service_data:
    entity_id: cover.volet_rue_2
type: 'custom:button-card'





animate

Code de la carte (animation/couleur/changement d'icone)
color_type: card
custom_fields:
  battery: |
    [[[
     return `
       <span>
        <span style="color: var(--text-color-sensor);">
            ${entity.attributes.battery_level}%
        </span>
       </span>
       `
    ]]]
entity: binary_sensor.ouverture_fenetre_rue
hold_action:
  action: more-info
name: Rue
show_icon: true
show_last_changed: true
show_name: true
state:
  - color: var(--red-color)
    icon: 'mdi:door-open'
    styles:
      card:
        - border: var(--red-color)
        - animation: blink 0.7s ease infinite
      icon:
        - color: var(--white-color)
      label:
        - color: var(--white-color)
      name:
        - color: var(--white-color)
    value: 'on'
  - icon: 'mdi:door-closed'
    styles:
      card:
        - background-color: var(--primary-background-inactive-color)
        - border: var(--primary-background-inactive-color)
      icon:
        - color: var(--grey-color)
      label:
        - color: var(--grey-color)
      name:
        - color: var(--grey-color)
    value: 'off'
styles:
  card:
    - border-radius: 10px
    - height: 75px
    - width: 75px
    - margin: 5px 5px 0px 0px
    - padding: 0px 0px
  custom_fields:
    battery:
      - background-color: 'rgba(0, 0, 0, 0)'
      - position: absolute
      - right: 5%
      - top: 5%
      - font-size: 15px
      - line-height: 20px
      - '--text-color-sensor': |
          [[[
            if ( entity.state == 'on') return 'var(--white-color)';
            else if ( entity.attributes.battery_level < '10' ) return 'var(--red-color)';
            else if ( entity.attributes.battery_level < '20' ) return 'var(--orange-color)';
            else return 'var(--grey-color)';
          ]]]
  grid:
    - position: relative
  icon:
    - position: absolute
    - left: 2px
    - top: '-18px'
  label:
    - position: absolute
    - left: 5px
    - bottom: 5px
    - font-size: 12px
    - font-weight: bold
    - color: var(--primary-color)
  name:
    - position: absolute
    - left: 5px
    - bottom: 23px
    - font-variant: small-caps
    - color: var(--primary-color)
tap_action:
  action: more-info
type: 'custom:button-card'
1 « J'aime »

C’est marrant la façon dont tu Ă©cris ton code, de mettre le « type Â» de carte Ă  la fin

J’ouvre le fil quand j’ai un peu de temps, surement demain soir :sunglasses:

:no_mouth: c’est l’interface Lovelace qui le fait quand tu retourne sur l’édition
 (je suis en storage, pas en yaml) :wink:

C’est quoi le « storage » ?

Le mode par dĂ©faut : gestion des tableaux de bord par l’interface graphique :

https://www.home-assistant.io/lovelace/dashboards-and-views/

1 « J'aime »

qu’est ce qui justifie ce choix au juste ?
Dsl je fais un peu l’enfant :rofl: « pourquoi ?? », « parce que », « parce que quoi ? » :grimacing:

Quel choix ?

Pas de soucis, ca permet d’approfondir

Au contraire, j’aime bien
 :innocent:

Le choix d’ĂȘtre en storage plutĂŽt qu’en yaml ?

C’est plutĂŽt Ă  toi de me dire pourquoi t’es passĂ© en yaml :stuck_out_tongue_winking_eye:

:rofl:

Edit : @Pierre_Ma es-tu seulement en mode Yaml ?

Le mode yaml est fait pour structurer finement les tableaux de bord et permet lutilisation de modùle
 :innocent:

Si tu veux approfondir, regarde la configuration de @Sylvain_G prĂ©sente dans l’awesome list :

J’en ai aucune idĂ©e
 j’ai gardĂ© la configuration par default.
Il faut que j’approfondisse le sujet effectivement. Mais il faut que je me fasse un liste des prioritĂ©s ^^ je pars dans tout les sens lĂ  :sweat_smile:

Moi aussi au début
 :innocent:

Je me servais de la shopping list pour garder en mémoire ce que je voyais et voulais approfondir


TrĂšs bonne idĂ©e, je viens de l’installer !

Si une de mes enceintes diffuse de la musique (button-card + card-mod) :

animate

code de la carte
name: Sonorisation
show_name: true
icon: 'mdi:speaker'
styles:
  custom_fields:
    wave:
      - background-color: 'rgba(0, 0, 0, 0)'
      - position: absolute
      - right: 5%
      - top: 5%
      - font-size: 13px
      - line-height: 20px
      - display: |
          [[[
            if (states["input_boolean.test2"].state == 'on') return '';
            else return 'none';
          ]]] 
      - '--icon-color': |
          [[[
            if (states["input_boolean.test2"].state == 'on') return 'var(--mail-color)';
            else return 'var(--primary-color)';
          ]]]
  card:
    - border: 2px solid var(--primary-color)
    - border-radius: 10px
  icon:
    - color: var(--primary-color)
  name:
    - font-variant: small-caps
    - color: var(--primary-color)
custom_fields:
  wave: |
    [[[
     return `
       <div class="loader-container">
         <div class="loader-3">
          <div class="item-1"></div>
          <div class="item-2"></div>
          <div class="item-3"></div>
          <div class="item-4"></div>
          <div class="item-5"></div>
         </div>
       </div>`
    ]]]   
type: 'custom:button-card'
style: |
  .loader-3{
    width: 40px;
    height: 40px;
  }

  .loader-3 div {
    height: 100%;
    width: 3px;
    display: inline-block;
  }
  .loader-3 div .item-1{
    height: 50%;
  }
  .loader-3 .item-1 {
    animation: loader-3-first-div 1.2s infinite linear;
    background-color: red;
  }

  .loader-3 .item-2 {
    animation: loader-3-second-div 1.2s infinite linear;
    animation-delay: -1.1s;
    background-color: darkorange;

  }

  .loader-3 .item-3 {
    animation: loader-3-third-div 1.2s infinite linear;
    animation-delay: -1.0s;
    background-color: gold;

  }

  .loader-3 .item-4 {
    animation: loader-3-fourth-div 1.2s infinite linear;
    animation-delay: -0.9s;
    background-color: green;
  }

  .loader-3 .item-5 {
    animation: loader-3-last-div 1.2s infinite linear;
    animation-delay: -0.8s;
    background-color: DarkOrchid;
  }

  @keyframes loader-3-first-div {
    25%,75% {
      transform: scaleY(0.2);
    }
    0%,50%,100%{
      transform: scaleY(0.6);
    }
  }  
  @keyframes loader-3-second-div {
    25%,75% {
      transform: scaleY(0.4);
    }
    0%,50%,100%{
      transform: scaleY(1);
    }
  }  
  @keyframes loader-3-third-div {
    25%,75% {
      transform: scaleY(0.4);
    }
    0%,50%,100%{
      transform: scaleY(1);
    }
  }  
  @keyframes loader-3-fourth-div {
    25%,75% {
      transform: scaleY(0.4);
    }
    0%,50%,100%{
      transform: scaleY(1);
    }
  }  
  @keyframes loader-3-last-div {
    25%,75% {
      transform: scaleY(0.2);
    }
    0%,50%,100%{
      transform: scaleY(0.6);
    }
  }

Inspiré par https://codepen.io/ruslan_khomiak/pen/MbqWaK

4 « J'aime »

Toujours dans les animations :

Si le facteur est passĂ©, une automatisation met Ă  Vrai un boolĂ©en (l’animation de la porte se fait si une ouverture (porte,fenetre,garage,cagibi) est ouverte et n’est normalement pas la mĂȘme entitĂ© que l’entrĂ©e boolĂ©enne)

animate

Code de la carte
entity: input_boolean.test2
name: Ouvertures
show_name: true
state:
  - icon: 'mdi:door-open'
    value: 'on'
  - icon: 'mdi:door'
    value: 'off'
styles:
  custom_fields:
    courrier:
      - border-radius: 50%
      - position: absolute
      - right: 5%
      - top: 5%
      - font-size: 13px
      - line-height: 20px
      - display: |
          [[[
            if (states["input_boolean.test2"].state == 'on') return '';
            else return 'none';
          ]]] 
      - '--icon-color': |
          [[[
            if (states["input_boolean.test2"].state == 'on') return 'var(--mail-color)';
          ]]]
  card:
    - border-radius: 10px
    - border: 2px solid var(--primary-color)
  icon:
    - color: var(--primary-color)
  name:
    - font-variant: small-caps
    - color: var(--primary-color)
custom_fields:
  courrier: |
    [[[
     return `
     <ha-icon
       icon="mdi:mail"
       style="width: 30px; height: 30px; color: var(--icon-color);">
       </ha-icon>`
    ]]]   
type: 'custom:button-card'
style: |
  @keyframes pulsation {
    0% {
      box-shadow: var(--shadow-mail-color-hidden);
    }
    50% {
      transform: scale(1);
      box-shadow: var(--shadow-mail-color-hidden);
    }      
    25%,75% {
      transform: scale(1.2);
      box-shadow: var(--shadow-mail-color-visible);
    }    
    100% {
      box-shadow: var(--shadow-mail-color-hidden);
      transform: scale(1);
    }
  }
  #courrier{
   animation:
    {% if is_state('input_boolean.test2', 'on') %}
      pulsation 1.3s ease infinite
    {% else %}
      none
    {% endif %}
    ;

Les variables Ă  ajouter au thĂšme :

      mail-color: "rgba(247, 193, 57)"
      shadow-mail-color-visible: "0px 0px 0px 20px rgba(247, 193, 57, 0.3) inset, 0px 0px 0px 20px rgba(247, 193, 57, 0.3)"
      shadow-mail-color-hidden: "0px 0px 0px 20px transparent inset, 0px 0px 0px 20px 
1 « J'aime »

Tes boutons sont trĂšs bien fait et super pratiques. Beau travail!

1 « J'aime »