🎹 [Mon Dashboard] - @Clemalex

Merci pour la rĂ©ponse, c’est parfait :+1:

Hello,

Je deterre un peux.

@Clemalex Possible d’avoir la carte avec le thermostat?

Merci d’avance!

Quelles cartes exactement ?

celle-lĂ 

image

question subsidiaire :

J’ai fait une carte pour un groupe de lumiùre :

image

le code

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: lumiĂšres
    entities:
      - type: custom:hui-horizontal-stack-card
        cards:
          - type: custom:mushroom-light-card
            entity: light.yeelight_color_0x7e10610
            fill_container: false
            primary_info: name
            secondary_info: state
            icon_type: icon
            use_light_color: true
            show_brightness_control: true
            show_color_temp_control: true
            show_color_control: true
            collapsible_controls: false
            name: Yeelight 3
            card_mod:
              style: |
                ha-card {
                        background: rgb(46, 64, 83);
                        box-shadow: none;
                }
          - type: light
            entity: light.yeelight_color_0x7e3f01a

Ca fonctionne mais je souhaiterai ajouter un message uniquement si une des lumiÚres est allumée; avec un code du style

type: custom:mushroom-title-card
title: |
  Hello


  En ce moment {{ states.light | selectattr('state','eq','on') | list | count }}
  lumiÚres sont allumées!
alignment: center

une petite idée?

Merci!

C’est exactement le mĂȘme principe qu’ici :

Ouvre un sujet dédié pour cela :+1:tu peux déjà aller voir par ici :

Super merci, je me penche la dessus


Et la carte thermostat? :pray:

Merci!

en fait la réponse est là.
merci!

1 « J'aime »

tu peux regarder la j’ai suivi a la lettre et ca marche nickel
https://www.youtube.com/watch?v=dGoXLjy6z2c&list=PL8HXksRKFtKso7AyRvKKiwfFXGil9pbTJ&index=1

Bonsoir Clemalex,

Mes meilleurs vƓux pour 2024 :champagne:

J’aurais besoins de tes lumiùres :shushing_face:

J’utilisais ta carte sonorisation et depuis quelques temps je n’ai plus les barres d’animation.

Est=ce qu’il y a quelque chose qui a Ă©tĂ© modifiĂ© suite Ă  toutes les mises aĂ  jour ?

Est=ce que cela fonctionne toujours chez toi ?

Bien cordialement

Bonjour @foxbru ,
Jette un coup d’Ɠil sur ce lien il y a des changements dans card mod donc il faut adapter le code de ta carte

1 « J'aime »

Bonjour

Merci pour ta rĂ©action mais je n’utilise pas la card-mod.
Voici mon code :

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);
    }
  }
name: Bureau
size: 50%
show_name: true
icon: mdi:speaker
styles:
  custom_fields:
    wave:
      - background-color: rgba(0, 0, 0, 0)
      - position: absolute
      - right: 11%
      - top: 5%
      - font-size: 10px
      - line-height: 20px
      - display: |
          [[[
            if (states["media_player.bureau"].state == 'playing') return '';
            else return 'none';
          ]]] 
      - '--icon-color': |
          [[[
            if (states["media_player.bureau"].state == 'paused') return 'var(--mail-color)';
            else return 'var(--primary-color)';
          ]]]
  card:
    - border: 2px solid orange
    - font-size: 14px
    - width: 80px
    - height: 80px
    - border-radius: 10px
  icon:
    - color: orange
  name:
    - font-variant: small-caps
    - color: orange
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>`
    ]]]   

Salut @foxbru

Pourtant, si tu corriges comme suit, je pense que ça devrait mieux fonctionner :wink:

type: custom:button-card
card_mod:
  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);
      }
    }
name: Bureau
size: 50%
show_name: true
icon: mdi:speaker
styles:
  custom_fields:
    wave:
      - background-color: rgba(0, 0, 0, 0)
      - position: absolute
      - right: 11%
      - top: 5%
      - font-size: 10px
      - line-height: 20px
      - display: |
          [[[
            if (states["media_player.bureau"].state == 'playing') return '';
            else return 'none';
          ]]] 
      - '--icon-color': |
          [[[
            if (states["media_player.bureau"].state == 'paused') return 'var(--mail-color)';
            else return 'var(--primary-color)';
          ]]]
  card:
    - border: 2px solid orange
    - font-size: 14px
    - width: 80px
    - height: 80px
    - border-radius: 10px
  icon:
    - color: orange
  name:
    - font-variant: small-caps
    - color: orange
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>`
    ]]]

Bonjour,
Non j’ai dĂ©jĂ  modifiĂ© cela mais cela n’arien changĂ© :smiling_face_with_tear:.

J’ai collĂ© ton code mais cela ne change rien 


type: custom:button-card
card_mod:
  style: |
    .loader-3{
      width: 40px;

Ah, c’est pas censĂ© donner ce rendu ?

plex

1 « J'aime »

Oui normalement c’est ce que j’avais avant mais chez moi je n’ai plus les barres de couleur :joy: je ne comprends pas 


T’as essayĂ© de vider le cache du navigateur ?

oui c’est pareil mĂȘme dans un autre navigateur 
 c’est vraiment Ă©trange

C’est bon j’ai trouvĂ© :innocent: pour que cela fonctionne il faut installer aussi card-mod :face_with_spiral_eyes:

Désole de vous avoir dérangé :confused:

1 « J'aime »