Home Assistant Dashboard - where all my Home Automation comes together

In fact, I have asked on the YouTube community blog a question, whether I should make it a live stream, where you could ask me questions and I can go there and show you how it’s done. Or make it pre-record this video. 79 of you answered and 75% of you responded that you would rather have this concise pre-recorded video. So I have a bit of challenge now because uh it should be short it shouldn’t be like hours long but I should show everything by the same time it should be in sufficient detail so you understand how it’s done and you can follow me so let’s get started so let’s go to my Home Assistant and let’s start with my home page the landing page that opens when I start the Home Assistant.

The idea behind this page is, it should show me an overview of what is important around the house. That’s why the icon for this view is house. One of the main principles I try to follow with this dashboard is, I aim to show the least amount of information the least amount of controls possible to do the job. Because if I have too many things in there, the important stuff will be hidden somewhere in the context in between hundreds of other things and I won’t see that.

I would have to be looking for it and when it changes I will not see it. So whenever I put something on the screen, I’m thinking do I really need to see that is it important if it changes does it mean anything for me. The first card in this video is the presents. Now does it pass the test? Do I really need to see it on this dashboard? Now, this is quite a subjective matter. Maybe you don’t need to see that, but for me, I decided that this information is quite interesting for me.

I’d like to know who is home or who is where. And it’s also one of the key information that drives a number of automations or changes the way how things behave. So for me, this is quite important. But I don’t need to see people who are not home. So if there is someone, there is no point showing a picture of a person and saying they are not home. So I would like them to only show up when they arrive into some of the known zones. And the way how it’s done is, there is a card of type entity-filter, that shows the number of entities I would like to show so the number of people I would like to show in this card.

And there is also a filter for the state. So it only shows the entities if they appear in one of those zones. So I can change that and I can add to the list and manage it through the map. Other than that it’s a standard glance card. I use a glance card on this video a lot. Because this page is meant to show an overview - it’s meant to show only what is important, it’s not meant to go to a very low level of detail - for that we have the other views and glance card does exactly that.

It shows a horizontal set of icons, each representing an entity and its state by either text or changing color. Next related to the presents, there is information about the status of the security systems. This one also drives a number of automations, but it’s also good to know for me when I look at the front screen, whether the alarm is set or unset. But I’ve forgotten to set it up and there’s also automation that will remind me if nobody is home and we forgot to set the alarm.

So this is quite important information to have it there. Then, I have a bunch of other controls, and the way how this is set-up is, this is a horizontal stack. That’s why we have those three boxes one next to the other. But the way how horizontal stack works is, it will divide the space into three equal areas. And I didn’t want this in this case, because I wanted the first one to be smaller than the others. In fact, I wanted the middle one to be the biggest - even bigger than the last one.

Now, there’s a couple of ways to do that. What I decided to do is, I decided to change the width of the panels directly in the cascading style sheets. And to do that, I’m using the custom card-mod card by Thomas Loven. And what this card allows is, it allows me to modify the cascading style sheets for each of the controls. So what I have really done is, I have a regular horizontal stack, but for each of the cards in the stack, I add a style, and I’m adding the width of the card.

