Maker.io main logo

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

2024-07-02 | By Adafruit Industries

License: See Original Project Adafruit Feather

Courtesy of Adafruit

Guide by Erin St Blaine

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‎

sign_1

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.‎

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.‎

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

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.‎

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

remote_2

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

Wiring Diagram

diagram_3

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‎‎ ‎

WLED Software

Install WLED

These next steps require a WebSerial-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.‎

browsers_4

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

It's a good idea to head to WiFi Setup screen and create a good URL ‎so you can control your project from any web-enabled device. I ‎called mine http://tavernsign.local -- this is what I type into any web ‎browser on my WiFi network in order to connect to my project.‎

setup_5

setup_6

LED Preferences

You need to change just a couple of settings in the app to get the ‎lights running correctly. Click the LED Preferences tab and scroll ‎down to Hardware Setup. Enter the total number of LEDs in your ‎strip under "Length".‎

The NeoPixel data pin is connected to pin 13 on the Feather, so make ‎GPIO match that pin number. Also, 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.‎

prefer_7

prefer_8

Use It

use_9

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 (http://tavernsign.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!‎

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.‎

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.‎

electronics_10

electronics_11

 

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).‎

neopixels_12

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.‎

feather_13

feather_14

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.‎

remote_15

Troubleshooting

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

  1. 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.‎‎
  2. 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.‎‎
  3. Wiggle the connections on the IR sensor to be sure they ‎haven't pulled loose.‎‎
  4. 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.‎

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".‎

boards_16

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.‎

sign_18

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.

cutouts_19

cutouts_20

panel_21

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 outdoor 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.‎

strips_22

strips_23

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.‎

glow_24

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.‎

sandwich_25

sandwich_26

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 everything 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.‎

signpost_27

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.‎

finish_28

TechForum

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.

Visit TechForum