Change color to an svg bitmap

Hi all,

I am trying to change color of an svg resource that I can successfully draw with dc.drawBitmap() function but I can't find a way to change its color.

Is that possible without using fonts? Unfortunately I do have a Mac (and no opportunity to have a Windows PC in my hand) and I have not found a solution to create a bmfont.

My drawables.xml has the following line:

<bitmap id="HeartIcon" filename="heart.svg" dithering="none" scaleX="7%" scaleY="7%">

And my component draws the bitmap in this way:

dc.drawBitmap(
0,
0,
WatchUi.loadResource(Rez.Drawables.HeartIcon)
);

That's working properly but calling dc.setColor() before those lines has no effect.

Any other ideas?

Thanks!

flocsy🤠 8 months ago

If you don't need to change the color dynamically, only at compile-time then you might be able to use a palette in the xml. This is used by many developers to include a monochrome icon that is black on white or white on black depending on the device's settings.

But I wasn't able to use this method for multi color images

mcinner1 8 months ago

Simone85 said:
Any other ideas?

Yes!
Draw the heart in onUpdate(dc) for your Edge device! It‘s just 2 filled circles and 1 polygone. And at runtime you can set the color with setColor() and size by adding a factor to the coordinates and radius.
And you get rid of all the REZ stuff.

Simone85 8 months ago in reply to flocsy🤠

My icon is monochrome so black when the device is in “day mode” and white when devise is in “black mode”. I have to change this in the onUpdate method… not sure if this is possible with palette…

if yes l, can you share an example? Thanks!

flocsy🤠 8 months ago in reply to Simone85

forums.garmin.com/.../how-can-i-use-a-2-color-svg-and-override-it-s-palette-depending-on-the-background-color

Simone85 8 months ago in reply to flocsy🤠

Thank you so much!

Simone85 8 months ago in reply to flocsy🤠

Ok, so I tried the BufferedBitmap approach. I defined my svg bitmap in drawables.xml then loaded properly with WatchUi.loadResource

Defined the buffered as below:

var _iconTestBuff = Graphics.createBufferedBitmap({

:width => (dc.getWidth() * 0.07) as Number,

:height => (dc.getHeight() * 0.07) as Number,

:palette => [_color],

:bitmapResource => _iconTest

});

_color is dynamically changed from BLACK to WHITE based on the light/dark mode.

Finally draw the bitmap with:

dc.drawBitmap(

10,

_iconTestBuff

);

Two problems here:

1) :width and :height are ignored and the resulting bitmap is huge!!
2) :palette does not work because the bitmap is rendered with black color (which is the one defined in the .svg file).

Any idea?

flocsy🤠 8 months ago in reply to Simone85

include your drawable.xml

If you only need 2 colors (b/w) then IMHO it's easier to make 2 drawables. You only need 1 image file that is transparent with 1 color, and including the palette in the xml you'll end up with 2 drawables, but you only load 1 of them according the background color. This works even with the oldest devices because the magic happens in compile time.

I would only go with the buffered bitmap if either you need more than 1 color or the color you need is not known at compile time (i.e user can edit settings and enter a hex color string)