So for the first one, I’m saying that the card has a width of only 75%, for the second one I say the width is 125, so I’m taking the 25 percent from the first one. And i’m adding it to it but then I have to set the margin back by 25 because otherwise, it would have started normally where the card was supposed to be and it will overflow to the right. So it’s kind of a dirty hack but hey it works and the last one is unmodified I left there the margin left zero and with hundred percent but this is when I was playing with it I didn’t have to include it there because this is just the default size and position I also use the style sheets for the sensors for the charging time left and for the battery level I like those to change color when the car starts charging or stops charging and by default Home Assistant supports changing icon color for binary sensors but not for regular sensors so I had to deal with them through again changing the style and i’m changing the style in a way that there’s a template so the color of the icon it’s the style paper item icon color and then there is a template which says if the state of the switch citigo charging so if the card is charging is on then i’m using the color and this is the style paper item icon active color so this is the active color otherwise it’s paper item I can color so this is the dimmed one inactive so i’m using this one in number of areas I use it for the uh entity battery level and the charging time left, so when the car is charging I will not only see the percentage but it will be indicated by the change color so I will know the charging is active now under that there is a section with all the lights I have all the lights upstairs and downstairs and outside in the garden and swimming pool and so on in the beginning I have configured those buttons so they would toggle the lights on click but it was causing issues on mobile phones when I was scrolling through the screen sometimes I could toggle the light by mistake so I don’t do that anymore it’s currently configured to show more info by default so I can toggle the light from here but uh I could also toggle it by double clicking from the screen or indeed by holding the button on a mobile phone it will toggle the light as well so it’s convenient but it’s safe to use as well and the way this is configured is in this case this is horizontal stack because I wanted to have those two panels and each is a glance car to its two entities so the only thing I have added is I edit the double tap action and hold action both with the action toggle so this way I can control the lights from the Home Assistant I could also control them by the physical switch on the wall and many of them are also controlled by automations for example to turn the lights on and off based on the motion sensors or based on some timers so that was the first column of my home page and I think it’s a good time to talk about the layout of my dashboard I think you have realized by now that my dashboard layout behaves slightly differently than the default in the default layout the cards are sorted horizontally first and when they reach the end it will jump back to the first column in my case the cards are organized in a column vertically similar to if I would use the vertical stack but I don’t use it and this is because i’m using the custom layout card by thomas logan thomas is a great contributor to the front end of the Home Assistant let me show you how it works the layout card is simply available from the community store in the front end so this is the card and there are two ways to do that we can either configure it in the YAML or more easily we can select that via the user interface and this is what we’re gonna do but before we do that let me show you the four options we can configure the horizontal is similar to the standard Home Assistant layout so it places each car to a new column and when it reaches the end it will jump back to the beginning but unlike the default layout if you use the horizontal we have couple of configuration options available then we have the masonry which tries to horizontally balance out the height of individual cards which is great if you have cards of different height so what it does is it uses the minimal height to decide whether it has to jump to the next column so if you look in here you have the first card put in the first column but because the height was smaller than the minimum height it put the next card below with that it was higher than the minimum so it put the next cards to the next column and again the fourth below that and the same way the fifth and sixth card following the next column and after that it would jump back to the first then because the fourth card was already high it would then put the last card to the last column so it would try to balance out the height of individual column I think it’s great if you want to use this space on the screen optimally it’s not so great if you want to have the cards in particular order then there is a grid layout which is probably the most advanced for you it uses the style sheets grid feature so you can use the media queries to optimize the screen for different devices by coming back to the vertical layout what it does is it will put all the cards in one single column which might not seem like a very useful layout but it has this layout break card which will then break the column and put the following card to the next column combined with the width parameter which allows me to set the minimum width of the column so if I see it on a mobile phone in a portrait mode where the width of the column is smaller than this width it won’t break to the next column and show them all in a single column but and then there is also other parameters like maximum column and the maximum width but i’ll show that to you when we look at the view for the cameras so coming back to my dashboard if I go to the edit dashboard then I can go to edit view and then there’s a new tab layout so for this view I selected the vertical but I can select the other three or there’s the default and then for each layout there are the options for the first one i’m using the defaults but for example for the second one I have configured some option i’m going to explain them when we get that so i’m using the vertical layout so I use those break cards at the end of the column so I can do it by adding a card I will just say break and I can add this break and edit in there and then I can move that to wherever I break to a next column and the following card will jump to the next so i’m gonna remove this one and those two cards will jump back where they were before so let’s see how it works so if I resize the screen it will use two columns so it’s still all readable and if I reduce it even further it will jump to a single column which is great for mobile phones then in the middle I have a status of different things around the house so the famous garbage collection so there are different types of garbage from general waste bio plastic papers and large volume waste then the status of the dryer and the washing machine again there is an automation that would notify us when the washing is finished for example then the mailbox status so there is a mailbox here next to the entrance and there is a sensor that would notify me if there is a male then the the heating which is currently off controlled from uh this panel here about a heating i’m gonna get there in a second then the uh pump in the swimming pool this one is controlled by automation depending on the water temperature so you can see the water temperature here as well it’s nice and warm the water is 27.

