Bonjour à tous
En lisant ce sujet
https://forum.hacf.fr/t/integration-renault-gestion-dune-r5-electrique/56090/19
je me suis inspiré de la carte de @Pascal_B pour créer (à l’aide de l’IA) la card ci-dessous :
type: custom:config-template-card
variables:
COULEUR_FOND: >
Number(states['sensor.twingo_batterie'].state) >= 65 ? '#89b504' :
Number(states['sensor.twingo_batterie'].state) >= 40 ? '#e6930e' :
'#e6120e'
COULEUR_LIGNE: >
Number(states['sensor.twingo_batterie'].state) >= 65 ? '#B5EB8D' :
Number(states['sensor.twingo_batterie'].state) >= 40 ? '#F2CF94' :
'#F7CABE'
EN_CHARGE: |
states['binary_sensor.twingo_en_charge'].state === 'on'
ETAT_BRANCHEMENT: |
states['sensor.twingo_etat_du_branchement'].state
entities:
- input_number.batterie_twingo_cible
- sensor.twingo_batterie
- binary_sensor.twingo_en_charge
card:
type: custom:vertical-stack-in-card
card_mod:
style: >
:host{
--charge-anim:{%if states['binary_sensor.twingo_en_charge'].state ===
'on'}
'shimmer 1.5s infinite' {%else%}
'none'
{%endif%}
--pulse-anim:{%if states['binary_sensor.twingo_en_charge'].state ===
'on'}
'pulse 2s infinite ease-in-out' {%else%}
'none'
{%endif%}
}
ha-card {
background: transparent !important;
border-radius: 20px !important;
overflow: hidden !important;
}
/* Les Keyframes doivent être définis ici pour être globaux à la carte */
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
cards:
- type: custom:button-card
entity: sensor.twingo_batterie
show_name: true
show_label: true
name: >-
${ 'Consigne de Charge à ' +
Math.round(states['input_number.batterie_twingo_cible'].state) + '%' }
label: >-
${ '% Batterie actuel: ' + states['sensor.twingo_batterie'].state + '%'
}
icon: >-
${ETAT_BRANCHEMENT == 'unplugged' || ETAT_BRANCHEMENT == 'unknown' ?
'mdi:power-plug-off-outline' : 'mdi:power-plug'}
styles:
card:
- background: transparent
- border: none
- padding: 20px 15px 5px 15px
grid:
- grid-template-areas: "\"i n\" \"i l\""
- grid-template-columns: 20% 1fr
icon:
- width: 45px
- color: ${COULEUR_FOND}
name:
- justify-self: start
- font-weight: bold
- font-size: 16px
label:
- justify-self: start
- font-size: 13px
- margin-top: 4px
- type: custom:bar-card
entities:
- entity: sensor.twingo_batterie
height: 8px
positions:
icon: "off"
name: "off"
value: "off"
indicator: "off"
color: ${COULEUR_LIGNE}
card_mod:
style: |
/* On cible le container interne de la barre */ .card-content {
padding: 5px 20px 15px 20px !important;
}
ha-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
bar-card-backgroundbar {
background: rgba(255,255,255,0.1) !important;
border-radius: 10px !important;
}
/* Ciblage précis de la barre de progression */ bar-card-bar {
border-radius: 10px !important;
position: relative !important;
overflow: hidden !important;
animation: var(--pulse-anim);
}
bar-card-bar::after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: var(--charge-anim) !important;
}
J’aurai souhaité lorsque la voiture est en charge, une petite animation, mais celle -ci ne fonctionne pas.
Mes questions/interrogations…
J’ai compris la plupart du code si ce n’est les subtilités du css et surtout où je suis perdu c’est l’imbrication des cards et ce que l’on peut passer comme variables entre elles
Quand faut-il utiliser du javascript et du jinja ?
Merci de vos éclaircissements
