iFrame in picture-elements panel view?

jparthum · February 5, 2020, 8:31pm

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:

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:

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!

lukevink · April 12, 2020, 11:16pm

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

jparthum · April 12, 2020, 11:45pm

Unfortunately, no.

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

jparthum · April 13, 2020, 12:02am

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

lukevink · April 13, 2020, 9:26pm

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?

jparthum · April 14, 2020, 2:18am

That would be awesome!

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.

lukevink · April 14, 2020, 7:07am

Here you go!

jparthum · April 14, 2020, 4:54pm

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

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

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

lukevink · April 15, 2020, 7:16am

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!

jparthum · April 15, 2020, 4:26pm

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.

jparthum · April 15, 2020, 4:39pm

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

…and one of my triggered camera screens:

golfusderoma · April 25, 2020, 10:50am

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

jparthum · April 25, 2020, 6:11pm

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.

jparthum · April 25, 2020, 6:17pm

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

golfusderoma · April 25, 2020, 6:43pm

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.

jparthum · April 25, 2020, 9:42pm

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

lucibuz · June 23, 2020, 10:54am

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

thanks for your help.

jparthum · June 23, 2020, 1:58pm

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.

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

lucibuz · June 23, 2020, 3:28pm

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

Thanks for your quick replay.

jparthum · June 23, 2020, 11:16pm

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.