Après quelques mois, je me suis bien rodé sur HA. Tous les devices que j’avais sous domoticz sont tous implémentés.
J’ai rajouté un panneau solaire en autoconsommation avec openDTU, c’est top.
Un zlinky et mon capteur à impulsion pour le compteur eau est passé sous Esphome.
J’ai maintenant un beau dashboard energy, surveillance de ma baie info (nas, switch, onduleur…)
Je passe le plus clairement de mon temps à retoucher mon dashboard quand je découvre des nouvelles cards.
On utilise HA qu’à partir du smarthpone, donc mon interface n’est optimisé que pour ca, tout en 1 colonne. Les mushrooms sont top et j’ai enfin compris comment utiliser card_mod et le style grâce aux différents post sur la communauté France ou monde, mais c’est pas facile…
Exemple de code pour 2 cartes
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:bed
icon_color: |
{% set state = states('sensor.sonde_parents_temperature') %}
{% if is_number(state) and state | float >= 19.5 %}
green
{% else %}
blue
{% endif %}
primary: Parents
secondary: '{{ states(''sensor.sonde_parents_temperature'') | round(1) }}°C'
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /dashboard-maison/temp
badge_icon: ''
badge_color: ''
entity: sensor.sonde_parents_temperature
card_mod:
style:
mushroom-state-info$: |
.primary {
position: absolute;
left: 10px;
top: 5px;
font-size: 18px !important;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: absolute;
left: 10px;
top: 30px;
font-size: 16px !important;
overflow: visible !important;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -35px;
top: 70px;
}
.: |
:host {
--mush-icon-size: 126px;
--primary-text-color: yellow;
--secondary-text-color: white;
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sonde_parents_humidity
icon_color: blue
- type: entity
entity: sensor.sonde_parents_battery
icon_color: grey
card_mod:
style:
.: |
ha-card {
width: 75px;
position: absolute;
left: 120px;
top: 0px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 30px;
--mush-chip-spacing: -10px
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb
secondary: none
entity: light.bandeau_led_chambre
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lampe chambre
content:
type: vertical-stack
cards:
- type: light
name: Bandeau chambre
style: |
ha-card {
border-width: 0px !important;
}
entity: light.bandeau_led_chambre
- type: custom:rgb-light-card
entity: light.bandeau_led_chambre
colors:
- rgb_color:
- 255
- 127
- 255
brightness: 220
transition: 1
- hs_color:
- 60
- 30
icon_color: '#fff8b0'
- hs_color:
- 70
- 20
icon_color: '#bef8b0'
- type: tile
name: Luminosité
entity: light.bandeau_led_chambre
features:
- type: light-brightness
card_mod: null
style: |
ha-card {
border-width: 0px !important;
}
double_tap_action:
action: more-info
badge_icon: ''
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: 66px;
position: absolute;
left: 130px;
top: 60px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-template-card
primary: none
secondary: none
icon: mdi:window-shutter
entity: cover.volet_parents_position_1
badge_icon: ''
badge_color: ''
icon_color: |-
{% if is_state('cover.volet_parents_position_1', 'open') %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volet parents
content:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.volet_parents_position_1
name: Volet parents
show_position_control: true
show_tilt_position_control: true
show_buttons_control: true
card_mod:
style: |
ha-card {
width: 66px;
position: absolute;
left: 130px;
top: 110px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-template-card
primary: none
secondary: none
icon: mdi:clock
badge_color: ''
icon_color: |-
{% if is_state('input_boolean.gestion_reveil', 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: more-info
entity: input_boolean.gestion_reveil
card_mod:
style: |
ha-card {
width: 66px;
position: absolute;
left: 80px;
top: 60px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
card_mod:
style: |
ha-card {
height: 178px !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: |
{% set state = states('sensor.sonde_sde_temperature') %}
{% if is_number(state) and state | float >= 19.5 %}
green
{% else %}
blue
{% endif %}
primary: Sde
secondary: '{{ states(''sensor.sonde_sde_temperature'') | round(1) }}°C'
layout: horizontal
tap_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /dashboard-maison/temp
badge_icon: ''
badge_color: ''
entity: sensor.sonde_sde_temperature
card_mod:
style:
mushroom-state-info$: |
.primary {
position: absolute;
left: 10px;
top: 5px;
font-size: 18px !important;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: absolute;
left: 10px;
top: 30px;
font-size: 16px !important;
overflow: visible !important;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -35px;
top: 70px;
}
.: |
:host {
--mush-icon-size: 126px;
--primary-text-color: yellow;
--secondary-text-color: white;
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sonde_sde_humidity
icon_color: blue
- type: entity
entity: sensor.sonde_sde_battery
icon_color: grey
card_mod:
style:
.: |
ha-card {
width: 75px;
position: absolute;
left: 120px;
top: 0px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 30px;
--mush-chip-spacing: -10px
}
- type: custom:mushroom-template-card
primary: none
secondary: none
icon: mdi:window-shutter
entity: cover.volet_sde_position_1
badge_icon: ''
badge_color: ''
icon_color: |-
{% if is_state('cover.volet_sde_position_1', 'open') %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volet Sde
content:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.volet_sde_position_1
name: Volet sde
show_position_control: true
show_tilt_position_control: true
show_buttons_control: true
card_mod:
style: |
ha-card {
width: 66px;
position: absolute;
left: 130px;
top: 110px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
card_mod:
style: |
ha-card {
height: 178px !important;
}
Un exemple de page de paramétrage pour mes automatisations
Merci à ceux qui partagent, ca aide beaucoup les nouveaux comme moi.
Le seul bémol de HA, ce sont les mises à jour permanente du système, toutes les semaines et les changements (breaking) assez fréquent, ex déclaration de la platform : template, j’ai du tout reprendre et il faut suivre…