I've been looking for an example of a dashboard where someone has put switches on top of a live video image and come up dry. A Google search said to use picture-elements and then in yaml you can place buttons in specific places. Great but I haven't found an example that I can use as a starting point.
Here is the yaml I've got that shows my driveway camera feed:
And here is the yaml of my basic switch for my infantile gate control card using the momentary relay. It doesn't need to be this form of switch but I want to trigger the gate from a view where I can see the driveway. (Later I'll be adding the parking flood, driveway lights, and porch lights.)
Any relevant examples or suggestions would be appreciated.
Also any really good tutorial or course on coding this sort of stuff would be incredible. I don't have enough of a grasp to understand much past the simple formatting rules.
Hi @gamblehouse, you're closer than you think. With picture-elements, the elements: list is exactly where the controls go, and each one gets a style: with top/left percentages to place it on the image. Tap actions work just like on a normal card.
Two quick cleanups first: since you're using camera_image, you can delete the whole image: block (that floorplan line is the leftover stub, and the media_content_id form isn't valid for picture-elements anyway).
Here's a working starting point that drops your gate switch into the bottom-left of the live feed:
state-icon shows the entity's icon and colours it by state (on vs off). By default a tap opens the details dialog, so I added tap_action: action: toggle to make a tap actually flip it. For your momentary gate relay, that tap fires the pulse, which is what you want.
top and left are percentages of the card and set the CENTRE of the icon, so top: 88%, left: 12% is near the bottom-left. Just nudge those two numbers to move it anywhere.
The background / border-radius / padding lines draw a translucent dark circle behind the icon so it stays readable over a busy video frame. Delete them if you don't want it.
Adding the rest later is just more entries in the same elements: list, each with its own top/left:
(add the same color/background/padding style lines to each if you want the readable pill behind every icon.)
A few tips:
Prefer a labelled button to an icon? Swap state-icon for state-label (shows the state as text) or service-button (a text button that calls a service).
For fancier buttons down the road, the custom button-card (HACS) can be used as a picture-elements element, but the built-in state-icon is the easiest way to get moving.
Watch out for YAML and commas: if you ever write the style inline like {background: "rgba(0,0,0,0.5)"}, the rgba value must be quoted because of the commas. In the indented block form above it doesn't need quotes.
Learning resources:
The official Picture Elements card docs list every element type with examples, and the Actions docs cover tap_action / hold_action. Those two pages are the whole game for this card.
On YouTube, searching "Home Assistant picture elements" pulls up good walkthroughs; Smart Home Junkie, Everything Smart Home, and BeardedTinker all cover dashboards well.
The forum's "Share your Projects" category is full of picture-elements floorplans you can borrow styling from.
@fr0styh0e - Dropped in your code and it instantly worked. I just adjusted the vertical location but it is a functional start. (Now comes all the "Make it look nice.")
Here is a screenshot of it on my phone in landscape.
The camera is a 16MP Reolink Duo3 so it is very very wide. It would be nice if I could default zoom the view to about the right 3/5ths but if wishes were fishes...
The key thing is I can see what's in the driveway before I trigger the gate. This has been the key stumbling block before I transfer all the lights over from Hubitat.
Thanks again... Especially for the training resources!
