Aperçu
L’idée
J’avais un problème simple :
trop d’infos énergie dispersées (Tempo, solaire, conso, coûts)
difficile de prendre une décision rapide (consommer maintenant ou attendre)
J’ai donc créé une carte unique grâce à card mod qui centralise tout ce qui compte réellement au quotidien.
Objectif
En un coup d’œil, savoir :
- la couleur Tempo aujourd’hui et demain
- les jours restants par couleur
- la production solaire (jour + mois)
- les flux d’énergie en temps réel
- le coût des derniers jours en fonction de la couleur du jour
Et surtout : adapter ma consommation instantanément
Fonctionnement
1. Bandeau Tempo intelligent
- Couleur du jour dynamique (Bleu / Blanc / Rouge)
- Clignotement automatique en jour Rouge
- Indication de demain (avec alerte visuelle si Rouge)
- Compteur de jours restants par couleur
Permet d’anticiper sans aller chercher l’info ailleurs
2. Production solaire du jour et du mois intégré à la carte du dessous au point que les infos ont l’air d’en faire partie !
3. Flux énergétique en temps réel
- Production solaire
- Réseau
- Batterie
- Maison
- Appareils principaux (voiture, chauffe-eau, etc.)
4. Coût électrique sur 7 jours
- Graphique simple et lisible
- Valeur affichée directement sur chaque point
Visualisation rapide de l’impact des jours Tempo
Pourquoi cette carte est utile
- elle remplace plusieurs cartes
- elle évite de naviguer dans le dashboard
- elle permet une prise de décision immédiate
- elle est compréhensible par toute la famille
Concrètement :
je sais en 2 secondes si je peux lancer une machine, charger la voiture ou attendre
Dépendances
button-cardlayout-cardcompact-power-cardapexcharts-cardcard-mod
YAML
type: custom:mod-card
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.rte_tempo_couleur_actuelle
name: Aujourd'hui
icon: "no"
show_state: false
styles:
card:
- background-color: |
[[[
if (entity.state === 'Bleu') return "#3498db"; // Bleu
if (entity.state === 'Blanc') return "#f1f1f1"; // Blanc
if (entity.state === 'Rouge') return "#e74c3c"; // Rouge
return "#7f8c8d"; // Gris pour inconnu
]]]
- color: |
[[[
if (entity.state === 'Blanc') return "#000000"; // Noir pour Blanc
return "#ffffff"; // Blanc pour autres
]]]
- border-radius: 5px
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)
- padding: 0px
- font-size: 16px
- text-align: center
- height: 20px
- animation: |
[[[
if (entity.state === 'Rouge') return "blink 1.5s ease infinite";
return "none";
]]]
icon:
- width: 50px
- height: 50px
state_display: |
[[[ return entity.state; ]]]
tap_action:
action: more-info
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.rte_tempo_cycle_jours_restants_bleu
show_name: false
icon: "no"
show_state: true
state_display: |
[[[ return entity.state]]]
styles:
card:
- background-color: "#3498db"
- color: white
- border-radius: 5px
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)
- padding: 0px
- font-size: 16px
- text-align: center
- height: 20px
- type: custom:button-card
entity: sensor.rte_tempo_cycle_jours_restants_blanc
show_name: false
icon: "no"
show_state: true
state_display: |
[[[ return entity.state]]]
styles:
card:
- background-color: "#f1f1f1"
- color: black
- border-radius: 5px
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)
- font-size: 16px
- padding: 0px
- text-align: center
- height: 20px
- type: custom:button-card
entity: sensor.rte_tempo_cycle_jours_restants_rouge
show_name: false
icon: "no"
show_state: true
state_display: |
[[[ return entity.state; ]]]
styles:
card:
- background-color: "#e74c3c"
- color: white
- border-radius: 5px
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)
- padding: 0px
- font-size: 16px
- text-align: center
- height: 20px
- type: custom:button-card
entity: sensor.rte_tempo_prochaine_couleur
name: |
[[[
if (entity.state === 'Rouge') {
const showEmoji = (Date.now() % 2000) < 1000; // Alterne toutes les secondes
return showEmoji ? '⚠️Demain⚠️' : 'Demain';
}
return 'Demain';
]]]
icon: "no"
show_state: false
styles:
card:
- background-color: |
[[[
if (entity.state === 'Bleu') return "#3498db"; // Bleu
if (entity.state === 'Blanc') return "#f1f1f1"; // Blanc
if (entity.state === 'Rouge') return "#e74c3c"; // Rouge
return "#7f8c8d"; // Gris pour inconnu
]]]
- color: |
[[[
if (entity.state === 'Blanc') return "#000000"; // Noir pour Blanc
return "#ffffff"; // Blanc pour autres
]]]
- border-radius: 5px
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)
- padding: 0px
- font-size: 16px
- text-align: center
- height: 20px
- animation: |
[[[
if (entity.state === 'Rouge') return "blink 1.5s ease infinite";
return "none";
]]]
icon:
- width: 50px
- height: 50px
state_display: |
[[[ return entity.state; ]]]
tap_action:
action: more-info
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 50% 50%
grid-template-rows: 0px
cards:
- type: custom:button-card
entity: sensor.production_solaire_journaliere
show_name: true
name: Prod. jour
show_icon: false
show_state: true
state_display: |
[[[ return parseFloat(entity.state).toFixed(1) + ' kWh'; ]]]
section_mode: true
icon: mdi:solar-power-variant
grid_options:
rows: 0,5
columns: 1
styles:
card:
- background: none
- border: none
- border-radius: 0px
- padding: 0px
- margin: 0px
- left: 40px
- height: 30px
name:
- font-size: 11px
- text-transform: uppercase
- color: "#ff9800"
state:
- font-size: 12px
- font-weight: bold
- color: "#ff9800"
card_mod:
style: |
ha-card {
position: relative;
margin-top: -10px !important;
}
- type: custom:button-card
entity: sensor.production_solaire_mensuelle
show_name: true
name: Prod. MOIS
show_icon: false
show_state: true
state_display: |
[[[ return parseFloat(entity.state).toFixed(1) + ' kWh'; ]]]
section_mode: true
icon: mdi:solar-power-variant
grid_options:
rows: 0,5
columns: 1
styles:
card:
- background: none
- border: none
- border-radius: 0px
- padding: 0px
- margin: 0px
- left: "-40px"
- height: 30px
name:
- font-size: 11px
- text-transform: uppercase
- color: "#ff9800"
state:
- font-size: 12px
- font-weight: bold
- color: "#ff9800"
card_mod:
style: |
ha-card {
position: relative;
margin-top: -10px !important;
}
- type: custom:compact-power-card
curve_factor: 2
entities:
pv:
entity: sensor.production_solaire_totale_instantannee
invert_state_values: false
grid:
entity: sensor.compteur_general_power_ab
decimal_places: 1
invert_state_values: true
tap_action: more_info
labels:
- entity: sensor.consommation_quotidienne
icon: mdi:transmission-tower-export
- entity: sensor.consommation_mensuelle
icon: mdi:transmission-tower-export
decimal_places: 2
battery:
- entity: sensor.puissance_batterie_direct
battery_capacity: 2
battery_soc: sensor.hub_2000_electric_level
show_soc: true
invert_state_values: true
home:
entity: sensor.compteur_general_power_a
invert_state_values: false
devices:
- entity: sensor.prise_ordi_bat_power
icon: mdi:desktop-tower-monitor
subtract_from_home: true
threshold: 30
- entity: sensor.cuisine_puissance_totale
icon: mdi:stove
subtract_from_home: true
threshold: 30
- entity: sensor.compteur_chauffe_eau_power
icon: mdi:water-boiler
subtract_from_home: true
threshold: 30
- entity: sensor.compteur_linge_power
icon: mdi:washing-machine
subtract_from_home: true
threshold: 30
- entity: sensor.compteur_voitures_power
icon: mdi:car
subtract_from_home: true
threshold: 30
- entity: sensor.salon_consommation_estimee_compresseur
icon: mdi:sun-snowflake-variant
subtract_from_home: true
threshold: 30
subtract_devices_from_home: true
enable_device_power_lines: true
disable_home_gradient: false
remove_glow_effects: true
hide_card_background: true
decimal_places: 0
card_mod:
style: |
ha-card {
margin-top: -32px;
}
- type: custom:button-card
name: COÛT ÉLECTRICITÉ - 7 DERNIERS JOURS
styles:
card:
- background: none
- border: none
- height: 25px
- top: 80px
- padding: 15px
name:
- font-size: 15px
- color: "#b8b8b8"
- justify-self: start
- align-self: center
- type: custom:apexcharts-card
graph_span: 7d
span:
end: day
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin-top: -52px;
}
header:
show: false
show_states: false
colorize_states: true
series:
- entity: sensor.cout_electricite_journalier
name: Coût
type: area
color: "#4caf50"
curve: smooth
stroke_width: 5
opacity: 0.3
group_by:
duration: 1d
func: max
show:
datalabels: true
extremas: false
apex_config:
grid:
show: false
padding:
top: -25
chart:
height: 150
background: transparent
dataLabels:
enabled: true
formatter: |
EVAL:function(val) {
return Math.round(val) + " €";
}
style:
fontSize: 12px
colors:
- "#4caf50"
background:
enabled: true
foreColor: "#FFFFFF"
padding: 4
borderRadius: 4
borderWidth: 1
borderColor: "#4caf50"
opacity: 0.9
dropShadow:
enabled: false
stroke:
dashArray: 0
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.2
inverseColors: false
opacityFrom: 0.7
opacityTo: 0.1
stops:
- 0
- 90
- 100
yaxis:
show: false
labels:
formatter: |
EVAL:function(val) {
return val.toFixed(0) + " €";
}
card_mod:
style: |
ha-card {
position: relative;
background: transparent !important;
box-shadow: none;
margin: 0px !important;
padding: 0px !important;
}
ha-card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(28, 28, 28, 0.9) !important;
border-radius: var(--ha-card-border-radius, 12px);
z-index: 0;
}
ha-card > * {
position: relative;
z-index: 1;
}
Vive la Républ… ah mauvais discours, pardon !
Bon votes =)
