[Mon Dashboard] - @kaoru

kaoru · Novembre 16, 2020, 12:57

Mon dashboard

EDIT : page de forum mise à jour 21/10/2021

Bonjour à la communauté HACF,

Je me présente rapidement : je m’appelle William, petit habitué depuis presque 2 ans de Jeedom, je suis passé sur home assistant, il y a un peu plus d’une semaine. Je suis étudiant dans l’administration système.

En consultant ce qu’on fait sur le forum anglais d’Home Assistant, je suis tombé sur ce topic

Je vous laisse consulter mon repo Github qui contient tous mon travail, et qui est beaucoup plus complet.

Le dashboard du créateur de ce design :

Je trouve ce design basé sur homekit très esthétique. Matt, créateur de ce design a proposé sa configuration dans un repo github disponible dans le topic. Ce design a surtout pour vocation d’être affiché sur une tablette murale.

J’ai voulu l’intégrer dans mon home assistant tout frais. Pour un débutant venant de commencer dessus, c’était pas facile, mais j’ai très bien avancé en lisant les forums et surtout ce forum et un peu d’expérience perso.

Le dashboard dans sa dernière version

J’ai ajouté une fonctionnalité pas proposé par ce design. C’est des bouton-card pour avoir la température avec une swipe-card pour avoir accès à d’autres température tout en gardant l’esthétisme proposé par le design. Avec un clic, on peut faire apparaitre un popup qui affiche plus précisément la température Je peux vous fournir le code des thermomètres pour l’intégrer à ce design chez vous. Je vous laisse personnaliser les options des courbes parce que j’ai fait en sorte d’afficher « une tendance » des dernière 12h, sur les buton-card des témpérature.

Cependant, je dois l’améliorer. J’ai superposé un bouton-card et un mini-grap-card sauf que la mini-graph dépasse un peu car c’est un carré, je dois faire en sorte d’ajouter un border radius pour que ça colle bien avec le bouton. (c’est pas très visible)

EDIT : aujourd’hui mini-graph réglé dans ses dernières versions.

Thermomètre :

thermo

J’ai aussi swipe-card mes lampes de la catégorie William car j’ai plus que 4 ampoules ainsi que ses groupes.
light

Problèmes rencontrés :

La récupération de l’image de la dernière chose téléchargé dans Plex.
Le hold_action sur les boutons des swap-card sur les navigateurs de PC ne fonctionne pas vraiment. Aucun problème sur les tablettes et téléphone. J’ai pallié le problème en faisant du double_tap_action.
Cela serait la faute du module swap-card. Problème reporté dans les issues du repo github du module.
son des clic sur les navigateur PC.

Projet de fonctionnalités supplémentaires :

Version mobile (merci la dernier version du dasbboard)
Prise en charge pour de futures caméras ?
Ajout de Spotify et du media control dans le partie media.
Avoir des menus pour seulement afficher les lumières, les températures et autres en plus grand
Système d’alarme
Consommation eau et chauffage

Implémentations restantes à finir

TV samsung (en cours)
Robot aspirateur (achat)

Tips :

Les fonts d’Apple sont disponibles via ce repo Github

Clemalex · Novembre 16, 2020, 1:37

Merci pour le partage

Je veux bien voir le code…

JournaldeThomas · Novembre 16, 2020, 2:21

Whaouu il est superbe ce dashboard
En allant voir sur le lien que tu donnes, j’ai également trouvé le projet HKI qui est plus orienté smartphone.

Si seulement il était possible d’avoir un dashboard différent en fonction de l’appareil utilisé pour y accéder…

Clemalex · Novembre 16, 2020, 2:55

C’est possible et cela se règle dans le profil utilisateur.

McFly · Novembre 16, 2020, 3:07

Super dashboard félicitations

oncleben31 · Novembre 16, 2020, 4:02

Effectivement tu nous donnes l’eau à la bouche. Mais il faut partager. GitHub est parfait pour ca.

kaoru · Novembre 16, 2020, 5:52

