iFrame in picture-elements panel view?

Configuration Frontend
,
#1

I’m using HA primarily by casting views to Google Hubs, which has been working great overall. My ‘home’ screen is a picture-elements panel view with my floorplan:

1026×601 458 KB

But the only method I’ve found to automatically display live video when a camera is triggered is by casting a view with an iFrame. I’ve cobbled this together using jaradM’s custom grid-layout:

1026×600 637 KB

But the appearance isn’t as consistent as I’d like. Does anybody know of a way to embed an iFrame within a picture-elements panel view – or otherwise display live video in picture-elements views on cast devices?

I’m open to any suggestions, thanks! :slight_smile:

2 Likes
#2

Hey did you ever figure this out? trying to do the same thing :frowning: (Get an iFrame in a picture elements card)

#3

Unfortunately, no.

I did get it cleaned up a little better by using card-mod to apply box-shadow: none:

1220×695 685 KB

#4

If you’re not planning on casting, this workaround might help…

#5

So I ended up going around it all and just making a custom card. So odd, was very easy to do that way. Let me know if you want it I can put it on GitHub?

1 Like
#6

That would be awesome! :star_struck:

What I have now is a huge PIA and I’m dreading making new additions. A picture-elements card with an embedded iFrame would be VERY helpful. :smiley:

#7

Here you go!

2 Likes
#8

YES!!! This is exactly what I was wanting to accomplish! :partying_face:

1227×749 142 KB

…and, as an added bonus, this also lets us overlay images – which was impossible with the iframe card. :exploding_head:

1227×748 346 KB

I can’t thank you enough, @lukevink. This solves a huge problem and adds a lot of extra functionality. You are the MAN! :sunglasses:

1 Like
#9

Welcome! I was kind of mind blown how simple this is and confused why the iframe card can’t do it :S Glad we can now! :smiley:

1 Like
#10

I’ve done some basic JavaScript editing (and I’m trying to learn more), but creating a custom card from scratch is well beyond my current skill level. I was skeptical of how well this would work, especially with HA’s very finicky Cast component, but it’s working flawlessly; you did a fantastic job! Thank you again. :smiley:

#11

To wrap up, here’s my final ‘home’ screen:

1266×760 86 KB

…and one of my triggered camera screens:

1266×761 338 KB

#12

Hi, just need some help for a noob.
I tried to use the custom-iframe card as explained in lukevink Github and also jparthum but I got always the same message on mi picture-card–> Custom element doesn’t exist: custom-iframe.
This is what I’ve done:
1.-Download and copy custom-iframe-card.js into /www/js (also tried copying in www, also in the same dir as my ui-lovelace.yaml)
2.- Edit my ui-lovelace.yaml and add js as a resource
3.- Add to my card (inside ui-lovelace.yaml) the custom-iframe
But… no result at all, All I got is a big red frame with the msg … custom-iframe doesn’t exist
Here is my code. (ui-lovelace.yaml)
Identation should not be the problem (no errors at editor)

title: home
panel: true
resources:
  - type: js
    url: /local/js/custom-iframe-card.js    
views:
  - title: Salón
    badges: []
    path: Salon
    panel: true
    icon: 'mdi:home-floor-0'
    cards:
      
      - type: picture-elements
        image: /local/salon_off_0.png
        elements:
          - type: 'custom:custom-iframe'
            url: www.google.es
            style:
              left: 50%
              top: 50%
              width: 50%
              height: 50%

Any suggestion/help/clue would be really appreciated!!
Thanks in advance for your time!!

#13

Hi, @golfusderoma. The code you posted looks correct to me assuming you’re in YAML mode. But if you’re in IU mode you’ll need to add it there instead by going to “Configuration” > “Lovelace Dashboards” > “Resources” (at the top) and clicking the “+” button (bottom right).

If you are in YAML mode but haven’t added any custom cards before, you may need to add the whitelist_external_dirs entry to your configuration.yaml file under the homeassistant: key.

