[Mon Dashboard ] - @JournaldeThomas

Bonjour @JournaldeThomas,

D’abord merci pour ton implication sur youtube avec tes tutos qui m’ont permis depuis début février de me lancer dans l’aventure HA :grinning:.
Je suis assez interessé par le code de la carte permettant de monitorer les addons hacs et la version core de HA …hassio
Possible de partager le code de cette carte SVP ??
Merci d’avance et encore bravo :pray:

Très propre, j’adore !
Pourrais tu donner le yaml pour les tuiles du NUC, NAS et onduleur ? Je suis fan !

@JournaldeThomas j’adore tout ça et j’en suis à des années lumières vu que je débute HA…

Bonjour,

Pour cette carte de HA je me suis fortement inspiré de ce qu’à mis en place Paradis Artificiel. Tu trouveras tout ce qu’il faut sur son git : 00_home_view.yaml de Paradis Articifiel

J’ai juste modifié par les valeurs qui m’intéressées de mon côté à savoir l’affichage de sensor.version_disponible ; sensor.version_installee et sensor.hacs. Ce dernier est un sensor de base quand tu installes HACS.
Et le code des 2 autres sensor à mettre dans le configuration.yaml :

  # INFORMATION HASS
  - platform: version
    name: version installée
    source: local

  - platform: version
    name: version disponible
    source: docker

Il ne te reste qu’à adapter la source à ton installation pour la version disponible.

Y a plus qu’à…Merci Thomas. Pas simple pour un débutant comme moi, ton code m’aurait vraiment facilité la vie :disappointed_relieved:

Après ce n’est qu’une adaptation de la documentation de la carte button-card (stylisé différemment) :+1: :

- type: custom:button-card
  entity: 'sensor.raspi_temp'
  icon: 'mdi:raspberry-pi'
  aspect_ratio: 1/1
  name: HassOS
  styles:
    card:
      - background-color: '#000044'
      - border-radius: 10%
      - padding: 10%
      - color: ivory
      - font-size: 10px
      - text-shadow: 0px 0px 5px black
      - text-transform: capitalize
    grid:
      - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 1fr min-content min-content min-content min-content
    name:
      - font-weight: bold
      - font-size: 13px
      - color: white
      - align-self: middle
      - justify-self: start
      - padding-bottom: 4px
    img_cell:
      - justify-content: start
      - align-items: start
      - margin: none
    icon:
      - color: >
          [[[
            if (entity.state < 60) return 'lime';
            if (entity.state >= 60 && entity.state < 80) return 'orange';
            else return 'red';
          ]]]
      - width: 70%
      - margin-top: -10%
    custom_fields:
      temp:
        - align-self: start
        - justify-self: end
      cpu:
        - padding-bottom: 2px
        - align-self: middle
        - justify-self: start
        - --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
      ram:
        - padding-bottom: 2px
        - align-self: middle
        - justify-self: start
        - --text-color-sensor: '[[[ if (states["sensor.raspi_ram"].state > 80) return "red"; ]]]'
      sd:
        - align-self: middle
        - justify-self: start
        - --text-color-sensor: '[[[ if (states["sensor.raspi_sd"].state > 80) return "red"; ]]]'
  custom_fields:
    temp: >
      [[[
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 12px; height: 12px; color: yellow;">
          </ha-icon><span>${entity.state}°C</span>`
      ]]]
    cpu: >
      [[[
        return `<ha-icon
          icon="mdi:server"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
      ]]]
    ram: >
      [[[
        return `<ha-icon
          icon="mdi:memory"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_ram'].state}%</span></span>`
      ]]]
    sd: >
      [[[
        return `<ha-icon
          icon="mdi:harddisk"
          style="width: 12px; height: 12px; color: deepskyblue;">
          </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_sd'].state}%</span></span>`
      ]]]

Désolé il fallait que je fasse un peu de ménage dans le code.
@Clemalex a déjà donné une idée du code mais voici exactement le code que j’utilise :

          - type: custom:button-card
            entity: binary_sensor.updater
            icon: mdi:home-assistant
            name: HOME ASSISTANT
