Some key features of the project:
- Completely customizable via web app, including colors, layout, mode switching, etc.
- Optional time-syncing to NTP server
- Time display in 12-hour, 24-hour or binary clock modes
- Display indoor temperature (local sensor), outdoor temperature (via OpenWeatherMap) or both in either °F or °C
- Customizable team names for scoreboard mode
- Multiple text effects (flash, fade-in, rainbow, etc.)
- Responsive app so settings can be accessed from desktop browser, tablet or phone
- The standard build also includes the following:
- Onboard temperature sensor for indoor temp (with correction value)
- Three push buttons for common controls (mode, advance scores, start/stop time, etc.)
- Rotary encoder for brightness and on/off setting
- Buzzer for countdown timer or other use (can be toggled off)
- Relay for auto-switching between clock and optional WLED controller
- The build shown here also includes a secondary controller for WLED. The system will auto-switch between the two controllers, showing either the clock controller features or the output from the WLED controllers. The WLED controller is optional and the clock controller will be fully functional without it.
Terminology: For the purposes of article, I will refer to the main controller (the one with the clock, scoreboard, etc.) as the primary or "clock" controller. The optional second controller will be referred to as the secondary or WLED controller.
If you want to see the clock "in action" along with highlights of the build described here, you can watch the related YouTube video.
Background
Five years ago, I designed and built my first LED matrix. This was built to use with a WLED controller. This was well before WLED had support and effects for a matrix. Therefore, the matrix didn't get a lot of use so I decided to see if I could give it some additional features, including a clock with current outdoor temperature by adding a second controller. Since I was already a Home Assistant user and had an MQTT broker, configuration and control of the clock system was done with MQTT via Home Assistant.
 |
