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.

Former Member over 10 years ago

Short answer:
You will want to have different colored bitmaps.

Long answer:
I would need to see the image to say for sure why it is getting mangled, but it is most likely because the palette is not working the way you may be expecting. The system doesn't support applying a palette to an image at run time. The xml you snipped above is specifying the palette that is allowed when encoding the image. Since you have only specified one color, every pixel that is not transparent will map to that color. If your source image uses any aliasing, all the aliased pixels will appear red, and will probably distort the outline. (If you include more than one color in a palette, each pixel will be mapped to the nearest color in the palette.) If you want to draw your image with just one color, this is a good way to specify it, but you will want to make sure your source image is not aliased.

ruperthawkes over 10 years ago

Thanks, the short answer seems to be the way to go. Where is COLOR_DK_GRAY defined?

ruperthawkes over 10 years ago

The image is fine if I don't color it, i.e. it's just white. Trouble now is when I colour the image in photoshop to say dark green, the image isn't managed like before but does look speckled. Any ideas? Ta

hawken over 10 years ago

It sounds like the image is being dithered, maybe because the color you are using doesn't match the colors available on the device.

travis.vitek over 10 years ago

The speckling is called 'dithering'. There is an attribute that you can use to disable dithering entirely. If you use a color palette containing only the colors provided by the device, and disable dithering, you should see the same thing on the device as you see in photoshop.

Additionally, if you have an image that is made up of just two colors (white and black), you can create a font file from that. Then you can render it in any color that the device supports. The white areas of the font data become the foreground color, and the black areas become the background color. I can post an example if you'd like.

Travis

ruperthawkes over 10 years ago

AH!!! Dithering was the culprit. Thank you!!

ruperthawkes over 10 years ago

Here's a sneak preview. This shows the tones on, the vibrate off and sleep mode on. Plus a couple of minor cosmetic improvements.

Its a GREAT shame the tones and vibrate functions are BROKEN in the current version of connectiq :-(

travis.vitek over 10 years ago

I implemented _exactly_ the same thing this weekend using a 24px font. The battery display, the tones, vibrate, and an alarm indicator all in a font.

ruperthawkes over 10 years ago

Shame the tones, vibrate and alarm indicators aren't working though. Out of interest why did you do it via a font as opposed to bitmaps? Ta.

And how do you detect if an alarm is set? and triggered?

travis.vitek over 10 years ago

They work in the simulator, which is enough for me. I use a font because I only want to draw my images in a single color and I can easily group them together... The string "AVT1" displays the alarm, vibrate, and tone indicators, followed by a 10% battery indicator.

The API doesn't expose the alarm functionality, so I choose to display the icon or not based on a random value.