#            tap_action: !include popup_card/ha.yaml
            double_tap_action:
              action: call-service
              service: homeassistant.restart
            card_mod:
              style: |
                ha-card {
                  --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
                  box-shadow: 2px 2px rgba(0,0,0,0.0);
                  border-radius: 15px;
                }
            aspect_ratio: 1/1
            styles:
              card:
                - color: 'var(--text-medium-color)'
                - text-shadow: 0px 0px 0px white
                - background-color: var(--primary-background-color)
                - padding-left: 10px
                - border-radius: 20px
                - padding: 10%
                - font-size: 15px
                - text-transform: capitalize
              grid:
                - grid-template-areas: '"i i" "n n" "cpu cpu" "ram ram" "sd sd"'
                - grid-template-columns: 1fr 1fr
                - grid-template-rows: 1fr min-content min-content min-content min-content
              name:
                - font-weight: bold
                - font-size: 13px
                - align-self: middle
                - justify-self: start
                - padding-bottom: 4px
                - color: 'var(--text-color)'
              icon:
                - color: >
                    [[[
                      if (entity.state == 'on') return 'orange';
                      return 'deepskyblue';
                    ]]]
                - width: 70%
                - animation: >
                    [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
              custom_fields:
                cpu:
                  - --text-color-sensor: '[[[if (states["sensor.version_disponible"].state != states["sensor.version_installee"].state) return "red";else return "deepskyblue"]]]'
                  - padding-bottom: 2px
                  - justify-self: start
                ram:
                  - padding-bottom: 2px
                  - justify-self: start
                sd:
                  - justify-self: start
            custom_fields:
              cpu: >
                [[[
                  return `<ha-icon icon="mdi:home-assistant" style="width: 20px; height: 20px; color: deepskyblue;"></ha-icon>
                  <span>Disponible: <span style="color: var(--text-color-sensor);">${states['sensor.version_disponible'].state}</span></span>`
                ]]]
              ram: >
                [[[
                  return `<ha-icon icon='mdi:home-assistant' style='width: 20px; height: 20px; color: deepskyblue;'></ha-icon>
                  <span>Instalée: <span style='color: var(--text-color-sensor);'>${states['sensor.version_installee'].state}</span></span>`
                ]]]
              sd: >
                [[[
                  return `<ha-icon icon='hacs:hacs' style='width: 20px; height: 20px; color: deepskyblue;'></ha-icon>
                  <span>MàJ HACS: <span style='color: var(--text-color-sensor);'>${states['sensor.hacs'].state} intégrations</span></span>`
                ]]]
1 « J'aime »

@JournaldeThomas pour la partie docker cela n’est possible que pour les containers qui se trouve sur le meme host que ton ha / addon hacs ?

car perso j’utilise ceci pour savoir si il sont up ou down au niveau http pure sachant que c’est sur une autre machine/host que les dockers sont installer :

- platform: command_line
    name: "Portainer Online"
    command: response=$(curl -LIk -m 3 http://192.168.52.27:9000 -o /dev/null -w "%{http_code}\n" -s); test "$response" -ge 200 && echo "Online" || echo "Offline"
    scan_interval: 90
    value_template: "{{ value }}"

par contre pour l’image de fond c’est quel card que tu utiliser ?

car de mon coter j’ai fait comme ça :

et si j’ai un soucis sur un container, voici le résultat : (merci à @Clemalex :slight_smile: )

Ping_Service

2 « J'aime »

Oui je pense que la partie Docker n’est possible que pour les containers qui se trouve sur le même host car si j’ai bien compris il s’appuie sur le daemon Docker.

Pour l’image de fond j’utilise en fait picture-elements

      - type: picture-elements
        image: /local/lovelace/background/docker2.png
        elements:
           XXXXXX

C’est un peu chiant à mettre en place au départ pour le bon position de tous les docker mais j’ai trouvé que le visuel en valait la peine :slight_smile:

Sympa le clignotement et la mise en avant lorsque le container s’arrête. C’est sur ma to do :wink:

merci thomas.
voilà le résultat avec une légère modif sur les ombres de la police et une petite faute à « installée » corrigée.
Par contre le bouton est énorme…

type: 'custom:button-card'
entity: binary_sensor.updater
icon: 'mdi:home-assistant'
size: 50px
name: HOME ASSISTANT
card_mod: null
style: |
  ha-card {
    --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
    box-shadow: 2px 2px rgba(0,0,0,0.0);
    border-radius: 15px;
  }
aspect_ratio: 1/1
styles:
  card:
    - color: var(--text-medium-color)
    - background-color: var(--primary-background-color)
    - padding-left: 10px
    - border-radius: 20px
    - padding: 10%
    - font-size: 15px
    - text-transform: capitalize
    - border-radius: 12px
    - size: 50px
    - border: 2px solid red
  grid:
    - grid-template-areas: '"i i" "n n" "cpu cpu" "ram ram" "sd sd"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - font-weight: bold
    - font-size: 13px
    - align-self: middle
    - justify-self: start
    - padding-bottom: 4px
    - color: var(--text-color)
  icon:
    - color: |
        [[[
          if (entity.state == 'on') return 'orange';
          return 'deepskyblue';
        ]]]
    - width: 70%
    - animation: |
        [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
  custom_fields:
    cpu:
      - '--text-color-sensor': >-
          [[[if (states["sensor.version_disponible"].state !=
          states["sensor.version_installee"].state) return "red";else return
          "deepskyblue"]]]
      - padding-bottom: 2px
      - justify-self: start
    ram:
      - padding-bottom: 2px
      - justify-self: start
    sd:
      - justify-self: start
custom_fields:
  cpu: |
    [[[
      return `<ha-icon icon="mdi:home-assistant" style="width: 20px; height: 20px; color: deepskyblue;"></ha-icon>
      <span>Disponible: <span style="color: var(--text-color-sensor);">${states['sensor.version_disponible'].state}</span></span>`
    ]]]
  ram: |
    [[[
      return `<ha-icon icon='mdi:home-assistant' style='width: 20px; height: 20px; color: deepskyblue;'></ha-icon>
      <span>Installée: <span style='color: var(--text-color-sensor);'>${states['sensor.version_installee'].state}</span></span>`
    ]]]
  sd: |
    [[[
      return `<ha-icon icon='hacs:hacs' style='width: 20px; height: 20px; color: deepskyblue;'></ha-icon>
      <span>MàJ HACS: <span style='color: var(--text-color-sensor);'>${states['sensor.hacs'].state} intégrations</span></span>`
    ]]]

1 « J'aime »

Bonjour, tu peux utiliser une image qui évite de mettre docker en mode daemon tcp.
https://github.com/Tecnativa/docker-socket-proxy

je vous remercie tous pour votre aide, votre temps, et les partages.

Sans vous je ne serais pas sous Ha ou voir meme en domotique a la maison.

Bonjour,

Merci pour le partage. Pour le boutton système, est il possible de mettre le nombre de module complémentaire pouvant bénéficier d’une mise à jour ?
Dans mon cas, 1 par exemple :

1 « J'aime »

Bonjour,

Aurais tu aussi ton code pour le nas et raspberry ?

Super taff !!!

Merci

Salut @JournaldeThomas,

J’ai vu sur le screenshot de ton dépôt GitHub des jauges imbriquées comme sur WatchOS pour suivre les paramètres de tes machines.
Est une carte de ta création ou une custom trouvée sur Internet ?

Il s’agit de l’apexcard avec le mode radialbar. Je n’avais pas fait le rapprochement avec wathOS mais oui tu as raison c’est ressemblant :wink:

1 « J'aime »

J’avance doucement mais surement sur mon dashboard. C’est fou le temps que ça peut prendre :slight_smile:

J’ai pas mal revisité mes principaux onglets. J’ai essayé d’homogénéiser les différentes cartes malgré le fait que j’ai pioché des idées à droite et à gauche. Je trouve notamment la première page plus conviviale que précédemment tout en ayant de très nombreuses informations. Il me reste à peaufiner les popup qui s’ouvrent lorsqu’on double clic sur les différentes cartes des pièces.

De même la page système a été un peu revu en essayant de définir une spécificité pour chaque colonne. La première colonne concerne le réseau local avec la remontée d’infos du matériel Unifi pour lequel j’ai craqué dernièrement. La deuxième colonne concerne la baie technique et le serveur. Et enfin la dernière colonne concerne plus spécifiquement Home Assistant et les différents conteneurs que j’ai installé sur le serveur.

Un nouvel onglet a fait son apparition suite à l’achat d’une imprimante 3D. Depuis Home Assistant via Octoprint je peux donc contrôler mon imprimante : une prise connectée me permet de l’allumer et de l’éteindre. Un automatisme fait que lorsque la prise est allumé alors la connexion entre l’imprimante et Octoprint se fait aussi. Une caméra sur le raspberry me permet de suivre l’impression. De même j’essaie de suivre ma consommation de filament et d’estimer la quantité de filament qu’il me reste. Pour cela j’ai suivi l’excellent tuto de @jybi89

Dernièrement j’ai également installer un raspberry pi pour surveiller une maison de famille. En fait sur ce raspberry pi je ne fais tourner que zigbee2mqtt qui envoie toutes les informations sur mon broker MQTT et je n’ai eu qu’à faire un petit dashboard tout simple pour avoir les visualiser facilement. D’autres capteurs seront ajoutés au fur et à mesure du temps mais d’ores et déjà cela me permet d’avoir une certaine visibilité.

Toute cette configuration est désormais en partage sur GitHub comme le préconise @oncleben31 dans son tuto

Bien sûr c’est toujours « En cours » et je me demande si cela sera vraiment terminé un jour :slight_smile: j’ai bien en tête quelques petites améliorations sur les onglets présentés ici pour plus de visibilité sur certaines données. Et puis il me faut finaliser les autres onglets : sécurité / surveillance ; plantes / jardin ; données diverses. Je ne manquerais pas de vous tenir au courant :wink:

3 « J'aime »

J’aime vraiment ton interface ! Merci pour le partage !

Par contre je ne peux m’empêcher de commenter la taille de la base de données…
=> Elle est énorme !

Pas de soucis avec une telle taille ?

C’est superbe tout ça.
Tu peux donner la source de toutes les icones des dockers ?
Merci d’avance
Philippe

Bonjour,
Je les ai faites moi même en prenant les logo des différents produits.
Je viens de les mettre à dispo sur le github : home-assistant-config/www/icons at main · journaldethomas/home-assistant-config · GitHub