| Sample Home Assistant Dashboard |
So when a family member asked about building him a matrix clock, I knew the original design wouldn't work. The new version needed to be fully controllable locally, without Home Assistant or external automation system (yet retain the option to do so if desired). It also needed to have easy initial WiFi onboarding and configuration, and switching between the clock and WLED controller needed to be automatic. If possible, I wanted to make the overall size smaller by using different LEDs.
This article covers the physical build of the system, including the controllers and all wiring. Installation, configuration and use of the firmware is fully covered in the Github wiki, where the firmware can also be found.
Parts List
As usual, I like to begin with the parts list. I'm listing the parts I used or showed in the related video. Some parts are optional and some can be substituted. I'll try to specifically mention these along the way and in the following section, but note that substituting some items (e.g. using a different type of sensor) may also require that you modify the firmware source code. You may already have some of these components, and for others you may find lower quantities available at a cheaper cost.
Primary (clock) Controller and Matrix Parts
|
Item or Part (Qty if > 1) |
Notes/Additional Info |
|
Other ESP32s may
require wiring modifications |
|
|
1 m (or 100 LEDs)
each – IP30 black PCB |
|
|
For a removable ESP32 |
|
|
Use 25A-30A for full
white LED brightness* |
|
|
Alternate: SN74AHCT125N |
|
|
|
|
|
Alternates must
produce acceptable sound @ 3.3V |
|
|
|
|
|
|
|
|
|
|
|
Needed for initial
firmware flashing only |
|
|
Optional, but
recommended |
|
|
|
|
*see notes on power supply size below
Optional Secondary (WLED) Controller Parts
|
Item or Part (Qty if > 1) |
Notes/Additional Info |
|
Other ESP32s may
require wiring modifications |
|
|
Normally packaged
with the ESP32 |
|
|
Alternate option: SN74AHCT125N |
|
|
Optional – for WLED audio
reactivity |
|
|
|
|
|
|
|
|
|
|
Miscellaneous Parts (does not include any tools, solder, etc. that may be needed)
|
Item or Part (Qty if > 1) |
Notes/Additional Info |
|
For creating
separable component connections |
|
|
I used 2.8 mm, but
other sizes OK. |
|
|
|
|
|
For power supplies ≤
15A |
|
|
For power supplies
> 15A |
|
|
For power supplies >
15A |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Optional - In lieu of
using an enclosure |
|
|
|
|
Bench Testing (optional)
I highly recommend that you bench test your project as you go using breadboards and temporary connections. This can highlight any wiring problems or faulty components before you commit to creating a final soldered version. There is nothing worse than spending the time to create a soldered controller only to find one of the components is faulty! And if you don't already have these items in your inventory, you'll most likely need them for future projects.
|
Item or Part (Qty if > 1) |
Notes/Additional Info |
|
You can also buy kits
that include jumpers |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Frame Hardware (optional)
This is the hardware I used for my frame/enclosure. You can likely source these materials at your local hardware store cheaper than online, so I'm only providing a few links as a reference. You do not necessarily even need to put the matrix in a frame. But at a minimum, you will need the plywood backer or some other solid surface for mounting the LED strips.
|
Item or Part (Qty if > 1) |
Notes/Additional Info |
|
¼” x 12” x 12” Craft
Plywood |
Backer board for LED strips |
|
1” x 3” x 4’ Select
Pine board |
Can substitute 1” x
4” board |
|
11” x 14” x 0.050”
Acrylic Sheet |
Can substitute 0.060” |
|
4’ x 2” Flat Trim
board |
For creating frame
around enclosure |
|
Select proper shank
size for your router |
|
|
Select proper shank
size for your router |
|
|
|
|
|
|
|
3D Printed Parts (optional)
Again, these are optional but include an enclosure for the controller(s), the rotary encoder, indoor temp sensor and pushbuttons and a mount for the INMP441 microphone if using a WLED controller with audio-reactivity. Copies of my design files for these items can be found in the Github link in the table below. If you do not have a 3D printer, you can mount the controllers directly to the back of the LED panel or substitute something like a project box or other enclosure. An example is linked in the table below.
|
Item or Part (Qty if > 1) |
Notes/Additional Info |
|
ElectroCookie
Enclosure |
All optional. Design
(stl) files in Github repo |
|
Rotary and Button
Enclosure |
|
|
INMP441 Mount |
|
|
Various sizes – in lieu
of 3D printer |
|
|
|
|
Some of these links may be Amazon affiliate links. Use of these links will not affect your pricing, but as an affiliate this blog may earn a small commission if you make a purchase.
Additional Notes on Parts
Many of the items above can be substituted. For example, you can use any style of normally-open push buttons you like. However, some substitutions may require modification to the firmware. If you prefer to use a BME280 temperature sensor instead of an AHT20, you'd need to update the firmware with a different library and different code to get a sensor reading. I'll try to note some of the specifics here.
ESP32
Technically either controller (clock or WLED) should be able to use any ESP32 that has WiFi and at least 4 MB of flash. Naturally you'd need to adjust the female socket header and any wiring to use the same GPIO pins if your ESP32 layout is different from mine (if you use different GPIO pins, you'll have to modify the firmware source code).
The primary clock controller code has only been tested on the standard 30-pin ESP32. Unfortunately, between all the various ESP32 chip types and the multitude of different development boards, it is impossible to test every model. And while I'll always try to address issues, I simply won't be able to provide fixes or patches due to differences in the ESP32 models. For best compatibility, order the same ESP32 I used from the parts list above.
The official WLED web site lists its compatible boards. And since WLED allows you to specify the GPIO pins used, you do not even need to use the same GPIO pins that I did. If you use different GPIO pins just change your configuration to specify the actual pins you did use.
LEDs
The matrix clock will only work with WS2812b LED strips. If you want to use a different type of LED strip, you will need to modify the source code and compile your own version. What's more, you must use individually addressable LEDs... which generally means 5V LEDs. 12V and 24V LED strips are normally only addressable in groups of 3 and 6 LEDs, respectively, which obviously won't work to display the letters and numbers on the matrix display.
To minimize the size of the display, I'm using the little less common 100 LEDs/meter. 60 LED/meter strips can be used (this is what I used for my original clock matrix), but you'll need to space the strips so that horizontal and vertical spacing between the LEDs are consistent. More about this under the matrix build below. The firmware is the same regardless of whether 60 or 100 LEDs/m are used.
Please do not request that the firmware be modified for other LED strips. If you wish to use other LEDs, you'll need to clone/fork the repository and make those changes yourself.
Logic Level Shifter
The logic level shifter shifts the LED data line signal from 3.3V to 5V before it goes off to connect to the LED strip. I've done multiple videos on the subject including comparing the I2C-compatible bi-directional shifter, which I use in nearly all my WLED builds without issue, to the 'recommended' SN74AHCT125N quad buffer gate and was unable to see any visible difference with 400 LEDs (actually the same number used in the matrix). You can also use a sacrificial pixel or even try omitting the shifter altogether. I would certainly bench test before creating the final install.
It is easier to install a shifter from the start than it is to try to retrofit it after you discover a problem, so I recommend that you include one in your build. But regardless of the shifter method used (or even if you omit it), you don't need to make any changes to the firmware code.
Power Supply
The size of the power supply will be somewhat dependent on the use case. Each WS2812b pixel (made up of three individual red, green and blue LEDs) can draw up to 60 mA when set to white at maximum brightness. With 400 LEDs, that means a theoretical maximum current draw of up to 24 amps! If you plan on using the matrix for room or task lighting and want the maximum available white light, then you'll need to use a 5V 30A power supply. And you'll need to increase the wire gauge size and any connectors to support this higher current.
However, the clock controller only lights a few LEDs at a time and most WLED effects pull only a fraction of the theoretical maximum. In fact, YouTuber Quindor (Intermit. Tech) recommends using the 50% white rule. In this case, the recommended amps for "normal" use at around half brightness would be 12A. And believe me, 400 LEDs even at 50% brightness are REALLY bright!
For this reason, I'm using a 5V 15A power supply. One reason I opted for 15A is for the type of power supply that I can use.
You can get these "brick-style" power supplies up to 15A. To go any larger, then you generally have to step up to a "transformer-style" supply:
Besides the fact that these power supplies are much larger and heavier, the terminals are also exposed (including mains voltage), meaning that the power supply needs to be protected from small children or others to avoid the potential of a nasty shock if they were to touch the mains terminals. In my original design, the power supply was installed on the back of the clock enclosure, although it did add significant weight to the matrix that was to be hung on the wall. But with the 35% smaller size of the new design, it was going to be a very tight fit and I had concerns about heat dissipation from the supply. The other alternative was to build an enclosure for the power supply. But this would be big, bulky and visible. So I opted to go with the maximum "brick-style" size of 15A and use the brightness limiters in both controllers to keep the LED amps well under the max rating of the supply.
If you do opt to go with a larger power supply, remember that you may need to increase wire size and connectors over my design. I'm not able to tell you the exact wire gauge to use for a particular power supply as it depends on a number of factors. However, there are numerous online calculators and charts to help you determine the proper wire gauge based on max current.
 |
