Clock hand outline offset from 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?

[splatboy20081]

What device do you test it with? 

[splatboy20081]

Because the versa lite has a smaller dpi, so I think that may be the issue?

I'm not sure.

[ted-tanner]

Versa 2. Sorry, should have known to mention that.

[Gondwana]

The jumping behaviour makes it sound like a rounding issue (and I know that fractional dimensions don't necessarily behave ideally) but I don't see any obvious rounding requirements in your code. I've done it the same way as you.

The watch can indeed lay things out subtly differently to the sim.

This is probably irrelevant, but things like "-110+1" might be a bit ambitious. I don't think the SVG parser is smart enough for sums like that ($ excepted).

[splatboy20081]

I'm pretty sure that the Versa 2 may have a smaller pixel range then Ionic.Sent from Samsung tablet.