Simple digital clock

Posted on
  • My 7 years old daughter have made (with my help) big digital clock. We use 8x32 matrix of ws8212b LED and small ESP8266 board with 5-to-3.3 V LDO on board. LED matrix have separate 2-wire power connector and 3-wire control connector, so we can connect 5V power adaptor to first one and ESP8266 to second one only (using 3 jumper wires - to GND, МСС and GPIO2).

    Then very simple program convert the matrix to digital clock

    var neopixel = require("neopixel");
    var g = Graphics.createArrayBuffer(8,32,24,{zigz­ag:true,color_order:'grb'});
    var att=6.9;
    var d=Math.pow(2,att);
    var oldTime, newTime;
    function drawTime() {
      if(oldTime != newTime) {
        neopixel.write(D2, g.buffer);
    neopixel.write(D2, g.buffer);

    Some comments:
    Last line are to fix state of LED matrix. It is enough to write first LED (even first logical LED - 1 byte) only but it is harder - we need separate (very small) buffer to do that. So we write all matrix. The line may be removed but first ouput will be incorrect.
    We have found that LED matrix is in fact 8x32 zigzag (first line is right-to-left, second one is left-to-right etc.) So we have added g.setRotation() to use it as 32x8 display.
    I have added att and d vars to control LED brightness more intuitively - now brightness looks to be changed linearly with att change.
    It need a few seconds to get correct time from Internet, so time displayed is strange after power on.

  • Nice - thanks for posting it up! That first write for neopixels is a pain - it's caused by the pin having been floating before neopixel.write was called.

    You might like this function for use with setColor:­HSBtoRGB

    It'd be really neat to change the hue by a little bit every second :)

  • Hi - could you also post a picture of it?

  • Sorry, I do not understand how to upload a picture - 'Upload a file' in the message form allows to choose a file but nothing happens after.

    By the way, I have assembled bigger clock with 4 16x16 LED panels and ESP32 as controller. Code was rewritten for the clock:

    var neopixel = require("neopixel");
    var wifi=require("Wifi");
    //--------------------- NTP client -----------------------------
        var dgram = require('dgram');
        defaultNtpPort = 123;
        defaultNtpServer = "";
         * Amount of acceptable time to await for a response from the remote server.
         * Configured default to 10 seconds.
        ntpReplyTimeout = 10000;
         * Fetches the current NTP Time from the given server and port.
         * @param {string} server IP/Hostname of the remote NTP Server
         * @param {number} port Remote NTP Server port number
         * @param {function(Object, Date)} callback(err, date) Async callback for
         * the result date or eventually error.
        getNetworkTime = function (server, port, callback) {
            if (callback === null || typeof callback !== "function") {
            server = server || defaultNtpServer;
            port = port || defaultNtpPort;
            var client = dgram.createSocket("udp4"),
                ntpData = new Uint8Array(48);
            // RFC 2030 -> LI = 0 (no warning, 2 bits), VN = 3 (IPv4 only, 3 bits), Mode = 3 (Client Mode, 3 bits) -> 1 byte
            // -> rtol(LI, 6) ^ rotl(VN, 3) ^ rotl(Mode, 0)
            // -> = 0x00 ^ 0x18 ^ 0x03
            ntpData[0] = 0x1B;
    //        for (var i = 1; i < 48; i++) {
    //            ntpData[i] = 0;
    //        }
            var timeout = setTimeout(function () {
                callback("Timeout waiting for NTP response.", null);
            }, ntpReplyTimeout);
            // Some errors can happen before/after send() or cause send() to was impossible.
            // Some errors will also be given to the send() callback.
            // We keep a flag, therefore, to prevent multiple callbacks.
            // NOTE : the error callback is not generalised, as the client has to lose the connection also, apparently.
            var errorFired = false;
            client.bind(8215+((Math.random()*100)|0)­, function(res){
                res.on('error', function (err) {
                    if (errorFired) {
                    callback(err, null);
                    errorFired = true;
                res.on('message', function (msg) {
                    // Offset to get to the "Transmit Timestamp" field (time at which the reply
                    // departed the server for the client, in 64-bit timestamp format."
                    var offsetTransmitTime = 40,
                        intpart = 0,
                        fractpart = 0;
                    // Get the seconds part
                    for (var i = 0; i <= 3; i++) {
                        intpart = 256 * intpart + msg[offsetTransmitTime + i];
                    // Get the seconds fraction
                    for (i = 4; i <= 7; i++) {
                        fractpart = 256 * fractpart + msg[offsetTransmitTime + i];
                    var milliseconds = (intpart * 1000 + (fractpart * 1000) / 0x100000000);
                    // **UTC** time
                    var date = new Date(milliseconds);
    console.log('Date received', date.toString());
                    callback(null, date);
                res.on('close', function(error) {
                    console.log('drgam is closed, error',error);
    //        client.on('error', function (err) {
    //            if (errorFired) {
    //                return;
    //            }
    //            callback(err, null);
    //            errorFired = true;
    //            clearTimeout(timeout);
    //        });
            client.send(E.toString(ntpData), 0, ntpData.length, port, server, function (err) {
                if (err) {
                    if (errorFired) {
                    callback(err, null);
                    errorFired = true;
    //-- change font6x8 to add a few icons and some Russian chars --
    var gt = Graphics.createArrayBuffer(16,64,24,{zig­zag:true,color_order:'grb'});
    //8  NNNN            NNN       N   N                                 NNN
    //4 N   N           N N N      N  NN                                N  N
    //2 N   N N  N NNN  N N N NNNN N N N N  N    NN NNNN N  N NNN  NNN  N  N
    //1  NNNN N  N N  N N N N N  N N N N N N N  N N N    N N   N  N  N  N  N
    //8   N N NNNN NNN  N N N N  N NN  N NNN N  N N N    NN    N   NNN  N  N
    //4  N  N N  N N  N  NNN  N  N NN  N N N N N  N N    N N   N   N N  N  N
    //2 N   N N  N NNN    N   N  N N   N N  N  N  N N    N  N  N  N  N NNNNNN
    //1                                                                N    N
    //    82   83   84    85   86    87   88    89   8A   8B   8C  8D    8E
    // Lookup table to convert English names of months to Russian using added symbols 
    var MC={'Jan':'\x82\x83\x84', 'Feb':'\x85e\x84', 'Mar':'Map', 'Apr':'A\x86p', 'May':'Ma\x8D',
            'Jun':'\x87\x88\x83', 'Jul':'\x87\x88\x89', 'Aug':'A\x84\x8A', 'Sep':'Ce\x83',
            'Oct':'O\x8B\x8C', 'Nov':'Ho\x8D', 'Dec':'\x8Ee\x8B'};
    //-------- Main program ---------------------------
    Graphics.prototype.setFont6x8 = function() {
        this.setFontCustom(font, 32, widths, 8);
    Graphics.prototype.convertColorFromHTML = function(HTMLColor) {
        return parseInt(HTMLColor.substr(5,2)+HTMLColor­.substr(1,2)+HTMLColor.substr(3,2),16);
    var br,d;
    var ClockBrightness=2,LampBrightness=0;
    var ClockB=(Math.pow(2,(ClockBrightness-1)/9­*8)+ClockBrightness/4)/256;//add linear component to be better near brightness=1
    var LampB =(Math.pow(2,(LampBrightness -1)/9*8)+LampBrightness /4)/256;//add linear component to be better near brightness=1
    var TempIn='---', TempOut='---';
    var fields=[
      {x:0, y:0, w:32,hs:{h:0.6,  s:1}, drawField:0},
      {x:32,y:0, w:32,hs:{h:0.5,  s:1}, drawField:0},
      {x:0, y:8, w:32,hs:{h:0,    s:0}, drawField:0},
      {x:32,y:8, w:32,hs:{h:0.334,s:1}, drawField:0}
    var updateCounter=0;
    function updateField(fieldNum) {
      setTimeout(function() {
        if(updateCounter) {
          var clr=E.HSBtoRGB(0,0.01,LampB,true);
          for(let i=0;i<fields.length;i++)
          neopixel.write(D2, gt.buffer);
    function updateSettings() {
      //ugly hack because updateField does not really use fieldNum
    var oldTime, newTime, newDate;
    function drawDate(fieldNum) {
      var clr=E.HSBtoRGB(fields[fieldNum].hs.h,fie­lds[fieldNum].hs.s,ClockB,true);
      var text=newDate;
    function drawTime(fieldNum) {
      var clr=E.HSBtoRGB(fields[fieldNum].hs.h,fie­lds[fieldNum].hs.s,ClockB,true);
      var text=newTime;
    function prepareTime() {
      var ds=Date().toString();
      newTime=ds.substr((ds[14]==' ')?15:16,5);
      if(oldTime != newTime) {
        newDate = Date().getDate()+' '+MC[Date().toString().substr(4,3)];
    function drawTempIn(fieldNum) {
      var clr=E.HSBtoRGB(fields[fieldNum].hs.h,fie­lds[fieldNum].hs.s,ClockB,true);
      var text='\x80'+TempIn;
    function drawTempOut(fieldNum) {
      var clr=E.HSBtoRGB(fields[fieldNum].hs.h,fie­lds[fieldNum].hs.s,ClockB,true);
      var text='\x81'+TempOut;
    var tnum;
    function getNTP() {
      getNetworkTime(defaultNtpServer, defaultNtpPort, function (err, date) {
        if (err) {
    wifi.on('connected', ()=>setTimeout(getNTP,30000));
      var status=wifi.getDetails();
      if(!status.status || status.status != "connected")
      if(!status.status || status.status != "connected")
    //  if(["off", "wrong_password", "bad_password", "no_ap_found", "connect_fail"].indexOf(status.status)!=­-1)
        if(tnum) {
    neopixel.write(D2, gt.buffer);
    neopixel.write(D2, gt.buffer);
    var http=require("http");
    var toTempIn,toTempOut;
    function onPageRequest(req, res) {
    //  console.log('pr',req.url,Date().toString­());
      var a = url.parse(req.url, true);
      res.writeHead(200, {'Content-Type': 'text/html'});
      res.write('<script src="­ibs/jscolor/2.0.4/jscolor.min.js"></scri­pt>');
      res.write('<script>function update(hsv) {"?time_color_h="+hsv[0]+­"&time_color_s="+hsv[1];}</script>'); 
      res.write('<button class="jscolor {mode:\'HS\',valueElement:null,value:\'6­6ccff\'}" style="border:2px solid black" onchange="update(this.jscolor.hsv)">Pick­ a color</button>');
    //  ,value:\'66ccff\'
    //  res.write('<p>Pin is '+('on':'off')+'</p>');
    //  res.write('<div>Mode: <a href="?mode=lamp">Lamp</a> <a href="?mode=clock">clock</a></div>');
      res.write('<div>Clock brightness: ');
      for(let i=0; i<=10; i++)
        res.write(' <a href="?clock_brightness='+i+'">'+i+'</a>­');
      res.write('<div>Lamp brightness: ');
      for(let i=0; i<=10; i++)
        res.write(' <a href="?lamp_brightness='+i+'">'+i+'</a>'­);
      if (a.query) {
        if("temp_in" in a.query) {
    //      console.log(toTempIn);
          if(toTempIn) clearTimeout(toTempIn);
          toTempIn=setTimeout(()=>{TempIn='---'; toTempIn=undefined;updateField(1);},3000­00);
        if("temp_out" in a.query) {
          if(toTempOut) clearTimeout(toTempOut);
          toTempOut=setTimeout(()=>{TempOut='---';­ toTempOut=undefined;updateField(2);},300­000);
        if("lamp_brightness" in a.query) {
          LampB =(Math.pow(2,(LampBrightness -1)/9*8)+LampBrightness /4)/256;//add linear component to be better near brightness=1
        if("clock_brightness" in a.query) {
          ClockB=(Math.pow(2,(ClockBrightness-1)/9­*8)+ClockBrightness/4)/256;//add linear component to be better near brightness=1
    //  console.log('pr2',Date().toString());
    if(wifi.getDetails().status=="connected"­) getNTP();

    Clock screen is divided to 4 fields - date, time and 2 temperatures which can be set by http now, but I am going to change it to MQTT client.
    Clock brightness may be set by http too. Field colors too, but it does not fully work still.
    ESP32 v1.97 (last known to work with neopixel) looks like does not have SNTP included. So I have added NTP client from­nt. I have modified the code to it work in Espruino environment. I hope its MIT license allows to do that. I am not sure what should I write here about the client.
    I have found strange behavior of Espruino Date() while I have worked on the library: dates about 1900-1905 are incorrecly converted to milliseconds. So I use exact number of milliseconds but not Date("01.01.1900") or something similar in NTP time conversion. I have not found the effect in node.js so may be it is a bug in Espruino.

  • dates about 1900-1905 are incorrecly converted to milliseconds

    So for example (new Date('1901-10-20')).getTime() isn't -2152224000000?

  • (new Date('1901-10-20')).getTime()

  • One more example:

    (new Date('1906-12-31')).getTime()
    (new Date('1907-01-01')).getTime()
    (new Date('1910-12-31')).getTime()

  • Mon 2018.11.19

    Hello @SergeP,

    'Sorry, I do not understand how to upload a picture'

    The image, usually a .jpg must be deployed on a publicly accessible host server, or your own remote server. Then click the 'Image' button in row of buttons above. Then copy-n-paste your URL. The link will then render as an image and show up in the body of your post.

    'Upload a file in the message form allows to choose a file but nothing happens after'

    What PC O/S are you running, and what browser & ver? I may be able to provide some insight on PC running Win10 - a modal dialog appears that allows the file manager to enable file selection from the local hard drive.

  • Mon 2018.11.19

    ref #4 'ESP32 v1.97 (last known to work with neopixel) '

    ref: '­'

    Just tried my luck on a Pico running 1v99

    From #6

    (new Date('1901-10-20')).getTime()

    The result:


    I did not get the value -2152224000000 as suggested in #5

    I can not confirm if that negative value is a correct value for the date Oct 20, 1901 though.

    Also agree with the three dates in #7

    'dates about 1900-1905 are incorrecly converted to milliseconds'

    Would you mind @SergeP posting a link to the maths used to create the dates that are felt incorrect please?

  • @Robin -2025993600000 is the WRONG date. If you try running that code in your browser or node.js you'll see the right one

  • Just fixed.

  • @Gordon Great!
    @Robin Thank you for explaination of image adding. Photo of my old smaller clock:

  • Tue 2018.11.20

    'Thank you for explaination of image adding'

    Hint: Were you aware of the 'Formatting help' link adjacent to the 'Cancel' button?

    It is always neat to see the results of end user project successes. I'm glad you were able to post your image of your project which I'm sure you are proud.

    Can't wait to see the results of your 4 16x16 LED panels version with the added date and temp.

    Are you considering a tutorial with images or a YouTube video perhaps?

    Also curious why two identical lines of write instruction?

    L300 neopixel.write(D2, gt.buffer);
    L301 neopixel.write(D2, gt.buffer);

    Was there an issue with flicker or something of the sort? Hadn't had the need to do something like that with an authentic Espruino Pico. Just curious. . . .

  • Newer clock:

    @Robin I am a dinosaur who did not use file hosting services before. So after you explain an idea it is easy to use. About to identical lines - ws2812 can be in any state at start. Sometimes (rarely) it is in the middle of byte receiving. And one write is not enough to blank display. I think it is enough to send 1 byte (or may be 3 bytes) to sync, but it was easier to send all the buffer instead.

  • @SergeP nicely done!

    'And one write is not enough to blank display'

    Have you considered creating an array/buffer of dark/black, say all zeros for every Neopixel, and write that just on start up, or during 'middle of byte receiving' as in a screen clear?

  • @Robin sorry, I am not sure I understand your question.
    I've created global buffer to use. At startup it is blank, and I send it to display twice (one to synchronize and one to blank display while startup proceed). Then I use the buffer to write time etc.
    If display is not synchronized it can show some noise after first data out, sometimes the noise is too bright.

  • Fri 2018.11.23

    Hi @SergeP,

    I'm not trying to rain on your parade here, as what you have shown demonstrates the willingness to understand, divide and conquer, until the working project emerged. I know you are proud of what you have done, and so you should be. If what you have is working to your satisfaction, then go with it.

    My only reason to suggest an alternative, was as I noticed, several interval timers and several timeout periods were being used along with multiple Neopixel writes. The 'flicker' or 'noise' as you put it, could occur, when those intervals or timeouts overlap while attempting to update the output within the Graphics buffer.

    I had recently been playing with lengthy Neopixel strips, but using a FlatString and linear array to format the data, but with the requirement of only one Neopixel.write() statement. I haven't noticed any 'noise' even with timings around 20-50msec, which I believe is still faster than those in your project. For the clock, it is quite possible that the data is becoming corrupt, an overlapping non cleared array for instance, and that might explain the flicker.

    As I believe the matrix panels you have are just a zig-zag connected continuous strip of Neopixels, (correct me if I'm wrong here) it would be possible to create a 'blank' array outside of the Graphics buffer that could be used in place of gt.buffer to 'clear' the panel before the actual desired data to write there. At a minimum, this would/might prove if the data within the Graphics buffer is not stable, which is resulting in the 'noise.'

    Just a thought, but if you are satisfied, go with what is there now. You have completed quite an impressive project indeed.

  • @Robin My English is not good enough, so sometimes I am not sure I see that you write. And that is the only I mean in my previous post. (And I am also not sure I write exactly that I think because of the same reason, so I am sorry :) )
    I call neopixel.write twice only at startup. Besides that there is only one point where it called. Moreover, the code contains some trivial event aggregator to minimize number of calls.
    When I write about synchronization I mean that WS1812 may be in any state when the code starts. Particularly, it may be still in process of byte receiving. For example, if we press reset button on ESP32 module when LED is in the process. In the state LED will interpret new data incorrectly and we will see number of bright pixels on display until next write. First regular write (current time etc) will be only after about 1 second after power on or reset, and display will be ill all the time. To minimize time of the effect I call neopixel.write twice at start.

  • @SergeP, I think that for a clock the startup noise is not really a problem, because a clock is usually started rarely and tried to be kept up as long as possible. To avoid noise, you could think of adding some power control of the neopixels.

    According to NeoPixel WS2812 data sheet (as attached as .pdf), control logic and LEDs have separate power supply. That would be ideal to blank the LEDs. For clean start, power the control and keep the LEDs unpowered until after sending reset followed by complete string of desired data.

    It may not be possible with the boards you have, because most follow the simple approach and power the control logic locally for each pixel locally. This is reflected in the sample circuit in the data sheet.

    To prevent a reset - or other blocking tasks - while a send is going on, make the reset application controlled - and delay it until after all data has been sent.

    Since most neopixel products do not use the two power lines approach, you may not power the neopixels until all other things have completed the start up, then power the neopixels and send right away a reset and (blanking) data stream that you have prepared beforehand. This way you can minimize the noise moment.

  • @allObjects. You are right, 1 second noise at reset or power up (and even at not every reset or power up) is really not a big problem. So I wanted to kill it easy or to leave it as is. double write at startup seems to be easy enough to implement it. Sorry, the code looks strange and confusing. If you remove the double write (both of them) you will see no any changes most times even at power up/reset.
    But if you send new code to clock every minute :) in dark room :)) it may be interesting to use the writes to remove bright noise.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

Simple digital clock

Posted by Avatar for SergeP @SergeP