| Example online wire gauge chart - Click to enlarge |
On the "low" end, a power supply of at least 5A is required! Even at 5A, the LEDs may struggle to fully light up. If you see fading, flickering or misbehaving LEDs, they may not be getting enough power and you may need to increase the size of the power supply. Do not try to power the system with something like a 5V wall wort/cell phone charger as it will not be able to provide enough current. A power supply with a peak current rating of at least 10A is recommended.
Other Components
Other components that may require firmware code and/or wiring changes for substitutions:
- AHT20 Temperature Sensor: Using a different temperature sensor will likely require a different library and code modifications.
- KY-040 Rotary Encoder: The library uses should support most rotary encoders. But the code also allows for a "click" of the knob. If your encoder does not have this feature, that functionality will be missing and its possible some minor code changes could be required.
- Piezo Buzzer: This buzzer sounds when it received 3.3V from a GPIO pin. As long as you use a buzzer, siren or speaker that generates an acceptable sound from the 3.3V input, you can directly substitute it for the piezo buzzer. Other types may require wiring and/or code changes.
- INMP441 Mic (WLED): My WLED controller build includes an INMP441 I2S digital microphone. If you wish to use a different microphone, then refer to the WLED documentation for wiring and configuration information. This does not impact the firmware for the clock controller. I highly recommend you use a digital, and not analog, microphone as digital mics give much better responsiveness without requiring constant tweaking to things like gain and squelch.
Building the LED Matrix Display
 |
| 400 WS2812b LEDs - 100 LEDs/m |
I've covered building a matrix similar to this in other videos/blog articles. In fact, I cover the step-by-step process of building the exact matrix in the following video:
In fact, many of the concepts from that video are used in this project. If you want to see the full process, you can watch the matrix build portion of that video. I'll only cover some key points here.
First, in my prior matrix builds, I used the common 60 LEDs/meter version of WS2812b. But for this build, I'm using 100 LEDs/meter. Why? A couple of reasons... First, it will make the overall size of the project approximately 35% smaller, yet with the same total count and layout of the LEDs. More importantly, it makes laying out and installing the LEDs much easier.
Important Note: For the matrix to display properly, it is imperative that the LED be equally spaces, both horizontally and vertically. Failure to maintain equal spacing will cause the letters and numbers (and even a few WLED effects) to be distorted. Getting the LED strips installed level and with equal spacing is one of the most important steps in having a good looking matrix.
When using LED with 60 LEDs/m, you can see that the LEDs are spaced 17 mm apart. Yet the LED strip itself is only 10 mm wide. This means that the parallel strips must be spaced so that the vertical distance between LEDs is also 17 mm.
Keeping each strip level, parallel and at the same time spaced and aligned vertically can be very time consuming and prone to error.
However, with 100 LEDs/meter strips, note that the distance between LEDs is only 10 mm... which happens to be the same as the strip's width. This makes installing the LEDs much easier and less prone to errors.
Since the LED strip itself is the same width as the horizontal spacing between LEDs, each strip can simply be butted up against its neighbor and a specific gap isn't needed. As long as you get the first strip centered and level (I started in the center and worked outwards), each subsequent strip can be laid right next to the prior strip and you only need to assure the LEDs are aligned vertically.
As long as you maintain a layout of 25 LEDs horizontally x 16 rows for a total of 400 LEDs, you can use 60 LEDs/m or 100 LEDs/m without any modification to the firmware. However, to change the dimensions or layout to something other than 25 x 16 will require substantial changes to the source code.
IMPORTANT: There is one other critical component to installing the LED strips. For all addressable LED strips, the 'data' signal only flows in one direction indicated by an arrow on the LED strip itself.
For this design, it is important that the first (or bottom) strip has its data direction pointing from left to right as shown above. Each subsequent strip alternates the data direction so that the 'data' flows in a serpentine pattern from bottom to top.
 |
| Click to enlarge |
If a strip is 'reversed' in terms of the data lines, that strip (and any subsequent strips) will not light up. Note that also means that the wiring between strips alternates on each end. But you always want to connect +5V to +5V, GND to GND and DO (data out) to DI (data in).
When complete, the matrix has the first pixel (where power and the incoming data line will connect) in the lower left corner. The final pixel, from a data line perspective, is in the upper left corner and is also where power injection leads will be connected (more on this below). Again, you can use 100 or 60 LEDs per meter, but you must maintain the data direction and layout as shown above or the firmware will require substantial modification.
The start of the strip (pixel 1) should be connected to a standard 3-pin JST connector. If you use the start of the LED strip, it likely already has a JST connector attached. You may need to carefully remove any preinstalled heat shrink if it is partially covering the first LED. Preinstalled JST connectors will need to be removed and the existing wiring de-soldered from all the other strips. At the end of the final strip (pixel 400), solder two 20 gauge stranded wire to the +5V and GND pads, as these wires will be used for power injection. I used short jumpers of 22 gauge stranded wire for the connections between strips. If you are somewhat newer to soldering, you'll get a lot of practice with this project!
You will need some sort of backer board for the LED strips. I used 1/4" craft plywood. I also applied a coat of primer and flat black paint. This isn't as important with the 100 LEDs/m, but with 60 LEDs/m and the required spacing gap between strips, the backer board will be visible, so the black paint helps to hide the gaps.
The size of the backer board will be dependent upon the frame or enclosure you opt to build (if any at all). I cover my frame a bit in a later section, but the backer board will fit in routed slots in the frame. The space at the top and bottom and the wiring connections on each side will be hidden by trim around the frame. But you will want to consider how you are going to build your own frame, determine the size and cut the backer board before installing the LEDs.
 |
| Original 60 LEDs/m version. Note the gap between LED strips |
I also opted to add 3M double-sided tape under each LED strip. The LED strips have adhesive on the back, but considering the LED strips will be installed onto painted (or bare) wood, I did not want the LED strips coming loose after everything was assembled. The 3M tape is the same width as the LED strips, so laying down a strip of tape under each LED was pretty easy.
Testing the matrix
Again, see the video linked above if you want to see the step-by-step process of creating the matrix on the backer board. I highly recommended testing the matrix before proceeding. If you don't already have an LED controller handy and have already purchased the parts for a controller, you can throw together a basic WLED controller on a breadboard in about 15 minutes with no soldering. If you don't already have them, you'll also need the 'bench testing' parts listed under the parts list above.
 |
