Что нужно знать разработчикам о Pebble Time Round

 Layer *window_layer = window_get_root_layer(s_window); GRect bounds = layer_get_bounds(window_layer); 

 Layer *layer = layer_create(GRect(0, 0, 144, 168)); 

 GRect bounds = layer_get_bounds(parent_layer); Layer *layer = layer_create(bounds); 

Вот пример того, как это будет выглядеть в коде:

 graphics_draw_arc(ctx, inset_bounds, GOvalScaleModeFillCircle, start_angle, end_angle); 

Рисование закрашенного круга

graphics_fill_radial() — Заполняет круг по часовой стрелке между двумя углами. Вы можете настроить его внутренний радиус вставки, чтобы создавать формы пончик тоже. Это выгодно для более старой функции graphics_fill_circle() по тем же причинам, что и функция дуги, описанная выше, но также из-за возможности рисовать формы в виде пончиков.

Вот пример этого в действии из Pebble’s Time Dots » пример:

 int minute_angle = get_angle_for_minute(s_minutes); GRect frame = grect_inset(bounds, GEdgeInsets(10)); graphics_context_set_fill_color(ctx, MINUTES_COLOR); graphics_fill_radial(ctx, frame, GOvalScaleModeFitCircle, 20, 0, DEG_TO_TRIGANGLE(minute_angle)); 

Вы можете увидеть это в действии в приложении здесь:

Размещение элементов вокруг круга

