Bonjour,
voila je voudrais passer mes boutons sur buttom card
mais j’ai un soucis je voudrais retrouver l’image de l’entité que j’avais avant.
ainsi que les infos secondaire
j’arrive pas a trouver ce que je dois mettre
merci a vous
merci a vous
Salut,
pour afficher l’image de l’entité.
show_entity_picture: true
show_last_changed: true
type: custom:button-card
entity: person.warcozes
show_state: true
show_last_changed: true
show_entity_picture: true
size: 15%
styles:
icon:
- border-radius: 50px
merci et pour avoir une taille de texte différente sur les trois ligne ?
type: custom:button-card
entity: person.warcozes
show_state: true
show_last_changed: true
show_entity_picture: true
size: 15%
styles:
name:
- font-size: 18px
state:
- font-size: 14px
label:
- font-size: 10px
icon:
- border-radius: 50px
merci
j’ai un deuxième soucis avec une autre card l’entité ne fonctionne pas lors du clic
et ma deuxième ligne avec le code d’etat cree une erreure pK
type: custom:button-card
entity: light.maison
name: Maison
state: >-
{{ states('sensor.sonde_salle_a_manger_temperature')|float(0) |round(0) }}°C |
{{ states('sensor.sonde_salle_a_manger_humidite')|float(0) |round(0) }}% | {{
states('sensor.qualite_air_pourcentage')|float(0) |round(0) }}%
icon: mdi:home
size: 50%
color: blue
styles:
icon:
- transform: rotate(20deg)
- left: 25%
- top: 20%
- color: gray
- opacity: 0.4
name:
- color: blue
- top: 12%
- left: 5%
- font-size: 120%
- font-weight: bold
- position: absolute
state:
- color: gray
- top: 35%
- left: 5%
- font-size: 100%
- position: absolute
tap_action:
action: navigate
navigation_path: /dashboard-pixel/lumieres
hold_action:
action: toogle
saisissez ou collez du code ici
pourtant, le tap_action ( 1 click ) est bien configurer.
Ca fonctionne pas comme ca, t’es pas sur mushroom template.
state: >-
{{ states('sensor.sonde_salle_a_manger_temperature')|float(0) |round(0) }}°C |
{{ states('sensor.sonde_salle_a_manger_humidite')|float(0) |round(0) }}% | {{
states('sensor.qualite_air_pourcentage')|float(0) |round(0) }}%
exemple:
state_display: |
[[[ return `${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C'
+ `<br> ${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C'
+ `<br> ${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C';
]]]
state_display: |
[[[ return `${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C'
+ ` ${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C'
+ ` ${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C';
]]]
state_display: |
[[[ return `${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C'
+ ` | ${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C'
+ ` | ${parseFloat(states['sensor.temperature_humidity_sensor_exterieur_av_temperature'].state).toFixed(0)}` + ' °C';
]]]
merci tu es un chef
c’est possible de rajouter des icones la ou j’ai les croix avec buttom card ou pas , j’ai beau chercher je suis un peu perdu
type: custom:button-card
entity: light.maison
name: Maison
show_state: true
state_display: >
[[[ return
`${parseFloat(states['sensor.sonde_salle_a_manger_temperature'].state).toFixed(0)}`
+ ' °C'
+ ` |
${parseFloat(states['sensor.sonde_salle_a_manger_humidite'].state).toFixed(0)}`
+ ' °C'
+ ` |
${parseFloat(states['sensor.qualite_air_pourcentage'].state).toFixed(0)}` + '
°C';
]]]
icon: mdi:home
size: 50%
state:
- value: 'on'
color: yellow
- value: 'off'
color: blue
- opacity: 0.4
styles:
icon:
- transform: rotate(20deg)
- left: 2%
- top: 25%
name:
- color: blue
- top: 5%
- left: 5%
- font-size: 20px
- font-weight: bold
- position: absolute
state:
- color: gray
- top: 25%
- left: 5%
- font-size: 14px
- position: absolute
card:
- height: 120px
tap_action:
action: navigate
navigation_path: /dashboard-pixel/lumieres
hold_action:
action: toggle
Oui, c’est possible avec un custom field.
Ta plein de sujets.
je dois pas etre assez futé je’ai beau essayé de comprendre les codes donnés dans les sujets en plus il y a les histoires de template … je comprends pas je dois pas regarder sous le bon angle.
type: custom:button-card
entity: light.maison
name: Maison
show_state: true
state_display: >
[[[ return
`${parseFloat(states['sensor.lywsd03mmc_0945_temperature'].state).toFixed(0)}`
+ ' °C'
+ ` |
${parseFloat(states['sensor.lywsd03mmc_0945_temperature'].state).toFixed(0)}`
+ ' °C'
+ ` |
${parseFloat(states['sensor.lywsd03mmc_0945_temperature'].state).toFixed(0)}`
+ ' °C';
]]]
icon: mdi:home
size: 50%
state:
- value: 'on'
color: yellow
- value: 'off'
color: blue
- opacity: 0.4
styles:
icon:
- transform: rotate(20deg)
- position: absolute
- left: '-15%'
- top: 25%
name:
- color: blue
- top: 5%
- left: 5%
- font-size: 20px
- font-weight: bold
- position: absolute
state:
- color: gray
- top: 25%
- left: 5%
- font-size: 14px
- position: absolute
card:
- height: 120px
custom_fields:
icone1:
- top: 46%
- left: 18%
- width: 30px
- position: absolute
icone2:
- top: 46%
- left: 25%
- width: 30px
- position: absolute
tap_action:
action: navigate
navigation_path: /dashboard-pixel/lumieres
hold_action:
action: toggle
custom_fields:
icone1:
card:
type: custom:button-card
icon: mdi:cellphone-marker
show_name: false
color: green
size: 80%
icone2:
card:
type: custom:button-card
icon: mdi:cellphone-marker
show_name: false
color: red
size: 80%
Tu ajoutes custom_field: au même niveau que name, entity.
Tu choisis un nom que tu vas donner au custom_filed ( ex icone1 ) :
custom_fields:
icone1:
card:
type: custom:button-card
icon: mdi:cellphone-marker
show_name: false
color: green
size: 80%
Il faut ensuite déclarer ce custom_field dans styles pour le positionnement.
styles:
custom_fields:
icone1:
- top: 46%
- left: 18%
- width: 30px
- position: absolute
La doc pour t’aider, tu as des explication et exemple pour le custom_field.
merci je commence a y voir plus clair
quelqu’un peut me dire comment retirer le contour des petites icones SVP
j’ai essayé différentes méthodes mais ca ne change rien
Salut,
Il faut ajouter border: none dans le style du custom_fied ou tu ne veux pas le contour.
exemple:
styles:
custom_fields:
icone1:
- border: none
custom_fields:
volet:
- border: none
- top: 75%
- left: 77%
- width: 30px
- position: absolute
dsl deja essayé mais ca fonction pas
- box-shadow: none ?
non plus ca fonctionne pas
Salut,
Pas tout à fait la même chose, mais j’avais le même genre de problème avec un button card dans un custom_field d’une button_card (soit une button_card imbriquée dans une button_card)
Je n’ai pas trouvé d’autre solution que d’utilisé card_mod
Le code :
custom_fields:
relance:
card:
type: custom:button-card
entity: script.manu_extract_sdb
icon: mdi:fan-clock
card_mod:
style: |
ha-card {
border: none;
background: none;
}
show_name: false
size: 30%
hold_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.manu_extract_sdb
Le code complet de la carte :
type: custom:button-card
entity: switch.module_extracteur_sdb_tuya
icon: mdi:fan
name: Extracteur SDB
aspect_ratio: 2/1
styles:
name:
- font-weight: bold
- position: absolute
- left: 10%
- top: 10%
- animation: |
[[[
if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "blink 1s infinite";
]]]
- color: |
[[[
if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "red";
return "gray";
]]]
img_cell:
- justify-content: start
- align-items: start
- margin: none
- align-self: stretch
- text-align: stretch
- position: absolute
- left: 10%
- top: 22%
- width: 60%
- height: 60%
icon:
- animation: |
[[[
if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "rotating 0.5s linear infinite";
]]]
- color: |
[[[
if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "red";
return "gray";
]]]
custom_fields:
humidity:
- position: absolute
- left: 5%
- top: 85%
tempsrelance:
- position: absolute
- left: 50%
- top: 20%
relance:
- left: 40%
- top: 40%
custom_fields:
tempsrelance:
card:
type: custom:slider-entity-row
entity: input_number.temps_relance_extract_sdb
full_row: true
hide_state: false
overflow: unset
relance:
card:
type: custom:button-card
entity: script.manu_extract_sdb
icon: mdi:fan-clock
card_mod:
style: |
ha-card {
border: none;
background: none;
}
show_name: false
size: 30%
hold_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.manu_extract_sdb
humidity: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 25px; height: 25px; color: yellow;">
</ha-icon><span> ${states['sensor.sonde_temp_humid_sdb_tuya_humidity'].state} % vs ${states['sensor.sonde_temp_humid_samtjrs_tuya_humidity'].state} %</span>`
]]]
Salut,
j’ai trouvé la solution
ajouter le style à la carte du custom_fileds et supprimer la bordure sur la carte :
custom_fields:
icone1:
card:
type: custom:button-card
icon: mdi:cellphone-marker
show_name: false
color: red
size: 80%
styles:
card:
- border: none
1 « J'aime »
Les custom_fields basés sur des custom:button-cards fonctionnent exactement comme les custom:button-cards. Les styles, les animations, les actions, etc. fonctionnent donc de la même manière.
merci c’est plus sympa comme ca!!
1 « J'aime »