| Click the image above to launch the video |
Just connect the data line from the controller and +5V/GND directly from the power supply to the start of the LEDs (pixel 1) using JST, Wago or other temporary connections. Be sure to configure WLED for 400 LEDs under 'Config' -> LED Preferences and go ahead and set a brightness limiter to about 80% or less of the peak max rating of your power supply (entered in milliamps). After saving your config changes, you should be able to turn on the solid effect and see all 400 LEDs light up! If not, then you may have a wiring/connection issue with the LED strips. If the LEDs suddenly stop at the end of one strip, double-check the data line direction on the strip and assure it is not reversed.
Note: You may initially notice some fading, color shifting or even flickering in some of the LEDs if you haven't connected the power injection wires. If desired and to fully test the LEDs, go ahead and connect the +5V and GND leads from the power injection wires directly back to the power supply. In no case should you run the power for the LEDs through the breadboard or controller. This may damage the controller or even melt the breadboard due to high current.
If desired and you are planning on installing the optional second WLED controller, you can go ahead and configure WLED for the matrix. Info on how to do this is described in the Github wiki. You can then try out a few of the matrix effects if desired. And when done, you've already configured and successfully tested the ESP32 and logic level shifter (if you used one), so you can set these aside and use them for the permanent soldered secondary controller.
Building the Primary Controller
Let's start by building the primary 'clock' controller. Here's the overall wiring diagram for reference:
 |
| Click to enlarge |
The above simply shows the circuit connections and not necessarily how you route the actual wiring. More on this below. If you are not planning on adding a secondary WLED controller, you can omit the 5V relay and related wiring. Similarly, if you do not want a buzzer to automatically sound when a countdown expires, you can omit the buzzer, resistor and related wiring (note that you can also disable the auto-buzzer in the firmware settings but keep a buzzer that you can manually sound via the web interface or automation).
Of course, as I recommended above, I'd start with building and testing the controller on a breadboard of some type. You may want to go ahead and install the clock firmware (and maybe even complete the WiFi onboarding) before you begin building the controller. Complete instructions on installing the firmware and onboarding the controller can be found in the Github wiki, so I'm not going to cover it here.
 |
