I currently have an ESPHome (BRUH) multisensor in my office, and am looking for a better way to display some of the info. At the moment, my Office card uses a glance card and an entities card inside a custom:vertical-stack-in-card. While thats okay, it uses a bit more space than I’d like. I’ve used a layout card with a markdown card and button cards to create the following:
The problem with this is its a lot of messing with YAML to get it to that state, and it looks a bit… janky. Using a markdown card, the title doesnt match the title of other entity or glance cards on the view, and the individual cards have shadows under them. I’ve seen similar created with Picture Elements cards, but again, lots of messing with YAML and things for each one that you need to make.
As I get more sensors in more rooms in the house, I just want a consistent way of displaying the “status” of that room - temperature, motion, is the door open, that sort of thing. I also want it to fit neatly into the syle of the rest of the cards and look nice and slick. Ideally, what I’m looking for is a custom card (a variation of glance?) that allows a normal style title and then upto 4 sort of badges displayed after it, all on the same row. I’d make such a custom card myself, but I have no idea where to start with javascript, front end development, or any of that sort of stuff.
If anyone can provide any help with making that card or suggest an alternative (easily repeatable) way of achieving what I’m after, that would be greatly appreciated.
