Wifi Connected Smart Backsplash Using a RGB LED Strip

by MrDIYLab in Circuits > Microcontrollers

6069 Views, 135 Favorites, 0 Comments

Wifi Connected Smart Backsplash Using a RGB LED Strip

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]

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
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
interact web.jpg
interact buttons.jpg

I interact with the backsplash in 3 ways:

  1. 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.
  2. The second way is by using a built in web interface: I can adjust the timer and read the status indicators here.
  3. 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
PCB.jpg
PCB 5.jpg
PCB 2.jpg
PCB 3.jpg
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
install 2.jpg
install 3.jpg
install 4.jpg
install 5.jpg
fish.jpg
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
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:

https://gitlab.com/MrDIYca/mrdiy-smart-backsplash

3D Case

Case.jpg

I also designed a case for the controller to make the setup neat.

Power

Powered up.jpg
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

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.