WLED Digital Clock: Firmware Mods

7-Segment Clock

Preface

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.

Prerequisites

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:
//#define NUM_LEDS           (NUM_PIXEL_PER_SEGMENT*7)*NUM_DIGITS + NUM_PIXEL_PER_DOTS 

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] = {
  //abcdefg
  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.

23 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.
    A
    F. B
    G
    E. C
    D
    In which sequence have you wired yours?
    Many thanks.

    Reply
    • 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!

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

    Reply
    • 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

      Reply
  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

    Reply
  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

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

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

      Reply
  5. Its works , I am happy, very happy.

    one small issue.

    after the power outage, when it turns on again, the time is the year 1970 .1.1 00h: 00m: 00s and it starts counting from that time.
    I waited and 1h will not pull myself out of the NTP server

    if I enter the wled ui, change the color, the time is set. or run a preset, the time is set, or I turn it off and on via the web and, the time is set…

    I tried to make a macro, with 00h and 01 min, run color, run preset, run off, and on .. AND THEY DIDN’T DO THEIR TRICK …

    only if I click on pc or mobile NTP time is refreshed

    Reply
  6. Its works , I am happy, very happy.

    one small issue.

    after the power outage, when it turns on again, the time is the year 1970 .1.1 00h: 00m: 00s and it starts counting from that time.
    I waited and 1h will not pull myself out of the NTP server

    if I enter the wled ui, change the color, the time is set. or run a preset, the time is set, or I turn it off and on via the web and, the time is set…

    I tried to make a macro, with 00h and 01 min, run color, run preset, run off, and on .. AND THEY DIDN’T DO THEIR TRICK …

    only if I click on pc or mobile.

    Reply
  7. Hello,
    I was very interested in your Wled clock project and I would like to make it. I have a request for you if you could compile a program for one diode in a segment, unfortunately I do not know any programming and cannot do it. I will be grateful for your help.
    greetings

    Reply
  8. Hi m.gazzarri
    Great project here. I was in the middle of writing an arduino project to display the clock in a similar fashion, then spotted this and all the work is done!
    2 questions though if I may.
    Is it possible to switch the order of the digits? I always work from left to right and want to use my 7 segments for some custom code if possible.
    Also, do you know of an easy way to turn the overlay on and off, via button, voice MQTT etc? That way I can have it run as a display at times, clock at others.

    Thanks so much
    Dean

    Reply
  9. Hi, that is very cool. How hard do you think it would be to modify this to be able to support multiple clock faces for different time zones to display at the same time? (so 8 digits total, or 12, etc)

    Reply

Leave a comment

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

%d bloggers like this: