Hey, hey, hey! A couple of weeks ago I published a first look video of Dwains dashboard 3.0. In the meantime, Dwayne changed a lot of things and fixed some bugs. In this video I'm going to show you an in-depth walkthrough of Dwains dashboard, including how to incorporate mushroom cards. So with Dwains dashboard combined with mushroom cards, you get best of both worlds. So let's set up Dwains dashboard first and after that I'm going to show you how you can set it up using mushroom cards and other cards. To install Dwains dashboard you need HACS. If you don't have HACS installed I have a video about it and the link is in the description below. But if you have it installed already, you go to HACS and then you go to integrations and there you go to explore and download repositories and then you're going to search for Dwains. Click on Dwains dashboard and then you can click on download this repository with HACS and then you select the version that you want to install. I'm going to select the latest version, click on download and when it's downloaded you have to restart Home Assistant. So for that go to settings, go to system and click on restart. Let's restart. So after Home Assistant is restarted we are going back to settings and then we go to devices and services. We're going to add integration and there we're going to search for Dwains, click on Dwains dashboard and click finish. And now you see that Dwains dashboard is added to the left menu bar. You can change that name by going to configure in Dwains dashboard and change the side panel title here. Okay so now we're going to click on Dwains dashboard for the first time and it might be that you get an error on this page. If that is the case you have to clear the cache of your browser first. So what you see now is let's say a pretty basic version of Dwains dashboard and I'm going to show you how we can make this more pretty. So I'm going to head over now to my system where I already set that up and then I'm going to show you that. So this already looks much nicer. This is the desktop view and I can also show you the mobile view which also looks really nice much nicer than when I started it up at the first time. So I'm going to show you every little detail of Dwains dashboard and I'm also going to show you how you can set it up like this yourself. So let's first go through everything there here. What's really important to know is that Dwains dashboard is based on the areas that you defined in your home assistant. So all the entities that are shown in Dwains dashboard should be connected to an area. If you don't know how to do that you can go for instance to settings and go to devices and services and then you can let's say choose a device and in that device you can change the area where that device is. If you don't do that then this device won't show up in Dwains dashboard. So let's go back to Dwains dashboard. I prefer to use a dark theme but if you like you can also change your themes. For instance go to here and choose light and then if you go to Dwains dashboard then you will see a light Dwains dashboard theme. So you can change themes the way you like to do that. I also have some custom themes here for instance this one that I also really like and then Dwains dashboard shows in that theme too. Okay I'm going to set it back to the dark theme now. I can select it dark. So what are we seeing here? We have a top menu and I already customized this menu a little bit. I'm going to show you later how that works. We have an alarm panel here, we have the weather here and we have the general settings of Dwains dashboard where you can for instance say disable the clock, disable the welcome message, enable Dwains dashboard V2 mode. I'm not using that. What weather entity I want to use. I have different weather integrations but I'm going to use this one for this demo and if I want to use an alarm entity or not I can also choose to remove the alarm entity and then it won't show up here. But I'm going to show it anyway. On top of the dashboard you see these badges. You see badges for persons and you see badges for all entity domains. In my case it's climate door light and switch but they are more like locks for example. You can enable or disable person badges. For that you go to devices here and then you go to person and then you can go to enable edit mode and then you see that I disabled some persons here. So for instance if I enable this person and then go back to my homepage then you see that this person is also added to this area and that she is currently away. So I'm going to disable her again. I'm going to devices person and I'm going to say disable entity and now we go back to home and she's gone again. If you click on the badges for instance go to light then you see all the lights that are on and I can click on turn all off to turn them all off but I'm not going to do that here. Then this favorite spot in this area you can add entities that you want to see on top of your navigation. I used a little trick here because I am showing mushroom chips cards here and I'm going to show you in this video later how you can do that yourself. Now the main part of the navigation is the area part that you see here. On mobile it looks like this and it is pretty clean and as you can see you see per area some icons which indicate how many lights are on in that area, how many switches are on if a door is open and many more things there. If you click on the areas you see that the devices and entities in that area are shown on the right side of the screen. You see all the values of the devices and you can also control your devices for instance turning on the lights and changing the brightness and you see other things there too. For instance my statuses of my garden doors, the garden door left is open, the garden door right is closed, you see the temperature in my living room, I can control the heating and you see the lux of my living room. Let's turn off the lights again. You can also change the order of the icons in the areas. You can do that by clicking on the three dots and then click on enable edit mode and then you see this powerful feature here. If you click on this cross you can drag and drop the icons like this. So for instance bathroom over there, bathroom back, so let's put everything back how it was. If you click on edit you can assign an area to a specific floor, in this case ground floor or you can disable the area in Dwains dashboard. If you assigned areas to floors you can group the area by floor by clicking on the three dots and click on group by floor and now it's grouped by floor. So you see first floor, ground floor and I have a second floor here and you can disable the grouping again and group by floor. These icons can also be clicked, so if you click on the icon all the lights go on or off and if you click on the specific lights you see that the value of the icon is changing to. On mobile you see the same thing, so if you click on an area you see all the devices and entities within that area and you can click on this back button to go back to the home page and then select all the areas. So you can click back and forth and select every area that you want. So I showed you the areas and how to set them up. Let's set one up together now and I will take the office for that. So we go to office and you see there's a lot of information here in the office and it's not looking very pretty so we are going to change this. You see that 94 entities are shown here which is a lot and what you can do is you can disable or hide each entity one by one but with the new version of the range dashboard we can also do that in bulk. So let's start by doing that by clicking on the three dots, click on enable edit mode and now you see that we have two options here. Disable all entities or hide all entities. If you choose for hiding you're just hiding the entities for the areas and for the devices overview. With disabling you are disabling the entities for the whole range dashboard. So I'm going to hide them now so I'm going to say hide all entities. Now you see that I have no entities left because if I do disable edit mode you will see that the whole page is empty and it shows zero entities. I'm going to enable edit mode again and now we are going to build this page from scratch. So first let's try to add some lights to this page. I can try to find them manually but I prefer to use ctrl f. So let's type light dot and see which lights I would like to add. Let's see which one I will take. So light office front, light office back, light office left strip, light office spots and I want the mood light, light office mode light. Yes and this scroll all the way to the top and you see I have my office front, office back, office spots, office left strip and office mood light. Also let's check the mobile version how it looks over there. So if I go to office I see the lights over here and I would like to show this a little bit different. So let's go back to the range dashboard and change office front. If I click on the three dots I see couple of options. The entity settings is to change the settings of the entity. The entity card is to show a different card and then we have the pop-up card which makes me able to show a pop-up card if I click on this card and you can add this entity to the favorites list to the left side. And then we have three other options exclude, hide and disable entity in the range dashboard. Excluding is something different than disabling and hiding. With excluding you are really excluding the entity from the range dashboard and it won't be taken into account for calculations and all kinds of things like that. Let's start with setting up office front, click on entity settings. I can change the name and this part is interesting because with this part I can set how the dashboard would look on different screen sizes. You have the default call and row size which is for mobile. You also have a large screen call and row size and an extra large screen call and row size and if I look on mobile you see that it is now on two columns and I want to have this on one column. So let's say the large screen is on two columns and the extra large screen is also on two columns. Submit this and now you see that office front is on two columns on the extra large screen and if we look at mobile you see that it is on one column on mobile. Let's do the same for office back. So to entity settings, mobile one column, large screen, two columns, extra large screen, two columns, submit. Do the same for office left, entity settings, mobile one column, let's say one column for large extra large tool, office spots, entity settings, one column, one column, two columns, submit and office mode light. Let's do entity settings, one column, one column, two columns, double check the first two office front entity settings, make that also one column and office back going to say that's also one column there. Now let me show you how you can change the entity card. If you click on the three dots you see this option entity card here. With that you can change the entity card that is used in Dwains dashboard for a certain entity. In this case the office front light card is the standard light card that is used in Dwains dashboard and if you click on it you also see the standard pop up that belongs to that card. So the default home assistant card. But we can change that and that is really powerful. Okay click on the three dots, click on entity card and now you can choose a Lovelace card or a Dwains dashboard blueprint. Let's start with a Lovelace card. So I click on Lovelace card and I'm going to say I want to change this card by the default light card of home assistant. So now the default light card is shown here and the options are shown. I click on submit. If I click on submit you see that the card is being replaced by the default home assistant light card and on mobile you see that it's also replaced by that default home assistant light card. Now we can also use different cards for that. So let's say we're going to remove this one so I can click on remove or previous, click on remove and now I'm going to replace it with a mushroom light card. If you haven't got mushroom installed you can do that through HEX. So do that first. Now we go to entity card, we go to Lovelace card and click light and now I'm selecting the mushroom light card. And now you see all the options for the mushroom light cards and I can change the let's say light control, brightness control, temperature, color control, let's say collapse controls went off. You can say fill container, I'm not sure if that really works here. Now click on submit and now you see that my card has been replaced by the mushroom light card and also on mobile it's also a mushroom light card now. So that looks pretty nice. Okay and I can control everything, turn it off, turn it on, I can change the brightness. So this mushroom card works now. So now let's go to office back and change the pop-up card. So we're going to change the default pop-up card that is shown if you click on the entity. You see that the default home assistant pop-up card is shown now and we are going to change it by clicking on pop-up card and we can again choose a Lovelace card and we are going to say the default light card of home assistant here, click submit. And what you see now is if I click on the entity that you see a new pop-up card which is the default home assistant light card and that also works on mobile. So if I click here you see that same pop-up card there. Now go to edit mode again, turn it off, click on pop-up card again and now we are going to remove this one and we are going to replace it with a mushroom pop-up card. So again go to Lovelace card, type light, we are going to select the mushroom light card and we are going to change some settings here, use light color, brightness control, color control, collapse control, swing off, fill container, submit and now you see that the pop-up card is the mushroom light card which is pretty nice and also on mobile if I click on the entity I also see the mushroom light card. Okay so this is how you can change the pop-up card in Dwains dashboard but there are more options here. So first let me set this back to enable edit mode and now we go to the three dots in office back and there you see the option add to favorites. With add to favorites I can add this entity to the left part of the screen in the favorites part. So now you see that it is over here visible and also if you go to the mobile view and you go back to the home page in the mobile view you will see it there too. So that's how you can add favorites there. We can also remove the favorites so go to enable edit mode, click on the three dots, click on remove from favorites and now the entity is gone from favorites. Then there are three other options exclude entity in DD, hide entity in DD and disable entity in DD so that is excluding the entity or hiding or disabling the entity totally. When you go to entity card you also have an option to go to Dwains dashboard blueprint. If you click on Dwains dashboard blueprint you see a link to Dwains dashboard blueprints github and that is his page where all the blueprints are that you can use within Dwains dashboard.
You have card blueprints and page blueprints and with the card you have normal cards and replace cards. Within normal cards you have a lot of different cards that you can use that already have a lot of functionality in them. For instance this plants blueprint that shows all kinds of data for watering your plants and let's say the person's pop-up blueprint that shows information about a person or well the calendar blueprint that shows the calendar. And you also have replace cards and replace cards is really handy because then you can replace your current entity card with a blueprint like this and you get all the functionality at once. For instance mushroom chip or mushroom light or mushroom lock different kinds of blueprints that you can use here. So let's say we are going to use mushroom light it's explained what it does and you can apply it by clicking on the yaml code and then click on the copy icon. Now you go back to Dwains dashboard and you paste that code over here and then you click install blueprint and then it's installed and then you can see that you can apply this blueprint to the selected entity. So use this blueprint and now you see that this blueprint is shown. Click submit and now office back has the same functionality as office front but now we use the blueprint for it. You have to be aware that if you click on entity card again now that you cannot edit the settings for this mushroom card. So that's the downside of this but still it has some very powerful options. A very powerful option of blueprints is that you can assign a blueprint to all the entities of a specific domain. For instance for all the lights. For that we go to devices and then we are going to enable the edit mode here and now we go to light and we're going to change the entity card for a light and we're going to apply the mushroom light card to all the lights in our dashboard. So if I go back to home you see that now all the lights have the mushroom light card assigned and it is still possible to assign a specific entity card to these cards too. So you can still go to entity card and select a lovelace card or a drange dashboard blueprint for a specific light. So for instance let's do that for the office spots. Let's say I don't want to see this temperature control on the office spot so I click on entity card, go to lovelace card, we are searching for light, click on the mushroom card and we're going to say use light color, use brightness control but do not use the temperature control color. Click this and you see that the office spots now do not have that temperature control anymore while the other cards do have a color control and/or temperature control. So and you can still edit this too. So that is also really cool. If you go to another card you see that you cannot edit all the settings there. So let's add another entity here, go to search for plug one, let's see where it is, switch SW plug one, go to enable that entity. There it is, it's called the air purifier and I'm going to change this air purifier card, click for entity card, go to lovelace card and I'm going to change it for a template card, a mushroom template card. Okay, select the entity, icon is air purifier and then the icon color is some code which shows green if the status is on and shows gray if the status is not on then the primary information is air purifier, secondary information, I'm not filling that in. I always select fill container, not sure if it works here. I can click it, it turns green, submit and you see that it's there and I can click it on and off and I also want to change the columns. So let's say I want two columns and you see that's also saying use own entity card. So that is how to set up the air purifier. Now add the media player, control F media, search, there it is, media player, google home, scroll all the way up, there it is, nest mini office. We go to entity settings, we want to have the media player all columns, so two, three and four columns, submit. So now it's over the full width and we're going to change the entity cards, going to the love lace cards, search cards and media, going to choose for the mushroom media player, not apple tv but the nest mini office. Just click everything on, yes, tick, tick, tick. Okay, click submit and there is the media player with the mushroom media player card. I can click on it. Yes, I can turn it on, I can turn it off. Now let's add some motion sensors, so search for them first, control F, occupancy, let's see where they are. First one, unhides, search for the other one. This one, scroll all the way up and now I do have my two motion sensors here. I'm going to change the card, going to entity cards, love lace cards, I'm going to choose a mushroom template card, then the entity is motion sensor occupancy. It shows a different icon based on the state, so motion sensor off, motion sensor on, also the color is green if it's on, so if I move then it's on. Primary information is motion office and secondary information, I have some code here that shows the last change information, so that is what you see here now that it's triggered at 12.25. Submit this, let's do the same for office hallway motion. So we go to love lace card, again changing the entity card to a template card, again the icon changes based on the state of the motion sensor, the icon color is also going to change based on the state of the motion sensor. Primary information is hallway motion and the secondary information is again the trigger time and I can say default action is no action. Submit this, now I'm going to change the number of columns, so I'm going to say on the white screen two columns and also for hallway motion I'm going to say on the white screen two columns here. So that looks pretty nice, let's see how that looks on mobile and on mobile it is one column and that's also very nice. I also have a multi sensor, so let's add that, let's go to control f, search for multi and let's see where are they, temperature, night, humidity and pressure. Okay scroll up, there they are and we are going to change the cards for these, these are already nice but I want another card to show you. So we go again to love lace card and now we go to the mushroom entity card. So the mushroom entity card, I'm going to change the name, make it temperature, submit this, do the same for humidity, entity card, love lace card, entity, I'm going to choose mushroom entity card, name is humidity, submit this and then the pressure, entity card, love lace card, search card, entity again, the mushroom entity card, name is pressure, now I'm going to submit this, so now we have these three cards here, let's see how it looks on mobile, okay maybe pressure should go over two columns, so we go to pressure, go to entity card, entity setting sorry, two columns, two columns, submit and then we go to the mobile view and you see it's shown on two columns. So that looks very nice too. Let's add the climate controls, search for climate and I have climate office back, enable entity, climate office front, enable entity, scroll all the way up and there they are. So let's move them a little bit to the bottom, sometimes this is drag and drop is a little bit too intelligent but you will get there eventually, so they are there now at the bottom. Let's change the cards for both of them, so we go to entity cards, love lace cards and I'm going to add a manual card this time and I have some codes for that and the codes can be found in the description below, it's the custom slider button card that I use for this because I feel that works really nice together with mushroom, mushroom doesn't have a climate card yet, maybe in the future, then you can use that. We do the same for the auto climate card, again manual, going to paste the custom slider button card info there, you can download that from hex2, the custom slider button card and now we have two custom slider button cards. I want to have them on two columns, submit and then the other one also on two columns, submit move them around a little bit and this is sometimes a little bit nasty but it works, so let's see if we can add some temperature cards to search for temperature. Ah there they are, sensor offers back temperature and sensor offers strong temperature, enable them both, okay, now we scroll up and there they are, let's change the entity settings on two columns and the other one also, entity settings, two columns, submit, move this one on top, that looks pretty nice, yes I think that looks fine, disable edit mode, so this is my final result for the entities at least, how does it look on mobile and on mobile it also looks pretty nice, really cool. That does even more, if we click on enable edit mode you can see that you can also add your own cards there and I would like to add some chip cards on top of my entities view, so I'm going to add a Lovelace card and that is a chips card, virtual chips card and we are going to add some entities here, let's remove this one which is default and we are going to add a chip and we are going to add a template chip, let's edit that template chip and we are going to say the entity is the power office input boolean helper, the icon is MDI power which shows a power icon and the icon color is green if the power is on and gray if the power is off and in tab action we are going to say toggle, so if we click that it toggles that input boolean, edit it again, say we want to show this on all the columns, over all the columns, add another chip, again a template, edit that template chip, choose another entity which is my air conditioner and I'm going to say the icon is MDI air conditioner, the icon color is based on the power light blue or gray and the tab action is a toggle again, submit this and when I disable edit mode you see the two chips on top of this which looks really nice and on mobile you also see those chips on top of the view here. Oh and earlier in the video I showed you that I applied a little trick here to show these mushroom chip cards in the favorites part, for that click on the three dots on areas, click on enable edit mode and also click within the area on enable edit mode, now you scroll down and you choose an entity that you're not really going to use for instance this one I'm going to say unhide entity, then I'm going all the way up and I'm going to say add this entity to favorites and then I'm going to hide the entity again, so now I'm going to say hide entity in Dwains dashboard and now I have this entity also in my favorites, now I'm going to click on enable edit mode in favorites and I'm going to change the entity card here, so click on entity card, click on lovelace card and I'm going to say chips, chips card and now I can add different entities for the chips cards, for instance I can add another light entity and let's say I'm also going to add an entity, entity and I'm going to say that one is a switch, this one for instance and then I'm going to submit this, now we have to change the entity settings in two columns, three columns, four columns here, submit this and if I disable edit mode you see that I added these chips cards here, so that's how you can do that, it's a little trick but it might come in handy, let's remove this again, enable edit mode, remove from favorites and disable edit modes, so that's how you do that. So let's head over to devices and click on devices and on the left side you see all the domains and if you click on one of those cards you see all the devices and entities that belong to that domain on the right side, so for instance light or climate and if you click on group by areas the devices are grouped by area and you can also ungroup that again, then you can also edit the left side and choose an entity card for the whole domain or pop up card for the whole domain which I already explained or choose not to show this card, you can also edit the card and then you can change the icon and you can select if you want to show this in the main nav bar yes or no, then if we enable edit mode on the right side you can do basically the same things that you can do with the entities and the device cards that I already showed, so drag and drop is working and you can do other things there too as a custom card if you like. The last functionality in Dwains dashboard is the more pages and with more you can create your own pages, so let's go to the three dots over here and click on create new more page and there you can select again blueprints, so they are not only card blueprints but also page blueprints, if you go to page blueprints you see a lot of page blueprints that are already available, for instance the persons blueprint that shows you all the information about persons in your installation or let's say another one the automations blueprint that shows you all the automations and the state of that automation in your installation or for instance the battery page which is a blueprint that I'm going to use now to show you how that works, so for that you are going to select the correct yaml file then click on the icon to copy that yaml code go back to Dwains dashboard and paste the yaml code over here, scroll all the way down click install blueprint and scroll all the way up and now use this blueprint you can give it a name, I will give it a name battery page and you can choose an icon here I'm going to say I want to add it to my main menu too, so mdi battery submit and now you see I have a battery page in my dashboard which shows all the batteries on my devices and there's also a link in the main menu that goes to this battery page, I did the same for updates I used a different blueprint for that one that is the update blueprint update page blueprint that's over here and of course on mobile you see the same there's a link to the battery page on mobile that shows the battery information and there is a link to the updates that shows the update information, unfortunately one thing is not working yet so if you click on more page and create new more page and you choose lovelace card you want to add a grid card if you add that grid card you cannot add other cards to that and that would be really nice if that works too but that will be fixed in the future I'm sure of that, so this is how you can combine Dwains dashboard with mushroom cards which I think is really powerful I hope this video helped you if so please give this video a thumbs up, subscribe to my channel, tick the notification bell and I'll see you next time, bye bye!
