Faire sous HOME ASSISTANT la même chose que sous JEEDOM

Ricky11 · Janvier 20, 2025, 5:12

Bonjour,

J’utilise JEEDOM depuis 5 ans et j’ai pu très facilement faire des DASHBORDS complets et esthétiques. Mais hélas JEEDOM a quelques lacunes en autres l’obligation de passer par des plugins pour certaines intégrations et dans le cas des produits SONOFF l’intégration proposée est inutilisable… Donc j’ai fouillé sur Internet et manifestement HA serait la solution qui me permettrais d’intégrer tous mes équipements (ESP HOME, SONOFFLAN). J’ai principalement des produits SONOFF des capteurs ESP32 des aspirateurs iRobot, et un système solaire ENPHASE… etc…etc… Je me suis donc lancer dans HAOS sur un RPI5 avec un NVMe de 250Go et après quelques galères j’ai enfin un HA qui fonctionne. Mais HA est loin d’être aussi simple que JEEDOM ou l’on peut faire énormément de choses sans écrire une seule ligne de code.

Mon problème c’est de réussir a faire un Dashboard pour ma chaufferie au bois qui ressemble le plus possible a ce que j’ai fait sous JEEDOM (voir image).

Donc je suis parti avec « PICTURE ELEMENTS CARD » pour mettre l’image de fond qui représente le synoptique de la chaufferie mais je ne trouve pas comment intégrer les valeurs des capteurs de température…je suis certain que cela est possible mais je n’ai pas trouvé sur le forum la solution…donc si vous pouvez me guider ce serait top ! Merci par avance.

Pulpy-Luke · Janvier 20, 2025, 5:18

Salut,

Tu as regardé le 10ères lignes de l’exemple ?

ça explique comment positionner les éléments avec les options top/left

Ensuite à toi de voir quelle carte tu veux utiliser pour afficher la valeur. Toutes les cartes custom:xxxxx fonctionnent
Par exemple

Ricky11 · Janvier 20, 2025, 5:24

Bonjour. Merci pour ta réponse, je vais regarder ça, mais si je comprends bien tout cela passe par du code a saisir par de système « drag and drop » comme dans jeedom. Je vais avoir quelques nuits blanches devant moi. Bon ben… je me lance et je reviens sur le forum pur évoquer mes probables difficultés.

WarC0zes · Janvier 20, 2025, 5:29

Bonjour,
il faut se dire que tu n’est pas sur jeedom. Les logiques change sur HA

Sur HA ça fonctionne

Pulpy-Luke · Janvier 20, 2025, 5:32

J’ai pas souvenir d’un truc en drag&drop sous jeedom (3/4 ans en arrière) mais ce que tu appelles code, c’est uniquement du paramétrage.
C’est facilement surmontable mais n’hésites pas à repasser si besoin

Ricky11 · Janvier 20, 2025, 5:35

Oui effectivement pour la partie SONOFF j’ai pu très facilement intégrer mes 80 modules. Mais bon, je débute sur HA et je découvre la philosophie du produit.

Tochy · Janvier 20, 2025, 5:48

Salut
Je n’ai jamais utilisé la picture elements card et je viens d’y jeter un oeil.
Je ne vois pas de code à taper pour ajouter des elements (sensor, label, icone…) sur l’image tout à l’air de se faire par l’UI.
Je pense que tu devrais t’en sortir sans problèmes au moins pour la base du dessin et des températures.
Après il faudra certainement rentré dans le yaml de la carte pour mettre des cartes custom ou modifier des couleurs.

ebz · Janvier 20, 2025, 7:11

il y a vraiment plein de possibilités… en dehors de la doc officielle je trouve celle-ci vraiment bien (c’est un coup à prendre mais une fois commencé c’est super facile à gérer/compléter, et surtout c’est super adaptatif & dynamique):

Et sinon chez moi actuellement ça donne ça

seulement une moitié d’écran de téléphone portable pour l’équivalent de 32 boutons !!! (et sans prise de tête pour en connaître l’état ou la localisation):

10 températures & humidité sans texte pour localiser
3 pilotages de stores (éclairage naturel ou pas des zones)
6 ampoules connectées
5 radiateurs
1 ventilateur (qui tourne en gif animé si on clic, et il tourne en vrai aussi )
2 teneurs en eau de mes plantes
1 chauffe-eau
4 renvois / 4 (i)nfos détaillées zones (courbes et détails)

météo ext (pas comptée ci-dessus)
PS: il y a plein d’exemples dans le forum ici aussi

Ricky11 · Janvier 21, 2025, 5:55

Bon ben en clair je suis une bille, manifestement je ne comprends pas (encore) la philosophie du truc… mais je ne désespère pas, j’ai galéré quelques jours sur JEEDOM avant d’arriver a faire ce que je voulais, donc maintenant je vais galérer sur HA …
Pour l’instant j’ai bien réussi a mettre l’image de fond qui est le synoptique de la chaufferie mais je n’arrive pas a comprendre comment faire pour que la valeur d’une entité s’affiche sur le synoptique.

La valeur qui dans cette exemple est 23.38°C s’affiche en bas du synoptique… bon j’ai raté un truc !

Cleya · Janvier 21, 2025, 5:59

Bonsoir, ça peut se faire facilement (enfin pour moi) avec custom:button-card. Si tu veux apprendre à le faire avec cette carte custom, dis-le moi

Je commence à écrire un didacticiel pour custom:button que tu peux trouver ici :

Tochy · Janvier 21, 2025, 6:28

Comme dit plus haut je n’y avais jamais touché et en 2 minutes top chrono :

picture_element

Après y’a certainement moyen d’améliorer, @Pulpy-Luke parlait de pouvoir utiliser différentes custom card et également le lien donné par @ebz

