Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Versa 2 only mask rendering issue

Hi, I'm using masks in one of my clockfaces (Proficient Clock). They work on Versa 1 and Ionic so I supposed it should just work on Versa 2 (because the screen size is the same as Versa 1), but it turns out it doesn't. This is really frustrating because I don't have a Versa 2 to test possible fixes.

versa2-issue.png

(Thanks to Gregoire for providing the image in the dev Discord.)
In that image you can see the issue on the big complication.
This clockface has been tested to work on Versa 1 and Ionic hardware.


Code sample:
Complication symbol on .gui

 

    <symbol id="complication-details">
      <mask id="mask">
        <rect width="155" height="60" />
        <circle cx="155" cy="30" r="30"/>
      </mask>
      <svg mask="#mask" width="185" height="60">
        <g id="detailAnimation" transform="translate(125,0)" pointer-events="visible">
          <circle cx="30" cy="30" r="30" fill="#ffffff"/>
          <rect x="30" width="155" height="60" fill="#ffffff" />
          <text x="168" y="44" id="text"
            font-family="Colfax-Medium" fill="black"
            font-size="40" font-weight="bold"
            text-anchor="end" text-length="6" />

          <animateTransform attributeType="translate" from="0,0" to="125,0" begin="disable" dur="0.5" final="keep" easing="ease-out" />
          <animateTransform attributeType="translate" from="125,0" to="0,0" begin="enable" dur="0.5" final="keep" easing="ease-out" />
        </g>
      </svg>
    </symbol>

 

That example is provided with the purpose of diagnosing and hopefully fixing that issue. You may use it as inspiration for your Fitbit SDK App, but please don't include an exact copy in your Fitbit SDK app without permission.

 

Best Answer
0 Votes
7 REPLIES 7

This is a known issue with circle elements inside masks which only affects Versa 2. There's a fix coming in a future update, but for now you'll need to find a workaround, perhaps using images?

Best Answer
0 Votes

Ok, thanks for your response.

I just submitted an update removing the mask and instead using a png to mask it.

Best Answer
0 Votes

I'm afraid my solution is to skip the Versa 2 build.

 

...looking forward to this being fixed.

Best Answer
0 Votes

After putting some thought into your comment, I shifted from masking to using images and I gotta say I really like the result:

 

AstrolabeAnim.gif

I did go ahead and make a build for the Versa 2. It is in for review now.

 

That is one really sharp watch.

Best Answer
0 Votes

Looks like it's not just circles - I tried substituting an arc and a rectangle, and the mask appears for a split second, then the entire background becomes visible until the display turns off again.

Best Answer
0 Votes

Also I am on the Versa 3, not 2

Best Answer
0 Votes

Issue appears on Sense too now, I've had reports from clockface users. 

Best Answer
0 Votes