Hello tout le monde,
Après pas mal d’heures à les confectionner, voici mes dashboards en version mobile, ordinateur et tablette.
Un grand merci à @Clooos pour ses Bubble Card , à la chaîne YouTube de My Smart Home , à Le0n le créateur du thème Rounded et à Jimmy Landry (qui lui même s’est inspiré de Matt8707 ) dont j’ai utilisé le code GitHub qu’il a mis à dispo pour le dashboard de ma tablette.
Mobile :
Images + résumé
La bottom bar me permet d’ouvrir les vues :
Accueil (icône maison) : pour revenir à l’accueil quand je suis sur l’une des 4 autres vues
Médias (icône TV) : pour contrôler mon Apple TV et mes Sonos One Gen2
Assist (icône Google Assistant) : pour lancer Assist
Aspirateur (icône aspirateur) : pour contrôler mon Roborock Q7 Max
Securité (icône caméra) : pour avoir accès à ma sonnette connectée Reolink et tous les capteurs que ce soit d’ouverture de porte/fenêtre, de présence ou la localisation de certains objets.
Tout le reste est cliquable, que ce soit la consommation, la météo, la température, les icônes des pièces, les courses, et cela ouvre une vue avec Bubble Card.
Le fonctionnement pour la version ordinateur, tablette est ensuite le même, disposer de manière différente mais toujours avec Bubble Card.
Ordinateur :
Images
Tablette :
Images
Extensions HACS utilisées :
Résumé
Bubble Card
Button Card
Card Mod
Custom Brand Icons
Frigate Card
Kiosk Mode pour cacher la top bar et sidebar sur mobile et tablette
Layout Card
Linky Content Card
Mini Graph Card
My Card Bundle
Swipe Card
Thème utilisé :
Résumé
Rounded pour tous les appareils dans Profil > Général > Paramètres du navigateur
Dites moi ce que vous en pensez. Si jamais vous souhaitez le code, n’hésitez pas à me le demander, je vous le transmettrais avec plaisir. Et si jamais vous voyez des améliorations ou comment vous auriez fait de votre côté, je suis aussi preneur. Avoir la vision d’autres personnes est toujours bon à prendre.
En tout cas, merci à tous sur le forum pour m’avoir aider de près ou de loin, ça m’a permis d’affiner mon dashboard, à éviter certains problèmes, à les fixer, ou encore à découvrir certaines choses aussi
9 « J'aime »
Beau boulot bravo!!!
1 « J'aime »
Merci
Oui bien sûr le voici
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#aspirateur'
name: Aspirateur
icon: mdi:vacuum
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'on' ? 'blue' : '#525345'} !important;
}
.bubble-icon {
opacity: 1 !important;
color: ${state === 'on' ? 'blue' : '#525345'} !important;
}
.bubble-icon-container {
background: white;
}
.bubble-close-button {
background: #525345 !important;
color: ${state === 'on' ? 'blue' : 'white'} !important;
}
sub_button: []
bg_color: '#000000'
shadow_opacity: ''
bg_opacity: '88'
- type: vertical-stack
cards:
- features:
- type: vacuum-commands
commands:
- start_pause
- stop
- clean_spot
- locate
- return_home
type: tile
entity: vacuum.roborock_q7_max
hide_state: false
- type: picture
image_entity: image.roborock_q7_max
- type: custom:bubble-card
card_type: separator
name: Entretien du Roborock
- square: false
type: grid
cards:
- type: custom:button-card
name: >-
[[[return
states["vacuum.roborock_q7_max"].attributes.battery_level]]]
styles:
grid:
- grid-template-areas: '"n eenheid" "l l"'
- grid-template-columns: min-content min-content
name:
- font-size: 32px
- color: var(--contrast20)
card:
- height: 80px
- border-radius: 24px
- padding: 30px 0 6px 16px
- box-sizing: border-box
- background: var(--contrast2)
- box-shadow: none
label:
- justify-self: start
- font-size: 12px
- color: var(--contrast20)
- margin-top: '-2px'
custom_fields:
eenheid:
- font-size: 12px
- color: var(--contrast9)
- margin-bottom: 6px
- padding-left: 2px
label: Batterie
custom_fields:
eenheid: ' %'
show_label: true
tap_action:
action: more-info
haptic: medium
- type: custom:button-card
name: >-
[[[return
Math.round(states["sensor.roborock_q7_max_temps_restant_brosse_principale"].state
/ 60 / 60)]]]
styles:
grid:
- grid-template-areas: '"n eenheid" "l l"'
- grid-template-columns: min-content min-content
name:
- font-size: 32px
- color: var(--contrast20)
card:
- height: 80px
- border-radius: 24px
- padding: 30px 0 6px 16px
- box-sizing: border-box
- background: var(--contrast2)
- box-shadow: none
label:
- justify-self: start
- font-size: 12px
- color: var(--contrast20)
- margin-top: '-2px'
custom_fields:
eenheid:
- font-size: 12px
- color: var(--contrast9)
- margin-bottom: 6px
- padding-left: 2px
label: Brosse principale
custom_fields:
eenheid: ' heures'
show_label: true
tap_action:
action: more-info
haptic: medium
- type: custom:button-card
name: >-
[[[return
Math.round(states["sensor.roborock_q7_max_temps_restant_brosse_laterale"].state
/ 60 / 60)]]]
styles:
grid:
- grid-template-areas: '"n eenheid" "l l"'
- grid-template-columns: min-content min-content
name:
- font-size: 32px
- color: var(--contrast20)
card:
- height: 80px
- border-radius: 24px
- padding: 30px 0 6px 16px
- box-sizing: border-box
- background: var(--contrast2)
- box-shadow: none
label:
- justify-self: start
- font-size: 12px
- color: var(--contrast20)
- margin-top: '-2px'
custom_fields:
eenheid:
- font-size: 12px
- color: var(--contrast9)
- margin-bottom: 6px
- padding-left: 2px
label: Brosse latérale
custom_fields:
eenheid: ' heures'
show_label: true
tap_action:
action: more-info
haptic: medium
- type: custom:button-card
name: >-
[[[return
Math.round(states["sensor.roborock_q7_max_temps_restant_capteurs"].state
/ 60 / 60)]]]
styles:
grid:
- grid-template-areas: '"n eenheid" "l l"'
- grid-template-columns: min-content min-content
name:
- font-size: 32px
- color: var(--contrast20)
card:
- height: 80px
- border-radius: 24px
- padding: 30px 0 6px 16px
- box-sizing: border-box
- background: var(--contrast2)
- box-shadow: none
label:
- justify-self: start
- font-size: 12px
- color: var(--contrast20)
- margin-top: '-2px'
custom_fields:
eenheid:
- font-size: 12px
- color: var(--contrast9)
- margin-bottom: 6px
- padding-left: 2px
label: Capteurs
custom_fields:
eenheid: ' heures'
show_label: true
tap_action:
action: more-info
haptic: medium
columns: 2
Joli dashboard. Je suis encore en phase de test et je réfléchis au mien. Ça me donne des idées…
1 « J'aime »
Avec plaisir
1 « J'aime »
Merci beaucoup
J’ai essayé de faire quelque chose de sobre et surtout facile à utiliser, que cela soit pour ma femme, moi mais aussi si l’on a des invités, style nos parents. Le plus important était bien sur la version mobile.
Petite info aussi, pour les différentes couleurs utilisées, je suis allé sur le site Color Hunt, qui permet de voir les associations et avoir le code hex, ça aide
1 « J'aime »
Pour le côté sobre et facile à utiliser, je suis d’accord que c’est important. Surtout pour le « WAF » sur mobile…
1 « J'aime »
Hello,
1 « J'aime »
Yes bien sûr, voici les 3 fichiers via ce lien car impossible par message, il y avait trop de caractères : SwissTransfer - Envoi sécurisé et gratuit de gros fichiers
Un fichier par appareil, à savoir :
desktop.yaml
mobile.yaml
tablette.yaml
Il est possible je pense, de supprimer certaines lignes de code pour que cela soit plus clean, mais chez moi ça fonctionne
Pour info, le lien expirera le 28 septembre à 00:09.
Top et Merci! Effectivement il y a du contenu^^ Je vais jouer avec et voire comment cela peut s’intégrer chez moi.
1 « J'aime »
Oui en effet c’est avec les groupes que je me suis occupé de faire ça. Pareil pour éteindre toutes les lumières dans le salon (excepté l’interrupteur salle à manger).
1 « J'aime »
Salut,
Hello,
Merci beaucoup
J’ai créé 3 dashboards différents en fonction de la taille de l’écran et de sa disposition (portrait ou paysage).
J’ai installé l’application sur ma tablette et mon smartphone, comme ça dans cette l’app > Ton compte en bas à gauche avec ta photo ou un icône > tu descends jusqu’à la section Tableau de bord et tu choisis celui correspondant à l’appareil
1 « J'aime »
CMY
Octobre 24, 2024, 5:06
15
Salut
Top ton dashboard !
Ce serait possible d’avoir la partie sur la conso elec notamment le resumé linky à la semaine ?
Merci
Hello,
Merci
Voici le code pour toute la bubble card avec la consommation :
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#consommation"
name: Consommation
icon: mdi:transmission-tower
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'on' ? 'blue' : '#ccd41f'} !important;
}
.bubble-icon {
opacity: 1 !important;
color: ${state === 'on' ? 'blue' : '#ccd41f'} !important;
}
.bubble-icon-container {
background: white;
}
.bubble-close-button {
background: #ccd41f !important;
color: ${state === 'on' ? 'blue' : 'white'} !important;
}
bg_color: "#000000"
- type: custom:content-card-linky
entity: sensor.linky_25860347263998_consumption
showEcoWattJ12: false
showHeader: true
showTempo: false
showEcoWatt: false
showIcon: true
showHistory: true
showInTableUnit: true
showDayHCHP: false
showDayPriceHCHP: false
showYearRatio: false
showMonthRatio: false
showError: false
showTitle: false
showPeakOffPeak: false
showDayPrice: true
showPrice: true
showDayMaxPower: false
showCurrentMonthRatio: true
showWeekRatio: true
showTitreLigne: false
showYesterdayRatio: false
showTempoColor: false
- type: custom:bubble-card
card_type: separator
name: Consommation par appareil
icon: mdi:lightning-bolt-outline
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.0x6c5cb1fffe87ac32_energy
stat_types:
- change
days_to_show: 30
hide_legend: true
title: Radiateur salle de jeux
logarithmic_scale: false
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.0x90395efffe4b1137_energy
stat_types:
- change
days_to_show: 30
hide_legend: true
title: Sèche-serviette
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.0xa4c138122eefa7b2_energy
stat_types:
- change
days_to_show: 30
hide_legend: true
title: Lave-linge
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.0xa4c13842ee4feb64_energy
stat_types:
- change
days_to_show: 30
hide_legend: true
title: Sèche-linge
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.0xa4c1382195c0554f_energy
stat_types:
- change
days_to_show: 30
hide_legend: true
title: Prise bureau
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.0xa4c138bda649eb45_energy
stat_types:
- change
days_to_show: 30
hide_legend: true
title: Lave-vaisselle
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.0xa4c13881d73ad494_energy
stat_types:
- change
days_to_show: 30
hide_legend: true
title: Four
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.0xa4c1385bff7181c8_energy
stat_types:
- change
days_to_show: 30
hide_legend: true
title: Poêle à granulés
Sinon, juste pour le résumé de la semaine :
type: custom:content-card-linky
entity: sensor.linky_25860347263998_consumption
showEcoWattJ12: false
showHeader: true
showTempo: false
showEcoWatt: false
showIcon: true
showHistory: true
showInTableUnit: true
showDayHCHP: false
showDayPriceHCHP: false
showYearRatio: false
showMonthRatio: false
showError: false
showTitle: false
showPeakOffPeak: false
showDayPrice: true
showPrice: true
showDayMaxPower: false
showCurrentMonthRatio: true
showWeekRatio: true
showTitreLigne: false
showYesterdayRatio: false
showTempoColor: false
Bonne journée
1 « J'aime »
Helloooo, super taffe waw
Merci beaucoup d’avance
Hello,
Merci
@Azwinklr , et voici le lien SwissTransfer où tu retrouveras les 3 tableaux (desktop / mobile / tablette) : SwissTransfer - Envoi sécurisé et gratuit de gros fichiers . Attention, il n’est valable que jusqu’au 4 décembre
1 « J'aime »
