Drag and Drop Card + Home Assistant Dashboard Store (HADS) - BETA
Hey everyone,
I’m excited to share that I’ve just released the very first BETA version of the Drag and Drop Card together with the Home Assistant Dashboard Store (HADS)!
This project is still in its early stages, so you may encounter a few small bugs, but both the Drag And Drop Card and HADS are in a fully usable state. I’m sure I’ve overlooked something here and there, but everything has to start somewhere.
What does it do?
The Drag and Drop Card lets you transform parts of your dashboard — or even the entire thing — into a drag-and-drop workspace.
Add any card you want
Resize cards (small or large, it’s up to you)
Move and position them freely
Create a truly custom layout that fits your style
Export your design and upload it to HADS
Import downloaded designs from HADS
To make this work, the card requires a backend integration to handle storage of your card configurations, so don’t forget to install that too.
Demo Video
I’ve put together a quick demo on YouTube so you can see it in action: Watch on YouTube
I came here looking for this feature. May we can have a PR so that drag-and-drop feature becomes part of the official release? The way is today is quite complicated to reorganize the cards, so an official solution would be great and I think your solution could become a PR to do that.
Per now, the Drag And Drop Card is not ready for an official integration into HA and based on what I’ve seen from Nabu Casa the last years I also think it might go against their design philosophies based on their reasoning behind their current (limited) drag & drop features.
I have quite a lot of work left on this card in order to get it “just right”, but I have time and resources so give it time and maybe, in the future, it can become an official part of HA.
So when I started developing this card, I added an export function so that I could debug the .json structure. I then added an import function in order to import .json files that had been manually manipulated. It then dawned on my what I had actually done. I had made a simple way to basically import and export complete dashboard designs.
It’s not a feature provided by Nabu Casa or HA so I thought that was kind of interesting and so I started thinking how would this work? I then just started working on the idea and then HADS was born. At the time I was also thinking of just having an AI prompt generate a dashboard for you by providing it with your entities but I did not end up going down that route.
My plans for HADS were/are quite simple, but interesting: A lot of dashboards are custom and require custom components and templates, automatons etc to work properly. So the plan going forward is to try to encapsulate all of this into the Drag and Drop export so that its easy to share among users.
Like I have a bunch of yaml code in my backend that I have integrated as a package which basically tells me “How many lights are on”, “How many batteries are below 5%”, “Are any motion senors on”, “Any windows open?” and provides me with an entity for each of those statuses. I then use those entities as a status bar in my dashboard so that I can get a quick overview of things. There is currently NO simple way of sharing this except via GitHub, pastebin, text or whatever. I want to be able to include this kind of configuration into a dashboard file export so that you can easily import a ready-working dashboard.
HADS only supports json files and is not directly linked to the Drag and Drop Card in any way. It is currently just a “marketplace” where you can upload or download a design of your choosing made within the Drag and Drop Card.
Take a look at the screenshots. Here, my grid size is set to 20px, and I can make a card very small, but I should still be able to resize it/delete it if i press the blue or red button. If you want to edit the card when its that small, it needs to be resized in order to reach the buttons and the sized back again after the edit is done sinxe the edit button livis “inside” the card container.
I was not taking about the edit button inside the card, everything fine with that.
I was taking about the edit button of the lovelace dashboard.
I need this only to reach the YAML parameters of the card, e.g. to add a background_image.
I am also strugling to show the background image full size and proportional. These are my parameters.
background_mode: image
background_image:
src: /local/images/floorplan.png
size: 100% 100%
position: center center
repeat: false
opacity: 1
attachment: scroll
The resulting image is streched in vertical direction but not in horizontal direction.
Hi and thank you for the great work you are doing.
I have just started with this and its been a bit difficult to work with, the size of the cards can be made small or large but when small i get a scroll bar. Can we get rid of the scroll bar please.
And when the card is smaller than the edit buttons make a double click on the card to edit it as default as this is the only reason most of the time you would use it.
I see, I will try to implement your requested features in the next release. A toggle to enable/disable the scrolling if the card i too small and double click to edit a card once in edit mode.
I am currently swamped with other stuff at the moment so I don’t know when I will be able to release an update.
Hi! In the latest release (v1.0.1) I’ve added the two features you requested. For each card you have a small “Settings” Button that opens a small menu that allows you to sett the overflow settings (Scroll, Hidden, Default, Visible) so that you can decide for yourself what option you would like. You can also directly send the card to another tab via this menu if you so whish.
Also double clicking on a card in edit mode, opens the card editor for that specific card.
You can also delete layouts now but remember to update the backend integration for that to work.
I hope you find it simple enough to use. And if you create something cool, share it on HADS!
Highlights