6 because it’s sunny i’m not heating the pool right now and then the water main which is open and there are leak sensors and this would automatically close when leakage is detected I made a video about that so you can watch that if you interested now let’s look at how it’s done there are two rows and each is a grid with five picture entity cards I use the custom cars templater so this is another customization if I go to front end it’s lovelace card templater and what it does is it allows me to uh first of all I say there is a type custom car templater that uses entity general waste sensor and I use this one in here instead of name I call it name template and then I can here write a template that would that would define the value so this is what the card template does other than that this is a picture entity that is taking this sensor and based on its value it’s showing different pictures so if the value is zero it will show this picture if the value is one it’ll show that picture for tomorrow and if the value is 2 it will show that general is off so this is today tomorrow and later than that so the three different pictures that I have created I have the same thing for the other uh waist types so this is one for the bio one for the plastics one for the paper and one for the general they’re all the same and this is well documented on my github page so that’s that then I have uh the similar configuration for the dryer and washing machine same thing except in here I don’t use the template card so it’s a simpler picture entity one two three four five and six just regular picture entities nothing special about that now following the concept only to show things that I have to see I have a panel here that shows all the open doors I don’t have to see that panel if all the doors are closed but let me open the doors to the office, and let’s see what happens and when I open it a panel will show with the status of the doors in different rooms in the bedroom office the main door and so on so the door closed itself now and the panel disappeared to do that i’m using a standard conditional card let me show you so currently I do not see the conditional card because the doors are closed but as soon as I enter the edit dashboard it will show up in the edit mode so this is great and I can just edit the card and what it does there is a conditions and then there is the card and in the conditions I can add number of entities and for each entity I can configure whether I want to show the card whether the state is equal to or is not equal to a given state now I can add additional entities in here so initially I thought i’m going to add all the different doors in here and it will show the card as soon as any of the doors is open unfortunately the way how this conditional card works is it’s hard coded that it will show the card when all of the conditions are fulfilled there is no way to configure whether I want to have all or any or end and or condition if you will so for that reason I have created a group of all the doors and the way the group works is the group will turn to on as soon as any of the entities within that group is on so i’m faking this or condition by using the group entity and then there’s the card which is simply our glance card if you want to see it in the code this is what it is there is a conditional card there is the condition with the group and then there is the glance card pretty straight forward so this is the status of things below that there are the controls for the shutters or for the shades similar to the lights on a mobile phone I wanted to prevent them to be moved by mistake when I would just try to scroll the screen on a mobile phone but in here it’s slightly more difficult because uh I use those sliders so those sliders they would by default you could move them by drag and drop so what I have done is I am using the custom restriction card which works in a way that if I click on a button it will ask me whether I want to unlock the controls and if I did it by mistake I can cancel out and if I don’t want to do that I will just confirm okay it’ll be unlocked and then I can start controlling the shutters now let me show you how it’s done first the custom control you can find it in the hacks in front end and that’s the restriction card and there’s a full documentation it’s quite powerful thing so let me show you the configuration i’m gonna go into the edit dashboard and uh here we go so we have the custom restriction card when I unlock it it will stay unlocked by default for five seconds so I have extended it to 10 seconds and then you can configure what type of restriction you want for example you can ask for a pin I didn’t want that I only wanted to show a confirmation dialog with this text so that’s it for this restriction card pretty simple and the restriction card has a card that it’s restricts and in this case it’s a grid card so I have a grid card with two columns these are the two columns and in each column there is a vertical stack card but i’m not using the standard vertical stack because if I did that those they do not have this border and they are slightly bigger so i’m using the custom vertical stacking card other than that it’s the same and each tag has two cards and these are both custom cards it’s the cover element which shows those controls the control up control down and stop and then the slider so they’re all the same in here for the master bedroom I only have one window so i’m using the custom gap card because I wanted to create this gap in here in the grid but then each of them is the same it’s a custom vertical stacking card with the cover element and the cover slider entity for the shades that are tilting here in the gallery I have three cards the first two are the same and then i’m adding additional slider entity that controls the tilt attribute so it’s the same as this one for position but on top of that it has this attribute tilt and that’s it for the middle column and on the right side there is the main camera and there are a couple of controls there’s a temperature outside temperature in the swimming pool and then it shows the state of the gate so right now the gate is open so it also shows the icon which allows me to close it by tapping here and it shows me the icons for the garage doors if they are open so let me show you how it’s done so probably guess it’s a picture element it’s got the front camera in here in live view and then it’s got the elements for all the picture element cards I like to put a information icon to the left corner because unlike the picture entity which when I can click it will open the camera in a full screen the picture elements don’t do that so i’m putting this information icon in here which essentially does the same so it’s an icon with the entity camera front and I click on it it will open the camera in the full screen then there is the state label with the entity sensor temperature outside i’m adding the prefix with this thermometer and then there’s the style sheets with the position and color I like to use the transformation style because by default the picture elements uh positions uh each element uh by the middle so it has minus 50 minus 50 and I like to reset it back to 0 0 so I can align them and we’ll talk more about it when we talk about the card for the electric car I also making the font size uh relative to the view width and i’m making it slightly smaller because I was struggling with it on the smaller screens then I have the same for the swimming pool temperature and then I have some conditions so uh when the binary sensor gate is on then it’ll show this icon which has a tap action that will close the gate and it will also show the icon in a red color and then I have another element with the opposite condition so when the gate is off it will just show the icon in a white color and i’m doing similar thing uh for the garage doors so when the right one is open it will show the icon and when the left one is open it will show the icon and then there is the position it’s pretty straightforward again following the same concept I only show the controls when they are relevant then there is a one liner with the sunrise and sunset but when I click on it it will open this custom control that will show me the position of the sun and different interesting times related to sunrise and sunset so this is again the same concept only to show what is important in this case I only show the sunrise and sunset but if i’d like to see more I have the option this one is using a custom collapsible card let’s look at it so the collapsible card is a custom card so again the easiest way to get it is through community store front end and uh here it is it’s a collapsible card inside the cart we also using a custom sum card a great card that I discovered on the Home Assistant blog and we also use the custom lovelace cart templater so it’s a combination of three custom cards so let’s see how it’s done i’m gonna go to edit dashboard edit so starting from the back so this is the custom sun card and that’s what it shows and on top of that we have the custom collapsible card which does exactly what it says it allows you to collapse the card and show it when you need to and on top of that we have the custom card templater that allows us to use a template for the collapsible card title because when the card is collapsed I wanted to still show the sunrise and sunset value which are the attributes of the sun sun entity so that’s that so under that there is the weather forecast for next five days and the precipitation today and the forecast for precipitation and the accumulated rain over the last three days and I use that again for automations for the irrigation which is controlled by those buttons here as well I could control them manually but again they’re controlled by automation the configuration very quickly there’s nothing special about that the weather forecast it’s a standard weather forecast cart using the home location the precipitation is a grid with three gorge cards and for each of them I could configure different thresholds the minimums maximum and the color ranges for different zones uh this is how it looks like in YAML if you would like to check the detail and finally the irrigation it’s a plain glance card like everything else so that was the first video the home page the second one is for the security cameras I was reviewing security cameras recently so I have plenty to play with so I ended up with six in my Home Assistant I have one in front of a house one in the shed looking towards the house one is in the back then I have one here in the bedroom looking in the garden and then I have two inside now for the configuration first the layout i’m using the layout card here and I use the horizontal layout why if I would use the default it will show me those small camera images based on the resolution of the monitor and I wouldn’t even use the whole screen state so what i’d like to do is I like to get more control around that so what I use is I use the horizontal I set the minimum width to 550 pixels I say I would like to have two columns because if I didn’t say that it will again create those three so if I say it’s two columns it will make them bigger and i’m also using this max width because by default it’s a multiply of the width and the cards wouldn’t stretch the whole width in some conditions so the way it works is if I start shrinking the screen it shows those big camera images but as soon as it becomes smaller it will show those large camera images across the whole screen and then they will scale down all the way until the minimum width is reached after which there is going to be a scroll bar so with this I was able to achieve kind of a responsive design very simply using three parameters now for the configuration most of them are just picture entities which use the camera live view I have a few that are picture elements and we went through that on the homepage so we’re not gonna do it again there’s a couple of things I want to talk about this camera because this is the real link 511 with the optical zoom so I added those zoom controls here with three presets so the first one is going to zoom out the top one is going to zoom in and the middle one is going to zoom somewhere in the middle by the border of the image is going to be right at the end of this neighboring building it’s going to zoom out first and then it’s going to zoom in to this preset position now how it’s done first I put this background in here because otherwise I wouldn’t see those icons if the sky was white so if you look at that there is this there’s this icon again on the left corner we mentioned that on the home page then there is this image which is 60 transparent black png which i’m positioning on the right corner and then I have those icons for the magnify plus magnify minus and the middle one and they are spaced by seven percent and each is calling a service script zoom in script zoom out and zoom medium and now let me show you what those scripts do and if you look at the script uh each of them are calling the real link def ptz control and they’re sending commands to zoom incremental or zoom decremental and what they do is they send the command and they wait for five seconds for example and then they send this top command because this is how those ptz controls work they’ll keep zooming until you send the stop command so the zoom in is sending zoom incremental zoom out is sending zoom decremental the most interesting one is the zoom medium and the way I do that is I will send zoom decremental because I don’t know what position it is in so I zoom it all the way out I wait six seconds then I stop it and then I will send zoom incremental and by experimenting I figured that if I do that for one second and 670 milliseconds and then I stop it it’ll stop right there at the edge of this building so this was the camera in the garden and here on the left i’m just showing the temperatures again in the pool and on the thermometer in here the third view controls multimedia I made a video about multimedia couple of weeks ago if you didn’t see that here is the link and now let’s see the interface this one uh currently looks very empty but as soon as I turn something on so for example I will switch to spotify and you see that the panel for spotify shown in here and when I click in on the button in here to start playing and I let me just turn the volume down in a second it will turn the spotify on and it will show the panel for spotify in here with different playlists and controls so I can move to next song pause and so on and there you go so this is the spotify list now let me turn it off and it will disappear again and the same thing for the tv if I turn the tv on there is this button for this lg 4k tv where I can switch to netflix or a satellite live tv youtube xbox different applications and what it does is there is an automation behind that that controls for example the denon device that is the amplifier with the speakers so they would reconfigure the tv based on what application plays but I can also control it manually in here so I can switch to the then amplifier or the internal sound there is a panel for text input so if I look at the view configuration again i’m using the layout card so it’s using the vertical layout again and the first column the first view is a grid with five columns I said I want to have five because I wanted to make them smaller but I really have three in here and these are the input boolean helpers and they control uh where the music is played on and off under that there is the entities card with again with the helper with the list of radio stations under that there is another helper for the volume again the entities card then we have a break in the second column this one shows only when spotify is selected so it’s a conditional card and it’s set on condition if the radio station is not one of those radios that are not spotify and the card is a custom media player card which allows me to do lots of configurations so let me show it to you so it’s a custom mini media player card I have the icon in here and then the options but this is the second column the third one is again a custom card with a custom lg remote controller and I made it a little bit smaller and then I configured different sources buttons so you can refer to the repository for the full configuration in the right column I have a media control card for the tv and under that I have again a conditional card which only shows when the media player tv is on and the card is a grid with four columns with four buttons and those buttons they call services so the first one uh calls the service remote send command to bro link remote and it will send commands to then on volume up and then I have volume down then I have this one which is calling a script that switches tv to denon and this one is switching tv to internal then I have this set of icons with the tv stations I could have used this one in here in the on the remote but I prefer to do it this way so this is simply a grid card with pictures and each of them is calling a service to switch to specific station and again it’s conditional card which only shows when the tv is on and then I have a custom card for the lg tv again it shows when the tv is on and the card is custom web os keyboard card and it allows me to use my phone or a tablet instead of a keyboard for the tv the next view controls the heating again I made a video about it couple of months back here is the link and let me quickly recap how the interface looks like so the card is our famous uh vertical layout again and then uh there are three types of cards really first there’s a panel where we can set the parameters for the heating so there is a mode currently it’s off but then it could be automatic always on or economic which is sort of more aggressive auto and the special mode for vacation speaking of vacation we can set the temperature for the vacation in here then there are three input boolean helpers that help to control the heating mode uh first one is automatically said when someone is home and then there’s two which we can overwrite to set the mode for heating in the bedroom and in the office to heat during the day because normally they are on the low temperature during the day but we have a small workplace in the bedroom and then there is the office and if we there we can turn them on to keep higher temperature uh during the day and then there is a switch for the electric heater in the bathroom which we normally turn on by the switch on the wall but we can also do it in here and this one is automated when we turn it on it’ll automatically turn off after two hours so looking in the card it’s a vertical stack but again i’m using the custom one which has this border around it and then there are entities is this input select then there is a horizontal stack with two columns and entities for the switch again the second type of card controls the thermostat in individual rooms so it looks like that and it repeats pretty much for each room and each of them consists of the cards for the individual thermostats that are mounted on the heaters and then there is a input boolean that we can switch from low to high temperature so it’s automatically switched based on the presence during the winter and then the controls which allow us to set the low and high temperature so here for each room we can set what is the high temperature and low temperature and by this switch you can switch it between the low and high and these are the thermostat so if I open it it’s a vertical stacking card again for the border to group them together and then there is really two cards in the stack both are grids the first grid has the thermostat so it’s a custom thermostat dark card is always the entity of the thermostat and what’s great about this custom cart is it allows to have a separate entity for the thermostat and for the temperature meter because those thermostats they do not measure temperatures so there is a separate temperature sensor you can configure it like that then we can set up the modes and when I hold it it will show me more info and then there is the second thermostat in the same room and in the second row there is a grid with three columns and it’s a button card which uses the input boolean entity for the button and normally when I push the button it will just change the color and on top of that i’m using the cart templater and i’m using it to change the name of this button based on the state of this input helper so i’m changing it from day to night this is really optional but I always like that so it says it’s night here and when I turn it on it says it’s a day and then there is the two other entities and these are really entities with the input numbers for the temperature day and temperature night and this one repeats for each room and finally the third type of card is the temperatures the internal temperatures so I have here a chart so it’s a custom mini graph card which has a list of entities uh in different rooms and it shows temperature in last 24 hours one point per hour this mini graph card is very powerful i’m also using it here for the humidity and for the sensor that calculates the fields like temperature so this is a grid card with those two charts one next to the other and in here i’m configuring the same mini graph card with thresholds so the chart is changing color based on the values this view was about the temperatures inside the house the next one is about the temperatures outside the house about the weather it shows the weather forecast and the current temperature and precipitation let me show you so the outside temperature is here on the right next to a pool temperature under there is the precipitation today forecast and last three days and the precipitation history there was a rain this morning and this is why the temperature was a little bit lower on the left side there is the forecast panel so it looks like we’ll have some more rain tomorrow so this video is very simple but what is interesting about it is that there are those two columns and they are completely different size and they also behave differently because if I resize the window you will learn that the page behaves responsively if I start resizing this right panel will keep its width and the left side will be shrinking and i’ll be shrinking to a point until this thing can’t shrink anymore and if I keep shrinking this right panel will jump below this page and if I continue shrinking it will continue to the point where I won’t be able to see those six panels here after which I will show a horizontal scroll bar here in the window so this is what we call responsive design and uh let me show you how it’s done so if I edit the panel and I go to the edit view layout then you can see it’s using a grid layout and we’re using a grid template and we have some media query here so there are two breakpoints one on 1500 pixels and one on 800 pixels now before I go into explanation i’ll show you one more thing those two panels so this is simple web page with the url of the web page but if I go to into code I have entered this piece of code in here for the wheel layout and I named this area for a cast and if I go to the right side again this is vertical stack with four cards the second one contains a horizontal stack with two cards with the mini grub cards so this is pretty basic I don’t have to go into that but if I show the code editor again we have here view layout and I call this current so this is arbitrary name i’ve chosen and then if I go to this uh layout again I said that by default the grid template has the right column of the size 400 pixels and the left column is automatic and they will be sorted in a way that they’ll be foreign cast and then current on the right and then I have two conditions if the width is somewhere between 1500 and 800 pixels what it’ll do is it’ll change the layout so in the top row there’ll be both columns occupied by the forecast and under that there’ll be the current panel with a blank next to it and as for the size the top row is using both so here it doesn’t matter but for the bottom one the first column is going to be 400 pixels and the right eye is going to be scaling until I reach 800 pixels and after that I will keep the same layout but I will fix both columns to 400 pixels so the horizontal bar under the window will appear so with that I have a full control on different devices and screen sizes the next view is really general settings it allows us to quickly turn on and off automations or group of automations for example if you have guests or if you want to turn them off temporarily for whatever reason the next two is kind of special I care about the environment now one of the things we have done is we bought an electric car even though you might question how much it contributes to the environment overall here we go we have it and we love it now this next view shows the statistics about the car the charging consumption and all the entities you have about the car and allows us to control it let me show you so here this is just regular picture elements card the only thing different about it is I wanted to have this card a little bit larger than the default card but I didn’t want to have it in a panel mod in a full screen because it would look weird on the big monitor so I really want to make it like a space for two cards even though I have only one right now and the way it is done is i’m using the layout card again so i’m using grid uh so this is 900 pixels fixed size and the right column is scaling and then if I reach 900 pixels it’s just going to be single column of 900 pixels so if I will start scaling you will see that this one stays 900 pixels and the right one is scaling and if I reach here it will just jump down and it’ll be a single column as for the card I use my favorite card templater but this one is really used to change the label color if the doors are open or closed so nothing essential and then it’s really picture elements with the image of the car and then all the information which I render as an icon text and the label with the sensor value to align them properly I use the translate 0, 0 because if I didn’t do that it would align based on the center of the text so I wanted to have them all aligned by the left margin that’s why I reset the transformation to zero zero and i’m also tweaking the font size but other than that it’s a standard uh picture elements cards i’m going to just slowly scroll through so you could check it out so this is the first part then it continues another part this one is conditional so if the car is charging there’ll be information in here on the left corner about the charging information and it continues like that lots of information on a single card but I think it looks quite neat we’re getting towards the end the last two views are kind of administrative the second from the end is a view for my 3d printer another passion of mine let’s look at it so here we go this is my printer I have a raspberry pi with octoprint in it so I have number of sensors in there so I can control it I can turn it off remotely and I have a camera here on the left so I can see the current print again it’s a picture entity card so if I edit it the camera in here it’s conditional card and only shows when the current state is not unknown so when the camera is actually available and then in here this is a picture elements with number of sensors again i’m using the zero zero position all of them are state badges I kept it really simple and it’s using the 3d printer png file so it’s basically the same as the car the last view is sort of administrative view just for me the others don’t see that not that I would hide things but while they wouldn’t be interested in those things anyhow they’re kind of low level technical details and I also don’t want them to turn something off by mistake that could cause some damage so let’s look at that so the way I have done this card is there’s a couple of vertical stacks on the first one there are some low-level technical switches in here like turning off the pool pump or the circulation pump for the heating and the information about the internet so I have this automation for the router traffic shaping that’s automatically based on the time can turn on the cueing for netflix and youtube uh currently is off uh but when I turn it on it would limit the traffic in here in the second column then I have list of all the different devices with the presence information status of all the different batteries this one is using a car templater this one and this one they’re using car templater so for example for the batteries if the battery level of any of the sensors is below certain level I will change the title to change the batteries otherwise it’s going to be just batteries and I use the same for the printer toner which is a custom bar card and the third column is some statistics for my github so I have over 4 000 downloads for my garbage collection integration quite pleased with that on the right side i’ve been playing with some smart movement detection which is combination of door sensors and motion sensors so I have them in here and uh there is a card with statistics from my nook which hosts Home Assistant and I didn’t create this panel I found it somewhere on the internet so this is how the card looks like it’s using config template with number of variables there are some entity cards custom bar card for the disk for the ram and cpu this is horizontal stack of two custom bar cards and in the very bottom there is a mini graph card so I want to go into further detail because this video is long enough and this card really is sort of informative has nothing much to do with home automation but if you want me to make a video about this one let me know so this is my Home Assistant quite lengthy video wasn’t it but I hope you like that and you’ll find some inspiration in there because this is the reason I do them myself i’m looking for inspirations all the time and i’m pretty sure i’ll find some in the comments under the video so if you like that hit this like button subscribe and i’ll see you in the next one.

Bye!.