ESP8266 Save Files To SPIFFS Flash Memory w/ Arduino | File System Storage, Web Server

hi I'm Cisco with AK robotic and I'm here to share with you another tip for working with your esp8266 microcontroller in previous videos I showed you how to run a web server on the esp8266 and how to make it send webpages to HTTP requests sent by a web browser those web pages included HTML and JavaScript and we defined them inside the framework code as character arrays I showed you how to move those character arrays from RAM into flash memory we use the variable modifier Platinum which you can read a little bit more about using this press F documentation so today I want to show you how to create and use files with the esp8266 to do this we're going to be using the built-in file system which is called spi ffs and allows us to read and write files from an to flash memory we'll need to modify the arduino ide but worry not the process is straightforward and pretty much beginner friendly before we jump ahead let's just quickly cover what files and file systems are and how do they work in the esp8266 in the computer world a file system controls how data are stored and retrieved you're pretty familiar with this concept when it comes to computers but it's a little bit different when we think about it in the context of microcontrollers so why do we even need a file system well it's not needed in microcontrollers for example because we tend to use data types like integers characters structures and even classes but when we need to use more complex data types then he becomes more unnecessary without a file system it's a little bit difficult to tell where one piece of complex information stops and the next one begins and this is especially useful when using mass storage devices like thumb drives that can hold gigabytes of information so what is a file it's simply a name collection that contains both the data the actual content of the file and metadata like the creation time the length of the file and any number of other attributes for example talking about an audio file of the wav format you can see that it's divided in different pieces of information and the actual data the recording of the audio is just a piece of it for example it has things like the bitrate the sample rate at which the file was recorded and so forth so all that metadata needs to be stored somewhere and hence the usefulness of a file so what file system does the esp8266 even use well computer discs like the computer you're probably watching this video one uses file systems like NTFS for Windows ext3 for UNIX and Linux a PFS for those using Mac's etc but given the limited resources of microcontrollers and system on chips they use special file systems such as the one we're going to be talking about today which is SPI ffs and just to give you a quick preview on how that works in the flash memory chip that comes alongside the esp8266 we store not only the program code but things like when we do over-the-air updates like I described in a free video it gets stored in a specific area of the flash memory then the file system that we're covering today occupies a different area then save you store a password and an SSID that gets stored also in flash memory that's why when you turn off and on the esp8266 some things are still available in memory but while use spi ffs I mean why not use NTFS like windows or other file systems well the pros include that is specifically designed for using a low amount of RAM we know that we only have 64 kilobytes available in the esp8266 as opposed to the many gigabytes available in your computer it also has built-in consistency checks and it can run on any nor flash not only on spi flash which is the one we're going to be using today the cons is that it doesn't include support for directories it uses what's called a flat structure we don't need to worry about that but you can read more about in the links provided in the description it is not a real-time stack again this is probably more details that you want to know right now and well it only works for very small devices in comparison to say a flash drive and just mass storage devices so there we have it that's a little bit more information about what files are or file systems are but let's go ahead and jump right in so the first thing I need to do is modify the arduino ide so that i can upload files into the file system to do that i'm going to go into the repository of the file system and i'm going to follow the instructions it's really simple it only requires to download a file uncompress it and copy the entire directory that was uncompressed into the Arduino folder in the case of OS 10 the Mac operating system it's located on their document Arduino and I need to create a new subdirectory that is called tools and paste it there in my case the arduino ide was an open but in case it was i would need to restart it if i go to the tools menu i'll be able to see a new option called esp8266 sketch data upload we'll be using that in a minute the next step as usual is to go into the repository where we've been keeping the code for this series I'll leave the link in the description of the video I'll download the entire repository uncompress it and open the last file we created which is webserver HTML j/s I'll save a new version onto my desktop that I'll call web server underscore SPI FSS the first thing I want to do is include the filesystem library which is called fs.h then I want to put in my SSID and password and if you remember we were defining the entire web page inside this character array that we call web page I'm going to copy everything that was inside and I'm going to create a separate file inside my system to do that I'm going to go to my desktop to the directory that the Arduino IDE created called webserver underscore spi ffff I'm going to create a new sub directory that I'll call data it has to be called data just by the way spi ffs works it has to be that name and then I'm going to create the index dot HTML file the file itself can be named anything you want just for consistency I'll name it index or HTML and you can do this in any which way you want I'm going to be using the terminal and I'll simply want to paste the information that I copied in the Arduino IDE which is just that piece of HTML code that was residing inside the character array and I'm going to say that file there it is going back to the Arduino IDE then I'll need to make a few modifications so that the data is not served from this variable but rather from the file that we just created if you remember on this method the server dot on that would receive requests to the top root path then we would send that actual variable I'm going to delete all this and create a new user defined function that I'll call serve index file and one more thing I'll need to do in the setup function is actually start the communication with the SPI flash file system by using the begin method of the built-in SPI ffs object so now I just need to define that function which I'll just make it return empty called serve index file takes no arguments and it simply creates a variable of file type using the open method of the spi ffs object and this method takes two parameters the name of the file which we called index.html and the type of operation we want to perform in that file which in our case is just read make sure you are a forward slash at the beginning of the name to reflect the actual URI of the file then we can use the server object which has a method called stream file to serve the content of that file which is of type text HTML in our case lastly we want to make sure that the file closes one last change I'll make is because I'm going to be using the we most d1 mini development world instead of the death kit that I was using in the last video and the LED that we're going to be using it's going to be on pin number two instead of 16 that's the blue one right on top the ESP 12v module and then the logic of the LED is reverse from the logic of the red LED on the Deaf keyboard so I'll switch this to and I'm ready to give things a try so I'll go ahead and connect the we Mo's to the USB port on my computer and if you haven't done it remember to install the USB drivers for the CH 340 G USB to serial adapter that's on the windows board I'll go ahead and select the actual board which is we Mo's d1 r2 and mini and also the port which is in my case this wch the numbers at the end might be different for you and I'll first upload the index dot HTML file using the new option under the Tools menu this process takes a minute or two so when you're uploading files to the flash file system then make sure that it contains everything you need that you've tested it before just so that you're not wasting time as you're developing okay so now we're ready to upload the firmware file as we always do and this process of course is a lot quicker as usual we open the serial monitor to get the IP address of the esp8266 and we can copy that onto our web browser and voila we get while we rode on the index.html file we can once again click the button and see the LED switch states as well as the state reflected on the web page itself so if you're like me you're probably skeptical whether it's toll using the variable that was defined in the code or if it's actually using the file that we uploaded I invite you to modify the file make a few changes on the HTML and test it yourself another thing you can do is try another example that is built into there we know IDE if you go through file examples then esp8266 web server there is a file system browser that you can upload and actually upload files using a web page itself upload new HTML new CSS new JavaScript is great give it a try if you like my videos I invite you to go to my patreon page and support the channel you can chip in a buck or two a month and cancel the subscription anytime well whatever you do don't forget to Like subscribe or leave me a comment I'm also very active on social media you can find me on Twitter Instagram or Facebook and lately I've been using the community tab of my youtube channel to interact with some of you so whatever the option is you're welcome to use it and I will definitely see you next time

Channel: datasith

Views: 46,276

Keywords: ESP32, ESP8266, Arduino, IDE, NodeMcu, Tutorials, Makers, Learn, Guide, IoT, Internet Of Things, Raspberry Pi, Wireless, Communication, Weather, Creative, Sensor, Python, Programming, C++, Beginner, Electronics, DIY, MicroPython, 3d Printing, CAD, Fusion 360, Education, Tutorial, Intro, Introduction, Web, Developer, HTML, Datalogger, Project, Sensors, Data, Visualization, Webserver, Server, Client, App, WebApp, Wemos, Robot, Robotics, Robots, Easy, Adafruit, Sparkfun, OS X, Windows, Linux, Embedded, Kickstarter, RC, Fun, Build, Engineering

Id: pfJROpQg-Is

Length: 16min 45sec (1005 seconds)

Published: Sat Aug 11 2018