FRIGATE NVR Part 3 - Actionable Notifications and Dashboard Cards

today in this part three of my frigate nvr series we're going to talk about creating actionable notifications on your phone or tablet or device using the blueprint from hunter jm it also allows you to view clips and view snapshots also pause notifications within the actionable notifications and we're going to create a dashboard that displays picture glance cards of your frigate activity and gives you the ability to turn on and off the automations and gives you a flashing custom button card when activity is detected so let's get started [Music] now that you have frigate up and running by watching my last two videos and you've got zones and masks set up what can you do to get notified when there's an event so today we're going to talk about that a little bit the first thing we're going to do is talk about the frigate notification blueprint that's written by hunter jm there's no point in me reinventing the wheel here so i figure we will just use the blueprint you need to make sure that you have hacs installed as an as a freaking integration or it's not going to work for you correctly if you've not used blueprints before what a blueprint does is allows you to take and create a template of sorts for your automations and with frigate it makes it nice and easy for you to build out automations based on notifications that come into your camera system so let's go ahead and install the frigate notification written by hunter jm the blueprint so i'm going to do this on my test device just to show you how to do the blueprints so you go to to configuration and then come down to blueprints and you are going to um you're going to import a blueprint by clicking on this blue button right here and with that blueprint you need to go over to the site or the blueprint site where you have that and there's a whole community repository of blueprints in this case this is hunterjm's frigatenotification.yaml blueprint and there is a url that you copy so you just copy the url up at the top of the screen here we'll just copy this url and we will put that in our blueprint the url of the blueprint so paste that right here and i'm going to preview the blueprint if you click on preview blueprint and it shows you the actual blueprint preview then it's working correctly if you get any other kind of error either you don't have the right blueprint url or the you the blueprint doesn't work correctly for some reason so once you look over this understand what it does and it's what you want to do in this case it is for us we'll just go ahead and import the blueprint and so now we have a blueprint in which we can create automations from i don't have any cameras set up and fricking's not running on my test system so let's go back over to my main system here my production system where i am running frigate and let's create an automation so i'm going to go to uh configuration automations and you can either create the automation from the blueprint or you can create an automation and then select the blueprint so we're going to add the automation here so here again there's a blue button so we'll click on that add automation and we will use a blueprint and i want to use the frigate notification blueprint so i'll click on that here and i will call this demo you can call it whatever you want to demo and i'm going to put aaa at the beginning so it shows up the top of my automation list because i have a bunch of those and i don't want to search for it all the way through all right so the blueprint to use obviously is for get notification and you can read through a lot of this information here it will send notifications to your device when a frigate event for the selected camera is fired the notification will initially include the thumbnail of the of the detection and then after a moment it will update to include the actionable notifications so you can either view the snapshot uh if you have snapshots enabled view the clip if you have clips enabled or you can even silence the notification for a configurable amount of time and you can figure the silence within the blue within the automation so with this blueprint you uh can also send notifications to multiple devices by leaving the device field blank farther down here so what's required you must have a frigate camera name and you must have your mobile app or device or the name of a notification group there are some optional features and these are the features that i find most useful to this setup because this is how i use it you can limit the notifications to objects entering any predefined zones and we talked about in my previous video setting up zones and masks you can specify which zones to be notified about and this will be a list you notice a dash here the dash signifies it's a list you can also specify what type of objects to be notified about and this is also a list so if you only want to know about person or car entering the zone then you would just set those to be in this list and it would work you can also disable notifications if a presence entity or group is home so if you have presence detection set up you can do that you can configure a cooldown for the camera to reduce number of notifications when back-to-back events occur again that's a helpful scenario if you have someone running in and out of the house or running around and they're going to trip it a bunch of times and you can also silence future notifications for a defined amount of time through actionable notifications how do we set this up all of this is built out in the template that is part of the blueprint so all you have to do is specify the items in the fields that it requires and then your blueprint is set up no yaml coding is required in this case so you're going to want to select the frigate camera uh so the name of the camera is defined in your figure frigate configuration and that's the name of the camera uh you saw me define in my previous videos so let's just call this one driveway that's the name of my camera the device must run the official home assistant app to receive notifications so you have to select a device so i only have one that's my phone so i will select that device that's where everything is going to go to from this blueprint the notifications you can create a notification group if you want to do that i'm not doing that in this case and then there's an optional base url now this gets a little bit tricky and i haven't had to do this i've read a lot about folks having issues with uh being outside of the local network and not being able to view snapshots and stuff like that this may require some experimentation but if you read it here the external url for your home assistant instance this will default to a relative url and will open the clips in the app instead of the browser so experiment with it leave it blank for now and if you need to set it then you can you set it to your external url and see how that works there's an optional zone filter toggle here and we do want to turn that on because we want to make sure that we are only sending events for a zone for me there's a lot of traffic and my camera on the driveway faces the street so there's a lot of people walking up and down that sidewalk out there i don't want to be notified every time somebody walks down the street i do want to be notified if they get closer into where my house is and that's where i have the zone set up again check that previous video you'll see where i set the zone for the driveway so i do want to uh set a specific zone name and again that zone name is the zone name that you set in your frigate.yaml file and it doesn't give you a drop down you'll need to know the specific name of the zone you created and you can always specify that in the frigate.m or you can always check that in the frigate.yaml file where you specified that so in my case the name of my zone is driveway close in and then object optional trigger and and make sure again this has to be a list so we'll have to put the little dash right there and then the trigger objects are the things you want to trigger on i don't care if a cat walks through there or an animal or anything i do care if a person walks through so i want to specify a person as my object to trigger this alert so let's back up and take a quick look what we're doing here on the driveway camera as configured in your frigate.yml file i want to know first of all only if a zone area has been triggered or an object has entered the zone so i turn that on and then i specify the trigger zone or zones you can have more than one zone in this list i just want the driveway close end zone and i only care if a person has entered that zone and then the optional presence filter is an entity to tell me whether or not i am at home or not i'm not using that but you can if you have presence detection set up uh then you can tell it not too alert it will stop the alerting if this particular presence entity or this entity is considered in the home state there's an optional cooldown so this is a delay before sending another another notification for this camera after the last event it's set by default to 30 seconds i'm going to bump it up to 60 seconds and then the optional silence notifications this defaults to 30 minutes you can increase or decrease this value so what that does on the actionable notifications there's a an option to silence notifications if you click that it will not send you another alert for this automation this camera for the time you set here which would be 30 minutes once you've set up all that stuff then you just save it and now we can go back to our automations and we can see that we have aaa test our demo frigate notification is set and ready to go so anytime you a person enters that zone you're going to get a notification on your device so let's talk about something that i discovered while i was doing the testing of this if we look at the code for this automation or this blueprint we can see and i'm not going to show the entire code but there are some conditions here and these conditions determine whether or not this will fire now this took a lot of time to figure out let me tell you what was happening first i would get alerts for items outside of my zone no matter what i set now i can't tell you exactly why this is occurring but what i found out is that if you get an alert in your zone it sends a zone list so if you look at this kind of we'll just briefly talk about this you have an entered zones list this list of is entered zones is the zones where someone has to be in order for the alert to trigger if someone walks out on the sidewalk my entered zones is blank however what it's sending instead of a nothing it's sending two brackets an open bracket and a close bracket and because it's doing that for whatever reason the length of the list becomes greater this was greater than zero so this used to be set greater than zero which means if the zone sent from frigate is is if there's anything in that list it's considered greater than zero and this particular condition will be satisfied so it was sending a blank zone and maybe there's a zone name or there's something going on we're sending a blank instead of an actual name for the zo for the area outside of my zone what i finally figured out i had to do was set this to two because what it does it counts those two open and close brackets as 0 and 1 so anything greater than 2 will now trigger the alert it took me about a week of playing around to figure this out so if you're getting alerts outside of your zones go in here go to blueprints on in your configuration come down to hunter jm and then click on frigatenotification.yaml and you'll go into zone select if it's in entered zones then it's greater than to send the alert you may not even have this issue but if you do and it's alerting outside your zone check this out and see if that's an issue so next up let's talk about building a little bit of a dashboard that shows us what you can do with these alerts and have some sort of visual indication what's going on as well so if i go into my current set of dashboards i have one called office tablet and this is where i keep this up most of the time i have three things that are related to the nvr the first one is a set of camera pictures here these are picture glance cards and these picture glance cards will will stay black and white until there's an alert on one of the sensors and then they turn colorful and show me what the alert was about second i have a couple of custom button cards that will start flashing yellow whenever there is an alert that occurs and then third i have the ability to control the automations that we just talked about i can turn those on and off if i need to sometimes it gets super busy out in front of the cameras and i don't want them to continuously send me alerts i can also turn these on and off based on presence detection or even automations if i have the alarm armed that's when these come on when i disarm the alarms i can turn these off but i wanted a button that i could use to turn them on and off as well manually so i just toggle these on and off whenever i need to so let's go into building the dashboard i'm going to go into my current dashboard i've already got a blank view set up and i'm going to edit this view and i'm going to start adding cards to the view the first card i want to add is a grid card because i'm going to build this out in grid cards now grid cards are a whole nother subject and i have a complete video on building an entire dashboard out using grid cards grid cards are an easy way to build kind of columns and rows on your dashboards and so i use those on a regular basis i'm going to set some options here i only want one column for the starting i do not want to render them as squares i want them to be whatever they're going to look like and so that's the top level grid card and then i'm going to build a second grid card here that's going to house my other stuff and don't worry so much about this what i'm going to show you is just the picture cards and then the other cards that are necessary so this particular card is also going to be one column and it's going to have a picture glance card so i'm going to click on picture glance here and i'm going to fill in the stuff that i need to fill in i don't need a title because it just takes up extra real estate i don't need the image path i do need a camera entity in frigate whenever you create an object to be monitored by a camera that becomes its own entity in its own camera entity so what i'm going to do is i'm going to select that camera entity that i want and for me it's only a person if a person arrives within the camera view that's when i want to be alerted i don't need to know about cats or dogs or anything else so this particular card this picture glance card will just be if a person shows up so i'm going to say camera and then uh in the case of the driveway i want a driveway person and you can click on these if your browser works right mine doesn't i can't click this and make it work and so you can see a camera a driveway person image the action it doesn't matter the this it doesn't matter to me but what does matter is you want dust to be able to change from black and white to color then you need to specify a binary sensor so i have a binary sensor that i use for this camera and it's the same as the uh the person detection object so it's driveway motion so i'll say driveway person motion you can see it there again i can't click these for some reason in the chrome browser it doesn't work right anytime this binary sensor is activated the picture glance card will turn to a color view and anytime it's not it'll be black and white kind of gives you a visual indicator of when there's actual activity on there and i'm going to go ahead and save this all right we've saved our picture glance card which you can see here now i want to add a couple of other cards this is nice as it changes color whenever the sensor is on but i also want to have that custom button card flash on my kind of my face and tell me there's some activity there so i'm going to add another card and it's going to be below the first one and i'm going to create another grid card this time i'm going to create a grid card with two uh different cards side by side just for spacing and you can build this out however you want to make it fit into your existing dashboards etc so i want two columns and i don't want them square and i'm going to add in first a custom button card start typing custom scroll down here and you'll see custom button card it doesn't fill anything out for you it doesn't give you a visual editor for the custom button card just allows you to put code in since i've already built this out i'm going to go ahead and copy my custom button card and i'm going to paste it in here for us to use and i will explain what it is that it does so here's the code for my custom button card and i've got to fix a few yaml issues here this is all going to line up so i'll do some magic using control key and my left bracket i'll slide all this over and if it's correct you'll see the cards show up here and you won't have any red text on here telling you there's an error so let's go through the card code real quick this is of course a custom button card the entity is the binary sensor driveway person motion so the only time this is going to be activated is if there is a person the person object has been been detected on my camera not not just in the zone but anywhere in my camera because i'm not specifying a zone although you could do that and then of course the icon is a motion sensor uh the color type i just said as a whole card it's going to make the whole card change colors starting with an opacity of 70 it just kind of dims it down a little bit so it's back out of the way in my visual spectrum and then the height i make it 160 pixels i've done that on the dashboard that i showed you a minute ago because it fits in there just perfectly the name font size is 14 pixels and the color is white so this looks kind of grayish but it's because the opacity is 70 percent it would be a wider color if it was 100 opacity so that's the card as it statically set if the state of the binary sensor we set up here changes to on then this style is going to apply the background color is going to be yellow because i really want that to pop out the opacity is going to go from 70 to 100 again pop that out at me and then i apply some animation and you can do this in your custom cards the animation is going to be a blink so it's going to blink on and off every two seconds and then the word ease makes it just kind of slowly blink on and off so it's going to be like this pulse setting blink and it will do it infinitely until the state changes from on to some other value and because white text on on a yellow background is not visible uh and why anything actually i change the color of the icon to black so it's more visible and let me move these over where they belong i also change the font size to 14px so i just make it 14 pixels and then the the name on the card this will also turn black because you can't see white text on yellow very well black text on yellow background is very visible so that's how i do that card and you can see it here if i save this now you'll see that i have this card here and i just realized my camera wasn't on this whole time so i have now turned my camera back on so you can look at my mug here okay i've added now this flashing custom button card i want to add one more card that's going to allow me to turn on and off in automation like i showed you on my main dashboard so we'll go ahead and edit this because i created a grid card i actually have a spot over here to place the other card so i'm going to add a new card and i'm just going to click on button here this is the button card on this card i'm going to select the actual entity that goes in that button card and it's the automation that i set up you can choose any of your automations but it's the one that i set up for the driveway my actual not the demo and i'm going to put in motion driveway new only the name i'm just going to give it driveway otherwise it'll put the entire name of the automation in there which won't fit on the screen you can choose the icon to whatever i'm going to leave it as robot show name yes so you can see what happens when i toggle these show state it's currently on and then icon i keep the icon on there it makes it look more presentable the icon height in pixels is optional the theme is optional the action you're going to want to toggle because you're toggling the automation on or off uh and then if you hold it it gives you more info although i don't know what it shows and then i want to save it and now you can see that i have this here let's get out of the editor so what will happen now is you will have this icon show up if a person ends up in this field of view or is detected in the detection area of the camera that you have set up in your frigate.yml and this allows you to turn off by clicking it the automation that sends you alerts for in this case this driveway camera so that's how you build out the things that i showed you on my office tablet i just put three of them side by side two of these cards side by side and here we are you can see now that there has been activity on the driveway and it'll show that flashing and what's what happens here is this card is now turned uh colorful telling me that this is where the activity is and you can see what's going on out here it's detected a person out in the street because it's looking at this entire camera view to get uh object detection and that's how that works just happens to be very coincidental that it happened while i was displaying this so you can see what happens and this will stay uh alerting until it actually switches back to an off state that binary sensor and you can see here that this is switched back now to black and white because it's no longer an active alert so that's how we do the friggin notification on our phone devices tablets whatever you have set up or notifications groups if you want to and how you can see those clips and snapshots directly on your phone or your tablet device in addition now you can create a custom dashboard so kind of do whatever you want with the dashboard and display these alerts in my final frigate video i'm going to talk about webrtc and how you can display the cameras using the webrtc setup i have not been able to reliably stream my cameras uh using any of the glance cards the picture entity the loveless cards but i have been able to do this very well in webrtc and it looks really nice i can use the full stream full resolution streams and view those in different groupings front back all cameras etc it's a good drop in for the way i was using blue iris to show me all the cameras just uh in real time so i can see what's going on around me let me know if you have any questions this is a video three again of the frigate series watch video one on how to configure frigate initially uh video two on how to create zones and masks which i'd reference in this video and of course this video on how to set up some notifications and some actionable things let me know if you have any questions down below in the comments hit me up on discord if you're not a channel member i'd love for you to to become a channel member it helps support the channel and then subscribe of course and we'll see on the next one [Music] you

Channel: mostlychris

Views: 3,084

Keywords: Smart Home, Home Assistant, Frigate NVR, Frigate, Frigatte, Frigte, NVR, NRV

Id: RWsT-x7yYXI

Length: 25min 17sec (1517 seconds)

Published: Sun Sep 19 2021