Bonjour, j’essaie depuis quelques temps de faire à peu près la même chose sans y parvenir.
Quelle carte permet d’inclure la couleur du jour et son tarif HC / HP ?
Merci
@BBE peux-tu expliquer comment tu paramètres le module Energy pour obtenir les différentes conso sur le graph en fonction des tarifs ?
Merci vivement !
regarde ce post:
tout y est il me semble
1 « J'aime »
C’est une « Chips Mushroom Template »
cards:
- type: custom:mushroom-chips-card
- type: template
entity: sensor.rte_tempo_prochaine_couleur
icon: |-
{% set tempo = states('sensor.rte_tempo_prochaine_couleur') %}
{% if tempo == 'Bleu' %} mdi:flash
{% elif tempo == 'Blanc' %} mdi:flash-outline
{% elif tempo == 'Rouge' %} mdi:flash
{% else %} mdi:flash-off
{% endif %}
content: >-
Demain - {% set tempo = states('sensor.rte_tempo_prochaine_couleur')%}
{% if tempo == 'Bleu' %} Bleu
({{states('input_number.tarif_hc_bleu')}} |
{{states('input_number.tarif_hp_bleu')}} €/kWh) {% elif tempo
=='Blanc' %} Blanc ({{states('input_number.tarif_hc_blanc')}} |
{{states('input_number.tarif_hp_blanc')}} €/kWh) {% elif tempo
=='Rouge' %} Rouge ({{states('input_number.tarif_hc_rouge')}} |
{{states('input_number.tarif_hp_rouge')}} €/kWh) {% else %}
Indeterminé {% endif %}
icon_color: |-
{% set tempo = states('sensor.rte_tempo_prochaine_couleur') %}
{% if tempo == 'Bleu' %} blue
{% elif tempo == 'Blanc' %} primary_color
{% elif tempo == 'Rouge' %} red
{% else %} yellow
{% endif %}
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
2 « J'aime »
Dites, comment vous gérer le calcul de consommation en € d’une prise connectée quelconque (qui remonte la puissance) ? Je ne sais pas faire avec les différents tarifs Tempo…
@heaven7 merci beaucoup grâce à toi j’ai enfin pu mettre les tarifs hc hp dans le bouton.
Est-ce que tu sais comment changer la couleur d’arrière-plan ? Je n’y parviens pas
Je ne crois pas que ce soit possible directement dans la card. Faudrait aller dans le thème peut-être, mais là ça dépasse ce que je connais !
1 « J'aime »
Bon a force de lire sur les sites anglais, j’ai même posé la question mais toujours en attente. Un bon début :
card_mod:
style: |
ha-card {
--chip-background: {% set tempo = states('sensor.rte_tempo_couleur_actuelle') %}
{% if tempo == 'Bleu' %} blue
{% elif tempo == 'Blanc' %} whitesmoke
{% elif tempo == 'Rouge' %} red
{% endif %};
}
Voilà maintenant que j’ai les bases, je vais pouvoir travailler le fond.
Merci
Merci @JeanJean
Sur la base de ton Yaml, j’ai réalisé le mien 
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.rte_tempo_couleur_actuelle
name: Aujourd'hui
show_label: true
label: |
[[[
var date = new Date();
var day = date.toLocaleString('fr-FR', { weekday: 'short' }).slice(0, 3);
var dayOfMonth = ('0' + date.getDate()).slice(-2);
var month = date.toLocaleString('fr-FR', { month: 'short' }).replace('.', '');
var color = states['sensor.rte_tempo_couleur_actuelle'].state;
return `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);">Jour ${color}`;
]]]
styles:
card:
- height: 110px
- background-color: |
[[[
var color = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();
return (color === 'rouge') ? '#c62828' :
(color === 'blanc') ? '#f5f5f5' :
(color === 'bleu') ? '#1565c0' :
'var(--card-background-color)';
]]]
- color: |
[[[
return (states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase() === 'blanc') ? 'black' : 'white';
]]]
- border-radius: 20px
- padding: 16px
- font-size: 1.2em
- text-align: center
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
grid:
- grid-template-areas: '"n" "l"'
- grid-template-rows: 1fr min-content
name:
- font-weight: bold
- font-size: 1.2em
label:
- font-size: 0.8em
- justify-self: center
- align-self: center
- type: custom:button-card
entity: sensor.rte_tempo_prochaine_couleur
name: Demain
show_label: true
label: |
[[[
var date = new Date();
date.setDate(date.getDate() + 1);
var day = date.toLocaleString('fr-FR', { weekday: 'short' }).slice(0, 3);
var dayOfMonth = ('0' + date.getDate()).slice(-2);
var month = date.toLocaleString('fr-FR', { month: 'short' }).replace('.', '');
var color = states['sensor.rte_tempo_prochaine_couleur'].state;
return `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;">À partir de 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);">Jour ${color}`;
]]]
styles:
card:
- height: 110px
- background-color: |
[[[
var color = states['sensor.rte_tempo_prochaine_couleur'].state.toLowerCase();
return (color === 'rouge') ? '#c62828' :
(color === 'blanc') ? '#f5f5f5' :
(color === 'bleu') ? '#1565c0' :
'var(--card-background-color)';
]]]
- color: |
[[[
return (states['sensor.rte_tempo_prochaine_couleur'].state.toLowerCase() === 'blanc') ? 'black' : 'white';
]]]
- border-radius: 20px
- padding: 16px
- font-size: 1.2em
- text-align: center
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
grid:
- grid-template-areas: '"n" "l"'
- grid-template-rows: 1fr min-content
name:
- font-weight: bold
- font-size: 1.2em
label:
- font-size: 0.8em
- justify-self: center
- align-self: center
- type: horizontal-stack
cards:
- type: custom:button-card
name: Tarif HP
show_label: true
show_state: true
label: |
[[[
var couleurActuelle = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();
var heuresPleinesActuelles = states['binary_sensor.heures_pleines'].state;
var prixLabel;
if (couleurActuelle === 'bleu' && heuresPleinesActuelles) {
prixLabel = '0.13692 €';
} else if (couleurActuelle === 'blanc' && heuresPleinesActuelles) {
prixLabel = '0.1654 €';
} else if (couleurActuelle === 'rouge' && heuresPleinesActuelles) {
prixLabel = '0.7324 €';
} else {
prixLabel = 'Aucune information disponible';
}
var currentHour = new Date().getHours();
var isChecked = currentHour >= 6 && currentHour < 22; // Check if the current hour is between 06:00 and 22:00
return `<div style="text-align: right; font-size: 1.2em;">${prixLabel} ${isChecked ? ' ✔' : ''}</div>`;
]]]
styles:
card:
- height: 50px
- background-color: |
[[[
var couleurActuelle = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();
return (couleurActuelle === 'rouge') ? '#c62828' :
(couleurActuelle === 'blanc') ? '#f5f5f5' :
(couleurActuelle === 'bleu') ? '#1565c0' :
'var(--card-background-color)';
]]]
- color: |
[[[
return (states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase() === 'blanc') ? 'black' : 'white';
]]]
- border-radius: 20px
- padding: 16px
- font-size: 1em
- text-align: center
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
label:
- font-weight: bold
- type: custom:button-card
name: Tarif HC
show_label: true
show_state: true
label: |
[[[
var couleurActuelle = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();
var heuresCreusesActuelles = states['binary_sensor.heures_creuses'].state;
var prixLabel;
if (couleurActuelle === 'bleu' && heuresCreusesActuelles) {
prixLabel = '0.1056 €';
} else if (couleurActuelle === 'blanc' && heuresCreusesActuelles) {
prixLabel = '0.1246 €';
} else if (couleurActuelle === 'rouge' && heuresCreusesActuelles) {
prixLabel = '0.1328 €';
} else {
prixLabel = 'Aucune information disponible';
}
var currentHour = new Date().getHours();
var isChecked = currentHour < 6 || currentHour >= 22; // Check if the current hour is before 06:00 or after 22:00
return `<div style="text-align: right; font-size: 1.2em;">${prixLabel} ${isChecked ? ' ✔' : ''}</div>`;
]]]
styles:
card:
- height: 50px
- background-color: |
[[[
var couleurActuelle = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();
return (couleurActuelle === 'rouge') ? '#c62828' :
(couleurActuelle === 'blanc') ? '#f5f5f5' :
(couleurActuelle === 'bleu') ? '#1565c0' :
'var(--card-background-color)';
]]]
- color: |
[[[
return (states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase() === 'blanc') ? 'black' : 'white';
]]]
- border-radius: 20px
- padding: 16px
- font-size: 1em
- text-align: center
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
label:
- font-weight: bold
- type: markdown
content: |
**Jours restants**
Pour la période du 1er septembre 2023 au 31 août 2024
- type: grid
cards:
- type: horizontal-stack
cards:
- type: markdown
content: |
J. Bleus
🔵 {{states('sensor.rte_tempo_cycle_jours_restants_bleu')}}/301
- type: markdown
content: |
J. Blancs
⚪️ {{states('sensor.rte_tempo_cycle_jours_restants_blanc')}}/43
- type: markdown
content: |
J. Rouges
🔴 {{states('sensor.rte_tempo_cycle_jours_restants_rouge')}}/22
columns: 1
square: false
3 « J'aime »
Salut, j’ai regardé un peu ton code @wibeweb, pourquoi n’utilises tu pas des input.number ? Car quand les tarifs vont changer, il faudra que tu les change de partout (à moins que tu n’es pas de suivi de conso et que s’est le seul endroit ou tu as les chiffres)
Salut @chuppito ,
c’est exactement ça je n’ai pas de suivi et donc j’ai tout mis dans la carte, la modif ne me prendra pas longtemps car je sais où la faire mais il faudra que j’utilise les input car j’aimerais bien faire un suivi de dépenses (pas encore penché là dessus) et je crois savoir que des solutions existent ?
Salut, oui moi j’ai une prise tic fais maison, je récupère avec MQTT les 7 index (6 tarifs tempo et 1 injection).
J’ai fais mes input.number car sinon je devrais changer de partout les chiffres.
Je me suis amusé avec ton code (ça me permet d’apprendre ce langage) j’ai fais ça
2 « J'aime »
Je m’auto réponds, ça marche avec le code suivant :
- id: XXXXXXXXX
alias: SMS Tempo Bleu/Rouge
description: ''
trigger:
- platform: state
entity_id:
- sensor.rte_tempo_prochaine_couleur
from:
to:
condition:
- condition: state
entity_id: sensor.rte_tempo_couleur_actuelle
state: Bleu
- condition: and
conditions:
- condition: state
entity_id: sensor.rte_tempo_prochaine_couleur
state: Rouge
action:
- service: notify.sms_free
data:
message: Demain Tempo passe à Rouge
- service: notify.sms_free_lea
data:
message: Demain Tempo passe à Rouge
mode: single
1 « J'aime »
He’ll @chuppito
Ta carte m’intéresse pour les tarifs mis dedans.
Aurais tu l’amabilité de poster leur code s’il te plaît ?
Salut, sans soucis. Je suppose que tu parles de la dernière que j’ai fais pas la carte mushroom chips template
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.rte_tempo_couleur_actuelle
name: Aujourd'hui
show_label: label
label: |
[[[
var date = new Date();
var day = date.toLocaleString('fr-FR', { weekday: 'short' }).slice(0, 3);
var dayOfMonth = ('0' + date.getDate()).slice(-2);
var month = date.toLocaleString('fr-FR', { month: 'short' }).replace('.', '');
var color = states['sensor.rte_tempo_couleur_actuelle'].state;
var hpPrice = states['input_number.prix_achat_hp_' + color.toLowerCase()].state;
var hcPrice = states['input_number.prix_achat_hc_' + color.toLowerCase()].state;
var joursRestants = states['sensor.jours_' + color.toLowerCase() + '_restants'].state;
var content = `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);">il reste ${joursRestants} ${color}`;
content += `<br>Tarif HP: ${hpPrice} €/kWh<br>Tarif HC: ${hcPrice} €/kWh`;
return content;
]]]
styles:
card:
- height: 130px
- background-color: |
[[[
var color = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();
return (color === 'rouge') ? '#fe1b00' :
(color === 'blanc') ? 'white' :
(color === 'bleu') ? 'dodgerblue' :
'var(--card-background-color)';
]]]
- color: |
[[[
return (states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase() === 'blanc') ? 'black' : 'white';
]]]
- border-radius: 20px
- padding: 16px
- font-size: 1.2em
- text-align: center
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
grid:
- grid-template-areas: '"n" "l"'
- grid-template-rows: 1fr min-content
name:
- font-weight: bold
- font-size: 1.2em
label:
- font-size: 0.8em
- justify-self: center
- align-self: center
- margin-top: 10px
- type: custom:button-card
entity: sensor.rte_tempo_prochaine_couleur
name: Demain
show_label: true
label: |
[[[
var date = new Date();
date.setDate(date.getDate() + 1);
var day = date.toLocaleString('fr-FR', { weekday: 'short' }).slice(0, 3);
var dayOfMonth = ('0' + date.getDate()).slice(-2);
var month = date.toLocaleString('fr-FR', { month: 'short' }).replace('.', '');
var color = states['sensor.rte_tempo_prochaine_couleur'].state;
var hpPrice = states['input_number.prix_achat_hp_' + color.toLowerCase()].state;
var hcPrice = states['input_number.prix_achat_hc_' + color.toLowerCase()].state;
var joursRestants = states['sensor.jours_' + color.toLowerCase() + '_restants'].state;
var content = `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);">il reste ${joursRestants} ${color}`;
content += `<br>Tarif HP: ${hpPrice} €/kWh<br>Tarif HC: ${hcPrice} €/kWh`;
return content;
]]]
styles:
card:
- height: 130px
- background-color: |
[[[
var color = states['sensor.rte_tempo_prochaine_couleur'].state.toLowerCase();
return (color === 'rouge') ? '#fe1b00' :
(color === 'blanc') ? 'white' :
(color === 'bleu') ? 'dodgerblue' :
'var(--card-background-color)';
]]]
- color: |
[[[
return (states['sensor.rte_tempo_prochaine_couleur'].state.toLowerCase() === 'blanc') ? 'black' : 'white';
]]]
- border-radius: 20px
- padding: 16px
- font-size: 1.2em
- text-align: center
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
grid:
- grid-template-areas: '"n" "l"'
- grid-template-rows: 1fr min-content
name:
- font-weight: bold
- font-size: 1.2em
label:
- font-size: 0.8em
- justify-self: center
- align-self: center
- margin-top: 10px
J’ai une notification similaire et j’ai le même problème avec le ?.
Je l’explique de cette façon : à la seconde où la prochaine couleur change, la notification part. Néanmoins, l’état du visuel est aussi en train de changer mais remonte encore en indéterminé. ça doit se jouer à une seconde vu mes historiques !
Ce que j’ai fait et qui devrait régler le problème, c’est de mettre un délai de 30 secondes sur les changements.
Voici mon code (je ne notifie que les blancs et rouges) :
alias: RTE Tempo - Notification
description: Notification des jours blancs et rouges
trigger:
- platform: state
entity_id:
- sensor.rte_tempo_prochaine_couleur
to: Blanc
for:
hours: 0
minutes: 0
seconds: 30
- platform: state
entity_id:
- sensor.rte_tempo_prochaine_couleur
to: Rouge
for:
hours: 0
minutes: 0
seconds: 30
condition: []
action:
- service: notify.mobile_app_hd1900
data:
title: ⚡️ Changement Tempo
message: >-
{{states('sensor.rte_tempo_couleur_actuelle') }} {{
states('sensor.rte_tempo_couleur_actuelle_visuel') }} ->
{{states('sensor.rte_tempo_prochaine_couleur') }} {{
states('sensor.rte_tempo_prochaine_couleur_visuel') }}
data:
sticky: true
car_ui: true
channel: Tempo
notification_icon: mdi:flash
mode: single
Salut,
Oui j’ai fouillé longtemps dans l’historique pour le comprendre également. Hier les 2 à 6h32min52s. Il doit y avoir le 1er changement puis tout de suite l’autre.
J’ai pas pensé au délai vu que j’avais vu les emojis. Un peu comme ton éclair. Dommage je n’ai pas trouvé en emoji les éclairs de différentes couleurs.
J’ai d’ailleurs changé en enlevant la couleur du jour pour demain j’ai le message :
⚪ Demain sera un jour blanc ⚪