(02/01/2025, 14:39:37)Ives a écrit : C'est joli et ergonomique mais il manque le code !
Voici la page complète (à insérer dans "editeur de configuration {}" de lovelace)
Je n'ai pu mettre que la partie de gauche et le journalier (le forum m'a dit "trop long", 65536 caractères max et il y en avait 420699 !
Ca manque encore d'ergonomie, comme je force certaines valeurs dans les écartements, la vue sur le téléphone n'est pas encore optimisée..
A savoir qu'il faut aussi créer autant de switch virtuels que de section à déplier.
Dans "Appareils et Services"
Dans Entrées, Creer une entrée, Sélectionner "Interrupteur"
Il faut les appeler sous cette forme :
show_details_tempo_total_daily
...
show_details_tempo_prises_monthly
...
show_details_tempo_chauffagesdb_yearly
Cela crée des input_boolean.show_details_tempo_chauffagesdb_yearly qui sont basculés en cliquant sur la section maître
La partie de gauche :
Code :
- title: Energie Tempo
path: energie-tempo
cards:
- type: vertical-stack
title: États Tempo
cards:
- type: horizontal-stack
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: sensor.rte_tempo_couleur_actuelle
primary: '{{ states(entity) }}'
layout: horizontal
secondary: Aujourd'hui
icon: mdi:calendar-multiselect
icon_color: >
{% if is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc')
%}
black
{% else %}
white
{% endif %}
tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
{% if is_state('sensor.rte_tempo_couleur_actuelle', 'Rouge') %}
background-color: red;
{% elif is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc') %}
background-color: white;
{% elif is_state('sensor.rte_tempo_couleur_actuelle', 'Bleu') %}
background-color: DodgerBlue;
{% elif is_state('sensor.rte_tempo_couleur_actuelle', 'NON_DEFINI') %}
background-color: lightgrey;
{% endif %};
}
mushroom-state-info$: |
.container {
{% if is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc') %}
--card-primary-color: black;
--card-secondary-color: black;
{% else %}
--card-primary-color: white;
--card-secondary-color: white;
{% endif %}
--card-secondary-font-size: 11px;
--card-primary-font-size: 17px;
}
- type: custom:mushroom-template-card
entity: sensor.rte_tempo_prochaine_couleur
primary: '{{ states(entity) }}'
layout: horizontal
secondary: Demain
icon: mdi:calendar-multiselect
icon_color: >
{% if is_state('sensor.rte_tempo_prochaine_couleur', 'Blanc')
%}
black
{% else %}
white
{% endif %}
tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
{% if is_state('sensor.rte_tempo_prochaine_couleur', 'Rouge') %}
background-color: red;
{% elif is_state('sensor.rte_tempo_prochaine_couleur', 'Blanc') %}
background-color: white;
{% elif is_state('sensor.rte_tempo_prochaine_couleur', 'Bleu') %}
background-color: DodgerBlue;
{% elif is_state('sensor.rte_tempo_prochaine_couleur', 'NON_DEFINI') %}
background-color: lightgrey;
{% endif %};
}
mushroom-state-info$: |
.container {
{% if is_state('sensor.rte_tempo_prochaine_couleur', 'Blanc') %}
--card-primary-color: black;
--card-secondary-color: black;
{% else %}
--card-primary-color: white;
--card-secondary-color: white;
{% endif %}
--card-secondary-font-size: 11px;
--card-primary-font-size: 17px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.rte_tempo_cycle_jours_restants_bleu
primary: null
multiline_secondary: true
secondary: >
{{ (states('sensor.rte_tempo_cycle_jours_restants_bleu'))
}}j/300
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: DodgerBlue;
--card-secondary-color: DodgerBlue;
--card-primary-font-size: 14px;
--card-secondary-font-size: 14px;
--card-primary-font-weight: 500;
--card-secondary-font-weight: 500;
align-items: center;
}
- type: custom:mushroom-template-card
entity: sensor.rte_tempo_cycle_jours_restants_blanc
primary: null
multiline_secondary: true
secondary: >
{{ (states('sensor.rte_tempo_cycle_jours_restants_blanc'))
}}j/43
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: grey;
--card-secondary-color: grey;
--card-primary-font-size: 14px;
--card-secondary-font-size: 14px;
--card-primary-font-weight: 500;
--card-secondary-font-weight: 500;
align-items: center;
}
- type: custom:mushroom-template-card
entity: sensor.rte_tempo_cycle_jours_restants_rouge
primary: null
multiline_secondary: true
secondary: >
{{ (states('sensor.rte_tempo_cycle_jours_restants_rouge'))
}}j/22
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: tomato;
--card-secondary-color: tomato;
--card-primary-font-size: 14px;
--card-secondary-font-size: 14px;
--card-primary-font-weight: 500;
--card-secondary-font-weight: 500;
align-items: center;
}
- type: custom:mushroom-template-card
entity: sensor.rte_tempo_prochaine_couleur
icon: mdi:lightning-bolt-circle
primary: Période actuelle
layout: horizontal
secondary: >-
{{ states('sensor.tarif_en_cours_texte') }} - {{
states('input_number.tarif_actuel_tempo') }} €/kWh
tap_action:
action: none
card_mod:
style: |
ha-state-icon {
--icon-symbol-size: 40px;
{% if states('sensor.tarif_en_cours_texte') == 'Bleu HC' %}
color: #5F87C7;
{% elif states('sensor.tarif_en_cours_texte') == 'Bleu HP' %}
color: #1057C8;
{% elif states('sensor.tarif_en_cours_texte') == 'Blanc HC' %}
color: #9F9F9F;
{% elif states('sensor.tarif_en_cours_texte') == 'Blanc HP' %}
color: #555555;
{% elif states('sensor.tarif_en_cours_texte') == 'Rouge HC' %}
color: #E89E8E;
{% elif states('sensor.tarif_en_cours_texte') == 'Rouge HP' %}
color: #E85130;
{% endif %}
}
- type: custom:fold-entity-row
head:
type: section
label: Grille tarifaire Tempo
icon: mdi:currency-eur
entities:
- entity: input_number.electricite_general_cout_kwh_bleu_hc
type: custom:multiple-entity-row
name: Tempo Bleu
icon: mdi:currency-eur
state_header: Heures Creuses
state_color: true
entities:
- entity: input_number.electricite_general_cout_kwh_bleu_hp
name: Heures Pleines
- entity: input_number.electricite_general_cout_kwh_blanc_hc
type: custom:multiple-entity-row
name: Tempo Blanc
icon: mdi:currency-eur
state_header: Heures Creuses
state_color: true
entities:
- entity: input_number.electricite_general_cout_kwh_blanc_hp
name: Heures Pleines
- entity: input_number.electricite_general_cout_kwh_rouge_hc
type: custom:multiple-entity-row
name: Tempo Rouge
icon: mdi:currency-eur
state_header: Heures Creuses
state_color: true
entities:
- entity: input_number.electricite_general_cout_kwh_rouge_hp
name: Heures Pleines
- type: custom:gap-card