How should i prepare png/svg for watch face to not look them blurred?

Hi everyone,

I have tried to use different ways to upload image to the watch face, but it always looks blurry and pixeled, even if upload SVG.

Or if i upload png - drawn by me in 32px x 32px.

Is there a special way how i should prepare those images or how I should import them? I am mostly confused by svg, which should be really pixel perfect on any device...

//mainView.mc

var stepsView = View.findDrawableById("StepsIconLabel");

//layout.xml

Here is is image:

https://www.linkpicture.com/q/steps.svg

jim_m_58 over 1 year ago

Are you looking at this in the sim or on a real device? For something like this, it's best to look on a real device, as 32x32 will be larger in the sim and probably wont look as good.

9081764 over 1 year ago in reply to jim_m_58

I tried on both and still looks ugly, i also tried with a bigger images, and still make it blurred

jim_m_58 over 1 year ago in reply to 9081764

What device? What if you use a very basic pallet?

asmd over 1 year ago

I had similar problems with some of my watchfaces. The problem is, that the devices have some native colors, usually 64 and they can show these colors fine. But if you use a color, that is not exactly one of the native colors, the device tries to interpolate the color and this brings sometimes bad results.

You could try to change the color of your picture to one of the native colors of the device. Which is in your opinion close to the original color and then the watch will show it perfectly.

Here is a list of all native colors of the different devices:

https://developer.garmin.com/connect-iq/reference-guides/devices-reference/

jim_m_58 over 1 year ago in reply to asmd

MIP devices top out at 64, but can be as few as 2. (black and white on the Instinct 2 for example)

9081764 over 1 year ago in reply to asmd

No it's not the colors issue, i now tried with the 'native' one and still looks off.

My device is Venu 2s, i also tried to upadate it via bit map:

var steps = WatchUi.loadResource($.Rez.Drawables.StepsIcon) as BitmapResource;

var bitmapWidth = steps.getWidth();

var spacing = 2;

var bitmapX = (dc.getWidth() - (bitmapWidth + spacing )) / 2;

var bitmapY = (dc.getHeight() - steps.getHeight()) / 2;

dc.drawBitmap(bitmapX, bitmapY, steps);

and still looks bad ( even tho is svg :C)

trudelta over 1 year ago

It may be related to how the compiler processes SVG images. I've never used SVG for Garmin apps, always PNG. Try PNG?