Прості цифрові Watchface для Pebble і дуже простий приклад їх розробки в cloud pebble



Зліва направо Watchface: TTD 2, DW 2 LCD, DW 2 Classic

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


Це Watchface ProTime для Pebble на Canvas: посилання

У підсумку, я ділюся нативними інтерфейсами з Вами і крім того, в даній статті розпишу детально, з прикладами, як потрібно створювати прості, але красиві годинник зі своїми шрифтами і картинками для Pebble у браузері. При цьому особливими володіти навичками програмування не потрібно. А створений інтерфейс можна буде використовувати як самому, так і завантажити в магазин додатків Pebble App Store: apps.getpebble.com

Заходимо в cloudpebble.net і бачимо сторінку розробки. Натискаємо кнопку створити "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

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


У Вас з'явиться праворуч посилання на сторінку програми знизу від слів"Public Web Link".

Посилання з готовими інтерфейсами і додатками на моїй сторінці в магазині Pebble: apps.getpebble.com/en_US/developer/54a4b8be31707613e60001aa/1 (запам'ятовуйте назва і по ньому знаходите через магазин додатків в Pebble)

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.