Merci pour la rĂ©ponse, câest parfait
Hello,
Je deterre un peux.
@Clemalex Possible dâavoir la carte avec le thermostat?
Merci dâavance!
Quelles cartes exactement ?
celle-lĂ
question subsidiaire :
Jâai fait une carte pour un groupe de lumiĂšre :
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 tu peux déjà aller voir par ici :
Super merci, je me penche la dessusâŠ
Et la carte thermostat?
Merci!
en fait la réponse est là .
merci!
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
Jâaurais besoins de tes lumiĂšres
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
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
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Ă© .
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 ?
Oui normalement câest ce que jâavais avant mais chez moi je nâai plus les barres de couleur 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Ă© pour que cela fonctionne il faut installer aussi card-mod
Désole de vous avoir dérangé