(More images to follow)
Background info
During summer of 2020 I moved into a new house with some other students at my university. Like a lot of student houses many rooms that initially served a different purpose had been converted into bedrooms. In my case my room used to be a study or library and as such contains a large book case along one one wall. I felt that I needed to fill the book case with something interesting instead of just mundane belonging as this would’ve made the room feel cluttered. Additionally, due to the positioning of the room in the house, very little light enters. I decided to kill two birds with one stone by adding led panels that I could control with an app.
Project Outcomes
The goal of the project was to create Led panels that I could control using an app on my phone. At the time I was learning how to use react native to create apps and I thought that this project would be a great way to put these new skills to use.
The way in which these LED panels work is slightly unorthodox, mainly the app which actually ended up becoming a progressive web app sends data to a firebase database and the LED panels which are controlled using esp8266 modules connect to this firebase database and change colour based on the values in the database. Once again this is quite a unorthodox method of implementing WI-FI control into a project but it does allow for the easy addition of more RGB LED devices. The reason for having the LED panels work this way was simply because I wanted to gain experience creating an app that worked with firebase.
The App
Developing for IOS
My main device is an Iphone 11, this presents a problem as unlike with android developing apps for your own personal use is much more difficult with iOS. When it comes to android you can easily side load apps by installing the apk file however there is no equivalent for this when it comes to iOS. The only way to permanently install an app you have developed yourself onto your own iOS device is to sign up to the apple developer program for ~£100 a year. I decided to get round this restricted was to develop my app using react native and expo and publish the app to expo. Essentially this would allow me to access the app from within the Expo app.
Design of the app
When designing the app I took a lot of inspiration from the Smart Life app, as I liked that it was quite minimal whilst still giving a wide range of functionality. I decided that the app would be based around a colour wheel with a few extra buttons for turning the LED panels off and on or making the LED panels pure white. This last feature was as in addition to RGB led strips, the LED panels also contain pure white LED that supposedly have colour temperature of 6000K. There is also drop down menu that allows you to choose the which device you are controlling or if you want to control all of the simultaneously.
The colour picker that I had chosen for the app had the option for sliders. These sliders let you control how bright the colours were. Unfortunately I had to disable these sliders as they did not display well when I turned the app into a progressive web app.
Firebase
I built this app after making an app for a smart mirror and so I was quite familiar with connecting to a firebase database. For the smart mirror I used the cloud firestore database however for this project I needed to use the Realtime database as it was much easier to connect to the Realtime database from the esp8266.
Within the Realtime data base every device has a unique device ID, nested within each device id are the RGB values for the current colour.
The functionality of the app is quite simple, any time the colour of the colour wheel is changed these new RGB values are sent to the Realtime database. When the button to turn off the panel is pressed then all the colour values are set to zero and when the button to turn the panels white is pressed then all colour values are set to 255.
Native app to web app
Initially my plan was to create a native app that I would publish through expo however as time went on I began to think that it may become tiresome accessing the app through the expo app. Additionally, I decided that I may want to control the lights when I am at my computer and my phone isn’t next to me. For this reason I decided to create a web app instead that I could access though a browser on either my desktop or mobile phone. Also progressive web apps can be added to the home screen and will act identically to native apps.
This proved to be much easier than I thought as react-native allows for apps to be published to not only iOS and android but also for the web. When I initially tested how the app would look displayed as a website I found it did not work perfectly, as for some unknown reason the built in modal function of react native did not work. To fix this, I had to use the modal function of react-native paper which worked fine. After reworking the code to work with the react-native paper modal function and disabling the brightness sliders of the colour picker the app displayed perfectly in a browser.
Since the app would be hosted online, accessible to everybody I added a Login page so that I only I would be able to control the Lights, this was done using firebase authentication and react navigation.
Finally I hosted the website using firebase hosting which is free to use and was really easy to implement.
Physical construction
The housing
The Led panels were made using 6mm MDF boards. This was the largest wood working project that I had taken on and I made several mistakes during this project. The wood was purchased from ebay as pack of 10 600x300mm sheets as well as two 810x410mm sheets from B&Q. The Largest mistake that I made was deciding to by a jigsaw as opposed to a circular saw. At the time I though that a jigsaw would be a better investment due to the fact it was more versatile and although that may be true buying a circular saw for this project would’ve save a lot of time and hard ache. Due to inexperience with a jigsaw, making straight cuts of the right size was a much harder ordeal than I had expected. Although I did not make any catastrophic mistakes I did have to spend a lot of time sanding and filling to correct mistakes I made while cutting. Although making the housings was a very problematic process I am happy that I went through it as I feel that my wood working skills did improve.
The “window”
In order for the light to be visible the LED panels obviously need a transparent section. I achieved by replacing one of the walls of the housing with a 2mm thick acrylic sheet purchased from B&Q. My plan was to cut this to size and then sand it so it would diffuse the light. Unfortunately, cutting this acrylic sheet was very difficult as using a jigsaw would cause it to crack and split. I even tried to use a glass cutter however this produced inconsistent results and took a very long time. In the end I found that sandwiching the acrylic sheet between two pieces of wood and then using a jigsaw produced very clean cuts. This did produce the problem of finding enough would of the right size that I could sacrifice but it made do by gluing together off cuts left over from making the housing. I did find out after I had cut the acrylic sheet to roughly the size needed that a rotary tool such as a Dremel with a cut of disk was able to cut the acrylic without it cracking.
My initial plan was to have custom acrylic sheets cut to size and shipped to me however the acrylic sheet from B&Q was the cheaper option. Had I been at university and had access to the laser cutters I could of cut acrylic sheets to the exact size needed myself and this likely would’ve been cheaper still. Unfortunately this project was during the coronavirus pandemic and so university facilities were closed. Although cutting the acrylic sheet myself with a jigsaw was difficult and time consuming, it was probably the best option. Due to the inaccuracies created when cutting the wood for the housings the dimensions of each of the housings were all slightly wrong, therefore for each housing the acrylic sheet had to have different dimensions. Since I was cutting the acrylic sheet myself it was easy to tailor the panels for each housing whereas had I outsourced the acrylic, the panels likely would have been a worse fit. Once again had I had access to a laser cutter I could’ve laser cut the housing and the acrylic panels, ensuring a perfect fit and identical dimensions of all the housings.
The electronics
Panel Electronics
The electronics for each LED panel was pretty simple. Each LED panel consists of an esp8266, connected to 4 AO3400 A09T N-Chanel MOSFETs each rated at 5.7A and 30V much more that what was need. the mosfets are connected to the negative pin of each colour of LED whilst the positive pins are all connected to the 12v input. A 5v regulator is used to convert the 12v input into 5v for the esp8266. All of the Electronics was kept in a 3d printed enclosure screwed to the back of each panel.
I have some experience soldering SOT-23 mosfets in the past for a custom RGB LED fan controller I made for my PC, however for some reason I found it much more difficult during this project. After many hours trying and many more destroyed MOSFETs I decided to purchase SOT-23 to DIP adapters, this made assembling all the circuits much easier and much faster.
I also created a test circuit, that allowed me to easily switch MOSFETS and test that they were working, this aided in troubleshooting all of the circuits. The test circuit consisted of a 12V input, A momentary switch, RGB LEDs and female headers to allow for the easy replacement of a MOSFET.
The Power supply
To power all of the LED panels once they were installed in the book case I first though of using 18650 lithium ion batteries so that I could avoid using wires. I decided against this as charging all of the batteries would be a hassle as they’d likely all die at the same time and I would need at least 20 batteries, more if I wanted a battery life of more than an hour. Instead I decided to use a 12v 15a power supply unit that I had spare. This is the psu that came with my 3d printer but I replaced it with a better one as I made upgrades to the printer.
I built an enclosure for the psu out of spare wood that I had left over making the housings, admittedly wood is not the safest material to make an electronics enclosure out of but it was either wood or 3d printing the entire enclosure only to then put it in a wooden bookcase so I decided to take my chances with wood. I did include a switch with a 13a fuse to make it slightly more safe. The psu enclosure was made of mdf with its front and back panels being 3d printed. For the front panel I modelled holes for the power socket and switch module and the DC jacks that the led panels would plug into. There was no need for the back panel to be 3d printed but since it had the exact same dimensions of as the front panel, I decided why not?
The code
The code uses the WIFIManager library from tzapu and the Firebase-ESP8266 library from mobizt. The WiFIManager library is not necessary for the functionality of the LED panels but it means that the SSID and Password for the WIFI connection does not need to be hard coded into the code. Therefore you could move the LED panels to a new place or change the password of your router and reconnect the panels to the WIFI using your phone.
The code is pretty simple, once the esp8266 is connected to the internet it gets data from the firebase Realtime database. If the device id in the realtime database matched the panel’s own device id set in its code it parse out the RGB colour values from the data received from the database and produces the corresponding colour.
Evaluation and Next Steps
I feel that this project came together rather well, like I mentioned before I think my biggest issue was deciding to use a jigsaw rather than a circular saw otherwise everything worked out better than expected.
One issue that I have is that the PSU that I am using is struggling to output enough current to power the LEDs despite being rated for 15A. The power supply is causing the LED panels to flicker however this is when only 3 are connecting so should only be drawing ~7A. I know that the PSU had issues delivering adequate power when it was installed in my 3d printer however I had assumed that that was due to the printer require more than 15A however no I believe that the PSU maybe faulty. I will replace the PSU and in hopes that that will fix the flickering issue.
Next Steps
Moving forward I plan to create a hub, an esp8266 dedicated to sending colour values to database to create different lighting effects such as fading from one colour to another or each panel changing colour in sequence.
I do not anticipate this being a difficult addition however I believe that the difficulty will lie in adding this functionality to the app. More specifically how I would go about implementing an ascetically pleasing, intuitive method of controlling lighting effects.