Wifi Connected Smart Backsplash Using a RGB LED Strip
by MrDIYLab in Circuits > Microcontrollers
6204 Views, 135 Favorites, 0 Comments
Wifi Connected Smart Backsplash Using a RGB LED Strip
![background.jpg](/proxy/?url=https://content.instructables.com/F66/4RGP/KKE0FKNZ/F664RGPKKE0FKNZ.jpg&filename=background.jpg)
In this project, I will show you how I made a wifi-connected smart backsplash featuring a timer, beeper, night light and how it is controlled using a web interface, MQTT messages, and buttons.
Watch the Video
![How I embedded a Smart RGB LED Light Strip in my Kitchen Backsplash [REUPLOAD]](/proxy/?url=https://content.instructables.com/FN1/RCRN/KQP7EICQ/FN1RCRNKQP7EICQ.jpg&filename=How I embedded a Smart RGB LED Light Strip in my Kitchen Backsplash [REUPLOAD])
The video shows the journey of upgrading my kitchen by embedding a RGB LED strip in my new backsplash. Feel free to add your questions in the comment section of the YouTube video if you need any futher assistance.
Order the Components
-- LINKS -- (When available, I use affiliate links and may earn a commission)
Amazon.com:
- Wemos d1 mini (4M version) - https://amzn.to/3jLR1Qd
- Aluminum channel - https://amzn.to/3c5jWOI
- RGB LED strip - https://amzn.to/3sRNXaL
- ESP12 module - https://amzn.to/3t1qnZl
- FTDI adaptor - https://amzn.to/3iNKXHN
AliExpress:
- Wemos d1 mini (4M version) - https://s.click.aliexpress.com/e/_dXcNTYU
- Aluminum channel - https://s.click.aliexpress.com/e/_AVQro9
- RGB LED strip - https://s.click.aliexpress.com/e/_AfzFSt
- ESP12 module - https://s.click.aliexpress.com/e/_A9IoQV
- Light sensor - https://s.click.aliexpress.com/e/_AE3tY9
- 0805 Resistor Kit - https://s.click.aliexpress.com/e/_AgrCzF
- 0805 Capacitor Kit - https://s.click.aliexpress.com/e/_9RqlFF
- 3-terminal - https://s.click.aliexpress.com/e/_9wrHcV
- DC Power Plug - https://s.click.aliexpress.com/e/_A4RW81
- FTDI adaptor - https://s.click.aliexpress.com/e/_A42MaV
Amazon.ca:
- Wemos d1 mini (4M version) - https://amzn.to/3fx28Lq
- Aluminum channel - https://amzn.to/3od8Zgw
- RGB LED strip - https://amzn.to/2KIpfIu
- ESP12 module - https://amzn.to/39YyInG
- FTDI adaptor - https://amzn.to/3sZ8JVI
Background
![before.png](/proxy/?url=https://content.instructables.com/FJV/KZKD/KKE0FLVU/FJVKZKDKKE0FLVU.png&filename=before.png)
![interact web.jpg](/proxy/?url=https://content.instructables.com/FPE/M8CV/KKE0FKNY/FPEM8CVKKE0FKNY.jpg&filename=interact web.jpg)
When it was time to add a backsplash, I wanted to take the opportunity to make it a little more interactive and integrated with my home automation.
The first thing you will notice is the LED strip. It acts as a timer and a visual indicator to show the status of some of my appliances.The middle portion of the LED strip is the timer. I used a blue LED to represent 10-minute intervals and a white LED to represent 1-minute intervals…. so this is 11 minutes, 12, 13, . and so on.
The corner LEDs are used as status indicators. I can customize them to use any color or flashing pattern for any given appliance. For example, a solid red LED indicates that the cooktop is on and a flashing LED means that the air circulation is on.
Interface
![interact MQTT.jpg](/proxy/?url=https://content.instructables.com/F5U/3VGD/KKE0FKA0/F5U3VGDKKE0FKA0.jpg&filename=interact MQTT.jpg)
![interact web.jpg](/proxy/?url=https://content.instructables.com/FZT/5BPF/KKE0FKAX/FZT5BPFKKE0FKAX.jpg&filename=interact web.jpg)
![interact buttons.jpg](/proxy/?url=https://content.instructables.com/F27/528G/KKE0FKAV/F27528GKKE0FKAV.jpg&filename=interact buttons.jpg)
I interact with the backsplash in 3 ways:
- Over MQTT messages: cmnd msg for control and stat msgs for updates. This is very useful because it allows easy intergration with home automation systems.
- The second way is by using a built in web interface: I can adjust the timer and read the status indicators here.
- The third way is using buttons on the controller to adjust the timer or to turn on the night light.
The controller also has a buzzer, so when the timer is up, you hear this …. * beep beep beep beep*
The Controller
![schematic.jpg](/proxy/?url=https://content.instructables.com/FPI/ETA4/KKE0FKMN/FPIETA4KKE0FKMN.jpg&filename=schematic.jpg)
![PCB.jpg](/proxy/?url=https://content.instructables.com/FUC/TQOI/KKE0FKMM/FUCTQOIKKE0FKMM.jpg&filename=PCB.jpg)
![PCB 5.jpg](/proxy/?url=https://content.instructables.com/FOP/ARWZ/KKE0FKKT/FOPARWZKKE0FKKT.jpg&filename=PCB 5.jpg)
![PCB 2.jpg](/proxy/?url=https://content.instructables.com/FML/OHF7/KKE0FKML/FMLOHF7KKE0FKML.jpg&filename=PCB 2.jpg)
![PCB 3.jpg](/proxy/?url=https://content.instructables.com/FX5/TOR7/KKE0FKMK/FX5TOR7KKE0FKMK.jpg&filename=PCB 3.jpg)
![FTDI.jpg](/proxy/?url=https://content.instructables.com/FHU/0TR0/KKE0FKKW/FHU0TR0KKE0FKKW.jpg&filename=FTDI.jpg)
I designed a custom controller board using an ESP12 module, 3 buttons, a light sensor, a connection for the LED strip, a buzzer, a 3.3 voltage regulator and pin outs to program the ESP12 module.
New to ESP8266? Watch my Introduction to ESP8266 video.
I then moved on to design the PCB layout. I chose a long rectangular shape so it would easily fit under the cabinet. One thing I learned from previous boards I designed is to make sure the area around the antenna is not covered by copper or else the range suffers dramatically.
Install the LED in the Tiles
![install 1.jpg](/proxy/?url=https://content.instructables.com/FBT/2EED/KKE0FKNS/FBT2EEDKKE0FKNS.jpg&filename=install 1.jpg)
![install 2.jpg](/proxy/?url=https://content.instructables.com/FY3/YJUM/KKE0FKNR/FY3YJUMKKE0FKNR.jpg&filename=install 2.jpg)
![install 3.jpg](/proxy/?url=https://content.instructables.com/FFA/T0HW/KKE0FKNQ/FFAT0HWKKE0FKNQ.jpg&filename=install 3.jpg)
![install 4.jpg](/proxy/?url=https://content.instructables.com/F96/7ZIX/KKE0FKMR/F967ZIXKKE0FKMR.jpg&filename=install 4.jpg)
![install 5.jpg](/proxy/?url=https://content.instructables.com/F46/4AIQ/KKE0FKMQ/F464AIQKKE0FKMQ.jpg&filename=install 5.jpg)
![fish.jpg](/proxy/?url=https://content.instructables.com/FLI/CELW/KKE0FTKD/FLICELWKKE0FTKD.jpg&filename=fish.jpg)
![wires in.jpg](/proxy/?url=https://content.instructables.com/FC1/797Z/KKE0FTKC/FC1797ZKKE0FTKC.jpg&filename=wires in.jpg)
Since this is a permanent setup, I wanted to be sure that the LED channel will not move and break the grout, so I drilled 4 holes for attachment. I tried to align the holes with the studs and used big anchors when that was not possible.
I used 4 long screws with a flat head to fix the LED strip to the wall. I then added the plastic cover to protect the channel. I continued applying tile adhesive and placing the tiles all the way to the top.
Later, I drilled to the side on of the cabinet, fished the wires and installed the LED strip in the aluminum channel.
Software
![Code.jpg](/proxy/?url=https://content.instructables.com/FNA/7544/KKE0FKKU/FNA7544KKE0FKKU.jpg&filename=Code.jpg)
![interact MQTT.jpg](/proxy/?url=https://content.instructables.com/FKD/UKGW/KKE0FKNT/FKDUKGWKKE0FKNT.jpg&filename=interact MQTT.jpg)
For the software, I wrote a custom firmware using the Arduino IDE. The main parts to highlight are:
- the LED setup
- the web server
- the OTA update option
- the loop that handles the interactions
- and the custom effect for the kitchen timer
Flashing the code was so easy using the FTDI adaptor and pinout in the controller. I don't have to put it in programming mode or hold down any buttons … Just CLICK and DONE.
You can download the source code on GitLab:
3D Case
![Case.jpg](/proxy/?url=https://content.instructables.com/FBV/X61Y/KKE0FKKS/FBVX61YKKE0FKKS.jpg&filename=Case.jpg)
I also designed a case for the controller to make the setup neat.
Power
![Powered up.jpg](/proxy/?url=https://content.instructables.com/FGL/LH8Q/KKE0FKKO/FGLLH8QKKE0FKKO.jpg&filename=Powered up.jpg)
![Power wire.jpg](/proxy/?url=https://content.instructables.com/FQ8/DO3K/KKE0FKKQ/FQ8DO3KKKE0FKKQ.jpg&filename=Power wire.jpg)
I connected the LED strip to the controller using the block terminal and fixed the controller under the cabinets.
Then I got a really really long power extension and ran the power from the top of the cabinets, down a gap between two cabinets and straight to the controller.
Done
![background.jpg](/proxy/?url=https://content.instructables.com/FGB/AZB2/KKE0FMHV/FGBAZB2KKE0FMHV.jpg&filename=background.jpg)
And now, I made the kitchen a little bit more smart. Once I integrate it this with my home automation system, the real fun will begin……
If you found this useful, please consider subscribing to my YouTube channel and give me a LIKE - It helps a lot.
* Much of the information contained is based on personal knowledge and experience. It is the responsibility of the viewer to independently verify all information.