ces une samsung donc les info viennent de smartthings de chez samsung je suis arrivé a mettre les watts de consommation et la type de cycle mais je n’arrive pas a régler l’affichage sur mon smartphone la machine est toute carré et aplatie.
Salut,
postes ton code en utilsant la balise de mise en forme (</>) et dis moi quel est la résolution de ton smartphone. Postes éventuellement une capture d’écran du téléphone.
houla le code ca va aller mais le smartphone je ne sais que te dire que ces un s22 et j’utilise l’app compagnion.
type: custom:button-card
custom_fields:
tambour:
card:
type: custom:button-card
entity: sensor.lave_linge_washer_machine_state
show_icon: false
show_name: false
styles:
card:
- width: 110px
- height: 110px
- border-radius: 50%
- background-size: cover
- background-position: center
- background-color: rgba(28,28,28,0.0)
state:
- value: run
styles:
card:
- background-image: url("/local/images/tambour-plein.png")
- animation: rotate 2s linear infinite
extra_styles: |
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
power: |
[[[
return states['sensor.lave_linge_energy'] && states['sensor.lave_linge_power'].state
? states['sensor.lave_linge_energy'].state + ' W'
: '0 W';
]]]
remaining_time: |
[[[
return states['sensor.lave_linge_remaining_time'] && states['sensor.lave_linge_remaining_time'].state
? states['sensor.lave_linge_remaining_time'].state + ' min'
: 'N/A';
]]]
cycle: |
[[[
return states['sensor.lave_linge_washer_job_state'] && states['sensor.lave_linge_washer_job_state'].state
? states['sensor.lave_linge_washer_job_state'].state
: 'Cycle inconnu';
]]]
power_button:
card:
type: custom:button-card
icon: mdi:power
entity: switch.lave_linge
show_name: false
tap_action:
action: toggle
styles:
card:
- background-color: transparent
- border: none
- box-shadow: none
- width: 40px
- height: 40px
- position: absolute
- bottom: 220px
- right: 3px
icon:
- color: |
[[[
return states['switch.lave_linge'].state === 'on'
? '#ff0000' // Rouge si allumé
: '#00008B'; // Bleu si éteint
]]]
- width: 75%
- height: 75%
styles:
card:
- background: >-
linear-gradient(20deg, rgba(0,0,0,0.0), rgba(0,0,0,0.3)),
url("/local/images/lave-linge.png")
- width: 300px
- height: 300px
- background-size: cover
- background-position: center
- background-color: transparent
custom_fields:
tambour:
- position: absolute
- top: 82px
- left: 55px
power:
- position: absolute
- top: 90px
- left: 86%
- transform: translateX(-60%)
- font-size: 16px
- color: "#00008B"
- font-weight: bold
remaining_time:
- position: absolute
- top: 150px
- left: 86%
- transform: translateX(-60%)
- font-size: 16px
- color: "#00008B"
- font-weight: bold
- border-radius: 5%
cycle:
- position: absolute
- top: 210px
- left: 86%
- transform: translateX(-60%)
- font-size: 14px
- font-weight: bold
- color: "#00008B"
- text-transform: uppercase
power_button:
- position: absolute
- bottom: 20px
- right: 20px
Là tu as déjà les problèmes de codage de ChatGPT 
Pas tout à fait au point l’IA.
J’essaie de trouver la résolution de ton téléphone et je regarde ce qu’y est faisable.
ouais on s’aide comme on peut mais au moins j’apprend ces le principal 
C’était pas une critique, juste un constat 
Tu as ceci qui te permet de tester l’affichage sur chrome en fonction de ton smartphone. Si tu veux, installe l’extension et fais une capture d’écran.
Chez moi, l’aspect de la machine reste identique même si la carte est trop large et que le bouton ne s’affiche pas entièrement :
Résolution du viewport (règles CSS)
C’est la résolution qui intéresse le plus les designers et les développeurs car elle conditionne les breakpoints et la définition des media queries. En général on ne parle que de cette résolution.
Concernant Samsung Galaxy S22 (2022) elle est de:
- 360 pixels en largeur (width)
- 780 pixels en hauteur (height)
la hauteur est indicative car le navigateur Safari, Chrome, etc.. réduit la zone visible
Ben elle est pas aplatie, ta machine là. Tu peux augmenter la taille de la carte support, à priori jusqu’à 360 px (peut-être un peu moins) de façon à ce que la carte fasse la même largeur que les deux cartes en-dessous
oui je vais régler sa, merci pour le soutien, je sais que l’IA ces pas top mais quand on débute sa aide quand même la carte est fonctionnelle en tout cas. il y a tellement de chose a connaitre que ces vraiment pas simple. chacun sont métier comme on dit 
Simplement pour féliciter le travail. Je suis en train de me pencher sur mon futur dashboard et ayant une machine à laver et un sèche linge connectés, je souhaite les faire remonter dans HA.
Après je ne sais pas encore ce que je recherche car pour moi, lancer à distance une machine n’a que peu d’intérêt vu qu’il faut tout de même y mettre le linge et les produits. Du coup, je programme avec éventuellement un délai avant lancement mais directement sur le tableau de la machine. L’idée serait donc plus d’avoir une notification quand le travail est terminé mais rien que pour la belle carte animée réalisée et commentée avec précision, je voulais souligner le travail !