How do I Custom colors?

How do I use custom colors? I mean if the device can render a color in a png/bitmap that color should be possible to use with drawing rectangles, polygons etc?


Thanks

If you want to draw in code using dc, you do it like this:

dc.setColor(Gfx.COLOR_BLUE, Gfx.COLOR_BLACK); //foreground, background
dc.drawRectangle(...);

If you want to draw in code using dc, you do it like this:

dc.setColor(Gfx.COLOR_BLUE, Gfx.COLOR_BLACK); //foreground, background
dc.drawRectangle(...);

I know, thanks for the reply.

But i don't want to use Gfx.COLOR_BLUE i want to use 0x35b6b4 which obviously gets rendered correctly if i put it in a PNG image so theoretically it should be possible to draw with it as well

I know, thanks for the reply.

But i don't want to use Gfx.COLOR_BLUE i want to use 0x35b6b4 which obviously gets rendered correctly if i put it in a PNG image so theoretically it should be possible to draw with it as well

No problem, your post wasn't very clear, but now it is :D
I am not sure you can do that. The difference with png and drawing at runtime is that the compiler performs the necessary dithering for a png.
Dithering does not happen at runtime.

Just what I am thinking, but I might be wrong.

No problem, your post wasn't very clear, but now it is :D
I am not sure you can do that. The difference with png and drawing at runtime is that the compiler performs the necessary dithering for a png.
Dithering does not happen at runtime.

Just what I am thinking, but I might be wrong.

Okay cool but feels like it should be possible, theoretically, to pre compile a palette for drawing then.

According to the programmer guide, you can define palette for bitmap.

<resources>
<bitmap id="bitmap_id" filename="path/for/image">
<palette disableTransparency="false">
<color>FF0000</color>
<color>FFFFFF</color>
<color>0000FF</color>
</palette>
</bitmap>
</resources>

I am wondering if one could do the same for a drawable? But you do not want that anyway, you want to draw with dc, right?

According to the programmer guide, you can define palette for bitmap.

<resources>
<bitmap id="bitmap_id" filename="path/for/image">
<palette disableTransparency="false">
<color>FF0000</color>
<color>FFFFFF</color>
<color>0000FF</color>
</palette>
</bitmap>
</resources>

I am wondering if one could do the same for a drawable? But you do not want that anyway, you want to draw with dc, right?

Yes exactly.

Something like this:

<drawable-list id="foo" x="55" y="0" foreground="0x35b6b4">
<shape type="polygon" points="[[0,0], [0,200], [100,200], [100,0], [50,100]]" />
</drawable-list>

The benefit of drawing for me is that its easier to generate graphics with different sizes and positions depending on the model.

var centerX = dc.getWidth() / 2;
// Set the background color then call to clear the screen
dc.setColor(Gfx.COLOR_TRANSPARENT, App.getApp().getProperty("BackgroundColor"));
dc.clear();
// Paint the logo
dc.setColor(CUSTOM COLOR HERE, Gfx.COLOR_TRANSPARENT);
dc.fillPolygon([[centerX-50,0], [centerX-50,200], [centerX+50,200], [centerX+50,0], [centerX,70]]);

But I guess there is an easy way to define different layouts for different devices and then I could use different sizes of the bitmap instead?

The benefit of drawing for me is that its easier to generate graphics with different sizes and positions depending on the model.

But I guess there is an easy way to define different layouts for different devices and then I could use different sizes of the bitmap instead?

You can have drawables/bitmaps and fonts per device.
You are absolutely right.

Just put the bitmap in the resource folder for each specific device.

And remember, most often the bitmap route is cheaper than the drawing route, depends on the complexity of the graphics.

You can have drawables/bitmaps and fonts per device.
You are absolutely right.

Just put the bitmap in the resource folder for each specific device.

And remember, most often the bitmap route is cheaper than the drawing route, depends on the complexity of the graphics.

In my case its just this polygon which was quite easy for me to figure out, lol.
Im having much more trouble on how to target layouts on different watch models.

If you check the API documentation you'll find that the color constants just map to hex color values. The dc.setColor() function just requires you to pass in an integer value for the colors. You can pass in any value you want but not all devices support all colors. The color constants defined in Toybox.Graphics are a group of colors that are guaranteed to be defined on all devices.

In the case of bitmaps you can define the colors to use when compiling the image but if a color you define is not supported it will be mapped to the closest supported color when compiling the image. You can find a list of the colors each devices supports in the devics.xml file in the bin directory of the SDK.

If you check the API documentation you'll find that the color constants just map to hex color values. The dc.setColor() function just requires you to pass in an integer value for the colors. You can pass in any value you want but not all devices support all colors. The color constants defined in Toybox.Graphics are a group of colors that are guaranteed to be defined on all devices.

In the case of bitmaps you can define the colors to use when compiling the image but if a color you define is not supported it will be mapped to the closest supported color when compiling the image. You can find a list of the colors each devices supports in the devics.xml file in the bin directory of the SDK.

Cool! Thanks for the detailed explanation! How do I convert hex color format to int?