Color Gradient Watch Face

Birdy over 3 years ago

Hello everyone!

I am a Newbee and still struggeling with color gradients.

I draw a bitmap (.png) as background which has lots of radial gradients (Example picture 1).

Unfortunately the Device Simulator shows the following Background (picture 2, please ignore the time stamp):

This is not what I was looking for :-).

What is the right way to implement color gradients in my Watch Face?

Thanks for helpful hints!

Birdy

0 5693709 over 3 years ago

which device is that? I'm only familiar with the Fenix 6, and it only supports a few levels of each RGB component, maybe 4 levels each, or 64 colors total. That's just a guess from playing around with it a bit, maybe someone else can confirm/deny that figure. My point is, your device is probably not capable of displaying the gradual shades in your gradient file.

0 jim_m_58 over 3 years ago in reply to 5693709

Yes, 64 colors.

Here you can see what's available on all the devices. https://developer.garmin.com/connect-iq/compatible-devices/

0 Birdy over 3 years ago in reply to 5693709

I have the vivoactive 4S model.

But there must be a better way to come close to shaping. In the Connect IQ store are some Watch faces which look way better with Color Grading / shaping - even on my vivoactive 4S.

0 jim_m_58 over 3 years ago in reply to Birdy

That's a 64 color MIP device,

0 FlowState over 3 years ago

Do you have the dithering attribute of your bitmap set to "none"?

e.g. Do you have something like this:

<layout id="MainLayout">
<bitmap id="id_monkey" x="center" y="center" filename="../drawables/bg.png" dithering="none" />
</layout>

I tried that and I get similar results to you:

If I remove dithering="none", it works a bit better (as Floyd-Steinberg dithering is applied by default):

<layout id="MainLayout">
<bitmap id="id_monkey" x="center" y="center" filename="../drawables/bg.png" />
</layout>

Note that this will may look a bit better on a real device (although the dithering will still be noticeable under direct sunlight.)

0 Jacquers over 1 year ago

Try using a svg, it might work better than a png.

0 flocsy🤠 over 1 year ago in reply to Jacquers

do you have gradient colors in svg?