Простые цифровые часы Watchface для Pebble и очень простой пример их разработки в cloud pebble

Слева направо Watchface: TTD 2, DW 2 LCD, DW 2 Classic (ссылка на все эти часы в самом конце)

Для меня самыми лучшими интерфейсами Watchface для Pebble были цифровые часы сделанные под себя. Начал их делать в Canvas habrahabr.ru/post/248923 ^[1] (пример настройки и редактирования мега функционального Watchface для Canvas), но поняв, что лучше использовать независящий от чего либо Watchface, решил его написать сам. К тому же я уже наигрался с часами и мне надоели различные ненужные фишки, требовалось сделать максимально простой и удобный Watchface. А все необходимое я получаю на часы с помощью уведомлений: habrahabr.ru/post/256121 ^[2] (статья с обзором приложений со стандартными уведомлениями для Pebble)

Это Watchface ProTime для Pebble на Canvas: ссылка ^[3]

В итоге, я делюсь нативными интерфейсами с Вами и кроме того, в данной статье распишу подробно с примерами, как нужно создавать простые но красивые часы со своими шрифтами и картинками для Pebble в браузере. При этом особыми навыками программирования обладать не нужно. А созданный интерфейс можно будет использовать как самому, так и загрузить в магазин приложений Pebble App Store: apps.getpebble.com ^[4]

Заходим в cloudpebble.net ^[5] и видим страницу разработки. Нажимаем кнопку создать "CREATE", вводим название проекта и подтверждаем.

В этом проекте слева видим "SOURCE FILES" и правее кнопка "ADD NEW". Нажимаем на нее и заполняем как на скриншоте.

Далее добавляем шрифт и картинки в "RESOURCES" при нажатии кнопки "ADD NEW" в соответствии со скриншотами. Можно подгрузить шрифты, но название картинок и шрифтов должно быть таким как на скринах, чтобы в ресурсах в коде все подтягивалось. Если изменяете в коде, изменяйте и в названии ресурсов. У шрифта в названии также указывается цифрами размер.

Ниже приведу код который нужно скопировать в ресурс "simplicity.c":

#include "pebble.h"

//объявляем переменные
static Window *s_main_window;
static TextLayer *s_date_layer, *s_time_layer;
BitmapLayer *BT_Image;
GBitmap *BT, *BT_NO;
static TextLayer *s_battery_layer,*s_ampm_layer;

//функция для вывода батарейки только когда часы подключены к зарядке
static void handle_battery(BatteryChargeState charge_state) {
  static char battery_text[] = "100";

  if (charge_state.is_plugged) {
    snprintf(battery_text, sizeof(battery_text), "%d", charge_state.charge_percent);
  } else {
    snprintf(battery_text, sizeof(battery_text), " ");
  }
  text_layer_set_text(s_battery_layer, battery_text);
}

//функция для вывода статуса подключенного Bluetooth с выбором нужной картинки
static void handle_bluetooth(bool connected) {
  bitmap_layer_set_bitmap(BT_Image, connected ? BT : BT_NO);
}

//функция вывода времени и даты
static void handle_minute_tick(struct tm *tick_time, TimeUnits units_changed) {
  static char s_time_text[] = "00:00";
  static char s_date_text[] = "Xxx 00";
  
//код для вывода часов в 12-и часовом формате с отображением A- до полудня и P- после полудня
  int ampm = 0;
  if (!clock_is_24h_style()) {
        if ( (tick_time->tm_hour - 12) >= 0 ) {
            ampm = 1;
        } else {
            ampm = 0;
        };
        if (tick_time->tm_hour == 0) { tick_time->tm_hour = 12; };
        if (tick_time->tm_hour > 12) { tick_time->tm_hour -= 12;};
    }
  if (!clock_is_24h_style()) {
    if(ampm==1) {
      text_layer_set_text(s_ampm_layer, "P");
    }
    else { 
      text_layer_set_text(s_ampm_layer, "A");
    }
  };

//выводим дату
  strftime(s_date_text, sizeof(s_date_text), "%a %e", tick_time);
  text_layer_set_text(s_date_layer, s_date_text);

//выводим время
  char *time_format = clock_is_24h_style() ? "%R" : "%I:%M";
  strftime(s_time_text, sizeof(s_time_text), time_format, tick_time);
  text_layer_set_text(s_time_layer, s_time_text);
}

//функция отображения слоя на котором все отображается
static void main_window_load(Window *window) {
  Layer *window_layer = window_get_root_layer(window);

//подтягиваем шрифты из ресурсов
  GFont custom_font_time = fonts_load_custom_font(resource_get_handle(RESOURCE_ID_FONT_DIGI_120));
  GFont custom_font_date = fonts_load_custom_font(resource_get_handle(RESOURCE_ID_FONT_DATE_20));
  GFont custom_font_ampm = fonts_load_custom_font(resource_get_handle(RESOURCE_ID_FONT_AMPM_20));
  GRect bounds = layer_get_bounds(window_layer);
  
//добавляем на слой батарейку в определенном месте
  s_battery_layer = text_layer_create(GRect(bounds.origin.x+1, 0, bounds.size.w, bounds.size.h));
  text_layer_set_text_alignment(s_battery_layer, GTextAlignmentCenter);
  text_layer_set_text_color(s_battery_layer, GColorWhite);
  text_layer_set_background_color(s_battery_layer, GColorClear);
  text_layer_set_font(s_battery_layer, fonts_get_system_font(FONT_KEY_GOTHIC_28));
  text_layer_set_text(s_battery_layer, " ");
  
//добавляем на слой Bluetooth в определенном месте
//PBL_IF_ROUND_ELSE(Если ДА, Если НЕТ) - функция определяющая круглый ли дисплей и выполняющая заданное.
  BT_Image = bitmap_layer_create(GRect(PBL_IF_ROUND_ELSE(80,62), PBL_IF_ROUND_ELSE(78,73), 20, 20));
  bitmap_layer_set_alignment(BT_Image, GAlignCenter);
  BT = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_BT_20);
  BT_NO = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_BT_NO_20);
  handle_bluetooth(connection_service_peek_pebble_app_connection());
  
