Bonjour,
je n’arrive pas a crée une carte de ce type,
j’ai essayer avec mushroom , button-card mais je n’ai rien qui graphiquement ce rapproche de ça
qui pourrait m’aiguiller au niveau du code ?
merci d’avance
Bonjour,
on dirait du button-card, avec du bar-card et mushroom chip.
il faut utiliser button-card et des custom_field. Mais ce n’est pas facile a faire.
un tuto fait par @Cleya :
Bonjour,
La carte est assez simple à reproduire avec custom:button-card (sauf la barre du niveau de remplissage de la cuve en version arrondie). Pour cette jauge, il faudra soit faire la même chose avec un rectangle soit creuser un peu plus pour arriver à un résultat satisfaisant… ou utiliser une custom:bar-card. Je te fais un exemple dans la journée si j’ai le temps.
Je suis dessus :
Bonjour et merci , je vais regarder plus en détail ce tuto , de ce que j’ai lu ce matin il est bien expliquer
Bonjour Cleya
merci pour ce bout de code, je vais pouvoir approfondir la chose avec ton tuto très bien fait en passant.
Paradoxalement pour la barre de niveau des granulé j’y suis arriver assez facilement , faudra juste que j’intègre tout sur la même carte.
type: vertical-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.micronova_thermostat_pellet
fill_container: true
show_temperature_control: true
icon_type: icon
hvac_modes:
- heat
- "off"
primary_info: name
collapsible_controls: false
tap_action:
action: more-info
secondary_info: state
- type: entities
entities:
- sensor.micronova_stove_status_2
- sensor.micronova_fumes_temperature_2
- sensor.micronova_fan_rpm_2
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
}
#states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 16px;
font-weight: bold;
color: white;
}
ha-card {
margin-top: -10px;
background: none;
border: none;
}
- type: custom:bar-card
name: Niveau Pellet
min: 8
max: 100
icon: mdi:water-check
severity:
- color: "#4CAF50"
from: 35
to: 100
- color: "#FFEB3B"
from: 15
to: 35
- color: "#F44336"
from: 0
to: 15
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
}
#states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
color: red;
} ha-card {
margin-top: -10px;
background: none;
border: none;
}
entities:
- entity: sensor.micronova_pellet_level
Je te poste le début du code quand j’aurai ajouté les boutons « Allumer » et « Eteindre » (avant 13h00).
Pour le niveau de remplissage, effectivement c’est simple avec une custom:bar-card. La difficulté est d’avoir le même rendu avec une carte custom:button-card sans utiliser d’autres cartes.
Salut,
pourquoi tu te prends la tête et n’utilise pas bar-card directement dans button-card ?
Salut, pour n’avoir qu’une seule carte custom (pas de card-mod ni bar-card), sinon, y’a pas de défi 
Beh, prends-toi la tête 
Voilà le résultat (provisoire) avec les boutons « Allumer » et « Eteindre » :
Le code :
type: custom:button-card
name: Poêle à granulés
custom_fields:
etat_poele:
card:
type: custom:button-card
name: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'Off';
else
return 'On';
]]]
show_icon: false
show_name: true
show_state: false
styles:
card:
- width: 150px
- height: 65px
- background: none
- border: none
- cursor: default
name:
- font-size: 24px
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'rgba(128,0,0,1.0)';
else
return 'rgba(0,128,0,1.0)';
]]]
bouton_moins:
card:
type: custom:button-card
icon: mdi:minus
show_icon: true
styles:
card:
- width: 90px
- height: 65px
- background-color: |
[[[
if (states['input_number.essai_temp_consigne'].state <= '14.0')
return 'rgba(54,54,54,0.4)';
else
return 'rgba(54,54,54,1.0)';
]]]
- border: |
[[[
if (states['input_number.essai_temp_consigne'].state <= '14.0')
return '2px solid rgba(60,60,60,0.2)';
else
return '2px solid rgba(60,60,60,1.0)';
]]]
- cursor: |
[[[
if (states['input_number.essai_temp_consigne'].state <= '14.0')
return 'default';
else
return 'hand';
]]]
icon:
- color: |
[[[
if (states['input_number.essai_temp_consigne'].state <= '14.0')
return 'dimgray';
else
return 'white';
]]]
- width: 45%
tap_action:
action: |
[[[
if (states['input_number.essai_temp_consigne'].state > '14.0')
return 'call-service';
else
return 'none';
]]]
service: script.decrement_essai_temp_consigne
temp_consigne:
card:
type: custom:button-card
entity: input_number.essai_temp_consigne
show_icon: false
show_name: false
show_state: true
styles:
card:
- width: 150px
- height: 65px
- background-color: rgba(54,54,54,1.0)
- border: 2px solid rgba(60,60,60,1.0)
- cursor: default
state:
- color: white
- font-size: 48px
bouton_plus:
card:
type: custom:button-card
icon: mdi:plus
show_icon: true
styles:
card:
- width: 90px
- height: 65px
- background-color: |
[[[
if (states['input_number.essai_temp_consigne'].state >= '32.0')
return 'rgba(54,54,54,0.4)';
else
return 'rgba(54,54,54,1.0)';
]]]
- border: |
[[[
if (states['input_number.essai_temp_consigne'].state >= '32.0')
return '2px solid rgba(60,60,60,0.4)';
else
return '2px solid rgba(60,60,60,1.0)';
]]]
- cursor: |
[[[
if (states['input_number.essai_temp_consigne'].state >= '32.0')
return 'default';
else
return 'hand';
]]]
icon:
- color: |
[[[
if (states['input_number.essai_temp_consigne'].state >= '32.0')
return 'dimgray';
else
return 'white';
]]]
- width: 45%
tap_action:
action: |
[[[
if (states['input_number.essai_temp_consigne'].state < '32.0')
return 'call-service';
else
return 'none';
]]]
service: script.increment_temp_consigne
temperature:
card:
type: custom:button-card
entity: sensor.echo_salon_temperature
show_icon: true
show_name: false
show_state: true
layout: icon_state
styles:
card:
- width: 150px
- height: 65px
- background: none
- border: none
- cursor: default
state:
- color: white
- font-size: 24px
- padding-right: 10px
icon:
- color: white
- width: 50%
- margin-left: "-10px"
bouton_allumer:
card:
type: custom:button-card
entity: input_boolean.essai_poele
icon: mdi:fire
name: Allumer
show_icon: true
layout: icon_name
styles:
card:
- width: 162px
- height: 60px
- background-color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'rgba(54,54,54,0.4)';
else
return 'rgba(158,158,158,1.0)';
]]]
- border: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return '2px solid rgba(60,60,60,0.2)';
else
return '2px solid rgba(164,164,164,1.0)';
]]]
- cursor: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'default';
else
return 'hand';
]]]
name:
- font-size: 24px
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'dimgray';
else
return 'white';
]]]
- padding-right: 30px
icon:
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'dimgray';
else
return 'white';
]]]
- width: 60%
tap_action:
action: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'call-service';
else
return 'none';
]]]
service: input_boolean.turn_on
service_data:
entity_id: input_boolean.essai_poele
bouton_eteindre:
card:
type: custom:button-card
icon: mdi:power
name: Eteindre
show_icon: true
layout: icon_name
styles:
card:
- width: 162px
- height: 60px
- background-color: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'rgba(54,54,54,0.4)';
else
return 'rgba(158,158,158,1.0)';
]]]
- border: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return '2px solid rgba(60,60,60,0.2)';
else
return '2px solid rgba(160,160,160,1.0)';
]]]
- cursor: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'default';
else
return 'hand';
]]]
name:
- font-size: 24px
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'dimgray';
else
return 'white';
]]]
- padding-right: 20px
icon:
- color: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return 'dimgray';
else
return 'white';
]]]
- padding-left: 10px
- width: 60%
tap_action:
action: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return 'call-service';
else
return 'none';
]]]
service: input_boolean.turn_off
service_data:
entity_id: input_boolean.essai_poele
styles:
card:
- width: 480px
- height: 430px
- background-color: rgba(30,30,30,1.0)
- cursor: default
name:
- font-size: 20px
- color: white
- position: absolute
- top: 20px
custom_fields:
etat_poele:
- position: absolute
- top: 80px
- left: 164px
bouton_moins:
- position: absolute
- top: 145px
- left: 65px
temp_consigne:
- position: absolute
- top: 145px
- left: 164px
bouton_plus:
- position: absolute
- top: 145px
- right: 65px
temperature:
- position: absolute
- top: 210px
- left: 164px
bouton_allumer:
- position: absolute
- top: 280px
- left: 85px
- z-index: |
[[[
if (states['input_boolean.essai_poele'].state == 'on')
return '0';
else
return '2';
]]]
bouton_eteindre:
- position: absolute
- top: 280px
- right: 85px
- z-index: |
[[[
if (states['input_boolean.essai_poele'].state == 'off')
return '0';
else
return '2';
]]]
Pour tester la carte, j’ai créé un input_number avec une valeur minimale de 14, une valeur maximale de 32, un pas de 1 et degré celcius en unité. Ainis quand tu arrives à 32° C de température de consigne, tu ne peux plus cliquer sur le bouton « + » et inversement quand tu arrives à 14° C, tu ne peux plus cliquer sur le bouton « - ». J’ai aussi deux scripts qui augmentent ou diminuent l’input_number en fonction des clics sur les boutons.
Pour le fonctionnement des boutons « Allumer » et « Eteindre », j’ai créé une entrée « interrupteur » dont l’état change en fonction du clic sur l’un ou l’autre des boutons. Si tu as des questions sur le fonctionnement ou le code, n’hésites pas.
Je te ferai un .gif en fin d’après-midi qui sera plus parlant pour le fonctionnement.
wouha super merci beaucoup 
,
j’en demandai pas temps mais je prend avec plaisir
faut donc que je crée les 2 scripts, j’avais bien vu quelques a chose a ce sujet pour le réglage de la tempé.
Je reviendrai sur ce sujet avec la version final 
Tu doit avoir une entité correspondant à la température de consigne de ton poêle, il faudra effectivement que tu crées un script (ou deux) pour modifier cette température.
Je me pencherai sur l’affichage du niveau de remplissage de la cuve en fin d’après midi.
Voilà un visuel simple pour le niveau de remplissage de la cuve :
10% :
35% :
70% :
Je peux le faire avec la barre d’indication du niveau droite (en bidouillant avec l’ajout d’un custom_fields supplémentaire rectangulaire d’une largeur variable de 1 à 15 et d’une hauteur variable de 2 à 30 avec une position variable en fonction du niveau de cuve)
Et sinon, je peux laisser comme cela mais simplement supprimer l’arrondi de la barre de progression et du fond de la barre
A quoi correspondent les deux indicateurs en bas à droite (température et pourcentage) ?
Je suppose que le premier est la température extérieure mais je ne vois pas à quoi pourrait correspondre le deuxième.
oui c’est température d’eau du poele pour le nuage, fonction non utilisé chez moi
par contre l’autre c’est puissance du poele que je peut aussi modifier de 1 a 5 , ce serai pas mal d’y avoir accès par exemple en appui court avoir le input_number a régler
Merci c’est top, ça me va bien comme ça c’est parfaitement lisible en coup d’oeil 
Déjà le .gif :
Pour la puissance du poêle, il y a la possibilité d’ajouter un bouton qui fonctionne en boucle (en incrémentant un input_number de 1 à 5 à chaque clic et qui revienne à 1 sur un clic quand la valeur est à 5) avec affichage de la puissance sélectionnée. Il te suffira de faire une automatisation avec en déclencheur le changement de valeur de l’input_number et en action le réglage de la puissance en fonction de cette valeur.
La représentation du niveau de remplissage telle quelle te va ?
1 « J'aime »
Oui le remplissage c’est bien est discret au pire je rajouterai peut etre la valeur de % dedans mais je pense que ça va charger la carte ou alors je met une severite comme j’ai fais sur la custom-bar?
Non, tu ne pourras pas mettre de « severité » car ce n’est pas une custom:bar-card mais juste un custom_fields de custom:button-card. Je peux ajouter la valeur de pourcentage, changer la couleur en fonction du pourcentage (voire mettre un remplissage dégradé du rouge au vert en fonction du niveau de remplissage) etc. mais tout doit se faire par code.
Je t’ai ajouté un bouton pour le réglage de la puissance mais il faudrait que tu me précises si ce bouton doit être accessible avec le poêle éteint, avec le poêle allumé, avec les deux ?
Ok pas de souci pour la severité,
je veut bien le dégrader du vert au rouge en fonction du remplissage , genre vert jusque 50% , orange de 50 a 30% et rouge a 30% ce qui correspond a la notification que je me suis mis pour veillez a remplir le réservoir a partir de 30%
Le réglage de puissance doit être actif que poêle allumer ,
je viens d’installer le code et de mettre met entité c’est top, je vais essayer de rajouter le status du poêle également dans le code , a coté de la température de la pièce je sais pas si c’est possible.