[Mon dashboard] @Spl4sh

Communauté HACF Présentations
1

Bonjour à tous !

Déjà sur Home Assistant depuis plus d’un an, il était grand temps que je vienne me présenter, et surtout vous partager mon dashboard :upside_down_face:

J’ai 37 ans, je viens de Moselle, et nous sommes 3 dans la famille avec ma femme et ma fille de 8 ans. Je suis graphiste dans une imprimerie d’emballage alimentaire, et suis passionné d’impression 3D, jeux de rôle et d’informatique en général. J’ai découvert le YAML grâce à Home Assistant, quel plaisir !!

Mon matériel :

  • Home Assistant est installé sur un Raspberry Pi 4 Modèle B - 4GB, avec son alimentation officielle Raspberry que je ne peux que conseiller…
  • Une clé Sonoff ZBDongle E pour Zigbee2MQTT
  • Un vieux Synology DS214se pour la gestion des sauvegardes HA et surtout de mon reverse proxy histoire d’accéder à mon HA depuis l’extérieur de la maison, en HTTPS
  • Un ULANZI TC001 Awtrix
  • Un écran e-paper
  • Une imprimante 3D Bambu Lab A1
  • Un aspirateur robot Xiaomi Robot Vacuum X10
  • Beaucoup d’accessoires Zigbee (capteurs, prises, détecteurs de fumée, Zlinky, …)
  • Des ESP32 et 8266
  • etc…

Mon dashboard :

Voici un aperçu de mon dashboard actuel sur smartphone (en constante évolution) :

Home-white
Home-white500×847 82.4 KB
Home-black
Home-black500×847 82.9 KB

Je n’ai rien inventé, je m’inspire et je prends des idées que je modifie si besoin. Pour résumer :

Le dashboard est composé de 5 pages :

  1. Home : la page principale, avec les informations importantes comme la température de la pièce de vie, son Co2, et la possibilité de contrôler les lumières, prises, volets, portail extérieur. Les grosses icônes de couleur lancent des scènes
  2. Consommation : pour avoir la consommation électrique de la maison, et de plusieurs appareils
  3. BambuLab : qui permet de contrôler l’imprimante 3D et avoir un aperçu du print en cours
  4. Eve : pour contrôler l’aspirateur robot
  5. Systèmes : avoir des informations sur le raspberry ou encore le Synology

Si jamais il y a des intéressés, je pourrais vous partager tout ça plus en détails, avec les cartes, les automatisations, etc…

Un aperçu de la navigation :

Points à améliorer :

  • trouver un moyen simple et cohérent graphiquement d’afficher la température de plusieurs pièces
  • changer le bouton on/off de l’imprimante 3D
  • trouver un système de gestion de bobine pour l’imprimante 3D (actuellement sur un google sheet externe)

Et pour finir, un immense merci à beaucoup d’entre vous pour l’aide précieuse et les connaissances partagées qui ont permis de concrétiser tout ça !

12 « J'aime »
2

Bonjour,
Bienvenue sur HACF :rofl:

Oui, depuis octobre 2023 , il était temps :wink:

3 « J'aime »
3

Changement du bouton pour allumer l’imprimante. Il affiche le pourcentage d’impression en cours lorsqu’elle est allumée, et l’icône est animée.

Enregistrement de l’écran 2025-07-02 à 13.24.01

Voici le code si jamais :

type: custom:button-card
entity: switch.prise_bambu_lab_a1
icon: mdi:printer-3d
name: Bambu Lab A1
label: Allumage
show_label: true
show_state: false
tap_action:
  action: toggle
double_tap_action:
  action: more-info
extra_styles: |
  @keyframes print {
    0%,100% { clip-path: polygon(0 0,0 51%,20% 51%,51% 33%,81% 53%,100% 53%,100% 0); }
    10%     { clip-path: polygon(0 0,0 100%,49% 100%,85% 83%,49% 98%,50% 89%,51% 82%,46% 79%,36% 73%,17% 82%,20% 50%,51% 33%,81% 52%,100% 52%,100% 0); }
    20%     { clip-path: polygon(0 0,0 100%,100% 100%,85% 83%,66% 73%,56% 79%,51% 83%,46% 79%,36% 73%,17% 82%,20% 50%,51% 33%,81% 52%,100% 52%,100% 0); }
    30%     { clip-path: polygon(0 0,0 100%,100% 100%,85% 83%,66% 73%,54% 69%,50% 61%,45% 69%,36% 73%,17% 82%,20% 50%,51% 33%,81% 52%,100% 52%,100% 0); }
    40%     { clip-path: polygon(0 0,0 100%,100% 100%,85% 83%,66% 73%,54% 69%,50% 61%,45% 69%,34% 63%,25% 54%,20% 50%,51% 33%,81% 52%,100% 52%,100% 0); }
    50%     { clip-path: polygon(0 0,0 100%,100% 100%,76% 51%,66% 63%,54% 69%,50% 61%,45% 69%,34% 63%,25% 54%,20% 50%,51% 33%,81% 52%,100% 52%,100% 0); }
    60%     { clip-path: polygon(0 0,0 100%,100% 100%,76% 51%,66% 63%,55% 69%,50% 61%,39% 55%,32% 55%,25% 54%,20% 50%,51% 33%,81% 52%,100% 52%,100% 0); }
    70%     { clip-path: polygon(0 0,0 100%,100% 100%,76% 51%,68% 53%,60% 55%,50% 61%,39% 55%,32% 55%,25% 54%,20% 50%,51% 33%,81% 52%,100% 52%,100% 0); }
    80%     { clip-path: polygon(0 0,0 100%,100% 100%,76% 51%,68% 53%,60% 55%,50% 61%,50% 50%,51% 37%,31% 44%,30% 35%,51% 33%,81% 52%,100% 52%,100% 0); }
    90%     { clip-path: polygon(0 0,0 100%,100% 100%,77% 51%,67% 42%,64% 34%,56% 34%,50% 36%,39% 40%,31% 44%,30% 35%,41% 33%,85% 53%,100% 52%,100% 0); }
  }
custom_fields:
  speed: |
    [[[
      return states['switch.prise_bambu_lab_a1'].state === 'on'
        ? states['sensor.a1_03919d4c3101474_progression_de_l_impression'].state + '%'
        : 'Off';
    ]]]
styles:
  grid:
    - position: relative
  card:
    - padding: 18px
  img_cell:
    - justify-self: end
    - width: 30pt
    - height: 30pt
    - background: rgb(255,145,138)
    - margin-top: 1%
    - border-radius: 50%
  icon:
    - width: 24px
    - height: 24px
  name:
    - justify-self: start
    - font-size: 18px
    - font-weight: 700
    - margin-top: "-20%"
  label:
    - justify-self: start
    - font-size: 14px
    - margin-top: "-5%"
    - font-weight: 300
  custom_fields:
    speed:
      - position: absolute
      - left: 65%
      - top: 20%
      - text-align: right
      - font-weight: 600
      - font-size: 23px
state:
  - value: "on"
    styles:
      icon:
        - animation: print 2s linear infinite
        - color: white
  - value: "off"
    styles:
      img_cell:
        - background: rgba(75,75,75,0.35)
        - opacity: 0.25