Beginning to Code RGB Matrix

So I knew when I started this project that I wanted to do it in react.js. JavaScript has really moved up the charts when it comes to full stack web development so I knew that I wanted to get into using that, I also saw that React was the most popular option for front end development. At the time python was the language I was most comfortable with, but when it came to web front ends it just seemed really hobbled together and not that great looking.

The funny thing about this project is that I really didn't know to much about what it was going to look like I just knew that I wanted the option to display gifs, my main display subject for the RGB Matrix, and that when I clicked on those gifs I wanted it to display it on the Matrix.

So I started off with a basic grid that would show a bunch of images I had preloaded. The problem with this approach is that everytime I wanted to add an image I would need to recode the site which made no sense. I learned that I could actually create a component that would check the directory specified and display those images on the page, that's when I built imageList.js.

In the App.js you can see imageList reference at the beginning for the import and then at the bottom you can see it in use, that's the part that calls it and loads in the images in the directory that is specified. If you scroll up to imageClick you can see what happens when you click on the image, basically it says that information to the backend (I'll cover the backend piece in a future post).

At this stage I basically had the app finished. I had a list of all the images, I had a way to click them to set the image and then a way to click them to delete them. So I loaded all of the code on the raspberry pi and started the app, then my whole pi locked up as soon as I tried to choose an image. For those of you still at the build stage you will see how resource intensive just displaying an image is, after I realized that I spent a week trying to get the whole system running on a pi4 but the images weren't coming through as nicely.

This is when the decision was made to make the whole application modular I had to figure out a way that I could run the rPi with the image viewer and then on a separate machine run my web application letting me select what images to display. In my next article I'll talk about how I solved all those issues and more.