Как добавить изображения в ваши Pebble Watchfaces

В то время как мы можем использовать векторную графику, такую ​​как линии и фигуры, в виде циферблата Pebble, иногда изображения необходимы для обеспечения более высокого уровня детализации. Изображения могут обеспечить хороший фон, который не занимает много часов точного кодирования и довольно легко обновляется. В этой статье мы рассмотрим несколько простых способов подготовки изображений и включения их в приложения Pebble, которые работают на всех платформах — классические часы Pebble, Pebble Time и Pebble Time Round. В частности, мы сделаем фоновое изображение, которое охватывает ширину и высоту циферблата.

Что вам нужно

Чтобы просмотреть это руководство, вам понадобится следующее:

• CloudPebble — вам нужно войти здесь и протестировать свои изменения в Pebble Time Round, если вы собираете для всех трех платформ.
• Общие знания в области разработки приложений Pebble. Если вы новичок в разработке Pebble, прочитайте мое руководство для начинающих по Pebble Watch Development с использованием JavaScript, чтобы начать.
• Изображение размером не менее 180 × 180 — вам нужно аккуратно обрезать его до 180 × 180 и 144 × 168.
• Photoshop — это необходимо для настройки изображений в правильной палитре для Pebble Time Round. Тем не менее, если вас не слишком беспокоит время Pebble Time Round, вы можете использовать несколько других методов для подготовки ваших изображений, которые я расскажу здесь. (Вы также можете использовать GIMP или ImageMagick, однако я не буду описывать их в этой статье.)

Код

Весь код для этого доступен на GitHub . Это код, который я вычистил из циферблата, который я создал для музыканта-гика Мери Амбер (его можно установить здесь ). Я удалил все время хранения и другие компоненты, чтобы сосредоточиться на том, как работает переключение изображений.

Подготовка наших изображений

В наш век устройств разных типов Pebble существует множество платформ, которые мы стремимся поддерживать. Когда дело доходит до наших изображений, мы заботимся о трех возможных типах устройств:

• Классические часы Pebble and Pebble Steel с прямоугольными черно-белыми дисплеями — размер этого изображения должен составлять 144 x 168 .
• Часы Pebble Time с прямоугольными цветными дисплеями — этот размер изображения должен составлять 144 x 168 .
• Часы Pebble Time Round с круглыми цветными дисплеями — размер этого изображения должен составлять 180 x 180 .

Подготовка изображений для Aplite

Изображения Aplite только черно-белые, поэтому для их отображения нам необходимо преобразовать изображения таким образом, чтобы они выглядели узнаваемо по сравнению с оригиналом, несмотря на серьезное отсутствие цвета.

Онлайн конвертер изображений

Один из методов, который является довольно быстрым и простым, — использовать этот онлайн-конвертер изображений . Он работает как для изображений Aplite, так и для базальта.

Для начала загрузите свой файл. Затем для Aplite выберите цветовой режим «черно-белый», чтобы удалить все цвета с изображения. Это может быть все, что вам нужно, чтобы получить хороший результат, однако некоторые изображения работают лучше с различными вариантами сглаживания. Попробуйте изменить параметр дизеринга, чтобы увидеть, что лучше всего подходит для вашего изображения — это может отличаться для каждого стиля изображения, которое вы используете!

Вы можете прокрутить вниз и изменить яркость, контрастность и многое другое. Когда вы будете довольны тем, как выглядит ваше изображение, щелкните изображение в нижней части страницы, чтобы загрузить его на свой компьютер, готовое к использованию.

HyperDither

Другим вариантом для пользователей Mac OSX является бесплатное приложение под названием HyperDither . Он может довольно эффективно превращать цветные изображения в монохромные. Открыв его, он будет ждать от вас изображения:

Перетащите изображение в приложение:

 #include "pebble.h" static BitmapLayer *meri_image_layer; static GBitmap *meri_image; Window *window; static void window_load(Window *window) { Layer *window_layer = window_get_root_layer(window); GRect bounds = layer_get_bounds(window_layer); meri_image_layer = bitmap_layer_create(bounds); meri_image = gbitmap_create_with_resource(RESOURCE_ID_MERI); bitmap_layer_set_compositing_mode(meri_image_layer, GCompOpAssign); bitmap_layer_set_bitmap(meri_image_layer, meri_image); bitmap_layer_set_alignment(meri_image_layer, GAlignCenter); layer_add_child(window_layer, bitmap_layer_get_layer(meri_image_layer)); } static void window_unload(Window *window) { gbitmap_destroy(meri_image); bitmap_layer_destroy(meri_image_layer); } static void init(void) { window = window_create(); window_set_window_handlers(window, (WindowHandlers) { .load = window_load, .unload = window_unload, }); const bool animated = true; window_stack_push(window, animated); } static void deinit(void) { window_destroy(window); } int main(void) { init(); app_event_loop(); deinit(); } 

 static BitmapLayer *meri_image_layer; static GBitmap *meri_image; 

 meri_image_layer = bitmap_layer_create(bounds); 

 meri_image = gbitmap_create_with_resource(RESOURCE_ID_MERI); 

 bitmap_layer_set_compositing_mode(meri_image_layer, GCompOpAssign); 

 bitmap_layer_set_bitmap(meri_image_layer, meri_image); 

 bitmap_layer_set_alignment(meri_image_layer, GAlignCenter); 

 layer_add_child(window_layer, bitmap_layer_get_layer(meri_image_layer)); 

 static void window_unload(Window *window) { gbitmap_destroy(meri_image); bitmap_layer_destroy(meri_image_layer); }