• Replies 7 replies
  • Subscribers 18 subscribers
  • Views 480 views
  • Users 0 members are here
Options
Related

Change color to an svg bitmap

Simone85
2 months ago

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!

  • 2 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

  • 2 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.

  • 2 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!

  • 2 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,
    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?

  • 2 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)