Edge-Lit Tavern Sign with WLED - Control with WiFi or IR Remote

by Erin St Blaine

published December 04, 2023, last updated August 06, 2024

posted in Sensors LEDs/ LED Strips Tools/ Lasercutting Feather/ Feather Boards Breakout Boards/ WiFi

Save Download

Updated

Intermediate

Project guide

Overview

Welcome, Traveler. How might I help you?

Adventurers, friends, and companions will feel welcome in your space when they see this custom glowing tavern sign, lit from inside with a fiery glow. Program different animation modes to suit your mood with just a few taps on your phone, or control the colors and animations with an infrared remote. This project will transform your home bar or game room into a delightful warm refuge for weary travelers. Tankards not included.

Difficulty

This is an intermediate level project. Skills needed:

Soldering +2
Coding +0
Woodworking +3

Materials

The ESP32 Feather V2 is a powerful board that works seamlessly with the free WLED software. It can be powered with a battery through the JST port or with a USB cable directly through the onboard USB-C port. You'll need a USB-C cable to program it as well.

Top view of black rectangle-shaped microcontroller.

Adafruit ESP32 Feather V2 - 8MB Flash + 2 MB PSRAM

One of our star Feathers is the Adafruit HUZZAH32 ESP32 Feather - with the fabulous ESP32 WROOM module on there, it makes quick work...

guides with product

$19.95

In Stock

Add to Cart

USB Type A to Type C Cable - approx 1 meter / 3 ft long

As technology changes and adapts, so does Adafruit. This USB Type A to Type C cable will help you with the transition to USB C, even if you're still...

$4.95

In Stock

Add to Cart

Official Raspberry Pi Power Supply 5.1V 3A with USB C

The official Raspberry Pi USB-C power supply is here! And of course, we have 'em in classic Adafruit black! Superfast with just the right amount of cable length to get your Pi 4...

$7.95

In Stock

Add to Cart

For lights, this project uses mini-skinny NeoPixels. These are available in several different densities, so there are a few options. For my sign I used the medium-density 60/m pixels. This project could also be done with 30/m NeoPixels or the super-high density 144/m NeoPixels for extra buttery-smooth animation.

Video of an Adafruit NeoPixel Digital RGB LED Strip with all the LEDs illuminating various colors.

Adafruit Mini Skinny NeoPixel Digital RGB LED Strip - 60 LED/m

So thin. So mini. So teeeeeeny-tiny. It's the 'skinny' version of our classic NeoPixel strips!These NeoPixel strips have 60 digitally-addressable pixel Mini LEDs per...

guides with product

$99.80

In Stock

Add to Cart

Adding infrared control is simple in WLED, so I wired up an IR sensor to my Feather. This makes it easy to turn the sign on and off or choose animation modes without needing to go find my phone.

IR (Infrared) Receiver Sensor

IR sensor tuned to 38KHz, perfect for receiving commands from a TV remote control. Runs at 3V to 5V so it's great for any microcontroller.To use, connect pin 3 (all the...

$1.95

In Stock

Add to Cart

WLED software will work with a wide variety of different remotes. For this tutorial I'm using this 44-key remote from Amazon.

Additional Tools & Materials

1/4" thick acrylic sheet - you can use regular poured acrylic or fancy edge-light acrylic
Clear packing tape
Table saw
Laser cutter or band saw
Brad nailer or wood screws
Wood planks for the sign
Wooden signpost
Rope or chain for hanging
Extra-long USB extension cable

Text editor powered by tinymce.

Wiring Diagram

With the bump on the IR sensor facing you, connect as follows:

Left leg to Feather D12
Center leg to Feather G
Right leg to Feather 3v

From the IN end on the NeoPixel strip, connect as follows:

+5v to Feather USB (or to BAT if powering with a battery)
G to Feather G
DI to Feather D13

Text editor powered by tinymce.

WLED Software

Driver Update

Some versions of the QT Py have a new serial chip which needs a driver installed before we can install WLED. Head over to our How to Install Drivers for WCH USB to Serial Chips tutorial, and download and install the new driver.

If you have an older QT Py with CP2102 USB-to-Serial bridge, use SiLabs’ driver instead.

Install WLED

These next steps require a Web Serial-compatible browser. As of this writing, that means Google Chrome, Microsoft Edge or Opera “desktop” browsers. Other browsers (Safari, Firefox, Explorer and anything mobile) won’t work.

Visit https://install.wled.me/

Plug your microcontroller into your computer with a known good USB cable. Click "Install" and select the port for your board.

Depending on the USB-to-serial bridge chip on the board, you might see one or two serial ports. On Mac, for instance, there might be both “/dev/cu.usbmodem[number]” and “/dev/cu.wchusbserial[number]”. Use the “wchusbserial” one.

