Colorize Bitmap

hi everyone,

sorry if my question is obvious but I am just starting learning using Bitmap.

I have a png picture with a white rectangle with black border (and the remaining part is transparent)

I import it using

 dc.drawBitmap2(gHW,gHW, Img, {:transform => transform,:tintColor => Color,:filterMode => 1 });

with tintColor I can paint the white part with the color I need which is great (is there any color limitation?)

My question is, is it possible to colorize the black part?

my xml is:

<bitmap id="MHA1" filename="MhA1.png" packingFormat="png" />

I know I could draw 2 different picture but I wonder if I could do it using 1 dawing in order to save ressources since my img is wide (anologic hand).

Top Replies

FlowState 3 months ago +1 verified

Try creating a buffered bitmap from your bitmap resource, getting the existing palette and setting a new palette (replace white and black with whatever colors you want, as necessary). It would probably…
FlowState 3 months ago in reply to Shent-Aurkhan (SHN) +1 verified

Shent-Aurkhan (SHN) said:
If I don't use BufferedBitmap, Do I have to specify a palette on my bitmap to save resources also?

Considering that your image only uses 3 colors (black, white and transparent…

All Replies

+1 FlowState 3 months ago

Try creating a buffered bitmap from your bitmap resource, getting the existing palette and setting a new palette (replace white and black with whatever colors you want, as necessary). It would probably be helpful to set a palette on the resource as well, in order to save memory (and to facilitate setting a new palette *)

[https://developer.garmin.com/connect-iq/core-topics/graphics/#bufferedbitmaps]

[https://developer.garmin.com/connect-iq/api-docs/Toybox/Graphics/BufferedBitmap.html#getPalette-instance_function]

[https://developer.garmin.com/connect-iq/api-docs/Toybox/Graphics/BufferedBitmap.html#setPalette-instance_function]

(* the documentation for BufferedBitmap.getPalette() says that null will be returned if the "system palette" is used. I'm not sure if this will happen if a resource is imported without a palette, but if it does happen, it's unclear whether you can override the system palette with setPalette(), or exactly how that would work, since you wouldn't have the original palette to work with.)

0 Shent-Aurkhan (SHN) 3 months ago in reply to FlowState

many thanks for this great and accurate answer, so far BufferedBitmap looks quite "complicated" for me but I will have a look at it!

If I don't use BufferedBitmap, Do I have to specify a palette on my bitmap to save resources also?

+1 FlowState 3 months ago in reply to Shent-Aurkhan (SHN)

Shent-Aurkhan (SHN) said:
If I don't use BufferedBitmap, Do I have to specify a palette on my bitmap to save resources also?

Considering that your image only uses 3 colors (black, white and transparent), it probably wouldn't hurt.

Shent-Aurkhan (SHN) said:
many thanks for this great and accurate answer, so far BufferedBitmap looks quite "complicated" for me but I will have a look at it!

No worries! To be clear, I haven't tried this myself, so let me know how it goes.

The sample code in this bug report may be useful:

https://forums.garmin.com/developer/connect-iq/i/bug-reports/bufferedbitmap-palette-changes-bitmap-palette-order-depending-on-how-you-load-an-image

And this comment is relevant:

[https://forums.garmin.com/developer/connect-iq/f/discussion/6697/re-mapping-colours-on-a-bitmap-to-specific-values-using-pallete/44880#44880]

0 Shent-Aurkhan (SHN) 3 months ago in reply to FlowState

many thanks! I will let you know!

0 Shent-Aurkhan (SHN) 3 months ago

hi,

so I did few attempt but never had it to work...

everytime I try to do:Sys.println(offscreenBuffer.getPalette());

it always returns null, so when I try to set palette

offscreenBuffer.setPalette([0xFF0000,0x00FF00,0x0000FF]);

it crashes with: New palette size does not match the existing palette

so I declare my bmp like this:

<bitmap id="MHB1" filename="MhandB1.png" packingFormat="png" >
        <palette>
            <color>FFFFFF</color>
            <color>555555</color>
            <color>000000</color>
        </palette>
    </bitmap>

and do this in my onUpdate() (I try only for sys4 devices)

var img = Ui.loadResource(Rez.Drawables.MHB1);
    var offscreenBuffer = Gfx.createBufferedBitmap({

                :width=>img.getWidth(),
                :height=>img.getHeight(),
                :bitmapResource=>img,
                :palette=> [
                    0xFFFFFF,
                    0x555555,
                    0x000000
                ]
            });
            offscreenBuffer=offscreenBuffer.get();
            Sys.println(offscreenBuffer.getPalette()); //Returns null
            offscreenBuffer.setPalette([0xFF0000,0x00FF00,0x0000FF]); //Crash
            dc.drawBitmap(50, 50, offscreenBuffer); //shows up on display

for information, my img has transparent color as well

0 FlowState 3 months ago in reply to Shent-Aurkhan (SHN)

Try creating the buffered bitmap without loading the image, and drawing the image onto it, as in this comment:

https://forums.garmin.com/developer/connect-iq/i/bug-reports/bufferedbitmap-palette-changes-bitmap-palette-order-depending-on-how-you-load-an-image

Use Graphics.COLOR_TRANSPARENT (-1) for the transparent color in the palette.

0 Shent-Aurkhan (SHN) 3 months ago in reply to FlowState

oh yes sorry, I haven't noticed this diff between the 2 scenario... I will try it as soon as I can. Many thanks again