Wanted to share a design technique I've been playing with that almost nobody seems to know about — and it makes for some genuinely stunning dashboards.
The trick: layer a transparent PNG control panel over a live video or feed (streaming, security camera, weather radar, anything). Where the PNG has alpha pixels, the feed plays through. Where the PNG is solid, you see the design. Buttons sit on the design, taps pass through the empty zones to the underlying feed.
The screenshot below is a sci-fi control panel I made with a live video stream playing through the gaps. The blue framework is the PNG. The video underneath is what shows in the open areas. The program listings at the bottom are the dashboard layer below the PNG. Three layers, one frame, all interactive.
Anyone who's tried this in Lovelace knows it's harder than it sounds — the layering, the touch handling, the alpha-edge cleanliness, the stacking order — there's a stack of small details that all have to line up. But when it works, it's a completely different category of dashboard. Not a button grid. Not a card layout. A designed surface.
Use cases I've built:
- Living room dashboard with the weather radar playing through behind the AV controls
- Kitchen panel with the front-door camera as the background of the lock controls
- Sci-fi media center with a streaming feed under the transparent panel
READYWARE - The Candy That Can !
Nobody knows about this approach unless they go looking for it. Hoping a few people here pick it up and run with it — would love to see what others come up with.
