Personnalisation FloorPlan

Entraide Home Assistant
1

Bonjour à tous,

Bon voila je suis vraiment au tout début de mon installation.
J’ai déjà intégrer pas mal d’éléments à HA (poêle, volets, détecteur d’ouverture, capteur T°…).

Pour faire quelque chose de jolie j’ai décidé de faire un FloorPlan qui permettra de tout piloter

J’ai compris comment intégrer les capteurs de T°…
Mais maintenant j’aimerai peaufiner le plan, je passe des heures à charger sur le net mais je ne trouve pas vraiment comment faire les choses suivantes : (si vous avez des liens vers des tutos ou des posts je suis preneur)

  • Personnaliser les icones, genre une bulle avec une température et pourquoi pas un changement de couleur de l’icon selon la température
  • Une icone caméra à l’emplacement de ma caméra et lorsqu’on clique, ça renvoi vers la vidéo en direct
  • Une icone sur mon poèle qui me permette d’ouvrir une carte avec tous les paramètres

Je pense que cela est possible car je vois des floorplan ainsi sur internet
Si vous pouviez m’éclairer un peu :slight_smile:

Voici mon Floorplan que je commence depuis 1 semaine :

Capture.PNG
Capture.PNG896×699 42.9 KB

4 « J'aime »
2

Sympa ce petit rendu !!

3

Merci !

Je vais l’améliorer avec le temps mais je suis content d’avoir réussi à reproduire assez finalement mon RDC

4

Je ne me suis pas encore penché sur floorplan donc je ne peux t’aider mais le rendu est très sympa. J’espère que tu nous montreras la suite.

5

Hello !
Je fais ce genre de chose via la carte picture-elements. Pour chaque icône que tu veux ajouter, tu ajoutes un element, que tu peux ensuite positionner comme tu veux.

Tu peux retrouver mon floorplan ici, si tu as besoin d’aide, poste ton code ce sera plus simple :slight_smile:

6

Bonjour,

Je ne suis pas sur d’avoir ton compris.

j’ai utilisé la carte picture-élements pour mon floorplan déja.

Voici mon code :

`type: picture-elements
elements:
  - type: state-icon
    entity: cover.volet_bureau_2
    style:
      top: 31%
      left: 115%
      width: 100%
  - type: state-icon
    entity: cover.volet_cuisine
    style:
      top: 80%
      left: 100%
      width: 100%
  - type: state-icon
    entity: cover.volet_salon_droit_2
    style:
      top: 49%
      left: 80%
      width: 100%
  - type: state-icon
    entity: cover.volet_salon_gauche_2
    style:
      top: 57%
      left: 87%
      width: 100%
  - type: state-icon
    entity: cover.volet_salon_jardin_2
    style:
      top: 15%
      left: 98%
      width: 100%
  - type: state-label
    entity: sensor.meter_plus_ea92
    style:
      top: 40%
      left: 112%
      width: 100%
  - type: state-label
    entity: sensor.meter_plus_f23d
    style:
      top: 35%
      left: 91%
      width: 100%
  - type: state-label
    entity: sensor.setpoint
    style:
      top: 31%
      left: 86%
      width: 100%
  - type: state-label
    entity: sensor.atc_7181_temperature
    style:
      top: 70%
      left: 104%
      width: 100%
image: /local/Floor3d/Maison3bis.png`

Et j’aimerai pouvoir justement faire comme sur ton floorplan ajouter un fond derrière la température

7

Hello,

Tu peux le faire en ajoutant un background-color et éventuellement une opacité sous la propriété style, de la même façon que tu règles la position.
Je te laisse un exemple de mes labels de température :

  - type: state-label
    entity: sensor.living_room_thermometer_temperature
    style:
      font-size: 10px
      left: 31%
      top: 40.5%
      opacity: 0.4
      background-color: black
      border-radius: 6px
1 « J'aime »
8

Ah super merci !

Il existe un code pour modifier aussi la couleur du texte ?

Ou sinon ou est-ce que je peux trouver tous les codes possible et a quoi ils correspondent ?

En tout cas merci beaucoup

9

Voila la doc concernant la propriété style, c’est du CSS donc tu peux faire vraiment beaucoup de choses avec.
Pour changer la couleur du texte, c’est la propriété color, la valeur peut-être un nom de couleur, une valeur rgb ou hexa, je te laisse regarder plus en détail des tutos sur le CSS, tu y trouveras tes réponses. :slight_smile:

1 « J'aime »