WLED Digital Clock: Firmware Mods

7-Segment Clock


While surfing on Thingiverse I found a lot of interesting 7 Segment style Digital Clock projects based on Neopixel strips.
All of them was extremely detailed on the hardware side but a little bit poor on the firmware side. Someone added support for an I2C RTC module, someone else was connecting to the web to retreive the time, but actually none of them was very rich of features and there wasn’t the possibility to remotely set colors or effects (or even set the time).

The Idea

In my Home Automation system (Home Assistant based) I already integrated some WS2812 strips by using a D1 Mini board and the WLED firmware.

For the one who never heard this name before, please have a look at some YouTube videos, it is an amazing project with a huge support community.

So the idea was to try my best in order to integrate the support for 7 segment clock directly into WLED in order to benefit from all the effects, palettes, colors, and integrations that it already have.

I started searching for some starting points and found this pull request on the WLED Github page: PR #995.
The scope of this pull request was exactly was I was looking for but unfortunately the implementation was a bit different.
There wasn’t the possibility to have more pixel per segment and there wasn’t any implementation of the “dots” blincking function.

But actually I got some good hints:
First, I found that the best way to do that was using the overlay method, that way, no matter the effect that you select, it will always show the clock digits.
Second, there were some code modifications in order to add this feature directly on the webserver side, that way there was the possibility to enable/disable my feature and make possible to integrate it in future releases of WLED.


In order to develop and compile the WLED firmware I used Visual Studio Code and Platformio, you can found a step-by-step guide at this page of the WLED Wiki in order to get started.

Hardware stuff:

Code Mods

Here are reported the most relevant modification that I’ve added and you may have to customize.
Please note that if you want to edit the html related stuff you then have to recompile the files as described here.

In overlay.cpp, I added some code in order to define the hardware related variables as well as the new pixel management implementation.

Relevant defines:

#define NUM_DIGITS             4     // Number of connected Digits 
#define NUM_PIXEL_PER_SEGMENT  2     // Number of LEDs in each Segment
#define NUM_PIXEL_PER_DOTS     2     // Number of pixel per dots

#define NUM_DOTS               (NUM_DIGITS/2) - 1 //Number of "dots" between digits: 1 for 4 digits, 2 for 6 digits
//Total number of LEDs:

Edit this defines in order to meet your hardware. Note that support for 6 digits is still work in progress.
You can perhaps adjust the number of pixel per segment and the number of pixel on each dot.
I have 2 dots and 1 pixel for each dot, so 2 pixels in total.

Understanding digitsMatrix array:

//Digits array
byte digitsMatrix[12] = {
  0b1011111,     // 0
  0b0000110,     // 1
  0b1101101,     // 2
  0b0101111,     // 3
  0b0110110,     // 4
  0b0111011,     // 5
  0b1111011,     // 6
  0b0001110,     // 7
  0b1111111,     // 8
  0b0111111,     // 9
  0b1011001,     // C
  0b1111000,     // F

This array is where the magic happen. You can customize it in order to meet your actual configuration and pixel order. So what I’m doing here is simply setting to binary 1 the segment meant to be on for a given number, it is a so called BCD to 7-Segment decoder.
In my case I have this pixel configuration in each digit:

      __ __        __ __          __ __        _6 _7
    __     __    __     __      __     __    _5     _8
    __     __    __     __  29  __     __    _4     _9
      __ __        __ __          __ __        _2 _3  
    __     __    __     __  28  __     __    _1     10
    44     __    30     __      14     __    _0     11
      __ __       __ __           __ __       13 12    


Please note that the marking “abcdefg” on the note agree to MY CONFIGURATION and it comes from the way I have connected pixels. I know that it is not the standard one.
As you can see, the “a” segment agree with the segment in which I have the first pixel and so on.

Pixel, Segment and Digit arrangement

So if you have a different configuration you have two options in order to get it working:

  1. Re-solder the pixel in order to meet my configuration. That way you avoid to make adjustment to the array and you only have to adjust the number of digits per segment and/or dots.
  2. Take a piece of paper and a beer, draw your pixel chain arrangement in terms of segment. Mark the first pixel segment with “a” and proceed till the end. Then think on what segment should be on foreach number, edit the matrix writing a 1 in the corresponding position and you’re done!

If you reached this point and want to start playing this is where you can find the code.
Actually it is on my fork of WLED at version 0.12, hope to make a pull request soon or later.

I have also built a stable version for d1-mini and you can download the binary from here.

If you liked this project please consider supporting me with a star or just a follow.
Don’t forget to comment below for any problem or suggestion.

17 thoughts on “WLED Digital Clock: Firmware Mods”

  1. Hi, I am interested in this development, I intend using the binary for simplicity, Which sequence do you wire the digit segments?
    My understanding for the segment names.
    F. B
    E. C
    In which sequence have you wired yours?
    Many thanks.

    • Hi brian,
      Thank’s for your interest.
      The way I have connected the segment is described in the second “code section” in which there is the pixel sequence for all the 4 segment + the 2 dots.
      Maybe it’s better if I add a picture. I’ll do that now!

  2. HI m.gazzarri, I tried the stable version for d1-mini, only 30 led light on my clock wired tou your picture. Is this the clock firmware? I even tested with a full 60 led strip and only 30 light. also I sured every where on the internet and could not find how to flash you Spiffs bin file. with the clock_d1_mini_0.12.bin flashed, I can access the web server and change the colors of the 30 led thats lite. thanks for any advice.

    • Update: Got the clock working, using the web interface, found where to set led count, andfrom color screen where all the effects or I have to just select any effect and then the clock shows up.
      . my only issues is when you power down the clock, you loose all the setting, also the settings to turn off 14 hour , still shows 24 hours and not 12 hours

  3. Hi, i love your project, would it be possible to change the led numbers of the segments in the web if? i tried to compile it by my self, but now i cant change the color.

    thanks max

  4. Hey thank you for this project. was wondering if it would be possible (in order to avoid soldering) to work with a matrix, and overlay on the corresponding pixels? skipping pixel 1 then using 2,3 skip 4 use 5,6 skip 7 to make the first two segments of the digit and so on. thank you

    • Thank you!! Always looking for collaboration, send me an email through the “Contact us” form and we can keep us in touch!

    • If I’m not to tired out it should be:
      //Digits array
      byte digitsMatrix[12] = {
      0b1101111, // 0
      0b0001001, // 1
      0b1111100, // 2
      0b1011100, // 3
      0b0011011, // 4
      0b1010111, // 5
      0b1110111, // 6
      0b0001101, // 7
      0b1111111, // 8
      0b1011111, // 9
      0b1110110, // C
      0b0110110, // F


Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: