You are reading a single comment by @HughB and its replies. Click here to read the full conversation.
  • Hi @Andreas_Rozek - thanks for sharing your code and posts. I'm really enjoying them and find them useful.

    The example hands are a bit more complicated than simple rectangles. The ends are rounded, they start with short spindles etc. The resulting outline by changing to drawPoly will be very weedy. But I am sure it is possible with a lot of tinkering and trial and error with two polygons, one for the ouside and another to hollow it out. I'll probably have a go at this at some point, but suspect its about 4-8 hours of trial and error. But I think it will be worth doing inthe long run as it will enable better looking clocks.

    I had a play with your simple_clock code - many thanks for sharing. I dont thing you need to draw the widgets. I managed to get the widgets to draw and take up the current theme correctly using the code snippets below.

    // at the top of the file
    g.clear();
    Bangle.loadWidgets();
    Bangle.drawWidgets();
    
    const w = g.getWidth();
    const h = g.getHeight();
    const cx = (w/2);
    const cy = (h/2) + (Bangle.appRect.y/2); 
    const outerRadius = (h - Bangle.appRect.y)/2;
    

    Note Bangle.appRect gives you the usable space for the app. Here I am just taking into account if there are widgets on the top, but the approach could be adjusted for the bottom as well taking into account Bangle.appRect.h. Bangle.appRect adjusts depending on if widgets are displayed at the top and bottom - I dont think it is documented - it was introduced in one of the threads a while back.

    In the draw() function I g.fillRect(Bangle.appRect); And leave the drawing of the widgets to the widgets.

    function draw() {
      g.setColor(g.theme.bg);
      g.fillRect(Bangle.appRect);
    
      drawNumbers();
      drawHands();
      queueDraw();  // see Anton clock etc
    }
    

    And at the end I have.

    Bangle.setUI('clock');
    draw();
    

    The rest of the code is the same as yours but without the 80 or so lines that form updateClockFaceSize () and the code to override Bangle.drawWidgets().

  • Good morning (and all the best for 2022)!

    As promised, I've (fine tuned what I wrote yesterday evening and) published the sources for rounded and hollow hands at the usual place (i.e., on GitHub)

    The new implementations now also contain some "bolts" in the center.

    I really appreciate the sheer performance of the new Bangle.js 2 compared to the first incarnation of that watch!

  • Concerning your remarks:

    I'm sorry, it's been my fault: I did not remember that I published a simplified version of the simple hands only (and that version drew rectangles rather than rounded rectangles)

    Concerning Bangle.appRect: well, I know that feature but I refuse to sacrifice 24 (or even 48) pixel lines of the extremely precious screen, as soon as even the smallest widget has appeared. For that reason, I used a little geometry to see if a circular clock face could fit into the empty space between widgets in the screen corners - or reduced the clock face radius as little as possible!

About

Avatar for HughB @HughB started