Bonjour, je tenais juste à vous remercier pour le partage de cette carte, c’est simple à mettre en place et top pour surveiller rapidement mon NAS !
Merci ! 
1 « J'aime »
Merci beaucoup !!!
1 « J'aime »
Bonjour, merci beaucoup pour le partage de cette carte, c’est en place et cela marche.
Merci !
1 « J'aime »
Merci pour le partage 
Une bonne carte synthétique pour mon syno.
1 « J'aime »
Bonjour et merci pour le partage (et le temps passé).
J’ai ajouté les disque en sus que j’ai.
Je vais chercher pour les « superpositions » que j’ai (due à l’ajout des autres valeurs).
@Pbranly Comment as-tu ajouté le log, l’image et les autres informations?
@Spl4sh Vraiment un grand merci, j’ai appris grâce à toi et mon HA est plus beau aussi
Je suis arrivé à celà :
Ca me plait beaucoup, (sauf les boutons reboot et stop mais je vais chercher).
Merci encore @Spl4sh (et aux autres bien sur)
1 « J'aime »
Bonjour,
Voici le mien, en espérant vous donner quelques inspirations :
il faut quelques add-ons :
- Stack in card
- Mushroom Update
- Mushroom-entity-card
- Ring Tile
- Button Card
Le Syno Mise à jour apparait seulement s’il y a une mise à jour.
Je mets le code ici si vous êtes intéressés:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:button-card
show_name: false
show_icon: true
show_state: false
show_entity_picture: true
entity_picture: /local/images/buttons/synology.png
styles:
entity_picture:
- height: 110px
- width: 180px
card:
- height: 110px
- background: rgba(21, 86, 111, 0.2)
- type: custom:ring-tile
entity: sensor.syno_temperature
ring_type: open
ring_size: 2
ring_only: true
top_element: icon
middle_element: value_with_unit
bottom_element: name
name: Température Syno
icon: mdi:tape-drive
scale: ticks_with_labels
min: 0
max: 100
colour:
"0": ha_purple
"8": ha_blue
"40": ha_green
"50": ha_yellow
"60": ha_orange
"70": ha_red
card_mod:
style: |
ha-card {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: linear-gradient(90deg, #1b1a18 0%, #26231f 8%, #3b352c 50%, #26231f 92%, #1b1a18 100%);
}
- type: custom:mushroom-update-card
entity: update.syno_mise_a_jour_dsm
fill_container: true
layout: horizontal
visibility:
- condition: state
entity: update.syno_mise_a_jour_dsm
state: "on"
card_mod:
style: |
ha-card {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: linear-gradient(90deg, #1b1a18 0%, #26231f 8%, #3b352c 50%, #26231f 92%, #1b1a18 100%);
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-entity-card
entity: sensor.syno_drive_1_etat
fill_container: false
name: HD1
- type: custom:mushroom-entity-card
entity: sensor.syno_drive_2_etat
fill_container: false
name: HD2
- type: custom:mushroom-entity-card
entity: sensor.syno_drive_3_etat
fill_container: false
name: HD3
- type: custom:mushroom-entity-card
entity: sensor.syno_drive_4_etat
fill_container: false
name: HD4
card_mod:
style: |
ha-card {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: linear-gradient(90deg, #1b1a18 0%, #26231f 8%, #3b352c 50%, #26231f 92%, #1b1a18 100%);
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:ring-tile
entity: sensor.syno_drive_1_temperature
ring_type: open
ring_size: 1
ring_only: true
top_element: icon
middle_element: value_with_unit
bottom_element: name
name: HD1
icon: mdi:tape-drive
scale: ticks_with_labels
min: 0
max: 100
colour:
"0": ha_purple
"8": ha_blue
"40": ha_green
"50": ha_yellow
"60": ha_orange
"70": ha_red
- type: custom:ring-tile
entity: sensor.syno_drive_2_temperature
ring_type: open
ring_size: 1
ring_only: true
top_element: icon
middle_element: value_with_unit
bottom_element: name
name: HD2
icon: mdi:tape-drive
scale: ticks_with_labels
min: 0
max: 100
colour:
"0": ha_purple
"8": ha_blue
"40": ha_green
"50": ha_yellow
"60": ha_orange
"70": ha_red
- type: custom:ring-tile
entity: sensor.syno_drive_3_temperature
ring_type: open
ring_size: 1
ring_only: true
top_element: icon
middle_element: value_with_unit
bottom_element: name
name: HD3
icon: mdi:tape-drive
scale: ticks_with_labels
min: 0
max: 100
colour:
"0": ha_purple
"8": ha_blue
"40": ha_green
"50": ha_yellow
"60": ha_orange
"70": ha_red
- type: custom:ring-tile
entity: sensor.syno_drive_4_temperature
ring_type: open
ring_size: 1
ring_only: true
top_element: icon
middle_element: value_with_unit
bottom_element: name
name: HD4
icon: mdi:tape-drive
scale: ticks_with_labels
min: 0
max: 100
colour:
"0": ha_purple
"8": ha_blue
"40": ha_green
"50": ha_yellow
"60": ha_orange
"70": ha_red
card_mod:
style: |
ha-card {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: linear-gradient(90deg, #1b1a18 0%, #26231f 8%, #3b352c 50%, #26231f 92%, #1b1a18 100%);
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:ring-tile
entity: sensor.syno_volume_1_volume_utilise
ring_type: open
ring_size: 2
ring_only: true
top_element: icon
middle_element: value_with_unit
bottom_element: name
name: Usage HD
icon: mdi:tape-drive
scale: ticks_with_labels
- type: custom:ring-tile
entity: sensor.syno_utilisation_du_processeur_totale
ring_type: open
ring_size: 2
ring_only: true
top_element: icon
middle_element: value_with_unit
bottom_element: name
name: Processeur
icon: mdi:cpu-64-bit
scale: ticks_with_labels
indicator: pointer
- type: custom:ring-tile
entity: sensor.syno_utilisation_de_la_memoire_reelle
ring_type: open
ring_size: 2
ring_only: true
top_element: icon
middle_element: value_with_unit
bottom_element: name
name: Mémoire
icon: mdi:memory
scale: ticks_with_labels
card_mod:
style: |
ha-card {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: linear-gradient(90deg, #1b1a18 0%, #26231f 8%, #3b352c 50%, #26231f 92%, #1b1a18 100%);
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.syno_debit_de_telechargement
primary_info: state
secondary_info: name
name: Téléchargement
icon_color: orange
- type: custom:mushroom-entity-card
entity: sensor.syno_debit_de_transfert
primary_info: state
secondary_info: name
name: Transfert
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.syno_debit_de_telechargement
name: Temperature
color: var(--orange-color)
- entity: sensor.syno_debit_de_transfert
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: linear-gradient(90deg, #1b1a18 0%, #26231f 8%, #3b352c 50%, #26231f 92%, #1b1a18 100%);
}
card_mod:
style: |
ha-card {
background: linear-gradient(90deg, #1b1a18 0%, #26231f 8%, #3b352c 50%, #26231f 92%, #1b1a18 100%);
box-shadow: rgba(220, 180, 100, 0.4) 4px 4px 30px;
}
15 « J'aime »
Super jolie t’a page.
2 « J'aime »
Merci beaucoup, j’y ai passé des heures ces derniers temps afin de comprendre comment réaliser des cartes à mon gout.
J’ai d’autres exemples que je pourrai partager également.
Je pense aussi à faire une vidéo de mon environnement.
2 « J'aime »
Salut 
Voudrais tu partager télé code yaml de la carte s’il te plaît ?
Très belle carte !! 
1 « J'aime »
Bonjour @Spl4sh,
tu as testé la Maj de apexchart-card ( 2.2.3 ) voir si tu n’as plus de bug avec ta carte nas ?
Malheureusement c’est pire qu’avant… Le mieux serait de les modifier avec un ring-tile ou encore un modern circular gauge
1 « J'aime »
Il y a un fork de Vingerha , à tester 
Salut @WarC0zes
Il y a une méthode d’installation via HACS ? car le dépôt GH ne semble pas correspondre à une intégration…
Et je n’ai pas envi d’aller à la mano pour l’installation 
Haaa ! C’était de type tableau de bord ! 
Merci 
1 « J'aime »
Bonjour.
Merci pour la carte, quelques corrections pour centrer les jauges (merci chatgpt) et augmenter le nombre de point sur le graphique.
type: vertical-stack
cards:
- type: custom:button-card
name: bmnas
label: null
template: card_title
- type: custom:stack-in-card
mode: vertical
cards:
- type: entities
entities:
- entity: sensor.synology_drive_2_etat
type: custom:multiple-entity-row
state_header: HDD 2
name: Status
icon: mdi:nas
entities:
- entity: sensor.synology_drive_1_etat
name: HDD 1
- entity: sensor.bmnas_temperature
type: custom:multiple-entity-row
state_header: Serveur
name: Température
entities:
- entity: sensor.synology_drive_1_temperature
name: HDD 1
- entity: sensor.synology_drive_2_temperature
name: HDD 2
- entity: update.synology_mise_a_jour_dsm
icon: mdi:update
name: Mise à jour DSM
card_mod:
style: |
ha-card {
border: none;
font-weight: 500;
margin-right: 10px;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.synology_utilisation_du_processeur_totale
color: rgb(76, 175, 80)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 140px
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.synology_utilisation_du_processeur_totale
primary_info: name
secondary_info: state
name: CPU
icon_color: green
layout: vertical
card_mod:
style: |
ha-card {
top: -63px;
border: none;
}
card_mod:
style: |
ha-card {
top: 50px;
border: none;
margin-top: -55px; /* Ajuste si besoin */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.synology_utilisation_de_la_memoire_reelle
color: rgb(33, 150, 243)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 140px
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.synology_utilisation_de_la_memoire_reelle
primary_info: name
secondary_info: state
name: RAM
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
top: -63px;
border: none;
}
card_mod:
style: |
ha-card {
top: 50px;
border: none;
margin-top: -55px; /* Ajuste si besoin */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.synology_volume_1_volume_utilise
color: rgb(255, 87, 34)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 140px
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-entity-card
entity: sensor.synology_volume_1_volume_utilise
primary_info: name
secondary_info: state
name: Disque dur
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
top: -63px;
border: none;
}
card_mod:
style: |
ha-card {
top: 50px;
border: none;
margin-top: -55px; /* Ajuste si besoin */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
columns: 3
card_mod:
style: |
ha-card {
border: none;
margin-top: -15px;
}
- type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.synology_debit_de_telechargement
primary_info: state
secondary_info: name
name: Téléchargement
icon_color: orange
- type: custom:mushroom-entity-card
entity: sensor.synology_debit_de_transfert
primary_info: state
secondary_info: name
name: Transfert
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.synology_debit_de_telechargement
name: Temperature
color: var(--orange-color)
- entity: sensor.synology_debit_de_transfert
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
points_per_hour: 10
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
border: none;
margin-top: -25px;
}
2 « J'aime »