Créer son FloorPlan 3D

Pas d’erreur !
mais pas d’affichage ! ;(

Ok, donc tu veux une iframe DANS une carte …
Là avec ça :

The panels are listed in the sidebar

Donc il te faut plutot faire

type: iframe
url: https://www.meteo60.fr/radars/animation-radar-france-simple.gif

Merci pour ton aide,
J’avais essayer avec des tuto sur d’autres pages mais la je bute,j’ai une erreur me je ne vois pas laquel !

Le mieux c’est quand même de partager le code de la carte… Là on voit pas le type de la partie principale

type: picture-elements
image: local/Floorplan/Plan_Maison_nuit.png
elements:
  - type: image
    entity: light.barrette_d_eclairage_a_led
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': local/Floorplan/new/Balise_led_ipn_on-1.png
      'off': local/Floorplan/new/transparent.png
  - type: image
    entity: light.balise_led_salon
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': local/Floorplan/new/Balise_led_Salon_on-1.png
      'off': local/Floorplan/new/transparent.png
  - type: image
    entity: light.balise_led_porte_cave
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': local/Floorplan/new/Balise_led_ines_on-1.png
      'off': local/Floorplan/new/transparent.png
  - type: state-icon
    icon_color: yellow
    icon: mdi:lightbulb
    entity: light.barrette_d_eclairage_a_led
    style:
      left: 60%
      top: 64%
    tap_action:
      action: toggle
  - type: state-icon
    icon_color: yellow
    icon: mdi:lightbulb
    entity: light.balise_led_salon
    style:
      left: 42%
      top: 53%
    tap_action:
      action: toggle
  - type: state-icon
    icon: mdi:lightbulb
    icon_color: yellow
    entity: light.balise_led_porte_cave
    style:
      left: 60%
      top: 44%
    tap_action:
      action: toggle
  - type: state-icon
    icon: mdi:window-open
    icon_color: yellow
    entity: cover.volet_salon_gauche
    style:
      left: 50%
      top: 85%
    tap_action:
      action: toggle
  - type: state-label
    entity: sensor.lumi_lumi_weather_1ef4bb07_temperature
    style:
      left: 34%
      top: 25%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1ef4bb07_humidity
    style:
      left: 34%
      top: 28%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1ef4bb07_pressure
    style:
      left: 34%
      top: 31%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1ef4bb07_power
    style:
      left: 34%
      top: 34%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1a15bc07_temperature
    style:
      left: 56%
      top: 25%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1a15bc07_humidity
    style:
      left: 56%
      top: 28%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1a15bc07_pressure
    style:
      left: 56%
      top: 31%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_1a15bc07_power
    style:
      left: 56%
      top: 34%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_30f1b607_temperature
    style:
      left: 48%
      top: 54%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_30f1b607_humidity
    style:
      left: 48%
      top: 57%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_30f1b607_pressure
    style:
      left: 48%
      top: 60%
      font-size: 12px
  - type: state-label
    entity: sensor.lumi_lumi_weather_30f1b607_power
    style:
      left: 48%
      top: 63%
      font-size: 12px
  - type: state-icon
    entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_1b0df106_on_off
    icon: mdi:door
    style:
      left: 40%
      top: 29%
      transform: translate(-50%, -50%) scale(1.5, 1.5)
 

Tu peux pas mettre une iframe dans cette carte, voilà la liste des entités autorisées

ok pas de soucis ,
vais creer un 2eme dashboard avec des cartes du coup !

Salut,

Si tu veux mettre les température et autre sur ton image, il faut utiliser le type « state-label ».
Tu trouveras un exemple dans mon tuto au dessus.

J’espère que çà t’aidera.

Bonne journée !

Alors y as tu passé des heures ?
:stuck_out_tongue:

C pour integrer la meteo type windy, mais ce n’est pas faisable ma expliquer Pulpy.
Je rajoute donc un dashboard avec une carte meteo + graph temp…
image

Non, pas eu le courage de m’y coller réellement. Mais les vacances arrivent :wink: et tout le reste de la domotique fonctionne aux petits oignons … donc il ne me reste plus que ça !

La je cherche pour reduire la taille de ces cartes
image

Il faut savoir que les éléments sont « cliquables » et ouvrent le graph de base. A moins que tu ne veuilles voir en permanence la courbe, l’affichage de la donnée en live + ouverture de la courbe peut être une solution.

A toi de voir.

Hello,
Je vais sans doute faire du réchauffé mais je suis en train de faire un plan 3D avec les switchs dessus justement et j’ai quelques soucis pour la partie intégration de la carte.

J’ai crée un nouveau dashboard avec ces paramètres :

Puis j’ai ajouter un éléments d’image:
image

Et j’ai ajouté mon code (je n’ai pas eu de soucis pour la création du plan, des images gimp ect)
Mais j’ai beaucoup d’erreurs qui remonte, au début c’était des erreurs de tabulation, d’où la présentation illisible sans les tab mais au dela de ça, je ne trouve pas comment résoudre les autres.

NB: j’ai fait le test en intégrant uniquement un type image et type state-icon mais j’en ai beaucoup d’autre à déclarer

Et pour le cas ou c’est important je suis sur raspberry pi4 en mode docker avec redirection des fichiers sous /etc/homeassistant pour le container

Merci :slight_smile:

Salut désolé pour la réponse tardive.
Il semblerait que tu ais un problème d’indentation.
La configuration que tu nous montres ne doit pas être interprétable.
il faut qu’elle ressemble à çà :

          - type: image
            entity: binary_sensor.ouverture_porte_entree_contact
            state_image:
              "on": /local/floorplan/images/entreeouverte.png
              "off": /local/floorplan/images/transparent.png
              "unavailable": /local/floorplan/images/transparent.png
            style:
              top: 50%
              left: 50%
              width: 100%

Merci pour ce tuto bien précis. Cela m’a permis de trouver enfin le logiel simple pour dessiner sa maison (Sweet Home 3D) . (rien que pour un mur, AutoCad ou Sketchup, c’est bien plus long)
Merci @zglurb pour l’astuce avec l’Alpha des pngs ce qui permet d’éviter N-version des images.

Le rendu est top, mais je ne comprend pas pourquoi j’ai un spinner qui tourne en plein milieu. Et surtout avec le dernier switch qui est disponible pour changer l’état.
Je voudrais juste pouvoir afficher les images suivant l’état des switchs uniquement.

type: picture-elements
image: /local/floorplan/ExtensionNight.png
style:
  width: 50%
elements:
  - type: image
    entity: switch.lumchevet
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': /local/floorplan/LumChvtRue.png
  - type: image
    entity: switch.lumdressing
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': /local/floorplan/LumDressing.png
  - type: image
    entity: switch.sonoff_mini_r2_2
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': /local/floorplan/LumChvtJard.png
  - type: image
    entity: switch.lum_chb
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': /local/floorplan/LumChb.png

Le loader disparait si tout est allumé ?

Si oui et si je dis pas de bêtise et même si ça a l’air d’être inutile, il faut quand même définir une image pour les états ‹ off ›. Tu peux faire un png de 1x1 pixel transparent. Sinon la carte cherche à afficher une image non définie et met donc ce loader.

Si tout est allumé, en effet, le loader disparaît en effet. Je vais tester avec le png « vide » et je reviens vers vous.

Merci @zglurb , cela fonctionne avec l’astuce de l’image vide. Plus de loader …

Voici le code pour celui qui en a besoin.

type: picture-elements
image: /local/floorplan/ExtensionNight.png
style:
  width: 50%
elements:
  - type: image
    entity: switch.lumchevet
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': /local/floorplan/LumChvtRue.png
      'off': /local/floorplan/1px1px.png
  - type: image
    entity: switch.lumdressing
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': /local/floorplan/LumDressing.png
      'off': /local/floorplan/1px1px.png
  - type: image
    entity: switch.sonoff_mini_r2_2
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': /local/floorplan/LumChvtJard.png
      'off': /local/floorplan/1px1px.png
  - type: image
    entity: switch.lum_chb
    style:
      top: 50%
      left: 50%
      width: 100%
    state_image:
      'on': /local/floorplan/LumChb.png
      'off': /local/floorplan/1px1px.png

1 « J'aime »

Merci pour ce tuto :heart_eyes: