pouzzler

Most recent activity

• Bangle.js 2 setInterval() / changeInterval() problem

  in Projects • 4 months

  

  That was the problem, so I won't even edit my post to indicate what it was :)
  Thank you for the helpful pointers!

• Bangle.js 2 setInterval() / changeInterval() problem

  @pouzzler started

  • 4 comments
  • 252 views

  @pouzzler replied
• Bangle.js 2 setInterval() / changeInterval() problem

  in Projects • 4 months

  

  Edit 2: solved the problem. I am unaware of the ethics of this forum. Should I indicate my error and let the post to potentially help someone in the future, or simply remove it?

  Edit: Kept only a more minimal version of the code, that still bugs, and got rid of what worked.

  Hello, as a first project, I have made my own watch face, and it is working great except for a tiny detail.
  The program's logic should be as follows :

  • a function to update the clock face every minute is defined, then it is executed with :

    id = setInterval(updateClock, 0);
    

  • The clock should update every minute on time, therefore the interval is modified inside updateClock :

    seconds = new Date().getSeconds(),
    changeInterval(id, (60 - seconds) * 1000);
    

  • Inside this same function, all complications are drawn :
    a rectangle holding the battery percentage at the top right
    a big HH:MM in the middle of the screen
    a smaller DD MMM YYYY
    and on the bottom a L M [M] J V S D (that's monday, tuesday, etc in french) with the current day inside a square

  Everything works exactly as desired except on the very first update after uploading : the battery percentage (line 30) and the square around the day of the week (line 31) are not drawn as desired. As soon as the next minute begins, everything is drawn perfectly and stays that way.

  Here is the whole code :

  var id,
      bottomOffset = 13,
      topOffset = 31,
      weekString = "L M M J V S D";
  
  function padToTwoDigits(s) {
    return s < 10 ? "0" + s : s;
  }
  
  function frenchDayOfWeek(d) {
    return (d - 1) % 7; // convert from S M T W T F S to L M M J V S D
  }
  
  function updateClock() {
    let battery = padToTwoDigits(E.getBattery()) + "%",
        W = g.getWidth(),
        H = g.getHeight(),
        date = new Date(),
        seconds = date.getSeconds(),
        day = frenchDayOfWeek(date.getDay()),
        baseXOffset = (W - g.stringWidth(weekString)) / 2,
        stringLeftOffset = g.stringWidth(weekString.substring(0, 2 * day)),
        xLeft = baseXOffset + stringLeftOffset - 1,
        stringRightOffset = g.stringWidth(weekString.substring(0, 2 * day + 1)),
        xRight = baseXOffset + stringRightOffset;
    
    g.clear(true)
      .setColor(1,0,0)
      .setFont("Vector", 20)
      .drawString(battery, W - 20, 15)
      .drawRect(xLeft, H - bottomOffset, xRight, H - topOffset);
    
    changeInterval(id, (60 - seconds) * 1000);
  }
  
  id = setInterval(updateClock, 0);
  
  

  Should anyone have a hint, I would be most thankful :)