+- Forum KNX francophone / English KNX forum (https://www.knx-fr.com)
+-- Forum : Français (https://www.knx-fr.com/forumdisplay.php?fid=3)
+--- Forum : Logiciels libres (linknx, knxweb, pKNyX,...) (https://www.knx-fr.com/forumdisplay.php?fid=10)
+---- Forum : Home Assistant (https://www.knx-fr.com/forumdisplay.php?fid=24)
+---- Sujet : Mon Dashboard Home assistant (/showthread.php?tid=7383)
RE: Mon Dashboard Home assistant - Ives - 02/01/2025
C'est joli et ergonomique mais il manque le code !
RE: Mon Dashboard Home assistant - XeNo - 02/01/2025
(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-cardRE: Mon Dashboard Home assistant - XeNo - 02/01/2025
Et la première colonne pour le Jour :
Je suis obligé d'arrêter à Lumières, sinon trop de caractères..
A copier/coller en changeant les termes daily par monthly puis par yearly pour moi ici.
Code :
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Jour
- type: horizontal-stack
horizontal: true
cards:
- type: custom:mushroom-template-card
primary: Total
secondary: ' {{ states(''sensor.energy_total_daily'') }} kWh - {{ states(''sensor.cout_total_daily'') }} €'
layout: horizontal
icon: mdi:lightning-bolt-circle
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.show_details_tempo_total_daily
card_mod:
style:
.: |
ha-card {
height: 40px !important;
}
ha-state-icon {
--icon-symbol-size: 30px;
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 230px;
}
- type: conditional
conditions:
- entity: input_boolean.show_details_tempo_total_daily
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: sensor.cout_total_daily_bleu_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_usage_daily_bleu_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #5F87C7;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_daily_bleu_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_usage_daily_bleu_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #1057C8;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_daily_blanc_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_usage_daily_blanc_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #9F9F9F;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_daily_blanc_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_usage_daily_blanc_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #555555;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_daily_rouge_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_usage_daily_rouge_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E89E8E;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_daily_rouge_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_usage_daily_rouge_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E85130;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: horizontal-stack
horizontal: true
cards:
- type: custom:gap-card
height: 40px
- type: custom:mushroom-template-card
primary: ECS
secondary: ' {{ states(''sensor.energy_total_ecs_daily'') }} kWh - {{ states(''sensor.cout_total_ecs_daily'') }} €'
layout: horizontal
icon: mdi:lightning-bolt-circle
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.show_details_tempo_ecs_daily
card_mod:
style:
.: |
ha-card {
height: 40px !important;
width: 400px;
}
ha-state-icon {
--icon-symbol-size: 30px;
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 182px;
}
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: conditional
conditions:
- entity: input_boolean.show_details_tempo_ecs_daily
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: sensor.cout_total_ecs_daily_bleu_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_ecs_usage_daily_bleu_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #5F87C7;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_ecs_daily_bleu_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_ecs_usage_daily_bleu_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #1057C8;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_ecs_daily_blanc_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_ecs_usage_daily_blanc_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #9F9F9F;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_ecs_daily_blanc_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_ecs_usage_daily_blanc_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #555555;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_ecs_daily_rouge_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_ecs_usage_daily_rouge_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E89E8E;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_ecs_daily_rouge_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_ecs_usage_daily_rouge_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E85130;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: horizontal-stack
horizontal: true
cards:
- type: custom:gap-card
height: 40px
- type: custom:mushroom-template-card
primary: LT
secondary: ' {{ states(''sensor.energy_total_lt_daily'') }} kWh - {{ states(''sensor.cout_total_lt_daily'') }} €'
layout: horizontal
icon: mdi:lightning-bolt-circle
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.show_details_tempo_lt_daily
card_mod:
style:
.: |
ha-card {
height: 40px !important;
width: 400px;
}
ha-state-icon {
--icon-symbol-size: 30px;
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 200px;
}
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: conditional
conditions:
- entity: input_boolean.show_details_tempo_lt_daily
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: sensor.cout_total_lt_daily_bleu_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lt_usage_daily_bleu_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #5F87C7;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lt_daily_bleu_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lt_usage_daily_bleu_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #1057C8;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lt_daily_blanc_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lt_usage_daily_blanc_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #9F9F9F;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lt_daily_blanc_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lt_usage_daily_blanc_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #555555;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lt_daily_rouge_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lt_usage_daily_rouge_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E89E8E;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lt_daily_rouge_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lt_usage_daily_rouge_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E85130;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: horizontal-stack
horizontal: true
cards:
- type: custom:gap-card
height: 40px
- type: custom:mushroom-template-card
primary: Prises
secondary: ' {{ states(''sensor.energy_total_prises_daily'') }} kWh - {{ states(''sensor.cout_total_prises_daily'') }} €'
layout: horizontal
icon: mdi:lightning-bolt-circle
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.show_details_tempo_prises_daily
card_mod:
style:
.: |
ha-card {
height: 40px !important;
width: 400px;
}
ha-state-icon {
--icon-symbol-size: 30px;
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 175px;
}
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: conditional
conditions:
- entity: input_boolean.show_details_tempo_prises_daily
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: sensor.cout_total_prises_daily_bleu_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_prises_usage_daily_bleu_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #5F87C7;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_prises_daily_bleu_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_prises_usage_daily_bleu_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #1057C8;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_prises_daily_blanc_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_prises_usage_daily_blanc_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #9F9F9F;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_prises_daily_blanc_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_prises_usage_daily_blanc_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #555555;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_prises_daily_rouge_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_prises_usage_daily_rouge_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E89E8E;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_prises_daily_rouge_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_prises_usage_daily_rouge_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E85130;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: horizontal-stack
horizontal: true
cards:
- type: custom:gap-card
height: 40px
- type: custom:mushroom-template-card
primary: Lumières
secondary: ' {{ states(''sensor.energy_total_lumieres_daily'') }} kWh - {{ states(''sensor.cout_total_lumieres_daily'') }} €'
layout: horizontal
icon: mdi:lightning-bolt-circle
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.show_details_tempo_lumieres_daily
card_mod:
style:
.: |
ha-card {
height: 40px !important;
width: 400px;
}
ha-state-icon {
--icon-symbol-size: 30px;
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 156px;
}
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: custom:gap-card
height: 40px
- type: conditional
conditions:
- entity: input_boolean.show_details_tempo_lumieres_daily
state_not: 'off'
card:
type: vertical-stack
cards:
- type: horizontal-stack
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: sensor.cout_total_lumieres_daily_bleu_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lumieres_usage_daily_bleu_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #5F87C7;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lumieres_daily_bleu_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lumieres_usage_daily_bleu_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #1057C8;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lumieres_daily_blanc_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lumieres_usage_daily_blanc_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #9F9F9F;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lumieres_daily_blanc_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lumieres_usage_daily_blanc_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #555555;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lumieres_daily_rouge_hc
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lumieres_usage_daily_rouge_hc_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E89E8E;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}
- type: custom:mushroom-template-card
entity: sensor.cout_total_lumieres_daily_rouge_hp
primary: '{{ states(entity) }} €'
layout: vertical
secondary: >-
{{
states('sensor.energy_total_lumieres_usage_daily_rouge_hp_kwh')
}} kWh
card_mod:
style:
.: |
ha-card {
background-color: #E85130;
height: 40px !important;
width: 72px;
}
mushroom-state-info$: |
.container {
--card-primary-color: white;
--card-secondary-color: white;
--card-secondary-font-size: 9px;
--card-primary-font-size: 14px;
}RE: Mon Dashboard Home assistant - Ives - 02/01/2025
En revanche, je comprends que ce n'est pas responsive web et j'ai toujours évité de type de carte car mon Dashboard s'affiche correctement aussi bien sur mon écran tactile de 23", la tablette ou les smartphones (max ou non)
Je viens de tester sur 3 colonnes pour la conso totale et l'affichage est correct sur le PC ainsi que sur mon iphone pro max.
![[Image: 8r31.jpg]](https://zupimages.net/viewer.php?id=25/01/8r31.jpg)
En revanche, sur 4 colonnes il y a du texte rogné
![[Image: 3hx2.jpg]](https://zupimages.net/viewer.php?id=25/01/3hx2.jpg)
RE: Mon Dashboard Home assistant - Ives - 07/01/2025
Bonjour,
Je viens de modifier la partie de mon Dashboard relative aux consommations en tarif TEMPO et j'en profite pour remercier XeNo pour le partage !
J'ai les consommations Jour, semaine, Mois et Année
Voici les pages pour la consommation du mois ; il faut cliquer sur la carte de l'appareil pour afficher le détail des consommations/coûts des 6 tarifs.
![[Image: wf00.jpg]](https://zupimages.net/viewer.php?id=25/02/wf00.jpg)
![[Image: 5516.jpg]](https://zupimages.net/viewer.php?id=25/02/5516.jpg)
J'ai utilisé un fond gris pour les éclairages d'une même pièce et il suffit de cliquer sur l'un deux pour découvrir le détail des consommations et des coûts de tous les éclairages de la pièce (6 tarifs).
J'ai un Dahboard unique pour afficher sur un écran tactile 23", écrans PC, tablette et les smartphones. Voici ce que ça donne sur le smartphone
![[Image: tyue.jpg]](https://zupimages.net/viewer.php?id=25/02/tyue.jpg)