Video on Floorplan

Third party integrations Floorplan
3

For any brave ‘floorplanners’ out there, feel free to try the new version (v1.0.7), which is currently in its own branch on GitHub. You just need to update the one file:

https://raw.githubusercontent.com/pkozul/ha-floorplan/camera-images/www/custom_ui/floorplan/ha-floorplan.html

To get your camera images showing in the floorplan, simply create a <rect> (of the desired size) in your SVG for each camera you want to display. As always, make sure the <rect> IDs in the SVG match up with the entity IDs of your cameras in HA. For example:

<rect id="camera.driveway" width="60" height="40" x="10" y="10" />

Then, in your floorplan config, simply create a new group for your camera images, and add your cameras to that group:

        - name: Camera Images
          entities:
            - camera.backyard
            - camera.driveway
          camera_image_template: '${entity.attributes.entity_picture}'

image

Let me know it goes!

2 Likes
4

That is awesome. Heading there to add it RIGHT NOW!

5

@atomicpapa Keep us all posted on your progress :slight_smile:

6

I think we have a WINNER!

Screenshot (12)

And, yes, we are a 2 minivan family :slight_smile:

4 Likes
7

@atomicpapa Excellent. Is everything else working on your floorplan? Just want to make sure this version doesn’t introduce any regression issues.

8

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
9

@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:

image

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
10

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
11

For the “multiple places” entities, I really like that feature. Now I can remove my fake templates I used to duplicate some switches :+1:

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)')

14

12

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!!

13

@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?

14

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
15

is it so now?

16

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…

17

How did you manage to make dublicate switches using this feature?

18

Sorry, I procrastinated until I got new Sonoffs so no need to duplicate entities anymore.

19

@pkozul

I am attempting to get this working for media_players. I have the following floorplan

image
image1524×896 73.3 KB

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

20

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?

21

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.

22

Thank you! Will test this later :slight_smile: