ESP8266 Display JPEG Images On WS2812 LED Matrix | Drag and Drop To SPIFFS Using Arduino IDE

ESP8266 Display JPEG Images On WS2812 LED Matrix | Drag and Drop To SPIFFS Using Arduino IDE



in this video we're going to use 16 by 16 LED matrix to display images using the esp8266 we're going to use what we learned in a different video for uploading the files over HTTP we're going to change things around so that we can grab the files drag and drop them using the browser and display them on the LED matrix alright let's do this this video is sponsored by LCSC electronics using your favorite cat program you can simply export the bill of materials and use the BLM tool built into their website to get the components you need for your design they'll help you even find components out of stock they'll ship it for very cheap and they have great facilities wonderful people so I highly recommend LCSC electronics as usual I'll download the repository of all the pieces of code we've developed in this series I'll make a copy on my desk top of the web server HTTP upload that we created in a different video I'll rename it to JPEG ws2812 which is the LEDs that we're going to be controlling I'll make a couple of changes for my network ID and password so that I can connect to the internet I'm going to be using the node MCU death kit 1.0 development board for the esp8266 and a ws2812 LED matrix of 16 by 16 pixel size you can get this components on my little Amazon shop using jumper wires I'll use the jst connector on the led matrix and a breadboard to make the connections I'll start with the red wire which I'll connect to 3.3 volts next the white wire out of the matrix I'll connect to ground and lastly the data signal the green wire I'll connect to pin d4 on the development board making sure that the USB drivers are installed as we've done in other videos I'll select the corresponding option from the Tools menu for both the board and the port I'll upload the code that we already had and the change I'm going to make is uploading a new index file so that we can drag and drop files onto the browser as I want to focus on ferm we're running on esp8266 I'll briefly go over the contents of this file it includes some styling for things to display nicely a block of HTML that controlled the actual elements in the page but where most of the action happens is in the JavaScript side of things we're using javascript to monitor when the files are hovering or drop over the page and then an ajax request which was done in other videos get sent to the URL forward slash upload in order to send the files over HTTP to the esp8266 so if we go back to the arduino ide and get the IP address of the esp8266 and then replace this new index file for the old one we were using we can go on to the terminal and use the curl command in order to upload the file to the flash memory of the chip once we do that we can go on to the browser navigate to the IP address and see the file in action now instead of using the terminal we can simply drag and drop the files onto the browser and if we visit the other route we created we can see that new files appear in flash memory once that's done we can focus on displaying images on the led matrix we connected to the chip to do that we'll need a couple of libraries a jpg decoder library to decode the images we're going to be uploading and the Adafruit neopixel library for controlling the LED matrix will include the JPEG decoder library and use a defined statement to avoid some conflicts that this library creates with the file system library we'll also include the neopixel library but because the matrix am using has a different arrangement we're going to do a remapping of the pixels from one to the other will then create an instance of the neopixel object that we'll use to control the LED major next I'm going to get rid of how we were handling the serving of the index page instead I'm going to use a function that I'll name handle file read in order to monitor whenever a file is requested if the file is found I'm going to display it on the browser but if the file stop on I'm going to return a 404 not found error this function of course needs to return a boolean value depending whether the file is found or not on flash memory it takes an argument with the path to the file a bit of a hack but we know that when that path ends in a forward slash the request calls for the index file for other requests we can simply look at the extension of the file that is being requested and serve it accordingly I'm going to use another function that I'll call get content type give it the path in order to get what type of file is being requested for this example I'll just worry about either HTML files or JPEG images the function will return the type of content that should be served depending on each case the next thing is to see if the file actually exists in flash memory and if the type of content is of JPEG type then we want to send that file to be displayed on the LED matrix I'll define a function called display jpg matrix that gets called in that case in addition to displaying it on the LED matrix I want to visualize the file on the browser so I'm going to use the stream file method of the server object to do so I'll close the file and return true so that a 404 message is not sent to the client but if the file isn't found in flash memory then I'll return false the last thing before testing the code that we have is avoiding conflicts between the JPEG decoder library and the file system library to do that we need to use the FS namespace for every call on to the filesystem library after doing that we're finally ready to test things out we can upload the code and if we add the path to the file we already uploaded to flash memory we should be able to see it in the browser because of the file swing method that's being used on files with the extension jpg also if we go to the serial monitor we'll see that the display JPEG matrix function was cold now instead of printing that message we can modify the code to send the image pixels on to the LED matrix to do that we'll use the jpg deck built in object and a fear of its method the process involves going through all the pixels in the image and extracting the red-green-blue values so that we can send them to the pixels on the LED matrix for each pixel some bits correspond to blue some bits correspond to green and some of them correspond to bread in addition to extracting the red green blue values of the pixels we need to know where in the matrix they should be displayed we can get a column and roll values from the image and then use our remapping to send that information to the physical LED in the appropriate position before sending those values to the position in the matrix we need to initialize the communication as the matrix LEDs are bright I'm just gonna set down the brightness so that it can be recorded appropriately and I'll call the show method in the setup function so that they're set to OFF once the code starts running I can finally use the set pixel color method with the correct x and y values of the pixel as well as the color that we extracted from the JPEG image we can upload the code keep in mind that this function is going to be called when we access the files in flash memory so if we refresh the page for the image that's already in flash memory we can see it being sent to the LED matrix then if we go back to the index and drag and drop a different file let's try the screen sixteen by sixteen matrix once we access it we can once again see displayed on the matrix last image shall try is one of our favorite video game characters that once again when it's accessed it's sent to the matrix the last thing I want to go over is how to easily delete the files once they're in flash memory to do that I'll create a new route that I'll call delete and notice that the method will be HTTP delete it'll call a function that I'll define called handled file delete and that'll simply use the spi ffs object to delete the file from flash memory I'll pass the name of the file as an argument in the URL of the request so we need to check that an actual argument was given inside our request will prevent the user from accidentally deleting the table root path then we'll check if the file actually exists in flash memory if it doesn't we need to send back a 404 and if it does then we'll delete it from flash memory and send down a message saying which file was deleted to the client making the request we can upload the code now if we go back to the terminal and use the curl command with different parameters we can delete any of the files that we uploaded to flash memory I'll use the blue 16 by 16 matrix as an example I get the correct message in response and if i refresh the list route that shows me all the files in flash memory I see that the blue the JPEG file is no longer there if I tried for the green the JPEG file it'll also be gone once i refresh that page so there you have it we have a piece of code that allows us to upload files to the efed 266 using drag and drop onto the browser if those files are JPEGs we can display them on an LED matrix if you like my I invite you to my patreon page where you can chip in a buck or two that really helps me put in more time into the videos and release them quicker but whatever you do don't forget to Like subscribe or leave me a comment you can also interact with me on social media I'm on Instagram Twitter and Facebook and you can even use the community tab of the channel thank you for watching my videos and I will see you next time

7 thoughts on “ESP8266 Display JPEG Images On WS2812 LED Matrix | Drag and Drop To SPIFFS Using Arduino IDE”

Leave a Reply

Your email address will not be published. Required fields are marked *