As a side note (if you are in YAML mode): You may want to go ahead and move your resources: section to configuration.yaml to avoid a future breaking change, and also change them all to type: module as type: js is being deprecated too.

#14

Also: If you’re only seeing the error when casting, I have a whole different workaround you can try.

#15

Hi, Jason, thank you very much for your time. Yes, I am in Yaml mode. And I got it working fine after a “hard reset” to my RPI4. Now it is working like a charm. Thanks again.
I will look at the whitelist matter and move my resources.

1 Like
#16

Alright, glad you got it working. I’m loving this card! :smiley:

#17

Hi Jason,
can you post the code you use for your home screen and the triggered camera screens.

thanks for your help.

#18

They reference mostly custom images that I host locally (lots of dependencies), plus my automations/scenes/sensors/etc. are controlled from Node-RED, so I’m not sure how helpful my code would be. :confused:

The .yaml for my home screen is about 1700 lines and each camera screen is around 500 lines. I had planned on trying to consolidate the code (much is duplicated) but between the unreliability of initiating cast sessions and Google now limiting display times on our *their hubs, I’ve unfortunately had to abandon the use of these screens so I’ve stopped further development.

Here are some snippets though that may be enough to work from…
The camera screen shown above begins:

######################################################################################################################################################################################################
#### Courtyard Camera ################################################################################################################################################################################
######################################################################################################################################################################################################

title: Courtyard Camera
path: courtyard_camera
background: "#4C5B5C" # <- Dark Green
panel: true
visible: false
cards:

  - type: custom:layout-card #<https://github.com/thomasloven/lovelace-layout-card>
    layout: vertical
    column_width: 100%
    cards:

      - type: custom:layout-card
        layout: grid
        gridcols: 100%
        gridrows: 100%
        cards:

          - type: picture-elements
            gridcol: 1 / 1
            gridrow: 1 / 1
            style: "ha-card { height: 100%; background: #4C5B5C; box-shadow: none;}" #<https://github.com/thomasloven/lovelace-card-mod>
            image: /local/img/dk_green_1280x750.png
            elements:

              # Camera feed (full-screen)
              - type: 'custom:custom-iframe' # <https://github.com/lukevink/home-assistant-custom-iframe>
                url: "https://<URL>/mjpg/Courtyard/video.mjpg"
                style:
                  left: 50%
                  top: 48%
                  width: 100%
                  height: 100%

^ this sets the camera feed as the entire background, then the semi-transparent bars and icons are just picture-elements type overlays:

#######################################################################################################################################################################################################
#### Header ###########################################################################################################################################################################################
#######################################################################################################################################################################################################

              # Semi-transparent bar
              - type: image
                image: /local/img/dk_green_1280x120_semi-transparent_192.png
                style:
                  top: 4.16% # -35% position of overlaying graphics (6.4 * 0.35 = 2.24, 6.4 - 2.24 = 4.16)
                  left: 50%
                  width: 100%

              # Clock
              - type: state-label
                entity: sensor.12hr_time_no_am_pm
                tap_action:
                  action: none
                hold_action:
                  action: none
                style:
                  top: 6.4%
                  left: 11%
                  font-size: 7.2vw
                  color: var(--text-primary-color)
...

You just need to be sure your top images are listed after your bottom images (IE: the last image to load will appear ‘in front’ of the previously loaded images).

#19

Got it, thanks.
To show camera page when motion is triggered you use automation based on action : navigate?

Thanks for your quick replay.

#20

I called the cast.show_lovelace_view service when a camera/motion sensor was triggered, so all of the cast devices could stream the feed simultaneously (using input_booleans to block specific devices when the stream was unwanted; such as no presence detected in device area, other content already casting, etc.). This is the same service that initiates a cast, but when subsequently called with a different view_path specified it just navigates immediately to that View rather than stopping and restarting the cast session.