Webpage Card Configuration, add action (toggle light)

Configuration Frontend
1

Hi,

I use the Webpage Card Configuration to view my webcams as the feed is live and not delayed like it is with eg Picture Glance Card Configuration and the other options listed here

I am using small 7" tablets so screen space is limited, rather than having a additional button or switch
to turn on a light as well as the webpage card, is there any way to add a ‘tap’ action to this Webpage card please?

aspect_ratio: 75%
type: iframe
url: 'http://192.168.1.109:8765/picture/7/frame/'
tap_action:
  action: call-service
  service: homeassistant.toggle
  service_data:
    entity_id: light.den_den"

currently i get

Expected a value of type `undefined` for `tap_action` but received `{"action":"call-service","service":"homeassistant.toggle","service_data":{"entity_id":"light.den"}}`."

I have checked in hacs but could not find a custom card to suite. I have tried searching this forum and Google to no joy.

I was hoping someone had a suggestion to get this working please?

Thanks

EDIT Apologies, code showing correctly

2

Welcome back,

please format your code correctly so we can take a look at it.

3

You can use a picture elements card to display the iframe as a custom element. You’ll need to use the under the hood name to get this though. Also, you’ll need the custom card loader card that preloads the element.

And then, just place a button in front iframe in one of the corners.

4

Whoosh :slight_smile: that went a bit over my head but i will have a go and come back with an update.

Thanks for the pointer

5

“splash” me now at the bottom of the well! :frowning:

CSS ok… can get that to work a bit with trial and error eventually but when it got to https://developers.home-assistant.io/docs/frontend/custom-ui/lovelace-custom-card/
and using java script I think ???

" You define your custom card as a custom element. It’s up to you to decide how to render your DOM inside your element. You can use Polymer, Angular, Preact or any other popular framework (except for React – more info on React here)."

WAY WAY WAY above my skill level! and the level of time I can commit to this unfortunately :frowning:

I was hoping it was a different custom card from hacs or a code change in the card Visual Code Editor?

I do love Home Assistant and the community is great (I don’t post a lot but I do read a lot of posts) but its still a long way before none expert IT literate people can do more than the basics.

A lot of the other cards have this, why not this one? maybe devs have not had time? its on this list but not as easy as it sounds? or not thought of it?

Now going to search how to add a feature request for this :slight_smile: as ‘I think’ it may be a good option in the card.

Thanks again for your reply, appreciated.

6

Because an iframe is meant to display a website, the actions you take on the iframe should be passed to the website. If it were linked to a button or action, you wouldn’t be able to use the controls on the website. You’re using it for a work around for displaying a camera which already has a solution, the picture card.

7

Hello,

I came across the same question today and this is how I solved it.

Required:
Card mod
HTML Card
A blank photo stored in the www/local directory

type: picture-elements
card_mod:
  style: |
    ha-card {
      background: transparent !important;
      padding: 0px !important;
      border: 0px;
      }
elements:
  - type: custom:html-card
    card_mod:
      style: |
        #htmlCard {
          background: transparent !important;
          padding: 0px !important;
          }
    style:
      position: absolute
      transform: translate(-0%, -100%)
      width: 100%
      height: 100%
    content: >
      <iframe
      src="https://embed.windy.com/embed2.html"
      style="border:0px #ffffff none;" name="myiFrame" scrolling="no"
      frameborder="0" marginheight="0px" marginwidth="0px" height="200px"
      width="100%" allowfullscreen></iframe>
  - type: image
    image: /local/smallcard.png
    tap_action:
      action: navigate
      navigation_path: /lovelace/windy
    style:
      left: 50%
      top: 50%
      width: 100%
      height: 100%
      z-index: 9999
image: /local/smallcard.png
aspect_ratio: '16:6'

When clicked, it navigates to a full screen subview