Le code template se trouvant dans le fichier button_card_template.yaml

  thermometre:
    template:
    aspect_ratio: 1/1
    show_state: true
    show_icon: false
    state:
      - value: 'on'
        styles:
          card: [background-color: 'rgba(255, 255, 255, 0.8)']
          name: [color: 'rgba(0, 0, 0, 0.6)']
          state: [color: 'rgba(0, 0, 0, 0.6)']
    tap_action:
      ui_sound: |
        [[[ if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') {
        hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
        else if (entity.state === 'on' && states['switch.fullykiosk_screensaver'].state === 'off') {
        hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]]
    styles:
      custom_fields:
        icon:
          [top: 11.5%, left: 11.5%, width: 2.9vw, position: absolute, ]
        circle:
          [top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw, fill: '#9da0a2']
      name:
        [top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
      state:
        [top: 74%, left: 11%, line-height: 2vw, position: absolute]
      card:
        [font-family: Sf Display, letter-spacing: 0.05vw, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.34vw, 
        background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw, box-shadow: none, transition: none]

Le code d’un bouton à ajouter dans le ui-lovelace:

                  - type: custom:mini-graph-card
                    entities:
                      - color: '#0066ff'
                        entity: sensor.temperature_chambre_william
                    style:
                      top: 23.9%
                      left: 23.8%
                      width: 47.7%
                      height: 47.7%
                    height: 325
                    line_width: 12
                    align_state: left
                    group: false
                    lower_bound: 18
                    points_per_hour: 2
                    hour24: true
                    hours_to_show: 12
                    show:
                      {fill: fade, icon: false, name: false, state: false, 
                      name_adaptive_color: true, legend: false, points: false, labels: false}
                  - type: custom:button-card
                    entity: sensor.temperature_chambre_william
                    name: William
                    style:
                      top: 23.9%
                      left: 23.8%
                      width: 47.7%
                    hold_action: !include popup/temperature_chambre_william.yaml
                    tap_action: !include popup/temperature_chambre_william.yaml
                    custom_fields:
                      icon_lamp: >
                        <svg viewBox="10 5 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
                        <path fill="#9da0a2" d="M41.74 10.852v2h-7.75v-2zm-3.25 4.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zm4.5 2.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zM35.2 41.685A10.14 10.14 0 0 1 25.074 51.81a10.14 10.14 0 0 1-10.125-10.125c0-3.618 1.9-6.906 5-8.725V10.006c0-2.826 2.3-5.125 5.125-5.125s5.125 2.3 5.125 5.125V32.96c3.1 1.817 5 5.106 5 8.725zm-2 0c0-3.07-1.706-5.845-4.453-7.24l-.547-.278v-24.16a3.13 3.13 0 0 0-3.125-3.125 3.13 3.13 0 0 0-3.125 3.125v24.16l-.547.278a8.09 8.09 0 0 0-4.453 7.24c0 4.48 3.645 8.125 8.125 8.125s8.125-3.645 8.125-8.125zm-1.666 0a6.47 6.47 0 0 1-6.459 6.458 6.47 6.47 0 0 1-6.458-6.458 6.46 6.46 0 0 1 4.796-6.233l.37-.1v-22.23h2.583v22.23l.37.1a6.46 6.46 0 0 1 4.796 6.233zm-6.14-4.305c-.154-.684-.842-1.134-1.543-.974a5.31 5.31 0 0 0-4.158 5.207 1.29 1.29 0 0 0 2.58 0c0-1.277.902-2.41 2.147-2.7.692-.16 1.13-.85.974-1.543z"/>
                        </svg>
                    styles: 
                      custom_fields:
                        icon_lamp:
                          [top: 11%, left: 4.5%, width: 3.05vw, position: absolute]
                    template: thermometre

Commentaire : bien modifié le sensor et le include. Pour chaque thermomètre, je crée spécialement un popup appelé temperature_quelquechose.yaml

Le dernier, c’est le code complet qui sert a faire le popup de la température et humidité du capteur a mettre dans le dossier popup. Ne pas oublier d’adapter les sensors présent dans ce code. Il ne faut pas bouger l’indentation.

              action: call-service
              service: browser_mod.popup
              service_data:
                title: Thermomètre Chambre William
                deviceID: this
                card:
                  type: custom:stack-in-card
                  cards:
                    - type: entities
                      state_color: true
                      entities:

                        - entity: sensor.temperature_chambre_william
                        - entity: sensor.humidity_chambre_william
                        - entity: sensor.battery_chambre_william

                    - type: custom:mini-graph-card
                      entities:
                        - color: '#385581'
                          entity: sensor.temperature_chambre_william
                        - color: green
                          entity: sensor.humidity_chambre_william
                          y_axis: secondary
                      align_state: left
                      line_width: 3
                      height: 200
                      group: false
                      points_per_hour: 10
                      hour24: true
                      hours_to_show: 24
                      show:
                        {fill: fade, icon: false, name: false, state: true, 
                        name_adaptive_color: true, labels: true, legend: true, average: true, extrema: true, points: false}
                      tap_action:
                        action: none

Je ferai un repo github de ma config quand je serai un peu plus avancé

kaoru · Novembre 16, 2020, 7:12

J’ai vu la même chose. Il faut que je me renseigne sur ce framework
@Clemalex a répondu, mais oui ! C’est possible et j’utilise ça. J’ai un compte tablet qui est utilisé par la tablette avec un theme assigné et le dashboad

kaoru · Novembre 16, 2020, 7:13

J’ai pas fait grand chose par rapport à matt8707, le créateur

kaoru · Novembre 22, 2020, 7:07

Bonjour ! Je vous montre l’avancement à l’heure actuel mon projet.

Mon Dashboard :

Je vais décrire ce que j’ai fait, ajouté et avec quoi mais je vais pas expliquer vraiment le comment. Je vais procéder par chaque catégorie et celles les plus intéressantes.

Media :

1111

J’avais eu un problème sur la fonction du dernier élément ajouté sur plex et j’ai trouvé comment le faire le voici.

Il y a une ligne de code :
"[[[ return 'url(' + states[entity.entity_id].attributes.data[1].fanart+ ')'; ]]]"]
que j’ai remplacé par :
"[[[ return 'url(' + states[entity.entity_id].attributes.data[1].poster + ')'; ]]]"]

J’ai juste remplacé fanart par poster

Pour rappelle Media est une swiper card. J’ai ajouté mes googles home et également Spotify en tant que media_player [ cf Spotify Integration ]

A ce Spotify, j’ai ajouté un popup pour lancer mes playlists sur mes google homes éteints ou sur la version web de spotify quand elle est allumée. On peut contrôler le son, skip la musique, etc… avec ce popup. [ cf Spotify Lovelace Card ]

J’ai jouté également un popup sur mes google home pour affiché la commande du media_player sur le hold_action.

1505145141

La fonctionnalité prévue de base, c’est de montrer la media_player en cours à la place du dernier ajout sur plex.

0000

Les ordinateurs :

J’ai ajouté mes ordinateurs. La différence avec Mattias_Persson, c’est que lui a un imac, il fait des command ssh pour récupérer les stats et le contrôler mac. J’ai mis en place la fonctionnalité des deux PC chez moi avec IOT Link qui fonctionne avec MQTT

Je dois terminer le popup.
Il faut que je corrige le uptime qui doit être en format « humain » ex: « quelques secondes » / « quelques minutes » / « 30 minutes » / « 2 heures ».

Sidebar :
11515415

Hormis la température de la maison. C’est des fonctionnalités de base prévu le design. Je récupère les différents sensors météo grâce à l’intégration de Météo-France. Pour le température de la maison, c’est un sensor average de mes thermomètres

Sidebar information :

Hormis faire le récapitulatif de mes problèmes sur ce popup, j’ai pas grand chose à dire.

Problèmes :

Watchtower ne fonctionne pas ? J’ai des problèmes d’update de HA avec le supervisor.
Problème d’affichage sur le débit descendant et montant du rpi
Problème de récupération du la mémoire ram utilisé par le docker home assistant
Lors de mon test, j’arrive pas à récupérer la mémoire ram et le stockage de la tablette. (Tablette que je n’ai pas encore. Mon téléphone me sert de test pour fullykiosk)

Maison :

5045151545

Le bouton des présences se base sur le gps des app android de HA. En cliquant dessus, ça ouvre un popup avec l’historique des présences, présence du wifi et la position GPS du téléphone et un find my phone.

Le bouton Partir, éteint juste mes lumières à cet instant. A voir, si je peux éteindre la TV connectée Samsung ou autre. La petite feature sympa en plus du bouton, c’est que la tablette joue un fichier mp3 qui est tts qui dit au revoir de manière aléatoire, quand il est cliqué : « Au revoir », « A tout à l’heure », « A plus », « Passe un bon moment »…

La boutons Maison ne fait rien d’intéressant. De base, il est prévu par Mattias_Persson d’activer une scène qui allume ces lumières. Cependant, je n’ai pas trop d’intérêt à cet instant.

Les fonctionnalités de bases qui me restent à ajouter ou à corriger avec ce design ? :

Les notifications automatique sur le téléphone pour surveiller le home assistant. Nouvelle version de HASS, problèmes, etc…
Le find my phone qui fonctionne a moitié. Je reçois une notif mais pas de son sur le téléphone pour le retrouver dans la maison.
Suivi consommation électrique (quasi fini)

Idée de nouvelles fonctionnalités :

Ajouter un curseur de volume sonore des ordinateurs sur le popup
Ajouter bouton pour accéder aux appareils connectés et les batteries des sensors, donc des menus ?
Stats simplifiées de mon serveur principal ?
Prise en charge des caméras notamment celle de tablette qui sera positionnée à l’entrée.
Ajout de points indicateurs sur les swiper card pour connaitre la position de la swipe card.
Tracker les timers de Google Home.
Suivi consommation chauffage
Automation de backup et création avec un bouton quelque part dans le dashboard

Je publierai ma config sur github dans pas longtemps !

Matilas · Novembre 23, 2020, 8:20

Très sympa ton dashboard ! J’en suis pas encore au choix du dashboard mais je sens que je vais y passer des heures

kaoru · Novembre 24, 2020, 10:04

Merci ! J’y passe des jours entiers personnellement

Schumi · Novembre 25, 2020, 12:51

J’espere que tu fera un tuto, du debut, car ce serait super d’avoir les infos de ce qu’il faut installer comme plug-in, comment les installer, etc… en partant de rien (d’un simple dashboard)
Super travail, continue… et merci a toi pour les infos a venir !

kaoru · Novembre 25, 2020, 7:36

Je pourrais le faire mais ça demande énormément du temps. Peut être que le compromis ça serait de le faire en vidéo, voir un live

crislaet · Décembre 1, 2020, 7:50

Super boulot, moi je suis preneur pour avancer sur ma configuration aussi
J’adore le looking de ton dashboard. Encore bravo

idarius · Décembre 8, 2020, 3:41

Bonjour,
Je me suis basé sur le même design, et je n’ai moi aussi changé que peu de choses.

Je créerai mon propre sujet quand j’aurai un peu de temps, mais en attendant, si jamais ça donne quelques inspirations sur les détails :

en bas, temps de trajet travail, temps tv allumée sur la semaine, temps pc allumé sur la semaine, et dernier capteur de mouvement activé.
à gauche (Poub. Recycl), diverses informations en live grâce à une carte entity filter dans une carte button-card. (fenêtre ouverte, fuites, jours de poubelles, infos aspirateur roomba, douche en cours…
les 4 minis cases avec volume et power sont affichées quand la tv samsung est allumée. Si éteinte, ça m’affiche « Samsung Tv » sur un seul bouton de taille normale.
Si la tablette n’est plus alimentée, un gros carré rouge est visible en haut, histoire de ne pas oublier de rebrancher.

Si besoin d’info, n’hésitez pas

stban1983 · Décembre 11, 2020, 8:29

Très joli, j’aime beaucoup le bouton avec les 4 mini cases avec volume et power.
C’est pratique à utiliser en tactile ?

Pozzi · Décembre 11, 2020, 8:50

Bonjour @idarius, comment as-tu calculé le temps passé pour la tv et le pc ?

idarius · Décembre 11, 2020, 3:42

@Pozzi @stban1983
Bonjour, pour les 4 boutons je passe par l’intégration Samsung tv, ça me permet de contrôler via un media player le son et on off. Pour le son c’est quasi instantané, pour le power je l’ai mis sur un appui long pour éviter les extinctions intempestives.

Pour le temps passé sur la TV et le pc, voici un exemple du sensor tv :

- platform: history_stats
  name: Hours TV has been on last 7 days
  entity_id: media_player.samsung_tv
  state: "on"
  type: time
  duration:
    days: 7
  end: "{{ now() }}"

Jefnewtech · Décembre 20, 2020, 12:55

Bonjour,
Je suis nouveau dans le mode de HA et je suis vraiment fan du design HomeKit.
Est-il possible de connaître la marche à suivre pour mettre en place un tel design ?

Merci et félicitations