| Primary Controller on a Protoboard |
For the initial bench testing, omit the relay (for now) as it is dependent upon the secondary WLED controller. Otherwise, just make all the connections shown in the diagram using a combination of breadboard and Dupont jumper, alligator leads and Wago connectors. If you are using a standard breadboard (and not a protoboard like above) or when you go to create the soldered version on an ElectroCookie board, there is something you will quickly notice about the ESP32.
Mounting the ESP32
You will likely discover that the standard 30-pin ESP32 is just slightly too wide for a breadboard/ElectroCookie board and will only leave a set of thru-holes on one side for connecting wiring to the GPIO pins. This is even exacerbated with the ESP32 Mini where the width causes the thru-holes on both sides to be blocked. To resolve this situation, the ESP32 will be mounted on female headers.
By using the pin headers, it raises up the ESP32 so that wiring connections to the GPIO and other pins can be made using the thru-holes underneath the ESP32. As you can see in the photo, wiring can be run on the top of the board and soldered from the bottom, or the wiring can be run on the bottom and soldered on the top.
But when using a breadboard, the header pins might pose an issue as the mounting pins are short and may not sit properly. If you are using a protoboard as I am in the photo above, you may be able to span an unused power rail and have connections available on both sides of the ESP32. But this won't be the case with a standard breadboard.
One breadboard option is to use breadboard jumpers.
Breadboard jumpers can usually sit flat enough that you can connect to the strips under the board and still place the ESP32 on top.
When using the method, and as noted in the prior photo, you must use a bit of care. Assure that any exposed wiring from the jumpers do not make contact with any conductive part of the underside of the ESP32. You may look at the underside of the ESP32 and not seeing any installed components, so you might assume this isn't something you have to be concerned with. But look a little closer.
Even if no components are present under the board, there is very likely a number of very small holes, called vias. Unless a non-conductive coating has been applied to the underside of the board these small holes are generally conductive and connect to various components of the ESP32. If any of your circuit's exposed wiring (like a breadboard jumper) makes contact with one of these vias, problems will occur and the ESP32 or connected components could even be damaged. To assure this doesn't happen, you can apply a layer of Kapton tape to the underside of the ESP32.
It might be a little hard to see in the photo, but two thin strips of tape have been applied to the bottom of the ESP32, covering all the vias (and the larger USB connection points). This creates an insulator between the bottom of the ESP32 and any external wiring. While not really needed if installing the ESP32 on headers, applying an insulating barrier on the board bottom is generally a good practice to follow for all your ESP projects.
Logic Level Shifter
I described the ongoing debate about the logic level shifter (or the need for one) under the parts list section, so I'm not going to cover that again. While it is true that because the wiring run between the controller and LED strips is so short, you might get away without a shifter. But if you are planning on adding the secondary WLED controller, the data signal will also run through a relay which could add just enough additional resistance that the LED data signal drops too low and the LEDs will misbehave. For this reason, I strongly recommend a shifter of some sort.
If you are part of the school of thought that the I2C-compatible shifters are too slow (all my visual testing shows they don't cause an issue), then you can swap out this shifter for the recommended SN74AHCT125N buffer gate shifter. The wiring for this alternate shifter looks like this:
 |
| Click to enlarge |
As noted, this shows the WLED controller where two data lines needs to be shifted... the LED data line and the relay signal line (which also expects 5V). If you want to use this shifter with the clock controller, just omit the second data line for the relay. Note that the ground connections on the 'non-signal' side of the chip (channels 3 & 4) are optional. But I don't like to leave anything floating, so I pull these to ground. One small advantage of the 'SN74' shifter is that it only requires 5V and not the additional 3.3V. But because of the extra ground connections required, both shifters require a total of 6 connections to shift a single data signal. Ultimately, the decision as to which shifter to use is up to you.
Remaining Components
For the remaining components, use a combination of breadboard, Dupont, alligator clips and/or Wagos. I do recommend that you put in the effort to make all these connections on the breadboard version first. And then once the firmware is installed and onboarded (if you didn't do that earlier, you should do that now), you can test all the components, like the rotary encoder, push buttons, temperature sensor, etc. by using the clock controller's web application. Again, full details on installation, configuration and use of the web app can be found in the Github wiki.
Moving from the Breadboard to the ElectroCookie (soldered version)
If you've successfully created and tested the breadboard version, moving to the ElecroCookie really just requires creating the same circuits, but soldering everything in place. It's really up to you how you do this, but I'll show you an overview of how I generally created controllers like this one.
My first step is to solder the female headers into place. To assure the headers are properly aligned (and to facilitate soldering), I first attach the pin headers to the pins on the ESP32. I then place the ESP32 with the headers onto the ElectroCookie. I can then tape this in place, flip the board over and solder the pins in place. Once done, the ESP32 can be removed from the headers.
Next, I solder the level shifter into place and then make all "point-to-point" connections on the board. For this, I opt for 20 gauge solid-core wire. Note that the wiring runs are made both on top and on the underneath side of the board. For example, the 3.3V connection from the ESP32 to the power rail is made on the bottom of the board (as seen by the yellow circled points). Also don't forget to join the ground rails of the ElectroCookie, as shown by blue circle.
Finally, I add wiring runs for all the external connections. These are made with 22 gauge stranded wire (except for the 5V power leads, which are 20 gauge stranded). I make the connections on both the top and bottom of the board... really wherever it is convenient for soldering and running the wires.
Because there will be quite a few external wire leads, I temporarily bundle and label the wires. Initially, these are just leads that I made plenty long, about 12" each (nothing worse than finding a wire is just an inch short of what you need). Eventually, I'll cut these to length and add connectors.
If using an enclosure, you can now install the completed controller, running wiring through the enclosure openings on both ends as needed. My enclosure has mounting posts that not only elevate the board to allow the for underside wiring, but also accept M2 screws for securing the board in the enclosure. Again, the enclosure is optional. You can also use 2mm brass offsets attached to the back of the backer board and mount the ElectroCookie board on these offsets.
 |
| Example of using offsets for ElectroCookie mounting |
Set the completed controller aside for now.
Building the Control Box
Next, I wired up the external control box that houses the rotary encoder, pushbuttons and the internal (indoor) temperature sensor.
Just attach leads (again I made the leads about 12" long) as shown above. Each button needs a ground connection, but they can share a single ground, so that's what I did. I opted to solder wire directly to the button leads (but you could use something like a spade connector if desired). I used the existing pin header soldered to the rotary encoder and soldered straight pin headers to the temperature sensor. I then created my own Dupont connectors. Why create my own? There are a couple of reasons. First, it allows me to create a single Dupont connector for each device (5-pin for the encoder and 4-pin for the AHT20). A single connector like this is less likely to work loose as opposed to individual Dupont connections for each wire. Additionally, it allows me to use 22 gauge stranded wire rather than the 24 gauge that most pre-made Dupont connectors use. The 'stock' wiring also tends to be a little less flexible than normal stranded wire.
Wire colors are somewhat arbitrary, but I recommend matching colors with the appropriate lead from the controller board. Then it is just a matter of cramming everything into the enclosure (if you are using one).
For my enclosure, the rotary encoder is actually attached to the lid of the enclosure. The AHT20 temperature sensor is aligned with a small opening in the side of the enclosure.
I then liberally applied hot glue over the top of the sensor (seen in the top photo). The glue not only holds the sensor in place, but provides a barrier from any generated heat inside the enclosure. While minor, any component that receives power (the rotary encoder and the AHT20 sensor itself) can generate a small amount of heat. In fact, I've found that the sensor's temperature runs about 0.5°-1.0°F high. But not an issue! The clock's firmware has an adjustment setting for the indoor temperature sensor where you can compensate for external temperature influences. This might also be used if the matrix is mounted near a window or other heating/cooling source, yet you want the temperature from the center of the room. This is covered in more detail in the wiki.
Because I plan on mounting the control box on the side of the frame and passing all the wiring through a hole drilled in the side, a short run of the wiring will be exposed.
To make things look a bit cleaner, I fed all the wires through some braided sleeve with a short piece of heat shrink at each end. The heat shrink has not been "shrunk" yet, as I won't finalize this part until the box is attached to the frame and the wiring has been passed through the frame via the drilled hole. Also note that like the controller, I bundled and labeled the wires from each component.
At this point, you are ready to start laying out the components on the back of the LED matrix backer board, add connectors to the wiring leads and route power for everything.
Adding a Secondary WLED Controller
If you opt to add the secondary WLED controller and relay for auto-switching, you need to build the WLED controller itself. This process is very similar to the primary controller, albeit with significantly fewer external wires.
 |
| Click to enlarge |
I'm showing an ESP32 mini here. But you can certainly use the same 30-pin NodeMCU style ESP32 that was used for the primary clock controller. Just substitute the same 15-pin female headers for the 10-pin headers that the ESP32 Mini uses (these headers usually come with the ESP32 Mini).
Of course if you use the full size 30-pin ESP32, the pin locations will be different. Most notably, the 5V and 3.3V pins locations are flipped on the ESP32 mini, meaning the 5V and 3.3V rails will be on opposite sides of the ElectroCookie board. Just run your wiring to use the same power and GPIO pins as shown above if using the standard 30-pin ESP32.
But one additional important note if using the ESP32 Mini.
As seen above, the ESP32 Mini has two rows of thru holes in parallel to each other. Only connect pin headers to the 'inside' rows. These are highlighted in yellow above. If you connect pins to both rows and then insert the ESP32 into a breadboard or ElectroCookie board, each inner pin will be electrically connected to the corresponding outer pin. That would not be a good thing! So only attach 10-pin female headers for the inside rows to the ElectroCookie and only solder the pins to the inside rows of the ESP32 Mini.
The microphone is optional, but if you omit it you will not be able to use any of the audio-reactive effects or features of WLED. The relay however, is not optional in this case. It is used to send a single the data signal to the LEDs from one of the two controllers. But the relay will be connected in a later step.
Here is my completed WLED controller. For this controller, I opted to run all the external wiring under the bottom of the board (soldering on top). None of this wiring will be exposed, assuming you install the controllers and components on the back of the LED backer board.
Assembly follows the same process as the primary controller. One difference you may note is that two GPIO pins are running thru the shifter. One is the LED data signal, just as with the primary controller. The second wire however, is the data control signal for the 5V relay. It also expects a 5V signal so running through the shifter will boost the GPIO pin's 3.3V to 5V. Alternatively, you could use a 3V relay and send the signal directly from the ESP32 to the relay. But then you'd need a buck (or step-down) converter to lower the power supply's 5V to 3V for powering the relay. I don't recommend powering a 3V relay directly off the 3.3V pin of the ESP32. The relay likely draws too much current for long term use. It may work fine for a while, but you do risk damaging the ESP32 by drawing too much current through the pins. Using a 5V relay and running the signal wire through the shifter requires less wiring and eliminates the need for a buck converter.
Building a Frame or Enclosure
If you plan on putting the display inside any frame or enclosure, you should probably construct that at this time and insert the backer board and LEDs before laying out the components and cutting the wiring to length. Again, the type, size and process for building a frame is entirely up to you. I'll share my build here and you can use it, adapt it or completely ignore it and use your own design.
Unfortunately, due to a spell of extremely cold weather combined with an unheated garage, I've been unable to actually build the frame for this particular project yet. However, I'll use the same process as with my original 60 LEDs/m version, just with different dimensions which I will include here. I'll update this article with actual photos of the frame build and installed components when complete.
If you want the step-by-step details (or if you are using 60 LEDs/m), then refer to this prior blog article for the frame: WS2812b LED Matrix Clock, Scoreboard and More Only use this article for the LED matrix and frame builds. Do not build the controller or any of the circuitry from that article. First, the old version uses an ESP8266 so the firmware and features for this project will not run on that older controller version. The old version also requires Home Assistant/MQTT for control and is missing a number of newer features found in this project's firmware.
You can build your LED matrix and frame from that article, but use this article for all electronics and firmware.
If you have (or are planning) on building the 100 LED/m version as covered in this article, then here are the dimensions I will use for my frame, along with a few additional notes. But the process is the same as in the above linked article.
LED Backer Board
 |
| Click to enlarge |
The backer board will have the LEDs attached to one side and the controller(s) wiring on the other. This backer board determines the dimensions for the rest of the frame. As mentioned above, I applied a little primer and a couple coats of flat black paint on the side where the LEDs will be installed. This isn't quite as important with the 100 LED/m LED strips, but is needed for the 60 LED/m version as the LED strips will have a gap between each row where the underlying wood will be visible.
Outer Frame
The outer requires that two groves be routed... one for the Plexiglass or acrylic front and one for the LED backer board. I'm showing two different versions depending on whether you are using 1" x 4" or 1" x 3" boards for the frame:
 |
| Click to enlarge |
Why the slightly different dimensions? Well, the controller(s) if either placed in the 3D-printed enclosure or if mounted on offsets will stand about 1 ¼ to 1 ½" tall. But even with the dimension change, there is only an available depth of 1 ¾".
 |
| Example using a 1" x 4" board |
Note: The larger groove for the plywood backer board only needs to be routed on the top and bottom frame pieces. The smaller groove for the acrylic front needs to be routed on all four sides.
 |
| Click to enlarge |
The light dotted line shows the backer board and how it fits in the frame. But a few additional notes (and a lesson learned):
I'm using butt-joints because the front of the display will be trimmed out (and these will be mitered joints). But more importantly, I'll build the frame so that the top board can be removed. Why? Well, on my original matrix design, the frame sides were joined together with wood glue and counter-sunk screws (that were eventually puttied over and painted). This means that when complete, the LED strips are no longer accessible. If an LED or strip fails (or eventually the LEDs fade to a point where they need replaced - and the DO fade over time), it would require destroying the existing frame to get to the front of the backer board.
So for this version, I'll go and use glue and countersunk screws to attach the sides to the bottom, but the top will be removable. I'll attached the top board to the sides with internal angle brackets and maybe a single screw that remains exposed (I'm doing this on the top since this matrix will be wall mounted so these exposed screws generally won't be visible, but you could opt to make the bottom board removable instead of the top). Making the top removable means that I can simply disconnect the wiring and slide the backer board out of the frame should repair/replacement of the LEDs ever becomes necessary. As a bonus, the acrylic front can also be removed/replaced should it become cracked or damaged.
 |
| Click to enlarge |
Acrylic Panel and Assembly
Once the outer frame pieces are cut to size, double-check all final dimensions and cut the acrylic or Plexiglass front panel. Remember that the acrylic will be 1/2" longer in both directions than the inside dimensions of the frame. This allows 1/4" on all sides for inserting into the groove around the frame.
The technique I use is to go ahead and assemble the bottom and two sides. I then slide the acrylic sheet into the grooves. I then place the backer board (with LEDs installed) into the bottom groove, assuring it is centered horizontally. Recall that the backer board only sits in grooves at the top/bottom and there will intentionally be gaps on both sides.
This allow the connections to the LEDs to wrap around from the back. The gaps (and extra backer board space at the top and bottom) will eventually be covered with 2" trim.
If you've calculated the dimensions properly, then the 2" trim should precisely frame the LEDs without covering any. Again, note this is from my 60 LED/m version... if using 100 LED/m, there won't be any gaps between the LED strips. Also note the countersunk and puttied screws. I'd come back and apply another final coat of flat black paint and then a couple coats of polyurethane.
Also note the small hole drilled through the bottom of the frame. This is for the incoming power from the power supply. This is the next part of the frame assembly.
Drilling Holes for External Wiring
Besides the hole in the bottom of the frame for the incoming 5V power (the size of the hole will depend upon wiring gauge used... which is dependent on power supply size and expected current draw), you will need to drill holes in the frame for wiring from the control box (rotary encoder, buttons, etc.), the external buzzer and the microphone for the audio-reactivity with the WLED controller. Of course if you are not adding the secondary controller or don't care about audio-reactivity, you can omit the microphone. Or omit the buzzer if you don't care about sound when the countdown timer expires.
 |
| From a prior version with older control box |
The above photo is from one of the original 60 LEDs/m builds, so the control box is different with extra buttons and no rotary encoder (and no temperature sensor). It also has an additional Wemos D1 mini instead of microphone, but you can get the general idea.
Find the desired mounting location for these external components. And nothing says that all (or any) of the external components must be attached to the frame.
 |
| Yet another version! |
In this photo (again an older version that is installed in my garage), the matrix was going to be mounted higher than normal, which would make reaching the control box difficult if mounted on the frame. So I simply mounted it independently at a more accessible height. Similarly, the incoming power cord runs behind the pegboard so I wanted it flush against the wall. So I notched out the bottom of the frame instead of drilling a hole so that the power cord would sit flush.
All this is to say that you can mount the external components however you like. But regardless, the wiring from the external components need to be routed inside the frame behind the LED backer board where the controllers and other components will be installed.
This is one reason that I didn't add any sort of connectors to the external components yet and just left the bare wire. If connectors were already attached, the holes to pass through the wiring and connectors would have to be much larger.
Once you have the wiring from the external components passed through to the back of the frame, the connectors can be added, the controller(s) and other components can be installed and everything can be connected together.
Laying out Components and Making Wiring Connections
Once you have the controller(s) and the control box built and have passed the external component wiring through the frame, it is time to layout the components on the back of the LED board, cut the lead wires to length and attach the connectors. How you lay out the components and the connectors used are again somewhat arbitrary and up to you. But I'll show the process I used.
Important Note: While numerous techniques can be used to attach the components (adhesive, Velcro, etc.), if you opt to use screws, assure that drilling or installing any screws do not penetrate the through the backer board and puncture or make contact with the LED strips or wiring installed on the front of the backer board. If necessary, use washers or spacers to assure any screws used do not penetrate through the backer board.
Again, as detailed above, you'd normally complete this step after the backer board was installed in the frame and any external wiring has been passed through the frame. But since I've yet to build the frame due to weather/unheated garage, I'll describe the process I used (I'll update this article with final build photos once it is complete - probably sometime in the Spring, so please check back!).
First, just as an example, I've attached one controller that is an enclosure (via small mounting screws and holes in the base of the enclosure). The other controller and the relay are mounted on brass offsets screwed directly into the wood. I'm using both methods here just to show them. In the final build, I'll either place both controllers in an enclosure or put both on offsets.
I'm opting for a couple of terminal blocks to distribute the incoming 5V to the controllers, LEDs and relay, but you could just as easily use Wagos, wire nuts or any other method.
I always try to make my project builds so that upgrades and repairs are possible without desoldering or destroying any part of the circuit. I also try to design my connections so that things only fit together in one possible way. This prevents inadvertently doing something like connecting the push buttons leads to the temperature sensor. I also try to use connectors, like JST, so it is impossible to reverse the connection and potentially the power polarity, which could damage or destroy a component. The following are the connectors I used after cutting the leads to appropriate lengths:
Control Box (rotary encoder, push buttons and indoor temperature sensor)
If built as above, there will be a total of 13 wire leads from the control box (5 for rotary encoder, 4 for temperature sensor and 4 for the push buttons, assuming the buttons are sharing a common ground).
 |
| "Blue": rotary encoder, "Red": temp sensor, "White": pushbuttons |
Now, I could have used a single 13-pin connector (like a ribbon cable), but I opted to break out the wire/connectors by component. And I'm using JST 2.0mm connectors. The rotary encoder is the only component that uses 5-wires, so this one was pretty straightforward to use a female 5-pin JST connector on one side and a male 5-pin JST connector on the other. Just use caution when building the connectors not to reverse the wiring on one connector as they only fasten together in one orientation and cannot be "flipped over".
Both the buttons and the temperature sensor have four wires. To assure things are connected properly, I use a 4-pin female connector on one set of four wires coming from the control box and a 4-pin male connector on the other set. Naturally this is reversed on the leads to the controller. But by using male and female connectors assures that the wrong leads from the controller cannot be connected to the wrong leads from the control box.
Buzzer
The buzzer isn't required for functionality, but provides an audio notification when the countdown timer expires. It can also be manually sounded via the web app or via automation and the API. But you can omit it if you don't need/want any sound.
For the buzzer, I simply used some spade connectors. Be sure to include the plastic insulators or apply some other type of insulator to assure the bare spade connectors do not come into contact. Otherwise a short will occur when the buzzer is sounded.
Microphone
For the optional secondary WLED controller and audio-reactivity, a mic is required. You can skip this section if not installing the secondary controller or if you don't care about audio-reactivity and the related effects.
For the microphone, I just created two 3-pin Dupont connectors using 22 gauge wire. I explain above why I make my own Dupont cables, but you can certainly use premade jumpers. Note that since these wires protrude directly back from the mic PCB, you will likely need to drill a hole for the wires directly behind the mounting location. But if using the enclosure, this should cover the hole.
Relay
The relay is also only needed if you are installing the secondary WLED controller.
For the relay, I used small ferrules designed for 24-gauge wire. Of course you could carefully insert the bare wire into the screw terminals, but extra care is needed if you do this to assure no stray wire makes contact with a neighboring wire or terminal.
Other Connections
As mentioned above, a goal is to make the system repairable and upgradeable without ever needing to desolder or cut wiring. For example, if an LED strips fails and needs to be replaced, I can simply disconnect all the JST, Dupont, Wago (and other) connections, slide the backer board out of the frame, replace the faulty strips, put the backer board back in the frame and reconnect all the connectors.
Once all the wires are cut and connectors installed, you can connect it all together. Wiring runs can be secured and organized via zip ties, adhesive cable managers or even hot glue.
Power and Power Routing
As mentioned numerous times already, the 400 LEDs can draw significant current. Way too much current to route the power through an ESP or ElecroCookie board. For this reason, its important to split the incoming 5V power into low current and high current supplies.
 |
| Click to enlarge |
The above diagram doesn't necessarily indicate the layout of the components nor the particular wire routing. It simply shows how the 5V power should be distributed and connected.
Note: The external components, like the rotary encoder, temperature sensor and buzzer are low current devices and can be powered directly from the appropriate controller as shown in the controller wiring diagrams. For this reason, power connections to devices powered directly from the controller are not shown in the above diagram.
I'm using terminal blocks (rated for up to 20A) to split out the incoming power. 5V (and ground) are run to the 5V rail of each controller (or only the clock controller if you aren't including the optional secondary WLED controller). These are low current lines that won't draw more than around 1A.
Next, 5V lines are run to the power terminals for the relay. The relay doesn't pull a lot of current, but when energized it can approach 1A... which is just a little too high to continuously draw off the 5V pin of the ESP32. You could probably power it off the 5V rail of the ElectroCookie if desired. But since I have the terminal strips, I can power the relay directly from the power source.
The 5V power lines for the LEDs are a different story. These heavier lines, as shown in the above diagram, could draw anywhere from just a few amp all the way up to the maximum 24A possible. The actual amps will be dependent upon the size of your power supply and the current limit you define in the clock controller and within the WLED settings. Of course certain effects, colors and brightness level all impact the current draw. But you should determine the maximum potential amps for your build and assure all wiring and connectors for these high current connections are rated for at least the maximum amps expected.
Installing the Firmware and Using the System
See: Github Wiki
The wiki contains complete information on how to install the firmware to the ESP32, complete the initial onboarding and configuration, and how to use the web app to control and modify the display settings. In addition, the wiki contains configuration settings for WLED for use as the secondary controller, info on automating the clock or controlling it with a third-party system (such as Home Assistant), troubleshooting steps and more.
Note: Future versions of the firmware may introduce changes, new features, etc. that aren't necessarily reflected in this article. The Github repo will always contain the latest information regarding the system.
Final Thoughts
The project does require a fair amount of soldering. Even if you build the controllers on breadboards, the individual LED strips must be connected together as part of the matrix, so some soldering is unavoidable. But none of the soldering is particularly difficult. So if you have at least a little experience with soldering, this project is a great way to hone that skill. In addition, it includes integration of some components that you may use in your own future projects, like pushbuttons, relays, microphones, etc.
You also don't need to be a programmer! In fact, this entire project can be built and used without reading, writing or modifying a single line of code. However, if you do have a little coding experience and want to understand how the code works (or even modify it for your own custom needs), the full source code for the clock controller is available in the Github repo. The code is well documented via inline and block comments. Portions could even be extracted and reused in your own code project.
Finally, when complete, you optionally have a full WLED matrix display that also adds a local time/temperature display, a functioning countdown timer, full scoreboard and various text display modes. All this is controllable via an easy-to-use web interface, physical controls and/or via an API for 3rd party control and automation with something like Home Assistant.
Thanks for reading! If you have any questions or run into some problems with your own build, feel free to post a comment here, under the YouTube video or in the Discussions area of the Github Wiki.
Additional Info and Links
A few additional recommended videos for those newer to LEDs or DIY electronics:
Common LED Questions (related blog article)
Working with RGB LED Strips (related blog article)
Supporting this blog and related YouTube channel
It takes significant time and effort (and often expense) to create these articles and videos. If you'd like to support future content on this blog and the related YouTube channel, or just say thanks for something that helped you out, you can consider buying me a one-off cup of coffee or two at:
No comments:
Post a Comment
To help eliminate spam and to keep all conversations civil, submitted comments are moderated. Therefore your post may not show up immediately. Please be patient as most reviews are completed within a few hours.