Gradients not showing through mask on Sense hardware (but works on emulator)

[kayateia]

I've been developing a clock face on the emulator whose primary graphical element is mask built using an arc, and then the mask is applied to a screen-sized gradientRect with the type set to bilinear. It looks great on the emulator, and on the watch itself, it's just flat colours. Unless I tap on it, and then the gradient flickers through occasionally. (I have no tap handlers, so there's nothing going on, on my end there.)

Reading through some of the other topics, I'm starting to think that the SVG capabilities provided in the SDK are waaaay ambitious for what the hardware can do. 🙂 So I might've done something too hard. It's basically this:

- Arc in a mask element

- The arc is rotated by JS code

- Screen sized bilinear gradient is rotated 45 degrees, and then the mask is applied to it

I'm wondering if it might be simpler to just use some images, though I thought it'd be nice to be all vectors 🙂

Edit: Here is the code so far, if anyone is interested - https://github.com/kayateia/fuzzy-ring

[kayateia]

Well, I can't say I figured it out per se, because there does seem to be a bug in the simulator or the watch OS that makes them not match behaviours. But basically masks don't like to be offset outside the screen space, from what I can tell. There is something buggy about trying to use a group element to rotate a bilinear gradient rectangle too, but I've just tweaked it to be mostly working for now by simplifying the svg.

[JonFitbit]

Offscreen rendering or complex uses can cause memory related issues in the constrained resources of the physical device. The simulator isn't constrained in the same way and that's why we often see visual differences.

[kayateia]

Yeah, I'd believe that. Today I had a notification pop over it, and even though I had it whittled down to a working state, the background started flashing randomly when the notification was added.

I think that's fine, but it would be a big quality of life improvement if the simulator would reflect that lack of resources. At this point I find myself mostly ignoring the simulator, because it's not a great indicator of how things will look/perform.

A guide to what sort of resource usage one can get away with would also be really useful. Right now it mostly seems like people have to just poke around to find the limits.