Clock hand outline not moving with clock hand

[ted-tanner]

In order to draw an outline around the hands of my clock, I draw a semi-translucent copy of each clock hand underneath and have it move with the original hand. The copy is slightly larger so it should theoretically extend one pixel out on each side (and it does in the Fitbit OS Simulator).

The outline moves with the hands correctly in the Fitbit OS Simulator, but not on the watch itself. On the watch, the outline moves with the hands but sometimes gets offset by a pixel in either direction at some points. There will be a two-pixel outline on one side and nothing on the other. A few moment later, the outline and is correctly positioned and in line with the clock hand. How can I fix that?

Here is how I did my minute hand in the .gui file. The hour hand is done in a similar way:

<g id="minuteHandOutline" pointer-events="visible" transform="translate(50%,50%)">
  <rect x="$-4" y="-110+1" width="8" height="110" />
  <circle cx="$-4" cy="-110" r="4" />
</g>
<g id="minuteHand" pointer-events="visible" transform="translate(50%,50%)">
  <rect x="$-3" y="-110" width="6" height="110" />
  <circle cx="$-3" cy="-110" r="3" />
</g>

 Here is the relevant Javascript:

const minuteHand = document.getElementById("minuteHand");
const minuteHandOutline = document.getElementById("minuteHandOutline");
...
clock.ontick = () => {
  let mins = time.getMinutes();
  let secs = time.getSeconds();
  let minutesAngle = (360 / 60) * mins + Math.floor(secs / 10);

  minuteHand.groupTransform.rotate.angle = minutesAngle;
  minuteHandOutline.groupTransform.rotate.angle = minutesAngle;
};

Again, this works just fine on the Fitbit OS Simulator. Is this just an issue with the Fitbit Firmware or did I do something wrong in my code? How else could I outline the watch hands that wouldn't cause this issue?

[JonFitbit]

It could be a rendering issue on device, the simulator does behave differently in some situations.

Could you put a project or complete sample online for me to reproduce with?

[ted-tanner]

I created a new bare-bones project and set it up in more or less the same format as the one I was working on. The outline works properly on the simulator, but behaves differently on the Versa 2 depending on the time. Here is the link to the repo:

https://github.com/ted-tanner/fitbit-test

[JonFitbit]

It seems to work better if you simplify into a single group for each hand, then rotate that as a single object. Like this:

<g id="minHand" pointer-events="visible" transform="translate(50%,50%)" >
  <rect class="minsOutline" x="0" y="-102" width="8" height="117" />
  <circle class="minsOutline" cx="4" cy="-103" r="4" />
  <rect class="mins" x="1" y="-102" width="6" height="117" />
  <circle class="mins" cx="4" cy="-103" r="3" />
</g>

[ted-tanner]

That makes more sense than how I had it, but it still exhibits the same behavior on my Versa 2. Acutally, if I position it how you did, the minute hand would be off-center. After re-centering, the outline continues to move differently than the hand itself.