Here you go!
2 Likes
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! 
1 Like
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! 
1 Like
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.
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!!
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.
Also: If you’re only seeing the error when casting, I have a whole different workaround you can try.
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
Alright, glad you got it working. I’m loving this card!
Hi Jason,
can you post the code you use for your home screen and the triggered camera screens.
thanks for your help.
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).
Got it, thanks.
To show camera page when motion is triggered you use automation based on action : navigate?
Thanks for your quick replay.
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.
Here’s a video of it in action…
1 Like
Thanks for sharing.
I’ll look into it, I like the idea of showing triggered cameras.
1 Like
Great idea! I didn’t write it though, @lukevink did.
I’ve never published to HACS but after looking at the docs it seems like very little would be needed. In fact, I think only hacs.json needs to be added:
{
"name": "Custom iFrame card",
"content_in_root": true,
"filename": "custom-iframe-card.js",
"render_readme": true
}
Do you have any insight, @sparkydave?
Sorry, I haven’t done such a thing so can’t help
1 Like
Hello again,
can you share your hode-red automation to popup the image for a triggered motion camera.
thanks for your help.