Pulpy-Luke · Janvier 21, 2025, 6:37

Oui avant de commencer par faire un truc compliqué, une bête application comme ton exemple pour prendre les choses en mains c’est mieux

Ricky11 · Janvier 21, 2025, 8:03

Ah ben là c’est top, spécial débutant je viens d’afficher ma première valeur sur le synoptique grâce a cette vidéo explicative.
Un Grand merci !!

Ricky11 · Janvier 22, 2025, 2:52

Oui effectivement je suis preneur d’une solution qui peut-être me permettrais de personnaliser au maximum l’affichage car j’ai beaucoup de « Dashboards » a faire dont ceux ci-dessous

(upload://2E44SxSCPCpTNtEYbbHmK1cS8xf.png)

bien que je débute sur HA, j’ai pour habitude de me fixer un objectif, et même si celui-ci est complexe c’est pour moi la meilleure façon d’apprendre…

Pulpy-Luke · Janvier 22, 2025, 3:28

Donc tu es arrivé à quelle étape de ton premier dashboard ?
Par rapport à l’original que manques-t-il ?

Ricky11 · Janvier 22, 2025, 4:01

effectivement très intéressant. Merci
Le tuto explique plutôt bien tous les paramètres pour le bulle d’information, couleurs, formes, positon, j’avance bien.

Ricky11 · Janvier 22, 2025, 4:37

Grace a l’aide de la communauté je commence a y voir un peu plus clair même si je suis loin d’une vraie maitrise de l’outil. Je fais le test avec seulement deux capteurs.

Maintenant je vais essayer de comprendre comment personnalisé les petites bulles ou s’affiche les températures. Je pensais utiliser les « CHIPS mushroom » mais pour l’instant je cherche sans être certain que ce soit possible. Quoi qu’il est soit j’apprécie l’aide du forum.

Pulpy-Luke · Janvier 22, 2025, 4:44

Les chips sont jolis esthétiquement mais chiants à utiliser (il faut 2 cartes imbriquées à chaque valeur)
Il y a plein d’autres alternatives (markdown, button) et éventuellement les badges comme là avec un peu plus de custom via card_mod
Après question de goût, de temps et d’envie

Cleya · Janvier 22, 2025, 5:03

Salut,

Un exemple basique de carte basée sur custom:button-card avec une image en background et différents custom_fields :

Le code :

type: custom:button-card
aspect_ratio: 2/1
custom_fields:
  fond:
    card:
      type: custom:button-card
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  ncarte:
    card:
      type: custom:button-card
      name: Chambre
      styles:
        name:
          - font-size: 1.4em
          - font-weight: bold
          - justify-self: start
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  eclairage:
    card:
      type: custom:button-card
      name: "Éclairage :"
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
          - justify-self: start
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  nplafonnier:
    card:
      type: custom:button-card
      name: Plafonnier
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  plafonnier:
    card:
      type: custom:button-card
      size: 80%
      entity: light.chambre_plafonnier
      icon: phu:ceiling-fugato-three
      show_name: false
      state:
        - value: "off"
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
              - border: none
        - value: "on"
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
              - border: none
  volet:
    card:
      type: custom:button-card
      name: "Volet :"
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
          - justify-self: start
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  vup:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_ouvrir.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.chambre_volet_ouvrir
  vstop:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_stopper.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.chambre_volet_arreter
  vdown:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_fermer.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.chambre_volet_fermer
  temp_value:
    card:
      type: custom:button-card
      entity: sensor.echo_dot_veronique_temperature
      show_name: false
      show_icon: false
      show_state: true
      tap_action: none
      styles:
        state:
          - font-size: 0.82em
          - font-weight: bold
          - color: dimgray
          - justify-self: end
          - padding-right: 3%
        card:
          - background-color: rgba(255,255,255,0.5)
  temp:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      show_name: false
      show_icon: false
      styles:
        card:
          - opacity: 1
          - background-image: url(/local/images/icones/temperature.png)
          - background-size: cover
          - background-position: center
          - background-color: rgba(0,0,0,0.0)
          - border: none
styles:
  custom_fields:
    fond:
      - background-image: url(/local/images/chambre.png)
      - position: absolute
      - left: 0
      - top: 0
      - width: 100%
      - height: 100%
      - background-size: cover
      - background-position: center
      - opacity: 0.6
    ncarte:
      - position: absolute
      - left: 10px
      - top: "-3px"
    eclairage:
      - position: absolute
      - left: 30%
      - top: 20%
    nplafonnier:
      - position: absolute
      - left: 64%
      - top: 6%
    plafonnier:
      - position: absolute
      - left: 65%
      - top: 15%
    volet:
      - position: absolute
      - left: 30%
      - top: 50%
    vup:
      - position: absolute
      - left: 50%
      - top: 45%
    vstop:
      - position: absolute
      - left: 65%
      - top: 45%
    vdown:
      - position: absolute
      - left: 80%
      - top: 45%
    temp_value:
      - width: 19%
      - position: absolute
      - left: 8%
      - top: 75%
    temp:
      - width: 40px
      - height: 40px
      - position: absolute
      - left: 5%
      - top: 72%

Si tu as lu le didacticiel dont je t’ai parlé plus, tu comprendras que même s’il y a beaucoup de lignes de code, il s’agit essentiellement de copiés-collés pour les différents custom_fields.

Tu pourras refaire exactement ce que tu avais sous Jeedom en enlevant les superpositions entre les icônes de thermomètre et les valeurs chiffrées des températures aux différents points.

Si tu as des questions, n’hésites pas

Ricky11 · Janvier 22, 2025, 5:06

j’avance doucement mais surement… mais effectivement c’est souvent simplement du copier coller de ligne de « code »