gpoint_from_polar() — возвращает gpoint_from_polar() в пределах указанного угла внутри GRect . В основном, предоставляет одну точку на круге, а не полный круг. Отлично подходит для размещения элементов на одинаковом расстоянии вокруг центральной точки. Например, вот как ряд точек, представляющих 12 часов, включается в приведенный выше пример «Точек времени»:

 for (int i = 0; i Pretty handy! 
  Улучшите ваш интерфейс для каждой платформы 
  Тот факт, что дизайн имеет круглую форму, не означает, что все ваши проекты приложений Pebble должны быть круглыми с этого момента.  На самом деле может быть более выгодно адаптировать и настроить ваш дизайн для различных форм-факторов.  Перенос ваших существующих приложений с прямоугольных платформ может действительно выиграть от перемешивания элементов.  Отличным примером является приложение CalTrain от Katharine Berry, которое очень хорошо настраивает интерфейс для круглого экрана: 

  Изображение предоставлено Pebble 

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

  Изображение предоставлено Кэтрин из Pebble 

  Не определите платформу 
  Следующие способы определения платформы, на которой работает ваше приложение, плохие: 

• PBL_PLATFORM_APLITE
• PBL_PLATFORM_BASALT
• PBL_PLATFORM_CHALK

Вместо этого используйте:

• PBL_COLOR
• PBL_BW
• PBL_ROUND
• PBL_RECT

Доступны новые макросы

Хотите определить, является ли система круглой или прямоугольной? Вы можете сделать PBL_IF_ROUND_ELSE и PBL_IF_RECT_ELSE .

Как насчет определения, есть ли у нас цветная платформа или черно-белая? Вы можете использовать PBL_IF_COLOR_ELSE и PBL_IF_BW_ELSE .

Настройка ресурсов, специфичных для платформы

Можно настроить ресурсы, специфичные для платформы, для различных возможностей каждого устройства, пометив их тегами. Параметры тега включают в себя:

• rect — прямоугольные устройства
• round — круглые устройства
• bw — черно-белые устройства
• color — цвет устройства
• aplite — нацелен на платформу PBL_PLATFORM_APLITE (по возможности PBL_PLATFORM_APLITE как PBL_PLATFORM_APLITE )
• basalt — предназначается для базальтовой платформы (избегайте также)
• chalk — нацеливается на меловую платформу (тоже избегайте)

Вы можете использовать их в именах файлов и включать несколько тегов, например, grumpy-cat~bw.png grumpy-cat~color.png , grumpy-cat~color.png , grumpy-cat~color.png grumpy-cat~color~rect.png и grumpy-cat~color~rect.png grumpy-cat~color~round.png .

Эти теги не нужно указывать в файле appinfo.json , вы можете просто определить одно изображение следующим образом:

[code language = «js»]
«Ресурсы»: {
«СМИ»: [
{
«type»: «png»,
«имя»: «GRUMPY_CAT»,
«файл»: «images / grumpy-cat.png»
}
]
}

Если вы хотите определить изображение исключительно для одной платформы, вы можете сделать это и в appinfo.json без тегов:

 "resources": { "media": [ { "type": "png", "name": "GRUMPY_CAT", "file": "images/grumpy-cat.png", "targetPlatforms": [ "chalk" ] } ] } 

Минимизировать границы

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

Двухпиксельная маржа

Сам край экрана Pebble Time Round имеет двухпиксельное поле, которое будет слегка перекрываться лицевой панелью часов:

• Избегайте текстовых или визуальных подсказок в этом пространстве.
• Убедитесь, что цвета фона полностью соответствуют вашим приложениям.
• Старайтесь не использовать очень тонкие рамки вокруг дисплея, поскольку Пеббл отмечает, что «производственные отклонения могут привести к тому, что они будут заметно смещены».

меню

Меню, использующие компонент MenuLayer, будут работать по-разному в Pebble Time Round. Из-за того, что у нас есть меньше места сверху и снизу нашего дисплея, меню будут автоматически центрироваться вертикально на выбранной в данный момент опции.

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

Если вы один из тех творческих разработчиков, которые создали свою собственную систему меню, вам нужно помнить об этом. Функции menu_layer_set_center_focused() и menu_layer_is_index_selected() будут полезны!

Прокрутка текста — это плохо

Попытка прокрутить текст и переформатировать его вокруг круглого пространства выглядит грязной. Pebble рекомендует разбивать эту информацию на страницы, чтобы щелкнуть «индикатор», чтобы увидеть больше текста, который еще не виден на экране.

В SDK Pebble есть компонент ContentIndicator котором вы можете прочитать больше в разделе своих документов об отображении большего количества контента в круглых приложениях .

3D-чертежи еще не выпущены

Трехмерные рисунки Pebble Time Round еще не выпущены, но они были запрошены и, безусловно, должны появиться достаточно скоро. Все рисунки для остальных находятся здесь на их Github для 3D-рисунков .

Нужно вдохновение?

Я заметил несколько приложений в разработке для Pebble Time Round. Caltrain, который я показал ранее, мой любимый до сих пор! Другой, которого я видел от одного из разработчиков Pebble по имени robisodd, — это довольно аккуратный циферблат для игры в дартс:

Этот увеличенный циферблат часов от Grégoire Sage великолепен на Pebble Time Round:

Еще одним фантастическим циферблатом является циферблат Le Fauve «Phase of Moon», который наклоняется в зависимости от вашего местоположения:

Одно из примеров приложений Pebble под названием «Concentricity» также выглядит довольно аккуратно:

Вывод

Новое устройство открыло некоторые интересные новые проблемы дизайна и возможности. Надеюсь, эта статья поможет вам в вашем первом приложении Pebble Time Round! Отправляйся туда и попробуй новые функции в эмуляторе CloudPebble!

Если вы создаете какие-нибудь классные приложения Pebble Time Round, пожалуйста, поделитесь ими в комментариях или свяжитесь со мной в Twitter ( @thatpatrickguy ). Я стремлюсь увидеть, где разработчики принимают новый форм-фактор.

У меня есть набор кураторских ссылок по разработке Pebble (включая ссылки, специфичные для Pebble Time Round) для тех, кто ищет краткий справочник. Перейдите в Dev Diner и ознакомьтесь с моим Руководством для разработчиков Dev Diner Pebble , полным ссылочными ссылками, использованными в этой статье, другими замечательными статьями SitePoint и многим другим. Если у вас есть другие замечательные ресурсы, которых у меня нет в списке, пожалуйста, дайте мне знать!