After successful installation, enter your WiFi network name and password when prompted. This must be a 2.4 GHz WiFi network; ESP32 does not support 5 GHz networks. If it can’t connect, then as a fallback WLED will create its own 2.4 GHz WiFi access point.

Setup & Preferences

WiFi Setup

Head to the WiFi Setup screen under Config and create a good URL so you can control your project from any web-enabled device. Call it something you'll remember, that's easy to type into any web browser on your WiFi network in order to connect to your project.

LED Preferences

Next, head to the LED Preferences tab under the Config menu.

Scroll down to Hardware Setup. Put your total number of LEDs into the "Length" field, and change GPIO to the pin number associated with the pin you soldered to. Check the QT Py Pico Pinout (or the Feather Huzzah Pinout if you're using that board) to find this number (it's the one in yellow).

Use It

Now you can use any computer or handheld device to control your LEDs.

Make sure your device is on the same WiFi network as your board. Navigate to your custom URL (sparkle.local/ for me) in a web browser. You'll see a color picker above a whole bunch of color palette choices.

Choose a color, choose an effect, and watch your lights animate and glow!

Save your favorite combinations as presets, create playlists, control the speed and intensity of the animations, and lots more. This web app is incredibly intuitive and easy to use.

Head over to the WLED wiki at https://kno.wled.ge/ to delve into all the particulars.

Text editor powered by tinymce.

WLED Additional Settings

Brightness Limiter

Find this on the LED Settings screen.

WLED automatically limits the brightness of your project so your power supply doesn't get over-taxed. The default amperage is 850mA, which is a little low for most power supplies.

For some projects, especially battery-powered projects, having the limiter turned on is a good idea. But if you're not getting the brightness you expect, try adjusting this number to match the amperage of your power supply or battery pack.

Access Point (AP) Mode

While you're home, it's easy to control your project over your local WiFi network. But when you're out at a festival you probably don't have WiFi access. It's still possible to connect to your project and control it using WLED's Access Point Mode.

Turn your project on and give it a minute or two to start broadcasting. Look in your WiFi networks and find WLED-AP - this is a mini WiFi network being broadcast by the Feather. Connect to it - the default password is "wled123". An instance of WLED will automatically pop up and you can control your project from anywhere.

WLED App

There are a couple different apps available to manage your WLED projects. Name and organize your projects, and find them quickly without having to type in a URL. Check the Apple or Android store for downloads.

Backup Config & Presets

Under Config / Security & Updates you will find a place to back up your data. It's a good idea to back up your config file as soon as you're happy with the settings. Save it as a .json file on your computer. Now you can prototype and experiment to your heart's content, and if everything breaks, just re-upload this file. Or, if you're doing another build you can use this feature to copy all your settings from one board to another.

Text editor powered by tinymce.

IR Remote Setup

Click the LED Preferences tab and scroll down to Hardware Setup.

Change the IR GPIO pin to 12, which corresponds to the pin soldered to the IR sensor, and select the remote you're using from the list.

Remote Usage

Save your favorite combinations as presets, create playlists, control the speed and intensity of the animations, and lots more. This web app is incredibly intuitive and easy to use.

When you're in "solid" mode in WLED, the color buttons near the top of the remote will change the colors, making the pixels act like a "dumb" RGB strip.

On my 44-key remote, there are buttons near the bottom labeled "DIY1", "DIY2" etc. WLED will automatically assign your animation presets to these buttons so you can select your favorite presets or playlists. Simply save the presets you want to the first 6 preset slots and the buttons will pull them up.

You will need to press the button marked "Auto" to switch to DIY mode on the remote. Press "Auto" then "DIY1" to play the preset saved to slot #1 in WLED.

Head over to the WLED wiki at https://kno.wled.ge/ to delve into all the particulars.

Text editor powered by tinymce.

Electronics Assembly

IR Sensor

Trim the sensor legs about halfway down.

With the sensor bump facing you and the legs pointing down, slip a red wire onto the leg on the right, a black wire to the middle leg, and a yellow wire to the leg on the left.

Cover the connections with heat shrink so they don't short out.

Solder to the Feather as follows:

IR sensor red --> USB (if powering via USB) or BAT (if powering via the JST connector)
IR sensor yellow --> Feather pin 13

Leave the black (G) wire unconnected for now.

NeoPixels

To give a little more flexibility for placement, I soldered around 8" of wire onto the NeoPixel strip. This will give me some options about where to place the Feather board and IR sensor inside the sign.

