Coloring Pebble

Three days ago, a new Pebble Time watch with a color display was announced. And yesterday a new version of the SDK became available, which allows you to create applications compatible with both the old and the new version of the clock. In this article I want to tell how to color the old black and white application on the example of my Ecliptic dial.

Older applications are fully compatible with Pebble Time, largely due to the fact that the screen resolution has not changed. So if you are comfortable with vintage black and white style, then you can do nothing. It also became interesting to me and I reached into CloudPebble to figure out what changed there.

A choice of SDK version appeared in the project settings:
')


I chose SDK 3 (Pebble Time). After that, two checkboxes appeared - BUILD APLITE and BUILD BASALT.



The old Pebble / Pebble Steel platform was named Aplite ( aplite ), the new Pebble Time - Basalt ( basalt ). It seems that here Pebble decided to take an example from Ubuntu - to give the versions names in alphabetical order, only instead of animals to use the names of rocks (the word “pebble”, if anyone does not know, means “cobble”). I left both options to maintain compatibility with the old platform. Having saved the changes, I launched the build - the project was assembled for both platforms without errors.



It is interesting that the assembly under Basalt began to weigh more - apparently my black and white pictures were saved to resources as color.

When the emulator was activated, two buttons became available - INSTALL ON APLITE and INSTALL ON BASALT.



I clicked the second one and saw that my watchface was working successfully in the Pebble Time emulator.



Then I decided that you can press the middle button in the emulator and see the new Pebble Time menu, but I was disappointed. Unlike the old version where it was possible to climb through the menu, the new one shows a stub. Well at least the background is colored - it is clear that this is a new emulator.



Now you can start coloring. This will be useful article 3.0 MIGRATION GUIDE and tool COLOR PICKER , a screenshot of which is given at the beginning of the article. For example, in my project there is a code that draws the sun.

graphics_context_set_fill_color(ctx, GColorWhite); graphics_fill_circle(ctx, GPoint(72, 18), 10); graphics_context_set_stroke_color(ctx, GColorBlack); graphics_draw_circle(ctx, GPoint(72, 18), 9); graphics_draw_pixel(ctx, GPoint(72, 18)); 

To repaint the Sun yellow on the Pebble Time watch and leave it white on previous models, we write the following:

 #ifdef PBL_COLOR graphics_context_set_fill_color(ctx, GColorYellow); #else graphics_context_set_fill_color(ctx, GColorWhite); #endif graphics_fill_circle(ctx, GPoint(72, 18), 10); graphics_context_set_stroke_color(ctx, GColorBlack); graphics_draw_circle(ctx, GPoint(72, 18), 9); graphics_draw_pixel(ctx, GPoint(72, 18)); 

We test the Aplite build in the emulator to make sure that everything is drawn as before. Then we try Basalt - the Sun is yellow there.



Similarly, I painted the moon and the planets, and played with the font color. Then I rewind time ahead to see Mars better:



Hmm, it seems the black and white version looked better :) Well, okay, as an example comes down. It is necessary to more thoughtfully approach the choice of colors. I tried to attach a screenshot to the render of new Pebble Time:



It seems to be looking good. What do you think?