Ionic/Versa clock face, right side of screen disappearing.

[Pual52]

I'm new to developing and learn as I go, but this, has me baffled...

...I'm developing a clock face for Ionic/Versa/Versa Lite, this uses two 8-bit greyscale PNG 352x352px (pic1/pic2), not to scale.

pic1 pic2   pic3 mask

These images rotate behind the mask (pic3). As they rotate towards 45 degrees off square. the right side of the screen closes in from right to left, (shown by the blue area in pic4, pic5, pic6).

pic4 pic5 pic6

As the image rotates towards 90 degrees or square, the right side of the screen opens out from left to right. It's same problem on both Versa and Ionic,  Versa Lite untested.

Is this a simple programming error by me (if so, Doh!) or a fitbit problem?

I have heard the right side of the screen disappearing on other Versa's and Ionic's.

Thank you for your help in advance.

Code below is for Ionic watch only, but I use the following files for Versa, index~300x300.gui, style~300x300.css. these have different x,y values, colours and image names for the Versa watch.

Fitbit Studio - Code Version 3.1 - No Permissions

index.js

import clock from "clock";
import document from "document";
import * as util from "../common/utils";

// Update the clock every second
clock.granularity = "seconds";

let Hours = document.getElementById("hours");
let Mins = document.getElementById("mins");
let Sec1 = document.getElementById("pic1");
let Sec2 = document.getElementById("pic2");

// Update the clock every tick event
clock.ontick = () => updateClock();

// Returns an angle (0-360) for seconds
function secondsToAngle(seconds) {
  return ((360 / 60) * seconds)+3;
}

// Rotate the hands every tick
function updateClock() {
  let today = new Date();
  let hours = util.zeroPad(today.getHours());
  let mins = util.zeroPad(today.getMinutes());
  let secs = today.getSeconds();
  console.log(secs);

  Hours.text = `${hours}`;
  Mins.text = `${mins}`;
  Sec1.groupTransform.rotate.angle = secondsToAngle(secs);
  Sec2.groupTransform.rotate.angle = secondsToAngle(secs);
}

utils.js

// Add zero in front of numbers < 10
export function zeroPad(i) {
if (i < 10) {
  i = "0" + i;
}
  return i;
}

index.gui

<svg fill="#000000" font-family="Colfax-Regular" font-size="85" >
<g id="sec1" pointer-events="visible" transform="translate(50%,50%)">
  <image class="oneColor" x="-174" y="-174" width="348" height="348" href="pic1.png" />
</g>
<g id="sec2" pointer-events="visible" transform="translate(50%,50%)">
  <image class="twoColor" x="-174" y="-174" width="348" height="348" href="pic2.png" />
</g>
<image x="50%-174" y="50%-125" width="348" height="250" href="pic3.png" />
<image class="oneColor" x="50%-174" y="50%-125" width="348" height="250" href="348x250ball1.png" />
<image class="twoColor" x="50%-174" y="50%-125" width="348" height="250" href="348x250ball2.png" />
<text class="oneColor" id="hours" x="50%" y="50%-5" text-anchor="middle" text-length="8" />
<text class="twoColor" id="mins" x="50%" y="50%+60" text-anchor="middle" text-length="8" />
</svg>

styles.css

.oneColor{ fill: red; }
.twoColor{ fill: white; }

widgets.gui

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
  </defs>
</svg>

[Gondwana]

This is a known and long-standing Fitbit bug. Images larger than the screen don't rotate properly.

[Pual52]

Thanks for the reply Catplace. 

Defies logical, a long standing problem, that fitbit still haven't fixed!

And limits what can be designed!

I'm starting to think, I should have bought a different brand... 🙁