ESP32 WiFi Manager - Custom Design Tutorial

hello everyone hope everyone's having a great day welcome to today's tutorial my name is Faraz and I am from the esp32 web team so we're going to do a basic tutorial today on how to utilize the library to make your own Wi-Fi manager now step one would be to purchase the license key once you have made the purchase you'll be sent an email with your license key in it next we will download the library I've already done so so I've downloaded it and unzipped the file inside there is three folders in a few different files uh the folders are the data folder contains all the files for the website these are the files served to the browser this is where all the libraries are and this is the source file where the main.cpp file is so the next step would be to open visual Studio code up create a new project for platform [Music] IO we'll call this WiFi Manager demo select our board and and let's select the file location okay now we already have the data library and source file so we'll get rid of the library and source file from here folder sorry and next we'll copy everything else across into this copy folders okay once everything has been copied across uh let's have a look at the read me file so these two lines need to be copied into the platform io. file let copy and paste it here and then we'll save it next we'll make sure we just change our LED pin and we'll upload the main CPP file and then the data folder in two separate uploads so my es32 is attached so I will go ahead and upload the main.cpp file yes that's uploading I'll show you where you would upload the data folder from and all the files that's contained inside there and that's done by going to platform iio under project tasks under your chips name under platform there's an option for upload file system image so that's the one we're going to use once this upload is finished okay now the upload is finished we'll upload the file system image which once again uploads the data folder and we'll wait for that to finish as well great so now we've uploaded both the mate. CPP file and the data folder and given the initial configuration our esp32 web should now be running it should now be blinking actually we'll connect to the Wi-Fi I've already put in the password once so probably going to ask me again but the initial password is esp32 web or location no gaps okay once that's connected we'll go back to the browser so let's open this local and we have our first error because we haven't inserted our license key now bulk of the files that we'll be configuring are inside the Library folder under the esp32 web folder in the CPP file if you look here I'll go full screen this is where most of the user configuration variables are and this is where the license key go so using the email I showed earlier I'm going to copy the license key over and let's let's run that again let's just do an upload okay and we'll reconnect to the Wi-Fi again and we'll refresh the tab right I'm just going to spt to dark mode okay so right now there is a timer we can remove the timer we can increase decrease the timer why the variable here Let's scan for Wi-Fi there we go Wi-Fi updated let's connect to a Wi-Fi and let's send it the information across so we'll connect to our internet and we'll press refresh now you can see it's connected of course you can still change to a different Wi-Fi and Etc okay what we'll do is we'll do one quick customization a rather basic one just to show you how to use this um okay so we'll change some of the settings of the face of the page so for the main title let's go for let's say making an application for a RC call uh let's go super truck uh um let's say some RC see model and it's powered by which is the foter tag over here uh pure robotics what we've done is we've done the main title subtitle and the photo there I'll press save this is the hotspot details so when you're trying to connect to Wi-Fi initially this is what um would come up as the Wi-Fi name and this is what would come up as the um as the well this would be the password to access that said Wi-Fi we won't worry about this is though you can change it to whatever you would like um let's change the url that we'll access so R is be2 web. local let's say super truck and we'll put a height for in between as well super truck. local now what it says here is if you change this you must also change the local URL name variable in the following file so and these are not K sensitives these are not K sensitive okay so what we'll do is we'll follow those instructions we'll go to data. config.js and then here we'll just change that as well so we add Super Truck and we'll put this over here as well okay so those are the settings done for the face of it and the UR now for the logo this is the logo here and for the favon icon that's the favon icon there let's delete both of these and instead and I have downloaded picture of a truck I found on the internet now note for now for the time being it's going to be only svgs allowed but that will be fixed in an upcoming update so let's say logo we got rename it as a logo and as a favicon so I I'll use the same file for favicon as well so I'll duplicate it and I'll rename as fabcon SVG now hopefully those things will work the title on the tab can be changed from the index to HTML file inside of here and let's call this uh Super Truck as well truck and we'll just call it RC model model there we go okay um we can can there we go done and now we can close this and this now let's just change a bit of the colors and the just few of the design changes and that's done by the CSS file over here now we will make editing CSS a lot easier like a lot easier right now you're going to have is make one change upload the file wait for it to upload and then see the reflected change we are going to make it so you can see changes in real time and then once you're happy with that then you can upload in one go so that is something that's going to be coming up once um esp3 web is out of beta okay uh in any case for now we want to go to the main title it's the main title and let's change the color to something I have already pre-picked and that is the following color and you can see hopefully that's a shade of red uh so that text stroke is outline it is set at zero so it actually has no effect now for every single element there are two sets of code there's two sets of CSS selectors one is for the light mode one is for the dark mode if you don't specify the the dark mode Let's combin it out then the light mode will take effect for both if we do override the light mode properties with a dark mode setting then that will be applied for the dark mode only I hope that made sense okay uh what we'll do is we'll just come out the dark mode because I I think that would work fine for light and dark and let's look at the subtitle so we'll go um let's go shade of so again I have pr- selected this as well and let's go shade of yellow actually I will have different colors for dark and light because yellow will not come up on light mode very well and for the Border color I'm going for the red now the border is the Border applied over here so it's a line in between now for the light mode I will select an orangey color it will contrast a little bit a little bit better than the yellow for light mode and I will change the font could rub all this out but I'll leave some backup fonts on uh I will change it to M solo what options do we have so ESP web.com um let let's use kiwi okay so we'll go for kiwi and kiwi and there we go we because kiwi is a little bit tight in terms of lettering I will give it a bit of lettering space of four pixels so I'll add that in that is not the right copy this is what I supposed to copy so lettering spacing of four pixels is sufficient for QV um and we can then add some outline for this texture as well and the reason I'm add adding outline is just to make it a little bit thicker for text because again it is is quite thin and on the white background it's difficult to see but on the darker background I'll take this outline setting and I'll overwrite it with zero pixels so I don't want to see any outline on the darker background because the contrast will be sufficient and let's change one last thing which is the submit button okay so submit button let's make it a red yeah let's make it red so it we'll go [Music] down so these I think are in order you'll see password field and then should commit the submit button there we go and once again we don't need to override the dark mode so the light mode value will be good for both we'll comment this out and that should be all done so we've changed both things inside the data file and things inside the Library which is linked to the source file so we're going to have to do both uploads one here one from here and then we can see our changes so I'll do them both okay once both files uploaded and you've refresh the browser under the new URL that you've just added you'll see the design changes that you've made and here's a light mode and going back to the dark mode here's the dark mode now hopefully this will be more than just a Wi-Fi manager soon right now we're starting with the Wi-Fi manager but the idea is to have customizable options of color Pickers controls to control your RC vehicle maybe but all sorts of input features so you can add and customize and use this library to make quite literally any web application interface you want to go along with your Arduino project well that's all for today guys I hope that made sense and I'll see you in the next one bye

Channel: ESP32 Web

Views: 2,473

Keywords: ESP32 WiFi Manager, ESP32, ESP32 Web, WiFi Manager

Id: lcbPMxtgacM

Length: 15min 49sec (949 seconds)

Published: Fri Nov 24 2023