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)
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 ?
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…
Non, pas eu le courage de m’y coller réellement. Mais les vacances arrivent 
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
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:
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 
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 