Here is a little something that I’ve been working on over the last few days. I wanted a nice way to be able to see what my rooftop solar system is up and current consumption. This is simple enough to do in the old interface, and likewise in Lovelace, but I wanted something that looks nice, not a patchwork of different cards and doesn’t use a lot of space. So I came up with the following. It takes up a little less space but has more detail.
The first screenshot is the normal view, and the second is for smaller screens like phones, etc. It’s a responsive grid setup and works really well. I still need to do some fine tuning, and not 100% happy with it, but for now, it’s something and I wanted to share it with the great community here.
I have an Enphase system, so it’s geared towards that. The Enphase outputs in Wh, so I’ve done some conversions in the card to convert to KWh.
As you can see, it’s nothing special, but simple and does what I want it to do at the moment. I still have a few more elements to add, for example, current net usage to show if I’m importing or exporting. Not yet sure how that will look.
Oh, and the sun is an animated icon. It’s the same file used with the dark sky animated card.
This is my first ever custom card, so please be nice. I wanted to explore creating them and how hard it is. It’s been a while since I’ve worked with HTML and CSS directly, and never really used JS, but it’s been fun to play with.
I just used the template (link below) to make a custom card and modified it. I looked at some other custom cards that other people have made and worked out how some things are done.
As for this card that I’ve made, it’s not it a position to share it at the moment.
Hopefully I can get the card to a state where I can release it. It’s heavily setup for my setup, so I need to work out how to have it adapt.
For example, some systems report in KWh and some are just Wh for the daily totals. Mine also reports production in W while some do KW. I need to add some smarts and work out a way to have it an option if a conversation is required.
No I haven’t sorry. I haven’t used this card in a long time. I have since moved to hass.io on a different system, so not sure if I still have the code for it.
