Need help with my first watch face

Hey there,

I am not that experienced in javascript and spent the last week tinkering with my watch. As my first project, I tried to adapt an existing watch face (bold clock) to my liking.... It works for the most part, but not completly...

I included a second smaller watch face and hand to show secondes. That works, but unfortunately this small clock is in front of the hour/minute hands. How to I move that into the background, so that the seconds are behind the hour/minute hands?

Secondly the widget area doesn't work properly. On the left side the pedometer widget shows up. The battery- and bluetooth widget on the right side however do not show up. The first time I see these is in the settings...

I would really appreciate it, if somebody could have a look at my code.

github

Thanks!

Luis

Wow, that looks really cool! You can run it in the emulator using this link: https://www.espruino.com/ide/emulator.ht­ml?codeurl=https://raw.githubusercontent­.com/chili-666/BangleApps/master/apps/bl­uesec/bluesec.js

this small clock is in front of the hour/minute hands

That's a hard one. What I'd suggest is to draw it to an offscreen buffer, and then draw the hour/minute hands over that...

So create a new graphics with:

var gs = Graphics.createArrayBuffer(54,54,16);

Then draw on gs rather than g with drawSecondFace/Hand

Then draw the minute and hour hands to gs as well - you'll have to offset them so everything lines up ok.

Finally render that to the screen using g.drawImage({width:54,height:54,bpp:16,b­uffer:gs.buffer}, ox,oy)

Ideally you could use 8 bits per pixel instead of 16 too. It might work, but it's possible the colours will be a bit 'off'.

Secondly the widget area doesn't work properly

That's because you're clearing the whole screen with g.clear(); every minute. The easiest method is just not to clear the widget area - do g.clearRect(0,24,239,239) instead.

Note that some widgets use the bottom 24px as well, but if you don't have any of those installed then I guess you could ignore that

That's a hard one.

That's a relief - so it's not just me, it's the watch ;-) Thanks for the quick help, I'll try your solution tonight.

That's because you're clearing the whole screen with g.clear(); every minute

I do? I'll have a look into that as well, while I am at it.

Drawing things over each other with updates is quite a nice challenge: Merge individual layers in the final, display buffer layer, and this every time in a layer something changes. Two layers would be good enough: layer one holds face and hour and minute hand. Layer two includes second hand. second hand. Every second, new second hand layer is created w/ second hand for current second. Layers are merged for the part where second hand layer has changed from previous layer. Knowing origin and extend of previous and current second hand layer allows to update the display buffer only where something has changed. Shortest - in time - and smallest - in number of pixels - update is at seconds 1, 15+16, 30+31 and 45+46... and longest/largest is at seconds 7+8, 22+23, 37+38 and 52+53 (assuming it is all done with rectangles. The additional code and additional meta data transmission to the display to achieve higher optimization may outweigh its gain).