5 FRONTEND HACS (Cards and Elements)

in today's video i'm going to be showing you five   front-end hacks that you can add  to your home assistant check it out   what's going on guys i hope you're all doing  well i've got a nice and straightforward video   for you today and by the end of it you should  hope to be able to make use of some of these   custom front-end changes that i'm going to show  you now so with that said let's get on with it   so what do we mean by front-end hacks  when i say front-end hacks i am of course   referring to the home assistant community store  front end this is the place where you can go to   download themes custom cards elements and other  bits for your dashboards if you've got no clue   what hacks is or how you go about installing  it i've done a handy video a little while ago   which shows you all the steps you'll need to  get hack set up so go ahead and install that and   then pop back here you'll then be able to follow  along and add these bits to your front end and if   you've already got hacks installed the only thing  you're going to need to do if you're not already   is hit that subscribe button and ding dong that  notification bell you'll then be alerted to any   future videos that i do and as always this video  will be chaptered so if there's a specific point   that i'm talking about and you want to hear it  again or something you want to skip over be sure   to make use of the chapters in the description  below along with that there's a link to my get   where you can go to check out all the code that  i'm going to be making use of in this video   on with the install then so first up we've  got the mini graph card to find this we're   just going to need to open hacks on our home  assistant we're then going to choose front end   from here we're then just going to click on the  blue plus button in my demo here i can actually   see the mini graph card right at the top here  so i could just click it there if in yours it's   not there you can use the search box right at the  top here and just do a search for mini graph card   so a big shout out to kalki for this awesome card  and i'm sorry if i just butchered your name there and what the mini graph card allows us to do is to  make use of minimalistic and customizable graphs   these graphs can display sensor and binary  sensor information from our home assistant   so they're just nice customizable graphs  that we can make use of on our dashboards   and this is going to be a reoccurring theme  throughout this video but to get this added   on all you're going to do is just hit that  little install button just behind me there   and that's going to say install this repository  in hacks we're then just going to click on install we'll then get a pop-up asking us to clear our  browser cache so we're just going to press reload   and we should now be good to go with that  installed we're going to head over to our   dashboard and just start making use of this card  let's go ahead and do that now now in my demo   build here i've only got one dashboard so i'm  just going to go to my main overview dashboard   from here then you can see this little blue add  card button we're going to just press on that and then in this pop-up that appears if we  just scroll down to the bottom we should see   that new card that we've just added and we can  see that just here the custom mini graph card   and we can just press on that one with this  custom card there's no visual editor for this   so we are going to need to write the code for this  now it's not too tricky but it will be linked in   the description below and just for reference  any bits of front end that i show off i'm   going to have the github repos also linked in the  description below so you can also go to the github   repos to have a look at some of the examples and  bits of source code there on all of the repos   there'll be a little section that's going to tell  you how you can use the card what parameters and   what features you can use to customize it further  i'm just going to paste my code in here now   and we can now see on the right here we've got  this nice little graph that's showing us the   temperature of my raspberry pi hovering over  the graph then i can get some more information   so if i just hover over the line i get  little nodes which tell me the temperature   of what the pi was between set periods of time  these graphs are fully customizable and this is   just a basic configuration for a graph but you  can add more settings to it and do more tweaking   so there's more bits you can add and change with  these graphs and you can find all that information   on the github page for it but if we wanted  to we could just tweak these settings here so   say if i wanted the font size bigger i could make  this 175 and you can see on the right there that   that just updates and adapts to whatever i change  the name property here is optional so if i didn't   have this it would just use the default name of  whatever entity i'm displaying which happens to   be the processor temperature i could also adjust  the line width here if i wanted to so i could make   that bigger or i could change the color of the  line it's all super customizable and it's super   easy to just change bits on the fly and just see  the visualization just on the right there and when   you're done making your changes and you're happy  with your final card you can just click save there   here's a little mock-up i've made of  using the original home assistant cards   and also the new mini graph card with the original  home assistant cards i've just chosen cards that   can visualize data just so you can see how  they look compared to the mini graph cards   they look quite plain and there's not all  that much customization you can do to them   now that was a very simple look at the mini graph  card but there's lots that you can do with it and   there's lots more different visualization styles  and methods that you can use so if you do like   visualizing data on your dashboard or maybe  you just want to make use of some pretty graphs   this is definitely the good starting point for  you you can do things like having multiple lines   on your charts you can have different bar  charts you can find grain what the different   time points are on your individual graphs so  if you want more or less time between things   there's horizontal stacking dynamic line coloring  alternate x and y axis and much much more   up next we have the mini media player and for  all of you eager-eyed people you probably already   spotted it on the dashboard at the beginning  now i actually featured a quick install of   this on my alexa text-to-speech video a couple of  weeks ago and if you are interested in the alexa   text-to-speech stuff i'll have a link to that  video in the description below in that video i   showed you how to set up this card and with this  card whatever you type into the text-to-speech box   here when you press that send button it will  announce it or play it on your amazon echos   as you may have already seen how to set this  specific card up if you watch that other tutorial   i'm going to show you something else that you can  do with the mini media player card and the mini   media player card is also made by kalki and what  this one does is it allows you to create a custom   media player where you can set your own controls  and your own styles on how that media player will   look to get the mini media player added it  will just be a case of going back into hacks   going into your front end and then just hitting  add and then just add in that mini media player once you've found that you're going to just  need to hit install and it will then install   and appear at the bottom of your list just like  the mini graph card did so on our dashboard   we're going to add another new card and if  we scroll all the way down to the bottom   we'll see the custom mini media player so we can  just choose that one now unlike the mini graph   the mini media player is customizable through  the ui so if you want to you can customize it   by toggling on these switches or choosing options  from the drop down in this particular example i'm   going to be doing it all with code so i'm  just going to press on the show code editor   and just like before i'm just going to go ahead  and paste that in and you can see with this one   it's giving us a custom media player but with this  media player there's four additional buttons on it   with the first two buttons i have them called  a script whenever i click them with this third   button here when i press that one it's going to  change the audio source so i can have it play   whatever music is playing on another speaker and  this last button here is going to do an alexa text   to speech notifications so whichever speaker  i choose to play the notification on will get   the notification announcement from pressing that  button and just to make that a bit more readable   for you i've just put a bit of space in between  all those buttons so here you can see this is the   last button so that's the echo notification one  then we've got the change audio source a script   and another script we've also got a parameter  here on whether to hide or show the volume control   so it's currently set to true so it's going to  hide it if we set that to false we'd then be able   to see this little volume slider and again you can  customize these to however you want it's up to you   all of that information for all of the different  customization and all the different parameters   you can play around with are all on the github  page i'll just add another mini media player   card here just to show you another example  and again we're just going to paste this in   with this one we can nest a bunch of different  media players all together we can also group   them so as you can see in this one here they're  grouped so they're kind of in the same block but   in the same card if that makes sense you can set  how much information is displayed on the lines and   you can also set what controls you want to appear  on there that nested one is quite nice if you want   to be able to control all of your media players  in the same card but also having those buttons you   could tie those button actions to be playing your  favorite tracks or your favorite radio station or   something like that so that's two very quick  examples for the mini media player or three if   you count the text-to-speech one there's tons of  different customization that you can do with it   and i would say that this one is one of my  favorite ones next up then we've got more of a   front end feature and this one is swipe navigation  so if we open hacks back up and go into the front   end again this time we're going to hit plus and  we're going to do a search for swipe navigation   and the one that we want is this lovely swipe  navigation so we're just going to press that with   this one we can see a little gif here where you  can see how the navigation is being swiped across   now this is only going to work if you've got a  mobile device so if you access home assistant   through a mobile you'll be able to utilize this if  you don't make use of home assistant on a phone or   a tablet then this one won't be any use to you  now i don't know about you but whenever i'm on   the home assistant app i always want to be able to  swipe between the different tabs on my dashboards   and this is basically what this feature does  let's go ahead and hit that install button then   and install do we want to reload yes we do  and if we just scroll down to the bottom here   we should see our new lovelace swipe navigation  card once that's installed you can just open up   the home assistant app on your phone or tablet and  you can just start swiping through the different   tabs on your dashboards there's a few different  things you can modify in the swipe navigation   just by changing parts of the config so you  can do things like change the animation style   currently there's three different types  you've got the swipe fade and flip   i'll try and have those up on the screen now  so you can see the difference between them all as it states here in the documentation the swipe  animation might look a bit buggy i've tried that   on my iphone and it does look okay but it's not as  smooth as the other two transitions so have a play   around with those animations see which one you  like the best you can set things like the swipe   amount so you can adjust how much you actually  need to physically swipe on your screen before   it actually does the swipe transition you can also  do things like apply a wrap so once you get to the   end of scrolling when you get to the end it just  goes back to the beginning so you can turn that on   and off so play around with it and see what you  think the swipe navigation settings are set for   each individual dashboard so you'll need to modify  each dashboard to get it the way that you want   to make the modifications you're going to need to  click on the three dots in the top right you then   want to click on raw configuration editor and then  from here we're going to just paste in a little   bit of code at the top so just underneath the  title and this is going to be our swipe nav config   so this will be the bit of config you can play  around with and you can adjust this to get it   how you want all of those config settings are in  github but those are the settings that i like when   i'm using it on my iphone you then just need to  hit save in the top right and once you've saved   that you'll just need to refresh your phone's  application for the phone to see those changes   okay up next we've got the swipe card and  what this one's going to allow you to do   is to swipe through different cards that  you've got in a set array on your dashboard   and by now you should have guessed  we're adding things in by hacks   so we're going to go back into hacks and we're  going to click on the little blue plus again we're then going to just do a search for  the swipe card i can see it there we're   just going to click on that and we're just  going to hit install this repository in hacks as with all the front end changes it's  going to tell us it needs to refresh the   browser cache so we're just going to press reload and we can now jump back to our main dashboard  and we'll start playing around with this card   before we start playing around with the card a  massive shout out to bram and if you don't know   who bram is bram is one of the active developers  of home assistant so big thank you to bram for   this awesome card over on bram's github which  will be again linked in the description below   there's all the documentation for everything  you'll need for the setting up this card to get   started with this one we are of course going to  need to be in edit mode so to do that we're going   to just click the top three dots in the top right  corner we're then going to choose edit dashboard   and if we click the little blue  plus in the bottom right corner here   we'll be presented with all of the different  cards we can add we're then just going to   scroll down to the bottom and we should see  the new card that we just added in from hacks   and we can see that here the custom swipe card  so we're going to choose that one with the custom   swipe card we're going to be using the custom  swipe card type below that we've got an array   of different cards and in here is where you're  going to be adding in all the different cards   that you want to display in the swipe card i'm  just going to go ahead and paste in an example   i've already prepared for this and again this  code is going to be on my github so feel free   to copy and paste that from there if you wish to  use it so let's go ahead and paste that in now and i'm just going to hit save and i'm also  just going to jump out of edit mode to make   it a bit clearer to see what's going on and  as you can see i've got these three different   cards here and if i drag on the cards you can  see that it kind of just swipes through them   unlike the swipe navigation the swipe card does  work if you're on a desktop and you can just drag   freely between them but it does feel a lot more  natural if you're doing this on a mobile device as   you've got better control with your own fans with  our swipe card we're currently using an effect   called cover flow now there are a few different  effects that you can make use of and i'll show you   a quick demo of this in a second the swiper card  is built on top of swiper so anything you can do   in the swipe up api you can pretty much do with  the swiper card if you're interested in playing   around with the customization or having a go at  the different effects and other bits that the   swiper card can do then you'll want to have a look  at the swiper api the swiper card is built on top   of the swiper api so pretty much anything you can  do within the swiper api you can do in the swiper   card so if i just quickly scroll down here you can  see some of the different effects that you can use   so if you're interested in that go check that  out there'll be a link to this in the description   on the dashboard here i've got a couple of  examples of the different effects that you   can make use of so i'll quickly show you these  and then i'll quickly run through the code so you   understand what's going on this first one we've  already seen this was the cover flow so you just   kind of swipe through them and you get the cover  flow effect next up we've got the cube effect and i think that one's quite self-explanatory as   you swipe through you get a  little cube effect going on   following that we have the flip effect and when  you swipe through the kind of card just flips over and the last one is just the standard swipe  now this will be the one that you get if you   don't set any effect on and you can just swipe  between all of the cards you set in your array that's a quick example of some of the different  effects that you can make use of i think there   might be a couple more in the swiper api but  those are just the ones i've personally used have   a play around with them and let me know in the  comments below what your favorite effect type is   with this configuration i'm not going to run  through what all of the different parameters   are and what they mean as they are explained in  the github but i'm just going to point out some   of the key ones which you may want to make use of  first of all is the card width this one's going to   be useful if you've got a particular size that you  want the card to be so currently i've got it set   to be 200 pixels here but if you wanted a bigger  card you could step this up to say 400. and you   can see as i've changed that in the little preview  to the right here that card has just got bigger following on from card whip we've got the start  card so the start card is going to automatically   be selected whenever the page reloads and in  my example it's set as card two and for this   it would be the processor temp because that's  card two next up we've got the effect and again   i quickly covered this one so this will be the  line you change here when you want to change the   effect let's say cube or flip this whole kind of  top section is going to be where you actually edit   the physical properties and parameters of the card  itself so that's going to be the style and design   of how the card moves around and what transitions  and effects it has again that's all talked about   in the github so if you're interested in doing  some fancy things then check out github and also   check out the swipe api because there's lots of  cool things listed in there that you can make use   of in this card i've just added a bit of spacing  in here just to make it a bit clearer but with the   cards you just add in all the different individual  cards that you want to display in your swipe card   so in my example i'm actually making use of the  mini graph card that we looked at earlier on   so you can add any card in all you need to  do is just give it the type and then you can   customize those properties depending on whichever  card you add in and that's the swipe card okay and   on to our last one then and our last card is going  to be the banner card so again back in hacks back   in the front end we're just going to hit add  and we're going to just do a search for banner and we can see banner there so we're just going   to click it and we're going to  hit install this repo in hacks and install and for the last time in  this video we're just going to hit reload the banner card was created by raymond julian  so again thank you very much raymond for this   awesome card and what the banner card allows  you to do is to create these nice compact little   cards they've got lots of information on and  they're just really easy to read you can see   a couple of different examples here and again  this is going to be linked in the description   below and all of the different configuration  options are all available on raymond's github   so back on our home assistant dashboard let's go  ahead and get this last card added in and again   we're just going to click on those three dots to  go into edit mode we're then just going to hit   edit dashboard add a card and if we scroll all the  way to the bottom we should see our new card you   can also just do a search for it we can see banner  card here so we're going to choose banner card and as with the previous ones i've got some  example code which again will be my github   so check out the description below if you want  the link for that i'm just going to go ahead and   paste that in and there we have our first banner  card so i'll quickly just run through some of the   code and how it works so a banner card is kind  of broken up into a couple of different sections   so the top section is known as the heading and  here is where you have your kind of title for   your banner just below that you've got your  main body and this main body is broken up into   different rows and columns so there can be three  different columns at any point on your banner card   and in my example here you can see that i've  got one row with three different columns   an important thing to note is that some entities  have different column sizes so some of them will   take up two columns and some of them will take  up all three you can see here that these singular   entities just take up one which looks nice and  neat but some entities such as the media player   will take up the whole three column width with the  banner card you can customize lots of different   aspects of this so you can change the way that  the data is represented in the different columns   you can customize the background you can customize  the heading you can also have the heading linked   to somewhere so when you click on the heading  it can take you to another section of your home   assistant dashboard you set this by giving it  the link parameter and then you give it the   location of where it's going to go  to when you press on the heading   so in my example here when i press on this heading  it's going to take me to my banner card dashboard   with the heading you can also set a  background you can do this by using hex colors   this is a really basic banner card config but  if you're looking to play around with the banner   card it's a great place to start so have a play  around with it and see what you can come up with   let's exit out of edit mode and we're just going  to click on our banner card so as we hover over it   we notice get the little pointer cursor to tell us  it's a clickable link and if we click it it should   take us to the link location that we gave it in  the config and indeed it has mine's taken me to   my banner card section at the top here we'll just  quickly jump into edit mode and we'll go through   some of the different configurations for these  banner cards we'll start off with this first   one then so you can have an actual image as the  background for your banner card if you want to   to set an image background it's just a simple case  of giving it a url so you can use any url you want   as long as it points at an image you can also use  local ones if you've got local images on your home   assistant instance that you want to make use of  so set the url and just pass it into the parameter   next up we've got different colors so as i  said before you can color it with hex colors   and all you do here is just change the  different hex color in the background   you don't have to use hex you can use any of the  different html color options so head over to a   website that's got a html color picker we're here  on w3schools and you can make use of either the   hex code the rgb code or the hsl code then  just simply select the color that you want   and then just choose one of the three different  codes and then use that code in your background and then just hit save you can go into more  details with your banner theme and you can   change the different fonts available you can  change the font size and also the font color   and again all that info is available on  github another nice thing you can add to   your headings is emojis so you can either use  the unicode values for the emojis or if you   just head over to the emoji website you can  just find an emoji you want we'll then just   need to find a banner that we want to add  the emoji to so let's take this one here   so we'll click edit this one does already have  a material design icon so we'll just remove that   and then we're just going to paste  in that emoji that we've got on our clipboard and just hit save if you do ever go  back into the configuration for that banner card   you'll notice that the emoji will have  been converted into unicode automatically just on the right here we've got an example  where i've got multiple different rows   just to show you that it is possible and with  those rows it's just a case of just keep adding   in lots of different entities and then finally  in this other example here i've got a couple of   different entities added in so we can see here  i've got a switch and i've got the state of the   light and we can access this switch from in the  banner card so we can toggle this light on and off and we can see that the actual sensor for  it also updates when the toggle changes   and just below those we've got the media  player and you can see that that's taken   up all three of the columns so let's  have a quick look at that config then   so in here we can see we've got these extra  entities we've got the entity for the switch and   the entity for the light on so this first one we  have to specify what domain it is so we're telling   this that it's domain switch which gives us the  little toggle and the other one we're using the   domain binary sensor so rather than giving us a  little toggle it's just going to give us the state   so we can't actually click on this one it's  just going to tell us if it's off or on   and that can be really useful if you want to  display information just as a glance rather   than having it as a switch or something else  and then just on the bottom here we're making   use of a media player so i've just got my  downstairs echo and i can see it's got the   title of the last song that was played there and  a couple of different media controls with all of   these entities if you click on the name of the  entity it will give you more information about   it so if you click on the processor temperature  here it's going to give us the actual entity and   it's also going to give us the history and that  goes for everything so if i click on downstairs   music i'm going to get the pop-up from the echo  and get all the details about the echo and also   the history tab there as well just like you would  with clicking on any entity in home assistant   and that's a quick look at the banner card so  i tried to keep it quite simple but give you   enough information to be able to experiment and  play with the different styles hopefully it was   helpful and also simple but if you do want any  more information about the banner card or any   more examples then be sure to check out the banner  card github page and there we go guys that's been   five different front end things that you can add  to your home assistant using hacks those five are   all ones that i like to make use of in my setups  let me know in the comments below any cards or   entities or anything like that that you like to  make use of in your home assistant i hope that by   watching this you now have a better understanding  of how you can go into hacks find something in the   front end that you want and then get that added  into your own home assistant if you've enjoyed   this video and found it useful don't forget to  drop me a like rating and if you're not already   if you hit that subscribe button and ding dong  the notification bell you'll be alerted to any   future video that i do a massive thank you to  these awesome people who are my patreons thank   you guys for supporting my channel if you're  interested in joining these awesome dudes and   supporting my channel there'll be a link in the  description below where you can go ahead and check   out my patreon if you're interested in what i do  or maybe one of behind the scenes or a sneak peek   at some upcoming content then be sure to catch  me on the social medias they're also linked in   the description below as always thank you for  watching and i'll catch you in the next one cheers you

Channel: Mark Watt Tech

Views: 108,610

Keywords: MarkWattTech, HomeAssistant, Hassio, Home Assistant, Smart Tech, Smart Home, Mark Watt, Automations, Home Asistant, Mini Graph Card, Mini Media Player, Swipe Navigation, Swipe Card, Custome Cards, HACS, Custom Home Assistant, Custom UI, Dashboard tweaks

Id: 03IPN9lBEfE

Length: 26min 30sec (1590 seconds)

Published: Tue May 18 2021

Reddit Comments

[u/Anonimo32020]

So no blogpost where I can read instead of watch a video?

[u/Oztravels]

Always enjoy your videos. Thanks for your work.

[u/Bowhunt24]

Great stuff, thx for the post and ideas!!!

[u/kaizendojo]

I use the swipe card with autoplay to run through a list of my camera views. But when it gets to the end of the list, it slides back through all the previous cams in the list to get back to the first. (Ex. 1 to 2 to 3, then 3,2,1 quickly and the cycle starts again.)

Does anyone know a way to get it to just continuously slide from the last to the first over again? (Ex. 1 to 2 to 3 to 1 to 2 to 3 etc.)

I've looked at the API and the Git but I cannot seem to figure this out. Driving me crazy.