Making an E-paper Dashboard with ESPHome

so eaper displays are really cool and home assistant and ESP home make it very easy to create a little custom eaper dashboard um and in this video I'll show you how to do it so this dashboard that I've got configured really only uses a few components you've got the screen there's an esp32 board and then with the screen you can buy a little hat that allows it to communicate with the esp32 board that's really it as far as the hardware everything on screen it's really the software that makes it all fancy what we've got on this display is live time date weather conditions a bunch of sensors and statuses from my house and down at the very bottom It's probably hard to see but there's a little bitty bitty line down there and what that is is that there's even a chart that's going to plot temperature over time um and you can adjust all the parameters for what sensor you want tracked uh how long you want to track it and all kinds of stuff with a chart now all of this is made possible through ESP home which has really cool features for display and the fact that it hooks in to home assistant means you can pull all kinds of things out of home assistant into your display dashboard now right now you'll see I've got one sensor that's not reading it's because that sensor only updates four times a day and I have actually restarted home assistant since its last update so it doesn't have a current value from that sensor but all this stuff is actually pulling in from my home assistant the trickiest part of this is actually the weather because these are being pulled out of a forast and recent changes to home assistant have changed the way you have to get information out of weather forecasts but everything else is pretty simple and so I'll walk you through how to set up the hardware which again that is very very simple and then we'll look at how to set up the software where you can use my configuration as a demo to show you how to pull in Sensors how to pull in time and dates how to pull in statuses how to pull in weather and how to plot a graph wherever you want on screen you can then just take it modify it to put whatever elements wherever you want on your own dashboard now you will see once a minute this thing will refresh and ink is just not a highspeed display it is very low powered though so that's the tradeoff when it refreshes it takes a few seconds but it does not use any power other than the refresh everything is held in a charge State and even if I unplug this thing the display will stay up now one thing that happens though that you do need to be aware of is that ESP home doesn't keep track of everything it's just pulling in variables from home assistant so if it loses power um it will have to wait until it can catch new values for all the sensors and then it will update so that means that the little chart down here that's building gets reset every time there's a power cycle so let me show you how this works right if I unplug this the display actually keeps going there's no battery in this thing and I'll show you when I plug it back in it'll boot up and then you'll get a screen refresh with everything uh now reset that to default now I actually have built into my configuration I actually have a button that will allow me to refresh the screen and so if I push that I can push a screen refresh and then you can see I've got all my information is now live and current I currently have the refresh set to once every minute and my little enclosure I have feet on the back and it's kicked back at about 5° that way I've got it standing mostly upright but with a little back tilt so that it doesn't tip over so now uh I'll show you what's in the hardware which again is very straightforward and then we'll look at the more complicated pieces of the software environment let's take a look at the hardware that you're going to need to assemble this and it's actually a very very simple project on the hardware side of things so I'm going to be using an Adafruit feather 32 this is the version one board there's no real special reason um why I'm using this it's honestly just because I wanted a board that didn't already have header pin soed onto it and this is one that I had so you really just need any basic esp32 and it should run this thing just fine now the other component is going to be the screen and so this is a wave share 7 and 1/2 in e in or eaper screen and if you get the one that comes with the hat it comes with the interface board that has a uh a plug with wires already adapted to it and a flat cable connector on this end so that you can attach everything pretty easily and on this the uh the wires that you're going to need it's mostly just digital pins there's a VCC that's going to be the the main power um this thing can run off 3.3 or 5 volts it also has a pin labeled power but that's actually a power enable pin so it doesn't actually need current um and then everything else is just digital communic ation this thing's basically an SPI uh interface and so there's really not much to it uh the couple of things that I would mention about this just to be careful with so you probably can't tell but there's actually a little tear right here in this uh ribbon cable because I dropped this thing and it twisted and tore the cable right there so I had to get another one of these displays so I also cracked the edge on this corner Corner simply by trying to put it into uh the enclosure up got and I didn't even push that hard it just something loaded right on the edge and this thing cracked so I actually have another one that I bought and you know this stuff isn't cheap these displays I think the one without the hat is still like $45 or something 40 45 bucks so be very gentle and careful with these displays they are extremely fragile one of the most fragile components I've ever hand L like I said I tore the cable very accidentally I I chipped that edge again very light handling I was not rough with this thing but you do just want to be very careful because they're too expensive uh to have to replace like that so uh that's the other thing that I would mention about these with that the last thing that I will say is you need an enclosure so I've 3D printed a enclosure for this thing and I will include step files for this because you probably do want to modify it for your own use if you want to use a different size screen or you want a different layout um you could even put like a whole for a uh a screw or something to hang this thing on the wall if you wanted it's a little thicker probably than I needed to make it but it is what it is this one I've got it made with a little 5 Dee Kickback so that it's pretty flat looking forward but it does kind of lean backwards a little bit um I've got a place where I can mount this little adapter board um however my 3D prints uh they aren't really durable and so I've broken a couple of these so I'm may end up just hot gluing this thing in it's also got a little spot over here for this particular board to set which again I'm just going to hot glue that in place and it's got a little hole so that I can run a USB connector through there um as well it's got a little cutout here in the bottom so that whenever you go to place the screen in uh you don't damage that cable and then it's just going to be held in once you get the front on uh just by compression so with that again there's a few things that you might want to modify so I'll put a step file up there for you so with that I'm going to go get this thing wired up and assembled and after that we can start looking at the code all right so we got everything wired up uh next thing we need to do uh and by the way I did clip out those posts I i' probably modify those and reprint this thing in a different way uh so that they were a little stronger um I've coiled the wire just to make it a little less uh you know bulky so the next thing we're going to do uh I found that the way I built this thing the little extension isn't really going to be necessary um and so I'm going to show you with the the dead pound so you just take your connector make sure that this back piece is flipped up take the flat Edge and make sure it goes in the right spot now these are a little tricky because they're pretty floppy and you don't like I said you don't want to tear that cable so get that thing over there get it slid in and then you push that black part down and then that locks it in and then roll this thing over and then fit the panel in like that and that's it uh so that's the process of putting this thing in I don't even think I'll need to retain that inner board um because it's just this thing isn't going to move that much again if if I had it to do over again I might design it just a touch different but um I think this is going to be good enough so I've got a couple of the these in and I can show you the back and I've just got some places for some hex nuts in there so that the screws have something to thread into um the other thing is currently the screen is a little loose so i' probably want to do like a little bit of a foam or something around that to hold this into place a little tighter I didn't want to crush the screen so um this went through a few different iterations and I ended up uh leaving it a little loose cuz I again I ran through a couple they were too tight and I didn't want to break another screen um that's not how I broke the first screen but after breaking that one I was kind of gunshot so I left uh plenty of Tolerance there for that screen so at this point I'm going to finish putting the the other two screws and then we've got access to our USB and we can program this thing so the first thing we're going to do for the software side is get the template set up to pull forecasts out of home assistant so I'm using the studio code add in to do this on my home assistant server um however you access files there and can edit things that's how you need to go into this and that's a whole different Bak so at any rate you're going to go into your configuration folder your config folder create a new file now I've got mine named forecast so create a new yaml file okay so I've made a little forecast demo file here so that I can show you and here's what the code looks like all right so uh this is a template and so whatever you name this file also you need to add that to your configurations. yaml and so here you'll see template you know and then I'm including this forecast yaml file and so what's going on is this is a template system and so it's got a trigger and basically it's going to run this thing at startup and then it will also run it every hour and what this means it's going to update the weather forecasts hourly um now there's two two different things that I'm going to be doing and that means there are two actions in here now both actions are called get forecasts and this is kind of a new thing that's been added recently is that a template can run uh these services and so weather. getet forecasts is how you grab weather data out of the new forecast entities and so I've got the first one and it is going to pull hourly forecast the second one pulls daily forecast you do have to run it separately for both hourly and daily weather forecasting um but I run those two things and then I'm updating a bunch of sensors now I've got a couple here set up first and all these do is pull out current weather data that's actually different than pulling forecast data and again that's due to some of the new changes that they've done in home assistant the rest of the sensors are all pulling different hourly or daily forecast so you can see um it goes like this I've got a sensor named weather forecast H1 for me that means the next hours forecast and I've got it a unique ID and then it pulls in the hourly forecast from my weather integration um forecast zero that's the next forecast hour um so basically it's going hours okay pull the next hours condition and then that will be updated into this sensor um each attribute has a different name and there's a bunch of them you can do uh condition which is like is it sunny is it cloudy is it rainy you can pull temperatures um I think you can also pull estimated rainfalls and there's all kinds of things that you can pull out of there again that's more in depth than I want to get to in this video but then I'm doing that for each hour for both the condition and temperature uh over the next 3 hours and I'm doing the same thing over the next 3 days if you want different items if you want different uh time lengths again it can either do hours or days but if you want you know more days or more hours you can just adjust um using again these numbers and whether you're pulling hour or daily and that's how you get the data from home assistant and collect it into sensors which can then be read by ESP home now again whatever you name that file be sure to include it as a template in your configuration and now after you get that thing set up home assistant will run that and however you've got your trigger set up that's when it will be ran okay so next up in ESP home uh as always just go ahead and get your uh ESP device set up and started with a blank uh yaml again whatever you want to name it if you've used ESP home it's the same as anything else now we'll look at what's special about our code so I'm going to go into my epaper dashboard here okay so in the ammo uh mostly everything's going to be fairly straightforward all right so to pull in time from home assistant I've got a little time component set up platform home assistant and I'm just calling that home assistant time and then All Those sensors that you want to pull in whatever they are just go look up their entity IDs and the platform will be home assistant give it an ID D that you can reference it within ESP home and then pull in the entity from home assistant and this also goes for all of the weather stuff that we set up earlier now if it's going to give you some sort of numerical value you're going to set it up as a sensor but a lot of stuff comes over as text so if I scroll down you'll see text sensors are set up also for a lot of different things like my lock statuses um and then all the weather conditions that I had set up in that configuration and so this is where all of the weather conditions and temperatures from the forecast come in from that template that we set up it's all in these text sensors now one of the special things about the weather system is displaying those icons and here's how that works you set up another font and you actually do need to load this file into the ESP home directory um if you go uh to this link it'll show you where to download this font and then you just put it in the fonts directory in the ESP home uh directory of your home assistant setup so basically in this little step what we're doing is we are loading in all of the Google material design icons however that takes up a lot of space um and what's special about these is they are actually text characters so we can use them kind of like text characters more or less but they're actually going to be icons and so we don't want to waste a bunch of memory pulling in every possible icon and so this glyphs statement basically says Hey here are the specific glyphs that we want to use and so you'll see it's got this little slash and then U with three zeros and then it's got this five digigit F code so if you want a different icon than what's in this list here's how you do it so if we want to look up a different icon con to actually use an ESP home I'm at pictogramm limdi which is material design icons now in here let's say that I wanted a door icon I can type in door it brings up all the different possible things that have door in the title in the material design icon Library if I look at door open and click on it you can see right up here in this bar this code point it says f081 C well if I scroll down you'll see right here is that code so the way you pull in some new icon is it's always going to be this slash u00 and then that icon code here's the setup for the graph um it's component is called graph I've got it named a temp graph you tell it what sensor you want to log you set up hey how big do you want it to be how long do you want to log so I'm going to actually change this to 12 hours but again how much data do you want to log that's up to you um and you can adjust the lines thickness you can adjust whether or not it has a border and if you look at the graph component as it's popped up here there's a ton of options that you can set for your graph again this is just a little baby basic one we've got the display set up so the platform here is wave share e paper um you do have to tell it what model so I've got a 7 1/2 in V2 that a sticker on the back of the display that you can look up one of the recent changes in these is you do want to set up this busy pin as inverted um again it's just a more recent change uh if you look up some of the older configurations that people use it it was causing some funky refreshes you also want to change this reset duration to 2 milliseconds you can change the update interval as you wish I've got mine set up to 60 seconds and all your pins again identified correctly and then we've got the Lambda now this is where the screen setup happens so I'm not going to go through the big Lambda display setup uh line by line or anything because again it's too complicated and I don't want to make this video crazy long but the gist of it is is you set up a map to pull in all your weather conditions and map them to icons I'm doing the same thing with my door statuses because because it's going to come in as locked or unlocked and I'm mapping it to icons also you can draw boxes you can put in text you can format stuff and Center it different ways or text align it different ways um here is the line that pulls in the big main icon in the middle for the current weather and you can see I've got it pulling in from the big MDI font I've got it centered horizontally and then here's where it's saying okay read the status from the Sens named weather now pull that through the icon map to find which icon to use then display that thing here using this font centered horizontally um I'll let you look through the rest of this it's all just a bunch of text and sensors and formatting and stuff like that um the graph I've got down here at the bottom and so you can use this as examples of how to do all these different things how to put in sensor States how to format time and date and all that other stuff everything's in here I'll leave it to you to look at cuz again I don't want this video to be an hour long but you know if you've got any questions as always feel free to leave them in a comment and I'll try to address it as I can and so there you go um you know I think with the demo code that I put out there it shows you enough that you can basically build the vast majority of any type of uh display that you would want right any type of configuration you want on the screen you know I'm showing you how to draw boxes how to put in icons how to put in text and format different sensors um statuses how to map things to icons how to draw a chart it's all in there so I think if you dig through that configuration and look at it you can really figure out how to pull in just about anything you want onto this screen and arrange it however you want you don't have to have yours looking like this that's up to you um so I think that's going to wrap up this video I mean I think these things are super cool um you know I don't even have a clock in my house so I'm finally going to have one that updates at least to the minute um it's just a neat little project and a nice cool thing to have and like I said these things are really cool because they are so power efficient um you know you unplug it the thing stays on these things use so little power that I was trying to run it off of a um a little power bank and and it it wouldn't stay on um it didn't draw enough current to keep the power bank on because again it literally doesn't really do much at anything um until it updates that screen and then it draws very little power even when it's updating that screen and it just looks so I think that's going to be it for this uh this video so if you got any questions or anything uh as always feel free to leave a comment down below otherwise as always I appreciate your time thanks

Channel: Tech Dregs

Views: 57,544

Keywords: ESPHome, Home Assistant, Weather, E-paper, Epaper, E-Ink, Eink, Waveshare, Dashboard

Id: qJuF58CjwIA

Length: 22min 58sec (1378 seconds)

Published: Sat Feb 24 2024