🎨 [Mon Dashboard] - @Clemalex

Quelle carte utilises-tu pour afficher/cacher les batteries à la manière d’un menu déroulant ?
Je n’avais pas vu ça encore, c’est pratique

Salut @mat4444,

J’utilise fold-entity-row :

1 « J'aime »

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

1 « 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 :

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

2 « J'aime »