That vacuum card is very nice. The part with the map over the house and the ability to draw zones was epic. I didn’t know that what possible outside of the app. I have a roborock myself and will definitely take a look on how you did that!
I haven’t uploaded that specific code yet, but it will come real soon. I’m actually in the works of fixing it now. Might drop it tonight or tomorrow.
My to-do list just gets bigger and bigger 
Here’s the code, I tried it with different pixel spacing, still resulted in card errors. 
# Horizontal Space
horizontalspace:
card:
type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 0px
# Vertical Space
verticalspace:
card:
type: 'custom:button-card'
color_type: blank-card
styles:
card:
- height: 0px
what happens when you add some px to the width / height? right now you use a card with 0 size, which is not very useful?
Hi everyone, I will be pushing out updates tonight.
A preview of the upcoming update:
-
New Vacuum control center
-
New Dog information card
I expect it to be online around 01.00 am CEST. Postponed to the 10th of July.
7 Likes
Love your work, I am taking inspiration and starting mine from scratch 
Is there anyway to style the cards transparently so that the vertical stack background is applied to all the cards within the stack?
As an example, for yours I can see you are using homekit-white as the background for all cards within a pop-up, whereas I am tryning to get it so that all cards are effectively transparent and so it appears as one large card rather than multiple within a vertical stack.
Does this make sense?
@jimz011 I know you use a lot of pop-up card in your setup. I’ve been starting to integrate this into mine, but it doesn’t really look good across devices, looks pretty good on mobile, but if it is too long it gets cut off on my desktop with no way to scroll, have you come across this and / or found any good solutions or work arounds?
1 Like
Do you use a background image with the cards? It will look a bit better if you do. However it will never look as great on a desktop though. The heights differ which makes the card look weird on desktops and not only that, the problem is that there is no way to scroll on popup cards. However there is a bad solution to that and that is to use swipe-card within a popup card. Though I can’t seem to get it to work smoothly, it really lags like crazy when using that.
@Ryan_Grandy
Edit: I am considering removing all the popup cards in favor of a menu and conditional cards. Conditional cards have the big advantage that they are on the same view and can be scrolled upon. Not only that, but they can also have a more-info window popup, whereas you can’t open the more-info view on a popup card. I am still testing this and it is in an early stage (I actually came up with this because of your post. And I agree with you, on some ipads it will even render an ugly black box at the bottom of those cards in weird cases).
You can see what I did to accomodote for this problem, however like I said I am still testing it and I have problems with gaps. I only have one page done so the gap isn’t very obvious (you might not even notice it at all), but it really will be hard to get this right as I will have to mix different views into one another. I will keep you informed on how/what and if I will use this as a permanent solution (but I like the idea of not having to deal with “small” popup views anymore.
Edit, for screenshots on this update, please click here
Changes (11/07/2019)
Sorry for the long delay, I have actually tried to rearrange the setup for use with swipe-card, but unfortunately this is way too buggy to be any good (it looked nice though), anyways a weeks work totally useless. But no fear, I still have the promised update for you guys.
- Added a pretty cool Vacuum Control Center, this will replace the previously used xiaomi-vacuum-cleaner-card and you can safely remove that addon if you use this setup, you will need a custom card for the zone map which can be found here: https://github.com/PiotrMachowski/Home-Assistant-Lovelace-Xiaomi-Vacuum-Map-card, the rest of the cards are just cards that you should already have if you follow this setup.
- The maintenance/cleaning popup card no longer has the dog card
- Moved around button placements of the frontpage to fit the menu button (previously this was the “other view”, now you can simply press the menu button on the frontpage to show the entire menu, convenient eh?)
- Testing conditional cards as a replacement to popup cards, so far it seems to work very well. If you want to try it out yourself you can see my code, it uses conditional cards to show the menu now whereas before you would have to go to the actual view. This should save time and makes the interface a bit easier to use, in the future I might decide to swap all popup cards in favor of conditional cards, but like I said this is something I am currently testing
- The NOW ON and AUTOMATIONS popup buttons have been moved to the menu
- Added a dog popup button on the frontpage, this card was moved from the maintenance/cleaning popup card. It also has a state, device tracker and location added to it. For questions about this please send me a message on the HA community forums.
- Splitted the frontpage in multiple yaml files, this is in preparation for the conditional cards as this would clutter a single view immensely
- Fixed some automations related to the Xiaomi Vacuum Cleaner
- Fixed notifications on the frontpage related to the Xiaomi Vacuum Cleaner
- Minor fixes to the code
NOTE: Unfortunately all these changes (and the changes I still have in mind) keeps me from working on proper theming, themes are worked on but at a very slow pace, please have patience or use any other theme available on the community. If you do decide to use the theme I provide note that if you really need to get work done in the dev-states panel you will have to change the theme back to default as there are some black and white elements which are themed badly.
3 Likes
I was trying to dig into your YAML to see how you have this set up. Looks like you’re using input booleans to trigger the conditional cards, if I’m not mistaken? I’ve thought about this approach myself, but the one thing I don’t like is that it doesn’t scale well to multiple users. You’d either need to create a separate input boolean and card for each user, or the view could change without warning if two people are on the same view simultaneously (probably a fairly rare edge case, but still something to be aware of).
Yes that is correct, I am looking for a way as well. I have 2 things in mind, either a state-switch or an entire view for my spouse, which will then be hidden/unhidden by cch. The problem is, that when I do that that the code will increase in size a lot, so I might use decluttering templates for this so it will only be a few lines of code extra. I am still experimenting with this, but I do like the performance of the conditional cards. On my repo I have only done the main menu as you might have seen. But I have them on all my previous popup cards now. But like you say multiuser is not ideal.
I will experiment some more with this and see what works nicely. Ofc you can expect any updated code to arrive on github.
1 Like
Changes (15/07/2019)
BREAKING CHANGE:
- This update has a major change and that is the removal of popup cards, there are some left, but most are gone now in favor of state-switches and conditional cards. This is still experimental so it is prone to change! The reason why I removed popup cards are simple. They are hard to use when copying an entire setup as they need to be setup correctly for them to work properly, this also means that you will need to adjust all the entities first before the card will show up properly. Conditional cards solves this problem as it will just display nothing if nothing is defined and will not break all other popup cards in the chain. Another major reason is because the size of the popup cards look really awkward on tablets when using conditional cards within those popups. The location of the popup will change randomly to a point you can’t even see it on your screen anymore. This is most prominent on tablets/desktops. Another major reason is iOS. When you try to run popup cards on iOS it sometimes bugs and show you a duplicate of the card within the same popup. It looks really bad and only retrying to open the card fixes the problem, this is most prominent on older hardware like an iPad Air, iPhone 6s and less on newer devices like the iPhone 8 or iPhone X.
- So after reading the above you might think by yourself, ‘Hey Jimz’, ‘if you use conditional cards, how will you deal with multiple users as they would clearly be visible to all users now wouldn’t it?’. I’d say good question and the experimental solution is this: in this release I have added a state-switch to show views per user now.
- ‘But Jimz, that would massively increase the code now wouldn’t it?’, Well not necessarily. I have removed many of the input_select options I had before and removed all the buttons that came with the popup cards (the 4 buttons on top of almost every popup card). It took up a lot of code and the removal of all these lines make up for the added code discussed above.
- ‘And how would I get to those pages that were previously accessible with those buttons?’ Easy, you simply swipe on the “popup” now and it will switch the page.
These changes will make per user views possible and changing anything in the menu or anything else in lovelace will not affect the other user when used at the same time. This means that when I open up the vacuum control panel (which is a conditional card) will only show for me and not for my wife and vice versa. She can open the same page at the same time and she will have no interference of me using the same conditional card!
Changes:
- Removed most input_select options with the exception of a few (like the menu)
- Removed popup-cards with the exception of weather and light page (to show a more-info window in a popup, this will be replaced by browser-mod in the next update)
- Added conditional cards in favor of popup cards, this has changed the config A LOT, do not overwrite your config with this if you do not know what you are doing
- Removed all buttons that used to navigate you through the popup-cards, this also affects all newly added cards like the vacuum control center card.
- Added swipe-card in favor of the old input_select buttons, this makes one handed use on phones a breeze.
- Added state-switch to accomodate for multi-users which was previously no problem with popup-cards. WARNING: This is a massive change and has made the setup a lot more complicated for new users. I use includes A LOT because not only will it save me a lot of time if I break a piece of the code (as most of the time only that part will not load) and is it easier to find, but also gives me the opportunity to organise the code in a way that I find suitable (and duplication of code doesn’t look that bad this way, as they are in separate files).
- Split decluttering templates, this makes it easier to manage your templates and add very long templates if needed as this won’t clutter the decluttering templates file
- Many minor changes to the UI to accomodate for all these changes above
You know what? Why don’t you see for yourself what has changed?
Video: CLICK ON THE IMAGE TO START VIDEO
1 Like
Forgot to mention you @apop but I believe you mean something like this? I have tested this and it works very well. My wifes interactions doesn’t interfere with mine in the UI. We can both be on the same view but seeing something different as it will show different cards per user. I have tried to keep code duplication to a minimum, but unfortunately I can’t do it everywhere. Actually the code is roughly the same size as before. Unfortunately I have a duplicate menu view for now and that is what makes the size a tad bit larger. I will make a templated version of this in the next release so that it will only take 3 lines of code to duplicate this.
Yeah, that’s looking nice! Definitely going to see if I can take some more inspiration from this for my setup. Thanks for continuing to share your work with the community!
Hi Jim,
Thank you for your awesome work.
I’m building a theme quite similar to yours from scratch and using your work as inspiration. I’ve probably missed something obvious but I’m having a hard time figuring out how you group entities together and give them header names, for example “Kleine Kamer”? I’ve put arrows on one of your screenshots below to illustrate what I mean 
Sorry for the late reply, but this is fairly easy. One block consists out of the following elements:
- vertical-stack
- markdown card (which is the header)
- horizontal-stack with 3 buttons
- horizontal-stack with 3 buttons
Actually the horizontal stack has 5 buttons, the first and the last are blank buttons used to create the gap between the border of the screen and the buttons.
That makes perfect sense. Thank you very much.
This is really a nice lovelace layout you got for yourself. Right now im looking at it, and i cant seem to find your new blue background. Is this not uploaded to github yet?
Haha no, I haven’t uploaded any new backgrounds for a while. This is because not all backgrounds I use are without copyright. As I don’t want to infringe that I will leave wallpapers up to others to download themselves.
I am currently working on themes (finally haha) and I will try to include some nice wallpapers that do not infringe any copyright.