That is awesome. Heading there to add it RIGHT NOW!
I think we have a WINNER!
And, yes, we are a 2 minivan family 
4 Likes
@atomicpapa Excellent. Is everything else working on your floorplan? Just want to make sure this version doesn’t introduce any regression issues.
Just ran a quick click-thru on everything and got weird looks and questions (“Dad, why did the hall light just turn on and off? Did you break something?”) from the kids and wife as to why lights were turning on and off throughout the house, so I would say it was a success.
1 Like
@atomicpapa Thanks for checking that. Will let this settle for a few days, and then this version can be pushed to the main branch and become the official release.
BTW, there is another feature in the new version I should also mention. You can now display a single HA entity in multiple places on your floorplan. This allows you to, for example, expose a single camera in the following ways:
- as text to display the current state (i.e. ‘idle’)
- as an icon to show where the camera is mounted on your house
- as an image to show the live camera feed
Up until now, Floorplan has assumed a 1-to-1 mapping of your HA entities to their SVG elements, matching them using their entity IDs.
This still works, and nothing has changed in this regard. The difference now is that you can use the floorplan config to override which SVG element should be tied to your HA entity. For example, my driveway camera is shown twice on my floorplan, as shown by the red boxes below:
To get this working, below is what my floorplan config looks like. As you can see, my driveway camera appears in two different groups. The first group displays the camera as a small icon. The second group displays the camera as an image snapshot. The second group shows how you can override the SVG element that the camera should be tied to, in this case, it will look for <rect id="camera.driveway.image"> in the SVG file.
- name: Cameras
entities:
- camera.driveway
- camera.front_door
- camera.backyard
states:
- state: 'idle'
class: 'camera-idle'
- name: Camera Images
entities:
- entity: camera.driveway
element: camera.driveway.image
camera_image_template: '${entity.attributes.entity_picture}'
6 Likes
I wish I had known that before I changed all the names to dummy names on the cams I already had set up! LOL
1 Like
For the “multiple places” entities, I really like that feature. Now I can remove my fake templates I used to duplicate some switches 
For the camera images, with my setup it works fine in Google Crome, works but throws an error in Safari (MacOs and iOS 11): TypeError: undefined is not an object (evaluating 'Object.keys(list)')
I’m having problem displaying my camera image on floorplan.
Copied the linked ha-floorplan.html and followed the example:
- name: Camera Images
entities:
- camera.backyard
- camera.driveway
camera_image_template: ‘${entity.attributes.entity_picture}’
With my cameras, android_ip_webcam and amcrest, the is still clickable to show image, not showing image.
Do I need to create generic camera for this to work with my cameras?
I have to say, floorplan gives a whole new dimension to home-assistant, excellent work!!
@pkozul, somehow can’t get this to work. Updated html to 1.0.7.4.
This was added to floorplan.yaml:
entities:
- camera.backside
- camera.kitchen
- camera.pool
- camera.entrance
- camera.bale
states:
- state: 'Idle'
class: 'camera-idle'
- state: 'Streaming'
class: 'camera-stream'
- state: 'Recording'
class: 'camera-record'
- name: Camera Images
entities:
- entity: camera.backside
element: camera.backside.image
- entity: camera.kitchen
element: camera.kitchen.image
- entity: camera.pool
element: camera.pool.image
- entity: camera.entrance
element: camera.entrance.image
- entity: camera.bale
element: camera.bale.image
camera_image_template: '${entity.attributes.entity_picture}'
Images are added to .svg as follows:
style="opacity:0.8;fill:#a05a2c;fill-opacity:1;stroke-width:1.11199784"
id="camera.bale.image"
width="152.00002"
height="102.17587"
x="248"
y="167.82414"
ry="4.8367276"
inkscape:label="#rect1027" />
Error messages in floorplan warnings are:
Cannot find ‘[object Object]’ in HA group configuration
Am I missing something?
Managed to use mjpeg platform for my cameras and the corresponding .image element is now showing as a snaphot picture in the and can be click to pop-up live camera stream.
That snapshot picture is updated every time the floorplan panel is started/re-visited/reloaded though.
Is it how it supposed to work? Just snapshot and not live video?
Also, that snapshot won’t show in iphone, not even the corresponding .
I can live video stream via camera url as background on the floorplan panel for all my cameras, but the Amcrest only shows up on iphone.
1 Like
is it so now?
And, does this work with all camera implementations or just a selected fews. Can’t get this to work with the Synology camera component so far…
How did you manage to make dublicate switches using this feature?
Sorry, I procrastinated until I got new Sonoffs so no need to duplicate entities anymore.
I am attempting to get this working for media_players. I have the following floorplan
the xx’s should show the media title, but the test one I did only shows “playing”. Clicking on the icon for the google home/mini or Chromecast will pop up the window to pause/play, control volume, etc. and it works as intended In my .yaml config I have the following:
- name: Playing Now
entities:
- entity: media_player.gorgon
element: media_player.gorgon.media_title
media_player_template: '${entity.attributes.media_title}'
What did I screw up? lol
Same problem here. The image get just updated when reloading floorplan. The image shows up in chrome on my computer, but not on my Samsung phone.
How do you live stream using url as background on floorplan?
I posted my code in Share Your Projects/Fully Kiosk Browser:
It can be hit-n-miss depending on the hardware/os:
iphone 7/app/browser, all live stream background works in the panel, floorplan won’t show in card at all.
windows 10/chrome, all but amcrest works in panel, floorplan showed in card but no background.
Samsung Tab/Chrome, all but amcrest works in panel, all but amcrest works in card but some video cut off (could be the card/svg size)
Have fun.
Thank you! Will test this later
Any update on this?