//добавляем на слой символ A или P, если выбран 12-и часовой формат в определенном месте
  s_ampm_layer = text_layer_create(GRect(PBL_IF_ROUND_ELSE(1,1), PBL_IF_ROUND_ELSE(110,105), bounds.size.w, bounds.size.h));
  text_layer_set_text_alignment(s_ampm_layer, GTextAlignmentCenter);
  text_layer_set_text_color(s_ampm_layer, GColorWhite);
  text_layer_set_background_color(s_ampm_layer, GColorClear);
  text_layer_set_font(s_ampm_layer, custom_font_ampm);
  layer_add_child(window_layer, text_layer_get_layer(s_ampm_layer));
 
//добавляем на слой время в определенном месте
  s_time_layer = text_layer_create(GRect(bounds.origin.x, PBL_IF_ROUND_ELSE(10,5), bounds.size.w, bounds.size.h));
  text_layer_set_text_alignment(s_time_layer, GTextAlignmentCenter);
  text_layer_set_text_color(s_time_layer, GColorWhite);
  text_layer_set_background_color(s_time_layer, GColorClear);
  text_layer_set_font(s_time_layer, custom_font_time);
  
//добавляем на слой дату в определенном месте
  s_date_layer = text_layer_create(GRect(bounds.origin.x, 144, bounds.size.w, bounds.size.h));
  text_layer_set_text_alignment(s_date_layer, GTextAlignmentCenter);
  text_layer_set_text_color(s_date_layer, GColorWhite);
  text_layer_set_background_color(s_date_layer, GColorClear);
  text_layer_set_font(s_date_layer, custom_font_date);
  
//обновляем сервисы
  battery_state_service_subscribe(handle_battery);
  connection_service_subscribe((ConnectionHandlers) {
    .pebble_app_connection_handler = handle_bluetooth
  });
 
//выводим на экран все слои
  layer_add_child(window_layer, text_layer_get_layer(s_battery_layer));
  layer_add_child(window_layer, bitmap_layer_get_layer(BT_Image));
  layer_add_child(window_layer, text_layer_get_layer(s_time_layer));  
  layer_add_child(window_layer, text_layer_get_layer(s_date_layer));
}

//уничтожаем все что создали
static void main_window_unload(Window *window) {
  tick_timer_service_unsubscribe();
  battery_state_service_unsubscribe();
  connection_service_unsubscribe();
  text_layer_destroy(s_date_layer);
  text_layer_destroy(s_time_layer);
  text_layer_destroy(s_ampm_layer);
  text_layer_destroy(s_battery_layer);
  bitmap_layer_destroy(BT_Image);
}

//все что ниже просто переписываем
static void init() {
  s_main_window = window_create();
  window_set_background_color(s_main_window, GColorBlack);
  window_set_window_handlers(s_main_window, (WindowHandlers) {
    .load = main_window_load,
    .unload = main_window_unload,
  });
  window_stack_push(s_main_window, true);
  
  setlocale(LC_ALL, "");
  
  tick_timer_service_subscribe(MINUTE_UNIT, handle_minute_tick);
  
  time_t now = time(NULL);
  struct tm *t = localtime(&now);
  handle_minute_tick(t, MINUTE_UNIT);
}

static void deinit() {
  window_destroy(s_main_window);
  tick_timer_service_unsubscribe();
}

int main() {
  init();
  app_event_loop();
  deinit();
}

Компилируем на кнопку стрелки

Переходим в раздел "COMPILATION" и забираем наш интерфейс на кнопку "GET PBW".

Этот файл открываем на устройстве и устанавливаем на часы, либо загружаем в магазин приложений dev-portal.getpebble.com/developer ^[6]

Для добавления в магазине приложений, нужно слева нажать на ссылку "Add a Watchface". Вписать название и нажать кнопку создать. Далее нажать на ссылку "Asset Collections management page" и добавить скриншоты с описанием для всех версий часов. Потом вернуться на страницу часов и справа нажать кнопку "Add a release" и добавить файл. После сохранения обновите страницу и нажмите кнопку опубликовать "Publish".

У Вас появится справа ссылка на страницу приложения снизу от слов"Public Web Link".

Ссылка с готовыми интерфейсами и приложениями на моей странице в магазине Pebble: apps.getpebble.com/en_US/developer/54a4b8be31707613e60001aa/1 ^[7] (запоминайте название и по нему находите через магазин приложений в Pebble)

Автор: vshishakin

Источник ^[8]