Bonjour @Cleya,
Je veux bien un exemple pour le changement de valeur à chaque appui sur le bouton (et donc le changement de valeur de l’input_select) pour plus de 2 modes.
Salut, je te fais ça dans la soirée.
1 « J'aime »
@Cleya, je suis avec intérêt, si un jour je veux pousser plus loin mon interface 
Bob
La réponse pour le input_select est dans le premier post
tap_action:
action: call-service
service: input_select.select_next
target:
entity_id:
- input_select.ton_entity
data:
cycle: true
Voilà un exemple qui fonctionne avec un input_select de quatre choix :
Le code :
type: custom:button-card
entity: input_select.essai_romu044_3
name: 'Mode :'
label: |
[[[
if (states['input_select.essai_romu044_3'].state === 'manuel') {
return 'Manuel';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_travailles') {
return 'Automatique<br>Jours travaillés';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_chomes') {
return 'Automatique<br>Jours chômés';
} else if (states['input_select.essai_romu044_3'].state === 'auto_conges') {
return 'Automatique<br>Congés';
}
]]]
show_name: true
show_label: true
show_icon: false
custom_fields:
bouton_1:
card:
type: custom:button-card
aspect_ratio: 1/1
icon: |
[[[
if (states['input_select.essai_romu044_3'].state === 'manuel') {
return 'mdi:alpha-m-box';
} else {
return 'mdi:alpha-a-box';
}
]]]
styles:
card:
- width: 100px
- height: 100px
- background-color: rgba(0,0,0,0.8)
- border: 1px inset rgba(211,211,211,0.5)
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- '--mdc-ripple-press-opacity': 0.12
icon:
- width: 100%
- color: |
[[[
if (states['input_select.essai_romu044_3'].state === 'manuel') {
return 'rgba(0,255,0,1.0)';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_travailles') {
return 'rgba(255,255,0,1.0)';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_chomes') {
return 'rgba(255,128,0,1.0)';
} else if (states['input_select.essai_romu044_3'].state === 'auto_conges') {
return 'rgba(255,0,0,1.0)';
}
]]]
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.essai_romu044_3
styles:
card:
- height: 180px
- width: 122px
- border-radius: 10px
- font-size: |
[[[
if (states['input_select.essai_romu044_3'].state === 'manuel') {
return '16px';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_travailles') {
return '10px';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_chomes') {
return '10px';
} else if (states['input_select.essai_romu044_3'].state === 'auto_conges') {
return '12px';
}
]]]
- font-weight: bold
- padding: 10px
- background-color: rgba(0,0,0,0.8)
- border: 2px outset rgba(32,32,32,0.5)
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- '--mdc-ripple-press-opacity': 0
name:
- color: rgba(255,255,255,0.8)
- left: 10px
- align-self: start
- justify-self: start
- font-size: 16px
- margin-top: '-5px'
label:
- color: rgba(255,255,255,0.8)
- margin-top: 50px
custom_fields:
bouton_1:
- position: absolute
- top: 30px
- left: 10px
tap_action:
action: none
hold_action:
action: none
J’avais essayé un truc qui ressemblait à ça mais sans résultat.
Je vais le refaire avec ce code.
Merci les gars.
C’est pour ça que je te fais un exemple qui fonctionne 
Toi tu fais (bois) du Canada Dry, moi pas 
Ca ressemble à un bouton, c'est carré comme un bouton, mais ce n'est pas un bouton... (qui fonctionne)
3 « J'aime »
Hello @Cleya
Ça fonctionne bien, mais 
Est-il possible de mettre l’intitulé ci-dessous « Manuel »
comme ceci :
j’ai bien vu que c’était le label mais je n’arrive pas à le déplacer.
En fait pour mettre tous les Modes sur la même carte j’aimerais arriver à cela (avec le nom « présence » et « volet » en dessous ou au dessus de la carte) :
Le code de la carte de gauche c’est celui que tu as fait plus haut et celle de droite eh bien c’est toi aussi 
avec le input_bolean
A partir de maintenant, les modifications sont payantes : 1 bière pour 20 lignes de code 
2 « J'aime »
avec plaisir, mais t’as vite fait d’arriver à 200 lignes, viens avec un chauffeur
Le mieux, c’est que tu apprennes comment faire (en tous cas c’est mieux pour mon foie, même si c’est un des derniers trucs qui fonctionne à peu près bien chez moi).
Effectivement, c’est bien le label qu’il faut déplacer mais tu n’y arrives pas car c’est le label de la carte support. Il faut créer un label pour le custom_field, ça ne devrait pas être trop difficile car tu as déjà un exemple avec un custom_field ou le nom (name) indique le mode. Là j’ai mis un nom et un label sur la carte principale mais il n’est pas utile d’avoir les deux sur le custom_field (le nom suffit).
112 lignes,pour moi ça fait 6 bières, tu es OK avec ça ?
type: custom:button-card
name: Mode
custom_fields:
bouton_1:
card:
type: custom:button-card
aspect_ratio: 1/1
entity: input_select.essai_romu044_3
name: |
[[[
if (states['input_select.essai_romu044_3'].state === 'manuel') {
return '<br>Manuel';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_travailles') {
return 'Automatique<br>Jours travaillés';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_chomes') {
return 'Automatique<br>Jours chômés';
} else if (states['input_select.essai_romu044_3'].state === 'auto_conges') {
return 'Automatique<br>Congés';
}
]]]
icon: |
[[[
if (states['input_select.essai_romu044_3'].state === 'manuel') {
return 'mdi:alpha-m-box';
} else {
return 'mdi:alpha-a-box';
}
]]]
styles:
card:
- background-color: rgba(0,0,0,0.8)
- border: 1px inset rgba(211,211,211,0.5)
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- width: 100px
- height: 100px
icon:
- width: 60%
- color: |
[[[
if (states['input_select.essai_romu044_3'].state === 'manuel') {
return 'rgba(0,255,0,1.0)';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_travailles') {
return 'rgba(255,255,0,1.0)';
} else if (states['input_select.essai_romu044_3'].state === 'auto_jours_chomes') {
return 'rgba(255,128,0,1.0)';
} else if (states['input_select.essai_romu044_3'].state === 'auto_conges') {
return 'rgba(255,0,0,1.0)';
}
]]]
name:
- color: rgba(255,255,255,0.8)
- font-size: 0.7em
- padding-bottom: 4px
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.essai_romu044_3
bouton_2:
card:
type: custom:button-card
aspect_ratio: 1/1
entity: input_boolean.essai_romu044_2
name: Absent
icon: mdi:alpha-a-box
state:
- operator: '=='
- value: 'on'
icon: mdi:alpha-p-box
name: Présent
styles:
icon:
- color: rgba(0,0,255,1.0)
styles:
card:
- background-color: rgba(0,0,0,0.8)
- border: 1px inset rgba(211,211,211,0.5)
- width: 100px
- height: 100px
icon:
- width: 100%
- color: rgba(255,0,0,1.0)
name:
- color: rgba(255,255,255,0.8)
- font-size: 0.8em
- padding-bottom: 4px
tap_action:
action: toggle
styles:
card:
- width: 230px
- height: 140px
- border: 2px outset rgba(32,32,32,0.5)
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- background-color: rgba(0,0,0,0.8)
name:
- font-size: 0.9em
- font-weight: bold
- justify-self: start
- align-self: start
- color: rgba(255,255,255,0.8)
- margin-top: '-3px'
- padding-left: 10px
custom_fields:
bouton_1:
- position: absolute
- top: 28px
- left: 10px
bouton_2:
- position: absolute
- top: 28px
- left: 115px
Salut @Cleya ,
Apprendre, facile à dire , j’ai commencé avec du Basic, puis essayé du VB et depuis du Html, Perl et Python sans jamais arriver à assimiler (et c’est pas en vieillissant que ça va s’arranger) , c’est pas que je ne veux pas m’y mettre, mais ça ne rentre pas.
Bref, 6 
c’est ça, 18h00 au bar du coin ?
Bah, moi je me suis arrêté au VB.Net, ça fini par rentrer à coup de masse (ça file juste un peu mal au crâne 
).
Faut voir où il est le bar du coin
Sinon, tu as compris d’où venait le problème ?
Salut, @Bob tu verras le coût plus bas sur ce post 
N’hésite pas à pousser ton interface
Oui je pense, je bricole et te redis, Merci.
, on invitera Merdum, à trois, on va repartir bancals
Voilà ce que j’ai réussi à faire :
mais je ne trouve pas comment modifier la taille de la police sous l’icone présence fille.
type: custom:button-card
name: Modes_2
custom_fields:
zone1:
card:
type: custom:button-card
name: Présence
custom_fields:
zone1bouton1:
card:
type: custom:button-card
aspect_ratio: 1/1
entity: input_boolean.presence
name: Absent
icon: mdi:alpha-a-box
state:
- operator: '=='
- value: 'on'
icon: mdi:alpha-p-box
name: Présent
styles:
icon:
- color: rgba(0,128,0,1.0)
styles:
card:
- background-color: rgba(0,0,0,0.8)
- border: 2px inset rgba(211,211,211,0.5)
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- width: 60px
- height: 60px
icon:
- width: 100%
- color: rgba(255,255,0,1.0)
name:
- color: rgba(255,255,255,0.8)
- font-size: 0.6em
- padding-bottom: 4px
tap_action:
action: toggle
styles:
name:
- font-size: 0.7em
- justify-self: null
- align-self: start
- padding: 10px
- color: rgba(255,255,255,1.0)
card:
- background-color: rgba(17,17,17,1.0)
- box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
- border: 0px rgba(211,211,211,1.0) outset
- width: 72px
- height: 105px
custom_fields:
zone1bouton1:
- position: absolute
- top: 38px
- left: 5px
tap_action:
action: none
hold_action:
action: none
zone2:
card:
type: custom:button-card
name: Prés. Filles
custom_fields:
zone2bouton1:
card:
type: custom:button-card
aspect_ratio: 1/1
name: |
[[[
if (states['input_select.presence_filles'].state === 'Aucune') {
return 'Aucune';
} else if (states['input_select.presence_filles'].state === 'germ') {
return 'germ';
} else if (states['input_select.presence_filles'].state === 'pat') {
return 'pat';
} else if (states['input_select.presence_filles'].state === 'les 2') {
return 'Les 2';
}
]]]
icon: |
[[[
if (states['input_select.presence_filles'].state === 'Aucune') {
return 'mdi:alpha-a-box';
} else if (states['input_select.presence_filles'].state === 'germ') {
return 'mdi:alpha-g-box';
} else if (states['input_select.presence_filles'].state === 'pat') {
return 'mdi:alpha-p-box';
} else if (states['input_select.presence_filles'].state === 'les 2') {
return 'mdi:human-female-female';
}
]]]
styles:
card:
- width: 60px
- height: 60px
- background-color: rgba(0,0,0,0.8)
- border: 2px inset rgba(211,211,211,0.5)
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- '--mdc-ripple-press-opacity': 0.12
icon:
- width: 100%
- color: |
[[[
if (states['input_select.presence_filles'].state === 'Aucune') {
return 'rgba(255,0,0,1.0)';
} else if (states['input_select.presence_filles'].state === 'Germ') {
return 'rgba(255,255,0,1.0)';
} else if (states['input_select.presence_filles'].state === 'pat') {
return 'rgba(255,128,0,1.0)';
} else if (states['input_select.presence_filles'].state === 'les 2') {
return 'rgba(0,128,0,1.0)';
}
]]]
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.presence_filles
styles:
name:
- font-size: 0.7em
- justify-self: null
- align-self: start
- padding: 10px
- color: rgba(255,255,255,1.0)
card:
- background-color: rgba(17,17,17,1.0)
- box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
- border: 0px rgba(211,211,211,1.0) outset
- width: 72px
- height: 105px
custom_fields:
zone2bouton1:
- position: absolute
- top: 38px
- left: 5px
tap_action:
action: none
hold_action:
action: none
zone3:
card:
type: custom:button-card
name: Volets
custom_fields:
zone3bouton1:
card:
type: custom:button-card
aspect_ratio: 1/1
entity: input_boolean.mode_volets
name: Manuel
icon: mdi:alpha-m-box
state:
- operator: '=='
- value: 'on'
icon: mdi:alpha-a-box
name: Automatique
styles:
icon:
- color: rgba(0,128,0,1.0)
styles:
card:
- background-color: rgba(0,0,0,0.8)
- border: 2px inset rgba(211,211,211,0.5)
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
- width: 60px
- height: 60px
icon:
- width: 100%
- color: rgba(255,255,0,1.0)
name:
- color: rgba(255,255,255,0.8)
- font-size: 0.5em
- padding-bottom: 6px
tap_action:
action: toggle
styles:
name:
- font-size: 0.7em
- justify-self: null
- align-self: start
- padding: 10px
- color: rgba(255,255,255,1.0)
card:
- background-color: rgba(17,17,17,1.0)
- box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
- border: 0px rgba(211,211,211,1.0) outset
- width: 72px
- height: 105px
custom_fields:
zone3bouton1:
- position: absolute
- top: 38px
- left: 5px
tap_action:
action: none
hold_action:
action: none
tap_action:
action: none
hold_action:
action: none
styles:
card:
- box-shadow: 0px 0px 5px 1px
- background-color: rgba(32,32,32,0.9)
- border: 1px rgba(211,211,211,1.0) outset
- width: 360px
- height: 180px
name:
- font-size: 1.4em
- color: rgba(255,255,255,1.0)
- align-self: start
- justify-self: start
- padding-top: 0px
- padding-left: 20px
custom_fields:
zone1:
- position: absolute
- top: 50px
- left: 10px
zone2:
- position: absolute
- top: 50px
- left: 80px
zone3:
- position: absolute
- top: 50px
- left: 150px
J’ai trouvé et modifié pour les 2 autres, mais là je ne vois pas.
@Cleya , il y a le double de lignes
Dans le « styles: » de zone2bouton1
tu peux soit définir le font-size de la carte (du custom_fields) soit le définir en ajoutant « name: » puis « - font-size: 0.7em » par exemple.
Impecc, j’ai ajouté padding-bottom pour que l’icone soit comme les 2 autres
styles:
card:
- font-size: 0.6em
- padding-bottom: 6px
Merci