How to colour bitmaps?

I have a white on transparent bitmap but want to shot it as red so in the resources I have

<bitmaps>
<bitmap id="id_moon" filename="images/moon.png">
<palette>
<color>FF0000</color>
</palette>
</bitmap>
</bitmaps>

Then loaded bitmap and tried to draw it in red...

dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_TRANSPARENT);
dc.drawBitmap(26,1,icn_moon);

It draws it in red but seem to mangle the bitmap. Any ideas why it's mangling it? Is it better just to have multiple coloured bitmaps?

Ta.

ruperthawkes over 10 years ago

I hope the alarm functionality will be exposed soon, plus all the other fixes...

baldman67 over 10 years ago

Hey Travis,

Could you please post the example you spoke of. It seems like a very efficient way to handle the icon displays.

Cheers,

Grant

travis.vitek over 10 years ago

Sure. Just so we all understand what I'm talking about, I use this trick to render the icons in the middle of the display shown here.

The process to do this is a little convoluted, so I'll give a quick overview...

Decide what icons you want to display and assign each icon an ASCII character. i.e., If you want to have a battery indicator with 10 states, you might use the characters '0'-'9'.
Use the font tool to generate a font file that contains mappings for the ASCII characters you need.
Open up the generated .png file and draw a grid such that each cell in the grid is big enough to contain your icons.
Open up the generated .fnt file and update the entries for each character to match the x, y, width, height of each of the cells you created in the previous step.
Draw your icons in each of the cells you created.

Now that you have your custom font file, you just need to put it into your project and update your code to use it. If you want to change the color, just use dc.setColor(). In case it helps anyone, here is a link to a stripped down version of the RibbonClock watch face.

Travis

teadriven over 10 years ago

The method described by Travis works well since you can easily draw icons in any colour this way. I used the same method for my watchface but took it a little further and actually included the icons in the same font file as the 7-segment font used for the clock since the .fnt format supports different sized glyphs pretty well.

Former Member over 10 years ago

Another trick you may like. Particularly useful for odd shapes, like the battery icon if you want it to fill the cap. Create an image with transparency, then fill in a layer beneath with a colored rectangle.