Strip the 4th wire from the ribbon cable. Find the "in" end of the strip (labeled DI usually) and solder the striped wire to red (or the +5v pad), the middle wire to white (or the DI pad), and the remaining wire to black (or the G pad).

Feather

Connect the other end of the ribbon cable to the Feather as follows:

Red (striped) wire to USB (if powering via USB) or BAT (if powering from the JST connector)
White (middle) wire to 13

You're left with two black wires - one from the IR sensor and one from the NeoPixel strip, which both need to connect to the G pin on the Feather. The easiest way to do this is to splice the two wires together with a third wire, then connect this wire to the G pin on the Feather.

Plug your Feather in to power. If all goes well, your lights will come on in a solid yellow.

Grab your 44-key remote and press some buttons to see if it responds.

Troubleshooting

If the lights don't come on, or the remote doesn't seem to do anything, here are a couple things to try:

Open the WLED software and go to the LED Settings page. Make sure you have the correct pin (GPIO) entered here. The Feather is attached to pin 13. Be sure the pin number matches the pin you soldered to.
Also be sure you've chosen IR GPIO pin 12 in the WLED software on the same page, and that you've selected your remote from the dropdown.
Wiggle the connections on the IR sensor to be sure they haven't pulled loose.
If it's still not working, head over to the NeoPixel Uberguide and try uploading some basic code, just to see whether the problem is with your wiring or with the software. If you can get the lights to come on using Arduino or CircuitPython, the trouble is with the software -- try reinstalling.

Text editor powered by tinymce.

Build the Sign

Wood Sign

I wanted my sign to look old and weathered, so I started with some old redwood fence boards, carefully harvesting them from a derelict fence.

I trimmed them to the size and shape I wanted on a table saw, then ran them through a planer to get them to an even thickness. The laser cutter I wanted to use has a maximum depth of 1/4", so I planed them to 1/4".

My sign is 18" long by around 11" tall. I made two panels of this size and held them together with painter's tape, and printed out a mockup of my lettering so I could get a good idea of the sizing.

Then I took them to my local maker space for laser cutting. I'd emailed over a vector file of my font design ahead of time, and they were all ready to cut it for me when I arrived. The cutting took about 15 minutes per side.

Having tape on the back of the boards made it much easier to keep track of all the pieces, like the cutouts inside the "B" and "A", which will need to be glued back in later on.

I cut two panels and did a mirror-image of the text on the back panel. The sign reads backwards from the back, but this way the light passes all the way through the acrylic from either side.

Acrylic Panel

I used 1/4" acrylic, since that is almost the same thickness as the NeoPixel strip. But what type is best? There's a product available from Tap Plastics called Chemcast Edgelit Acrylic, which is around $20/sf. I already had piece of 1/4 extruded acrylic on-hand, which is a bit cheaper at around $15/sf, so I did a side-by-side comparison to see if the Chemcast was worth the price.

Conclusion? I couldn't tell the difference between the regular acrylic and the fancy Chemcast version, so I'd recommend going with the cheaper / easier to find variety.

If you're building an indoor sign like I am, it's easiest to attach the LED strip with clear packing tape. Not much sticks to the silicone sheath but packing tape holds them firmly and invisibly. I wouldn't use it in an oudoor setting -- better to use Devcon Silicone Glue if you need something weather-proof -- but the glue is messy and hard to use, and the packing tape goes on in seconds.

In order for the whole surface to glow, we need to rough the acrylic up a bit. I tried a variety of different grits of sandpaper and found that the rougher I made the surface, the brighter the glow. 220 grit sandpaper seemed to work really well without leaving a lot of visible individual scratches. Sand both sides for maximum glow.

Assembly

I sandwiched the acrylic panel between the two sides, leaving room at the top for the microcontroller and IR sensor. I placed the sensor near the top of the sign so it could stick out a bit, and be easily picked up by the remote control.

I ended up hanging the sign really high in the air, and if I were to do this again I'd put the IR sensor on the bottom edge instead. Having it on the top makes it a little hard to reach with the remote.

I added narrow chopstick-shaped pieces of fence board around the edges of the acrylic panel, to block the light, and tacked in a couple of blocks near the top for more structure behind the hanging hardware. I tacked everthing together with wood glue and finishing nails.

I plugged the USB cable into the Feather before nailing everything together. This design does not easily allow access to the Feather, but as long as the USB cable is in place I can reprogram it if needed.

I finished it off with a hand-turned signpost and 45 degree crossbar for bracing, and added a recessed lag bolt from the back of the mounting board into the post for added stability.

I used knotted jute rope to hang the sign from the post and threaded the USB cable up through the rope knots and through a hole in the signpost, where it hides inside a narrow channel cut into the top of the post on the table saw.