#How to overlay control buttons on a live camera feed in Home Assistant?

1 messages · Page 1 of 1 (latest)

urban fern
#

Good evening everyone!
I need a bit of help with a project on my Home Assistant dashboard. I’ve looked everywhere but haven’t found anything that really fits my need.

I want to overlay two cards:

one showing my house LOL (what my camera is filming) live in the background,

and another on top to the right with controls (like turning on night vision, activating the alarm, etc.).

I made a little design to show what I have in mind.
(The drawing is in French because I’m French, sorry, but honestly too lazy to redo it 😅)
If anyone has any idea how to do this, I’m all ears! Thanks in advance 🙏

image_2025-07-15_231724478.png
lone tusk
warm chasm
#

My go-to card whenever I want to make something "custom" is the custom:button-card. It's super-powerful but can be a pain to configure to get it to work right in situations like this. I've used the following technique to make cards "clickable" that don't normally support tap_actions, such as the Markdown card. The key is using custom_fields and setting the z-index (the order the items lay). Here, a custom:button-card contains a Markdown card on the bottom with another custom:button-card on top.

# 
type: custom:button-card
variables:
  card_height: 100px
  card_width: 250px
styles:
  card:
    - height: "[[[ return variables.card_height ]]]"
    - width: "[[[ return variables.card_width ]]]"
    - background: none
    - padding: 0 0 0 0
  custom_fields:
    markdown:
      - position: absolute
      - left: 0px
      - top: 0px
      - width: 100%
      - height: 100%
      - padding: 0
      - opacity: 100%
      - z-index: 1
    overlay:
      - position: absolute
      - left: 0px
      - top: 0px
      - padding: 0
      - opacity: 0%
      - z-index: 2
custom_fields:
  markdown:
    card:
      type: markdown
      content: >
        <font size=4 color="white"><center>I'm a Markdown Card but you can click me!<br><font size=1>I'm also a custom:button-card.
      card_mod:
        style: |
          ha-card {
            border: none;
            background: none;
          }
  overlay:
    card:
      type: custom:button-card
      styles:
        card:
          - background: red
          - width: "[[[ return variables.card_width ]]]"
          - height: "[[[ return variables.card_height ]]]"
      tap_action:
        action: call-service
        service: light.toggle
        data:
          entity_id: light.living_room_lights
image.png