Figured I’d share a couple of panels I"m reasonably proud of. Using picture elements and card-mod for the most part. My trick is to use a fully transparent image as the picture elements core picture in pre-defined sizes/ratios (such as ~transparent-1-1.png which gives a square base image, or ~transparent-2-1.png which gives an image twice as wide as tall. THEN I fit another background over top of the transparent one comprised of a linear background with rgba() color that let’s me mess with the “glow” and “opacity” to tone down bright areas of the image if it’s needed, then an actual image that is normally set to background-size: cover; to fill up the base transparent image.
Happy to answer questions if you have any. Here’s a few examples:
Panel 1: Weather
pastebin: Weather Panel Code - Pastebin.com
A few notes:
- min and max 24h are done through Statistics Helpers. Then custom template sensors to turn the datetime values into just time.
- the 24h charts are using custom:mini-graph-card, but I’ve placed my own min and max, and times, and title, to compress into a smaller space.
- tempersatures and humidities can be sourced through astroweather integration. I’ve made my own template sensors to look first at my temp/humidity sensors at my house first, then fall back to astroweather if my sensors are unavailable (read, dead batteries, -20C and didn’t want to change them)
- I make extensive use of card-mod. mostly using :host {} and ha-card {} sections to set widths and custom formatting - or to outright move the item way off the screen if it becomes unavailable (for example, top: 900% to get it off the page and not clickable. (Card Mod does not work on conditional cards in a picture elements so my work around was to move it out of the way using card mod instead of not displaying it using a conditional element. Plus I was styling it anyway)
- The title is a decluttering card that I use for all titles in my dashboard. It lets me modify it quickly and have it reflected everywhere. Decluttering card code is here: decluttering normal title - Pastebin.com and allows for motion sensors to highlight colour when motion is detected… or not.
Panel 2: Server Monitoring
pastebin: Server Monitoring - Pastebin.com
- this one uses many of the same features as the previous one. One difference is that I applied opacity to the layered background where in the first one I didn’t need to.
Panel 3: Current Conditions
pastebin: Current Conditions - Pastebin.com
This one I love - Sun and Moon both travel across the sky as their azimuth and elevation changes, fade as they fall below the horizon. I can’t take credit for the moon image - it’s sourced from Nasa via a couple of other sensors including a couple of template sensors to generate the proper URL to get the image from, and the RESTful integration to retrieve the image. My guide was this thread: Display the Accurate Moon Phase and Orientation with Home Assistant, by GUI only - #3 by bthoven
The top two boxes are a bit of repeat from the Weather panel, but with different orientation and purpose here.
Panel 4: Part of Security / Camera Monitoring
pastebin: Security Front Panel - Pastebin.com
Uses cameras as images in the picture elements, along with lighting control and door/window open “buttons”.
Happy to dig into any of this and explain more fully. I had a lot of fun creating these, and all this is a precursor to a beautiful floor plan… one day.