Merci @oli_34 !
Oui j’essaie de trouver un équilibre entre dashboard complet et épuré, et pour l’instant celui-ci me convient parfaitement.
Oui j’utilise Apex charts pour les radial bar.
Pas de soucis, j’ai organisé mon dashboard en 3 colonnes. Le code est sûrement loin d’être parfait et les marges sont adaptées à ma résolution (1080p) grâce à Card Mod. Voici le code pour chacune d’entre elles :
type: vertical-stack
cards:
- type: custom:mod-card
style: |
ha-card {
background: rgba(25,25,25,0.65);
}
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Météo
icon: mdi:weather-partly-cloudy
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 6px
icon:
- height: 42px
- width: 63px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 18% min-content
card_mod:
style: |
ha-card {
margin-top: 10px;
border: none;
}
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_maison
forecast_type: hourly
name: Météo
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin-top: -20px;
margin-bottom: -40px !important;
}
- show_current: false
show_forecast: true
type: weather-forecast
entity: weather.forecast_maison
forecast_type: daily
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:gap-card
height: 15
- type: custom:mod-card
style: |
ha-card {
background: rgba(25,25,25,0.65);
}
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Capteurs et déctecteurs
icon: fas:door-open
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 15px
icon:
- height: 32px
- width: 48px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 15% min-content
card_mod:
style: |
ha-card {
border: none;
margin-bottom: -10px !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.capteur_porte_garage_contact
primary: Porte du garage
secondary: "{% if is_state('binary_sensor.capteur_porte_garage_contact', 'on') %}\t Ouvert à {{ as_timestamp(states.binary_sensor.capteur_porte_garage_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% elif is_state('binary_sensor.capteur_porte_garage_contact', 'off') %} Fermé à {{ as_timestamp(states.binary_sensor.capteur_porte_garage_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% endif %}"
icon: >-
{% if is_state('binary_sensor.capteur_porte_garage_contact', 'on')
%}
mdi:door-open
{% elif is_state('binary_sensor.capteur_porte_garage_contact',
'off') %}
mdi:door-closed
{% endif %}
badge_icon: |-
{% if states('sensor.capteur_porte_garage_battery') | int > 70 %}
mdi:battery
{% elif states('sensor.capteur_porte_garage_battery') | int > 20 %}
mdi:battery-50
{% elif states('sensor.capteur_porte_garage_battery') | int > 1 %}
mdi:battery-10
{% endif %}
badge_color: |-
{% if states('sensor.capteur_porte_garage_battery') | int > 70 %}
green
{% elif states('sensor.capteur_porte_garage_battery') | int > 20 %}
orange
{% elif states('sensor.capteur_porte_garage_battery') | int > 1 %}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon_color: >-
{% if is_state('binary_sensor.capteur_porte_garage_contact', 'on')
%}
blue
{% elif is_state('binary_sensor.capteur_porte_garage_contact',
'off')
%}
#e5e5e5
{% endif %}
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.capteur_porte_garage_contact', 'on') %}
background: rgba(25,25,25,0.75);
{% else %}
background: none;
{% endif %}
box-shadow: none;
border: 0px !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.capteur_porte_veranda_contact
primary: Porte de la véranda
secondary: "{% if is_state(\"binary_sensor.capteur_porte_veranda_contact\", \"on\") %}\t Ouvert à {{ as_timestamp(states.binary_sensor.capteur_porte_veranda_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% elif is_state('binary_sensor.capteur_porte_veranda_contact', 'off') %} Fermé à {{ as_timestamp(states.binary_sensor.capteur_porte_veranda_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% endif %}"
icon: >-
{% if is_state('binary_sensor.capteur_porte_veranda_contact', 'on')
%}
mdi:door-open
{% elif is_state('binary_sensor.capteur_porte_veranda_contact',
'off') %}
mdi:door-closed
{% endif %}
badge_icon: |-
{% if states('sensor.capteur_porte_veranda_battery') | int > 70 %}
mdi:battery
{% elif states('sensor.capteur_porte_veranda_battery') | int > 20 %}
mdi:battery-50
{% elif states('sensor.capteur_porte_veranda_battery') | int > 1 %}
mdi:battery-10
{% endif %}
badge_color: |-
{% if states('sensor.capteur_porte_veranda_battery') | int > 70 %}
green
{% elif states('sensor.capteur_porte_veranda_battery') | int > 20 %}
orange
{% elif states('sensor.capteur_porte_veranda_battery') | int > 1 %}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon_color: >-
{% if is_state('binary_sensor.capteur_porte_veranda_contact', 'on')
%}
blue
{% elif is_state('binary_sensor.capteur_porte_veranda_contact',
'off')
%}
#e5e5e5
{% endif %}
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.capteur_porte_veranda_contact', 'on') %}
background: rgba(25,25,25,0.75);
{% else %}
background: none;
{% endif %}
box-shadow: none;
border: 0px !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.capteur_porte_veranda_2_contact
primary: Porte de la véranda 2
secondary: "{% if is_state(\"binary_sensor.capteur_porte_veranda_2_contact\", \"on\") %}\t Ouvert à {{ as_timestamp(states.binary_sensor.capteur_porte_veranda_2_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% elif is_state('binary_sensor.capteur_porte_veranda_2_contact', 'off') %} Fermé à {{ as_timestamp(states.binary_sensor.capteur_porte_veranda_2_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% endif %}"
icon: >-
{% if is_state('binary_sensor.capteur_porte_veranda_2_contact',
'on') %}
mdi:door-open
{% elif is_state('binary_sensor.capteur_porte_veranda_2_contact',
'off') %}
mdi:door-closed
{% endif %}
badge_icon: >-
{% if states('sensor.capteur_porte_veranda_2_battery') | int > 70 %}
mdi:battery
{% elif states('sensor.capteur_porte_veranda_2_battery') | int > 20
%}
mdi:battery-50
{% elif states('sensor.capteur_porte_veranda_2_battery') | int > 1
%}
mdi:battery-10
{% endif %}
badge_color: >-
{% if states('sensor.capteur_porte_veranda_2_battery') | int > 70 %}
green
{% elif states('sensor.capteur_porte_veranda_2_battery') | int > 20
%}
orange
{% elif states('sensor.capteur_porte_veranda_2_battery') | int > 1
%}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon_color: >-
{% if is_state('binary_sensor.capteur_porte_veranda_2_contact',
'on') %}
blue
{% elif is_state('binary_sensor.capteur_porte_veranda_2_contact',
'off')
%}
#e5e5e5
{% endif %}
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.capteur_porte_veranda_2_contact', 'on') %}
background: rgba(25,25,25,0.75);
{% else %}
background: none;
{% endif %}
box-shadow: none;
border: 0px !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.tapo_c225_e601_cell_motion_detection
primary: Caméra du salon
secondary: >-
Dernière détection à {{
as_timestamp(states.binary_sensor.tapo_c225_e601_cell_motion_detection.last_changed,
default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0)
}}
icon: >-
{% if is_state('binary_sensor.tapo_c225_e601_cell_motion_detection',
'on') %}
mdi:motion-sensor
{% elif
is_state('binary_sensor.tapo_c225_e601_cell_motion_detection',
'off') %}
mdi:motion-sensor-off
{% elif
is_state('binary_sensor.tapo_c225_e601_cell_motion_detection',
'unavailable') %}
mdi:motion-sensor-off
{% endif %}
badge_icon: |-
{% if is_state('switch.tapo_c225_e601_privacy', 'on') %}
mdi:shield-lock-outline
{% elif is_state('switch.tapo_c225_e601_privacy', 'off') %}
mdi:shield-lock-outline
{% endif %}
badge_color: |-
{% if is_state('switch.tapo_c225_e601_privacy', 'on') %}
green
{% elif is_state('switch.tapo_c225_e601_privacy', 'off') %}
blue
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon_color: >-
{% if is_state('binary_sensor.tapo_c225_e601_cell_motion_detection',
'on') %}
blue
{% elif
is_state('binary_sensor.tapo_c225_e601_cell_motion_detection',
'off') %}
#e5e5e5
{% elif
is_state('binary_sensor.tapo_c225_e601_cell_motion_detection',
'unavailable') %}
#e5e5e5
{% endif %}
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.tapo_c225_e601_cell_motion_detection', 'on') %}
background: rgba(25,25,25,0.75);
{% else %}
background: none;
{% endif %}
box-shadow: none;
border: 0px !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.capteur_mouvement_salon_occupancy
primary: Détecteur du salon
secondary: >-
Dernière détection à {{
as_timestamp(states.binary_sensor.capteur_mouvement_salon_occupancy.last_changed,
default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0)
}}
icon: >-
{% if is_state('binary_sensor.capteur_mouvement_salon_occupancy',
'on') %}
mdi:motion-sensor
{% elif is_state('binary_sensor.capteur_mouvement_salon_occupancy',
'off') %}
mdi:motion-sensor-off
{% endif %}
badge_icon: >-
{% if states('sensor.capteur_mouvement_salon_battery') | int > 70 %}
mdi:battery
{% elif states('sensor.capteur_mouvement_salon_battery') | int > 20
%}
mdi:battery-50
{% elif states('sensor.capteur_mouvement_salon_battery') | int > 1
%}
mdi:battery-10
{% endif %}
badge_color: >-
{% if states('sensor.capteur_mouvement_salon_battery') | int > 70 %}
green
{% elif states('sensor.capteur_mouvement_salon_battery') | int > 20
%}
orange
{% elif states('sensor.capteur_mouvement_salon_battery') | int > 1
%}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon_color: >-
{% if is_state('binary_sensor.capteur_mouvement_salon_occupancy',
'on') %}
blue
{% elif is_state('binary_sensor.capteur_mouvement_salon_occupancy',
'off') %}
#e5e5e5
{% endif %}
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.capteur_mouvement_salon_occupancy', 'on') %}
background: rgba(25,25,25,0.75);
{% else %}
background: none;
{% endif %}
box-shadow: none;
border: 0px !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.capteur_fenetre_chambre_contact
primary: Fenêtre de la chambre
secondary: "{% if is_state('binary_sensor.capteur_fenetre_chambre_contact', 'on') %}\t Ouvert à {{ as_timestamp(states.binary_sensor.capteur_fenetre_chambre_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% elif is_state('binary_sensor.capteur_fenetre_chambre_contact', 'off') %} Fermé à {{ as_timestamp(states.binary_sensor.capteur_fenetre_chambre_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% endif %}"
icon: >-
{% if is_state('binary_sensor.capteur_fenetre_chambre_contact',
'on') %}
mdi:window-open-variant
{% elif is_state('binary_sensor.capteur_fenetre_chambre_contact',
'off') %}
mdi:window-closed-variant
{% endif %}
badge_icon: >-
{% if states('sensor.capteur_fenetre_chambre_battery') | int > 70 %}
mdi:battery
{% elif states('sensor.capteur_fenetre_chambre_battery') | int > 20
%}
mdi:battery-50
{% elif states('sensor.capteur_fenetre_chambre_battery') | int > 1
%}
mdi:battery-10
{% endif %}
badge_color: >-
{% if states('sensor.capteur_fenetre_chambre_battery') | int > 70 %}
green
{% elif states('sensor.capteur_fenetre_chambre_battery') | int > 20
%}
orange
{% elif states('sensor.capteur_fenetre_chambre_battery') | int > 1
%}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon_color: >-
{% if is_state('binary_sensor.capteur_fenetre_chambre_contact',
'on') %}
blue
{% elif is_state('binary_sensor.capteur_fenetre_chambre_contact',
'off')
%}
#e5e5e5
{% endif %}
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.capteur_fenetre_chambre_contact', 'on') %}
background: rgba(25,25,25,0.75);
{% else %}
background: none;
{% endif %}
box-shadow: none;
border: 0px !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.capteur_fenetre_chambre_2_contact
primary: Fenêtre de la chambre 2
secondary: "{% if is_state('binary_sensor.capteur_fenetre_chambre_2_contact', 'on') %}\t Ouvert à {{ as_timestamp(states.binary_sensor.capteur_fenetre_chambre_2_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% elif is_state('binary_sensor.capteur_fenetre_chambre_2_contact', 'off') %} Fermé à {{ as_timestamp(states.binary_sensor.capteur_fenetre_chambre_2_contact.last_changed, default=0)|timestamp_custom('%Hh%M'' (le ''%d/%m/%Y'')', default=0) }} {% endif %}"
icon: >-
{% if is_state('binary_sensor.capteur_fenetre_chambre_2_contact',
'on') %}
mdi:window-open-variant
{% elif is_state('binary_sensor.capteur_fenetre_chambre_2_contact',
'off') %}
mdi:window-closed-variant
{% endif %}
badge_icon: >-
{% if states('sensor.capteur_fenetre_chambre_2_battery') | int > 70
%}
mdi:battery
{% elif states('sensor.capteur_fenetre_chambre_2_battery') | int >
20 %}
mdi:battery-50
{% elif states('sensor.capteur_fenetre_chambre_2_battery') | int > 1
%}
mdi:battery-10
{% endif %}
badge_color: >-
{% if states('sensor.capteur_fenetre_chambre_2_battery') | int > 70
%}
green
{% elif states('sensor.capteur_fenetre_chambre_2_battery') | int >
20 %}
orange
{% elif states('sensor.capteur_fenetre_chambre_2_battery') | int > 1
%}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
icon_color: >-
{% if is_state('binary_sensor.capteur_fenetre_chambre_2_contact',
'on') %}
blue
{% elif is_state('binary_sensor.capteur_fenetre_chambre_2_contact',
'off')
%}
#e5e5e5
{% endif %}
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.capteur_fenetre_chambre_2_contact', 'on') %}
background: rgba(25,25,25,0.75);
{% else %}
background: none;
{% endif %}
box-shadow: none;
border: 0px !important;
}
view_layout:
grid-area: Left
type: vertical-stack
cards:
- type: custom:mod-card
style: |
ha-card {
background: rgba(25,25,25,0.65);
}
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Sécurité
icon: mdi:shield-home-outline
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 6px
icon:
- height: 42px
- width: 63px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 18% min-content
card_mod:
style: |
ha-card {
margin-top: 10px;
border: none;
}
- type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme
keep_keypad_visible: false
use_clear_icon: true
button_scale_actions: 1
button_scale_keypad: 1
states: {}
show_messages: true
show_ready_indicator: true
show_bypassed_sensors: true
card_mod:
style: |
ha-card {
margin-top: 10px;
background: none;
box-shadow: none;
margin-top: -25px;
border: none;
}
- type: custom:gap-card
height: 15
- type: custom:mod-card
style: |
ha-card {
background: rgba(25,25,25,0.65);
}
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Caméra
icon: mdi:cctv
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 6px
icon:
- height: 42px
- width: 63px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 18% min-content
card_mod:
style: |
ha-card {
border: none;
}
- camera_view: live
type: picture-glance
title: Salon
image: https://demo.home-assistant.io/stub_config/kitchen.png
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: fullscreen
content:
type: picture-glance
camera_image: camera.salon
camera_view: live
entities:
- entity: camera.salon
entities:
- entity: button.tapo_c225_e601_move_up
tap_action:
action: call-service
service: button.press
data:
entity_id: button.tapo_c225_e601_move_up
- entity: button.tapo_c225_e601_move_down
tap_action:
action: call-service
service: button.press
data:
entity_id: button.tapo_c225_e601_move_down
- entity: button.tapo_c225_e601_move_left
tap_action:
action: call-service
service: button.press
data:
entity_id: button.tapo_c225_e601_move_left
- entity: button.tapo_c225_e601_move_right
tap_action:
action: call-service
service: button.press
data:
entity_id: button.tapo_c225_e601_move_right
- entity: button.tapo_c225_e601_reboot
tap_action:
action: call-service
service: button.press
data:
entity_id: button.tapo_c225_e601_reboot
- entity: switch.tapo_c225_e601_privacy
icon: mdi:shield-lock-outline
camera_image: camera.salon
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:gap-card
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: navigate
navigation_path: /ccab4aaf_frigate
name: Frigate
icon: mdi:cctv
color: '#5aa5f0'
show_state: false
hold_action:
action: none
styles:
card:
- font-size: 5px
name:
- font-size: 12px
icon:
- width: 55%
- margin-top: '-10%'
- margin-bottom: '-10%'
card_mod:
style: |
ha-card {
background: rgba(25,25,25,0.65);
box-shadow: none;
border-radius: 40px;
}
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: navigate
navigation_path: >-
/media-browser/browser/app%2Cmedia-source%3A%2F%2Ffrigate/image%2Cmedia-source%3A%2F%2Ffrigate%2Ffrigate%2Fevent-search%2Fsnapshots%2F%2F%2F%2F%2F%2F
name: Photos
icon: mdi:camera-iris
color: '#5aa5f0'
show_state: false
hold_action:
action: none
styles:
card:
- font-size: 5px
name:
- font-size: 12px
icon:
- width: 55%
- margin-top: '-10%'
- margin-bottom: '-10%'
card_mod:
style: |
ha-card {
background: rgba(25,25,25,0.65);
box-shadow: none;
border-radius: 40px;
}
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: navigate
navigation_path: >-
/media-browser/browser/app%2Cmedia-source%3A%2F%2Ffrigate/video%2Cmedia-source%3A%2F%2Ffrigate%2Ffrigate%2Frecordings%2F%2F%2F/video%2Cmedia-source%3A%2F%2Ffrigate%2Ffrigate%2Frecordings%2FSalon%2F%2F
name: Vidéos
icon: mdi:movie-open-play-outline
color: '#5aa5f0'
show_state: false
hold_action:
action: none
styles:
card:
- font-size: 5px
name:
- font-size: 12px
icon:
- width: 55%
- margin-top: '-10%'
- margin-bottom: '-10%'
card_mod:
style: |
ha-card {
background: rgba(25,25,25,0.65);
box-shadow: none;
border-radius: 40px;
}
- show_name: true
show_icon: true
type: custom:button-card
tap_action:
action: navigate
navigation_path: /dashboard-smartphone/camera-hd
name: HD
icon: mdi:quality-high
color: '#5aa5f0'
show_state: false
hold_action:
action: none
styles:
card:
- font-size: 5px
name:
- font-size: 12px
icon:
- width: 55%
- margin-top: '-10%'
- margin-bottom: '-10%'
card_mod:
style: |
ha-card {
background: rgba(25,25,25,0.65);
box-shadow: none;
border-radius: 40px;
}
- type: custom:gap-card
- type: custom:mod-card
style: |
ha-card {
background: rgba(25,25,25,0.65);
}
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Température & Humidité
icon: fas:temperature-half
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 6px
icon:
- height: 32px
- width: 48px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 15% min-content
card_mod:
style: |
ha-card {
margin-top: 10px;
margin-bottom: -5px !important;
border: none;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.capteur_temperature_1_temperature
max: 40
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -5
hollow:
size: 85%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: vertical
opacityFrom: 0
opacityTo: 1
colorStops:
- offset: 0
color: '#7dc8ff'
opacity: 1
- offset: 40
color: '#2a75cf'
opacity: 1
legend:
show: false
chart:
height: 200
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.capteur_temperature_1_humidity
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -5
hollow:
size: 85%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: vertical
opacityFrom: 0
opacityTo: 1
colorStops:
- offset: 0
color: '#ffd27f'
opacity: 1
- offset: 100
color: '#ffc04c'
opacity: 1
legend:
show: false
chart:
height: 180
card_mod:
style: |
ha-card {
margin-top: -150px;
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.capteur_temperature_1_temperature
size: 12%
icon: mdi:sofa
show_state: false
show_name: false
label: Salon
show_label: true
styles:
grid:
- grid-template-areas: '"i" "l" "temp" "hum"'
custom_fields:
temp: >
[[[ var temp =
states['sensor.capteur_temperature_1_temperature' ].state;
return `<ha-icon
icon="fas:temperature-half"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + temp + '°C'; ]]]
hum: >
[[[ var hum =
states['sensor.capteur_temperature_1_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
card_mod:
style: |
ha-card {
margin-top: -150px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.capteur_temperature_2_temperature
max: 40
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -5
hollow:
size: 85%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: vertical
opacityFrom: 0
opacityTo: 1
colorStops:
- offset: 0
color: '#7dc8ff'
opacity: 1
- offset: 40
color: '#2a75cf'
opacity: 1
legend:
show: false
chart:
height: 200
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.capteur_temperature_2_humidity
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -5
hollow:
size: 85%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: vertical
opacityFrom: 0
opacityTo: 1
colorStops:
- offset: 0
color: '#ffd27f'
opacity: 1
- offset: 100
color: '#ffc04c'
opacity: 1
legend:
show: false
chart:
height: 180
card_mod:
style: |
ha-card {
margin-top: -150px;
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.capteur_temperature_2_temperature
size: 12%
icon: mdi:bed-king
show_state: false
show_name: false
label: Chambre
show_label: true
styles:
grid:
- grid-template-areas: '"i" "l" "temp" "hum"'
custom_fields:
temp: >
[[[ var temp =
states['sensor.capteur_temperature_2_temperature' ].state;
return `<ha-icon
icon="fas:temperature-half"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + temp + '°C'; ]]]
hum: >
[[[ var hum =
states['sensor.capteur_temperature_2_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
card_mod:
style: |
ha-card {
margin-top: -150px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
name: Salon
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.capteur_temperature_1_temperature
name: Temp.
color: '#2a75cf'
- entity: sensor.capteur_temperature_1_humidity
color: '#ffc04c'
name: Humidité
show_line: true
show_points: true
show_legend: true
y_axis: secondary
show:
fill: true
graph: line
icon: false
name: false
state: false
labels: false
extrema: true
average: true
icon_adaptive_color: false
labels_secondary: false
align_icon: right
align_state: left
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
- type: custom:mini-graph-card
name: Chambre
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.capteur_temperature_2_temperature
name: Temp.
color: '#2a75cf'
- entity: sensor.capteur_temperature_2_humidity
color: '#ffc04c'
name: Humidité
show_line: true
show_points: true
show_legend: true
y_axis: secondary
show:
fill: true
graph: line
icon: false
name: false
state: false
labels: false
extrema: true
average: true
icon_adaptive_color: false
labels_secondary: false
align_icon: right
align_state: left
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
view_layout:
grid-area: Middle
type: vertical-stack
cards:
- type: custom:mod-card
style: |
ha-card {
background: rgba(25,25,25,0.65);
}
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Beelink Mini S12 Pro
icon: fas:computer
layout: icon_name
tap_action:
action: navigate
navigation_path: /config/devices/device/dce81020ba4dfa25b473527e36818e9a
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 6px
icon:
- height: 32px
- width: 48px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 20% min-content
card_mod:
style: |
ha-card {
margin-top: 10px;
border: none;
}
- type: custom:button-card
name: Alder Lake N100
icon: fas:microchip
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 12px
icon:
- height: 21px
- width: 32px
- justify-self: center
- align-self: end
name:
- font-weight: 500
- font-size: 16px
- text-align: left
grid:
- grid-template-columns: 45px min-content
card_mod:
style: |
ha-card {
border: none;
margin-top: 5px !important;
margin-bottom: -15px !important;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.system_monitor_temperature_du_processeur
max: 105
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
startAngle: -108
endAngle: 108
hollow:
size: 75%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: horizontal
opacityFrom: 1
opacityTo: 1
colorStops:
- offset: 0
color: '#7dc8ff'
opacity: 1
- offset: 105
color: '#2a75cf'
opacity: 1
legend:
show: false
chart:
height: 240
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.system_monitor_temperature_du_processeur
primary_info: state
secondary_info: name
name: Température CPU
icon_color: '#5aafff'
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -105px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.system_monitor_utilisation_du_processeur
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
startAngle: -108
endAngle: 108
hollow:
size: 75%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: horizontal
opacityFrom: 1
opacityTo: 1
colorStops:
- offset: 0
color: '#5aafff'
opacity: 1
legend:
show: false
chart:
height: 240
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.system_monitor_utilisation_du_processeur
primary_info: state
secondary_info: name
name: Utilisation CPU
icon_color: '#5aafff'
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -105px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin-bottom: -15px !important;
}
- type: custom:button-card
name: RAM & SSD
icon: mdi:database-check
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 0px
icon:
- height: 24px
- width: 36px
- justify-self: center
- align-self: end
name:
- font-weight: 500
- font-size: 16px
- text-align: left
grid:
- grid-template-columns: 65px min-content
card_mod:
style: |
ha-card {
border: none;
margin-bottom: -5px !important;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.system_monitor_memoire_utilisee
max: 16
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
startAngle: -108
endAngle: 108
hollow:
size: 75%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: horizontal
opacityFrom: 1
opacityTo: 1
colorStops:
- offset: 0
color: '#5aafff'
opacity: 1
legend:
show: false
chart:
height: 240
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.system_monitor_memoire_utilisee
primary_info: state
secondary_info: name
name: Utilisation RAM
icon_color: '#5aafff'
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -105px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.system_monitor_utilisation_du_disque
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
startAngle: -108
endAngle: 108
hollow:
size: 75%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: horizontal
opacityFrom: 1
opacityTo: 1
colorStops:
- offset: 0
color: '#5aafff'
opacity: 1
legend:
show: false
chart:
height: 240
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.system_monitor_utilisation_du_disque
primary_info: state
secondary_info: name
name: Utilisation SSD
icon_color: '#5aafff'
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -105px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin-bottom: -15px !important;
}
- type: custom:gap-card
height: 15
- type: custom:mod-card
style: |
ha-card {
background: rgba(25,25,25,0.65);
}
card:
type: vertical-stack
cards:
- type: custom:button-card
name: Eaton 3S 850FR
icon: fas:plug-circle-bolt
layout: icon_name
tap_action:
action: navigate
navigation_path: /config/devices/device/6df1cde1503782adf143920214bf18fe
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 8px
icon:
- height: 32px
- width: 48px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 18% min-content
card_mod:
style: |
ha-card {
border: none;
margin-top: 10px !important;
margin-bottom: -10px;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.eaton3s850fr_charge_de_la_batterie
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
startAngle: -108
endAngle: 108
hollow:
size: 75%
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.24
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shadeIntensity: 1
type: horizontal
opacityFrom: 1
opacityTo: 1
colorStops:
- offset: 0
color: '#7dc8ff'
opacity: 1
- offset: 100
color: '#2a75cf'
opacity: 1
legend:
show: false
chart:
height: 240
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.eaton3s850fr_charge_de_la_batterie
primary_info: state
secondary_info: name
name: Charge de la batterie
icon_color: '#5aafff'
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -105px;
width: 140px;
margin-left: auto;
margin-right: auto;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.eaton3s850fr_etat
name: État
icon: mdi:connection
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin-bottom: -20px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.eaton3s850fr_autonomie_de_la_batterie
name: Autonomie batterie
icon: mdi:battery-charging
fill_container: false
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin-bottom: -20px !important;
}
- type: custom:mushroom-entity-card
entity: sensor.eaton3s850fr_puissance_reelle_actuelle
name: Puissance actuelle
fill_container: false
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin-bottom: 10px !important;
}
view_layout:
grid-area: Right
Pour l’onduleur je ne me souviens pas avoir modifié quelque chose pour avoir l’affichage en minute mais dans le doute ci-dessous tu trouveras le paramétrage de l’entité chez moi :
