Делаем циферблат с нуля для Amazfit GTR

Вступление 

Разработкой циферблатов я увлекся в июле 2020 года, когда приобрел себе первые смарт-часы Amazfit GTR 47mm Lite. Еще перед покупкой я знал, что можно кастомизировать этот гаджет и это было не маловажным фактором для приобретения именно этой модели.  

Основной источник информации по часам (да и не только) — это форум 4PDA.ru, на котором я «тусуюсь» с 2007 года :). Там же я посмотрел видео о том, как делать циферблаты и, естественно, нашел замечательный редактор AmazFit Watchface Editor от SashaCX75

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

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

Возможности часов и редактора

Внешний вид редактора

В этой статье я говорю о разработке циферблата для модели Amazfit GTR 47mm, но редактор может делать watchfaces и для Amazfit GTR 42мм, а также для Amazfit GTSAmazfit T-Rex и Amazfit Verge Lite. Так что если у вас именно такие часы — изучайте, различия только в размерах экрана. 

Фоновая картинкаПрежде чем создать «шедевр», нам очень важно понять, что могут делать наши часики, а что им недоступно, дабы в последствии не огорчаться от невозможности реализовать все свои замыслы.
И пойдем по порядку, так как это реализовано в редакторе. 

1. Фон (Background) 

В качестве фона мы можем установить картинку размером 454х454 пикселя, конечно, круглую формата PNG24. А также указать превью для часов размером до 266х266 пикселей. 

Превью циферблатаПочему «до»? Дело в том, что объем памяти у наших часиков — небольшой, максимум 2 мБ, для готового файла циферблата желательно максимум получить 1,95 мБ, чтобы, во-первых, часы справились с его отображением, а во-вторых, есть риск получить проблемы с работой самих часов. Так вот, фон, то есть непосредственно наш циферблат, и его превью занимают достаточно много места и многие фейсоделы очень часто делают превью максимально малых размеров вплоть до точки, ради возможности добавить более крупные элементы интерфейса.

Картинка превью показывается в часах когда вы переключаете циферблаты в часах. И если её не будет, то, ничего страшного, так как в наших часах только один пользовательский вариант. Просто отсутствие превью как-то не эстетично. Но если нам нужно улучшить интерфейс циферблата, то можно пожертвовать картинкой предосмотра.
При этом скажу честно, эксперименты со сжатием файлов и прозрачностью изображений толку не дают. Единственный способ уменьшить объем — это уменьшить число пикселей в картинке, ее фактический размер в пикселях. Поэтому режем, режем, режем… 

2. Время (Time) 

Обычный циферблат со всей доступной информациейВыводим время в числовом формате: часы, минуты, секунды. Выводить их можем по отдельности и в разных местах циферблата. Кроме этого можем выводить как в 24-часовом, так и в 12-часовом формате. Но при этом вы не сможете сделать цифры разрядов разного цвета и размера, не поддерживается такая фишка часами 

3. Дата (Date) 

Дату можем выводить как числами, так и выводом названий месяцев и дней недели. Всё это делается с помощью набора изображений цифр от 0 до 9 и комплектом картинок с названиями месяцев и дней недели.

4. Индикаторы даты (DaysProgress) 

Для тех кто делает имитацию реальных стрелочных часов, есть возможность сделать число дня, день недели или месяц в виде циферблата со стрелкой.

5. Прогресс шагов (StepsProgress) 

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

6. Активности (Activity) 

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

7. Статусы (Status) 

Вывод в виде иконок состояния ВКЛ/ВЫКЛ — bluetooth, будильника, блокировки экрана и режима DND (не беспокоить) в любом месте экрана.

8. Батарея (Battery) 

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

9. Аналоговые часы (AnalogClock) 

Всё очень просто — стрелки часов, минут и секунд. Только 12-часовой формат. Сделать бинарные или 24-часовой циферблат не получится  — часы не поддерживают. Не получится сделать отдельно и тени для стрелок. Зато центры вращения стрелок можно разместить в любом месте.

10. Погода (Weather) 

Вывод числовых значений для текущей, дневной и ночной температуры воздуха в любом месте экрана , а также самой погодной иконки (25 состояний).

11. Ярлыки (Shortcuts)

Появилась возможность для размещения зон активностей, тап по которой может открыть дополнительный экран часов (изменить их, увы, не получиться): Шаги, Пульс, Погода и Энергосбережение. Других нет… Не поддерживаются часами.

12. Анимация (Animation) — beta 

Есть возможность разместить небольшую анимационную картинку на экране, но помните про размер итогового файла.

Что нам необходимо для работы 

Редактор AmazFit Watchface Editor

Этот редактор нужен: 

  • а) для создания и редактирования файла настройки циферблата (*.json) 
  • б) для упаковки набора картинок (*.png) и файла настройки (*.json) в бинарный файл циферблата (*.bin), который можно залить на сайт или сразу в часы
  • в) для распаковки бинарного файла циферблата в набор картинок (*.png) с файлом настройки (*.json)
  • г) для конвертации циферблата одной модели часов в другой
Рекомендую установить редактор в корень диска. 
В наименовании пути только латинские символы и цифры без пробелов! Иначе столкнетесь с «непонятными» ошибками

Растровый графический редактор 

В этом редакторе вы будете готовить png-картинки для своего циферблата. Я использую старенький Photoshop CS62012 года, он прекрасно справляется с рисованием, перекраской и наложением эффектов.

Векторный графический редактор 

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

Делаем первый циферблат 

Сообщение с форума

Вот такую просьбу нашел на форуме и подумал — а почему бы и да? Решено — делаем КРУПНЫЙ циферблат 

Сначала — макет! 

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

  • Можно взять готовый циферблат и переделать его под себя, т.е. перекрасить и/или заменить некоторые графические элементы и их размещение на экране
  • Можно отрисовать циферблат с реальных часов
  • А можно придумать собственный дизайн циферблата — именно этот вариант и предпочитаю.

Макет можно делать на бумаге, но я делаю это в Photoshop. Сначала это макет, а затем он по мере работы превращается в мастер-форму

1. Запускаю Photoshopи создаю новый проект 454х454 точек с прозрачным фоном в RGB.
Новый проект

2. Создаю круг размером 453х453 черного цвета, прижимаю его в правый нижний угол и растрирую.
Шаблон циферблата

Почему я так делаю? Для точного указания центра вращения часовых стрелок необходимо указать координаты центрального пикселя. При четных размерах этого не сделать, поэтому я использую круг размерами на один пиксель меньше, чем экран. Для человеческого глаза это незаметно, а у меня стрелки будут точно в центре циферблата. Вот и весь секрет. 

3. А далее просто рисую всё что хочу видеть на циферблате. Каждый элемент именую, группирую, в общем делаю так, чтобы в дальнейшем  можно будет перекрашивать элементы, перемещать их по циферблату и так далее и тому подобное. Кто знает, что еще захочу делать на основе этого циферблата?
Готовый макетДа, получилось простенько, но основную задачу — крупный читаемый текст — он выполняет. Я планирую пустить вдоль края прогресс-бары шагов, заряда и пульса, а это мы будем делать в редакторе watchfaces 

Циферблат должен быть функциональным и красивым. А для этого нужно «играть» композицией, шрифтами и цветом.

Композицию можно брать с других образцов, со временем вы сможете составлять её и без подсказок. Смотрите сайты крупных часовых фирм, там всё-таки «матерые» дизайнеры работают — у них можно учиться смело. НапримерTissot или Facer

Шрифты так же можно искать в интернете, я пользуюсь двумя источниками: Google Fonts и Шрифты Онлайн

Иконки очень важны и последние годы пользуюсь в основном только Icons8 — бесплатные и выдержанные в стиле

Ну и наконец цветовые решения: Google Material Design и Adobe Color

Конечно, источников гораздо больше, но для начала этих примеров достаточно 

Сохраняем проект 

Теперь пара рекомендаций о том, как сохранять свои проекты.

1. В папке редактора создайте папку для своих проектов например так — _MyWatchfaces (в названии пути только латинские буквы и цифры без пробелов!)  

2. Далее в этой папке создаем папку нашего проекта — BigDigit

3. И вот в эту папку мы будем сохранять наши исходники: PSD-файлы, картинки, шрифты, цветовые схемы, макеты, заготовки… Всё, что относится к нашему проекту и нужно иметь под руками

4. В папке проекта создадим папку — bin47 — в ней мы уже будем сохранять наборы картинок и файл настройки циферблата. 

Такой подход позволит вам не потеряться среди множества ваших проектов и циферблатов в будущем 

И наконец, сохраняем макет из Photoshop в папке проекта. Готово! Молодцы!

Из чего состоит и как работает циферблат 

Циферблат наших часов состоит из набора картинок формата PNG и текстового файла настроек формата JSON. 

Часы считывают файл настроек и, согласно выставленным параметрам, выводят на экран часов картинки.

JSON — это обычный текстовый файл, в котором прописываются параметры вывода элементов циферблата. Если вы знаете какие параметры используют часы, то можете работать с файлом и в обычном «блокноте», но лучше конечно, использовать AmazFit Watchface Editor

JSON оперирует индексами и поэтому имена файлов картинок имеют числовые значения. Нумерация начинается с 0, соответственно и имена файлов также. Но есть маленький нюанс — длина имени файлов должна быть одинакова, поэтому они выглядят как 000.png, 001.png, 002.png или как 0000.png, 0001.png, 0002.png и далее по порядку, обязательно по порядку!В общем число разрядов может быть различным, но одинаковым в пределах циферблата, иначе вы получите ошибку индекса. Если в циферблате менее 10 картинок, то можно и так 0.png, 1.png, 2.png, но, практически, это исключительный случай. Моя рекомендация — трехзначные номера, это позволит иметь в циферблате до 1000 картинок, что достаточно даже для сложных циферблатов.

Готовим ресурсы! 

Создаем пустой текстовый файл в папке …\_MyWatchfaces\BigDigit\bin47 с именем bigdigit, а расширение меняем на .json

Файл настроек готов, теперь нам нужно наполнить папку циферблата необходимым набором графики.

Открываю в Photoshop свой макет циферблата. 

Я всегда начинаю с создания фоновой картинки циферблата, поэтому скрываю в макете все элементы, которые будут меняться при работе часов.
Фон циферблатаОтлично, теперь я сохраняю этот фон в папке циферблата как первый графический элемент под именем 000.png

Рекомендуется зоны вне круга циферблата делать или прозрачными или черными, чтобы в часах при смене циферблата не появлялись цветной фон 

Сохраняем фонПревью мы сделаем после сборки циферблата, а пока в качестве превью сохраним наш фон под именем файла 001.png

Как видим, у нас формируется структура для файла циферблата
Состав файлов циферблатаТеперь будем по порядку заполнять папку файлами активных элементов. Начнем с самого главного и большого — время в часах и минутах.

Для этого сохраняю свой макет под новым именем — _digTime, удаляю все элементы, кроме слоя с часами и фоновых слоев.
Рис.13 Готовим набор для элемента ВремяДля вывода времени нам понадобятся цифры от «0» до «9» и символ разделителя «:». Поэтому центрирую текст слоя, и удаляю все символы, оставляя только один. Затем дублирую слой до числа необходимых элементов, прописываю в каждом слое по одному символу набора. В итоге получаю набор слоев со всеми необходимыми элементами.
Набор символов для вывода ВремениДалее два важных момента: 1) для вывода времени элементы должны быть одинакового размера, 2) Размер элементов должен быть минимальным для экономии размера итогового файла.

Я это делаю так:

  • отключаю фоновые слои, чтобы символы остались на прозрачном слое
  • включаю и выделяю все слои символов в панели слоев
  • выделяю всё пространство изображения Ctrl-A и  и копирую их в буфер Ctrl-Shift-C, это нужно, чтобы выяснить габариты символов
  • запускаю форму создания нового изображения из буфера обмена, но изображение не создаю, а запоминаю размеры изображения — получилось 61х115, закрываю форму создания.
  • Теперь меняю размер холста у _digTime до полученных 61х115 и размещаю свои символы в рамках этого размера.

Обрезанный холст по габариту символовА далее, отключаю фоновые слои и сохраняю каждый символ в папке циферблата по порядку сразу после номера файла превью. Для оптимизации у символа «:» уменьшаю размер по ширине до 20х115

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

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

Рекомендую всегда сохранять исходники наборов, это позволит вам легко менять цвет, а для текста еще и локализацию на другие языки.

В итоге у меня получилось, в папке проекта:

  • _maket.psd — исходник макета циферблата
  • _digDate.psd — исходник символов даты, активностей и батареи
  • _digTime.psd — исходник символов часов
  • _week.psd — исходник дней недели
  • _icoAlarm.psd — исходник индикатора Будильника
  • _icoBluetooth.psd — исходник индикатора Blurtooth
  • _icoGoal.psd — исходник индикатора Достижение цели
  • Шрифт и иконки используемые в макете

В папке циферблата:

  • 000 — фон циферблата
  • 001 — превью циферблата
  • 002-011 — цифры часов
  • 012 — разделитель часов
  • 013-022 — цифры для даты, шагов пульса и заряда батареи
  • 023 — точка для даты
  • 024 — знак процента для батареи
  • 025-031 — набор дней недели
  • 032-033 — иконки вкл/выкл Bluetooth
  • 034-035 — иконки вкл/выкл будильника
  • 036 — иконка достижения цели

Весь набор файлов для сборки циферблата

Собираем циферблат 

Когда наши ресурсы готовы, можно приступать к сборке циферблата. Запускаем наш AmazFit Watchface Editor
Вкладка «Распаковать/Запаковать»Нам откроется первая его вкладка — «Распаковать/Запаковать». Рассмотрим её немного подробнее:

  • Зона 1 — Показывает или выбираем модель часов, для которой предназначен циферблат.
  • Зона 2 — Позволяет увидеть циферблат в увеличенном масштабе. Очень полезный интерфейс, так как он реагирует в реальном времени на все изменения, которые вы вносите в редакторе. У меня он всегда открыт.
  • Зона 3 — Это дополнительные опции для предосмотра циферблата.
  • Зона 4 — Это настройки редактора, трогать их не стоит, так как по умолчанию они установлены корректно
  • Зона 5 — Копки для «разбора» бинарных файлов циферблата. Если Вы скачали такой файл, то редактор извлечет его в папку /Watch_faces/ в виде набора графики и файла настроек. Таким образом вы сможете модифицировать его как угодно. Сжатый bin по объему меньше, т.к. это архив. Но разницы нет какой кнопкой будете распаковывать, редактор понимает какой перед ним bin.
  • Зона 6 — Обратная функция — набор графики с файлом настроек упаковывается в бинарный файл циферблата для заливки на сайт или сразу в часы. Здесь один нюанс — сжатый файл гораздо быстрее «заливается» в часы, а не сжатый легче «разбирается». Например программа Notify & Fitness for Amazfit создает превью циферблата только из не сжатого файла (и то не всегда). Я же использую кнопку «Запаковать и сжать bin» для удобства пользователей моих циферблатов.
  • Зона 7 — Создаем анимированный gif или PNG-файл циферблата. GIF, увы, не всегда корректно создается, поэтому свои анимации я делаю сам в Photoshop из PNG, созданных в редакторе.

Нам же для начала работы нужна следующая вкладка — Обзор
Вкладка «Обзор»Основное предназначение этой вкладки — загрузка ресурсов циферблата и его тестирование/просмотр работы.

У нас уже есть папка с ресурсами и файлом настройки, поэтому загружаем, жмем «Выбрать»JSON с картинками.
Загруженные ресурсы циферблата.Я установил «темный фон» чтобы увидеть белые цифры и текст циферблата. Обратите внимание, редактор сообщает, что сейчас ориентировочный размер bin-файла будет ~2,18мБ, а это много. Но у нас превью 001 больше чем нужно, оно будет заменено и размер, уверен, станет в пределах допустимого.

Кроме этого, можно быстро выяснить всё ли в порядке с нумерацией файлов — индексы должны совпадать с названием файла по значению: 1 — 001, 2 — 002, 3 — 003 и т.д.

Переходим к вкладке «Редактирование»
«Девственно» чистый листТак как мы создали файл JSON пустым, то и в редакторе отражается «null». Исправляем!

Укажем модель часов, для которых предназначен этот циферблат, иначе адекватная работа редактора не гарантируется. Я выбираю «GTR (47)» и редактор сразу реагирует.
Установка модели часов

Сразу замечу что редактор поддерживает ручной ввод параметров, но вам это вряд ли понадобится  

Теперь редактор понимает для каких часов мы собираем watchface.

Начнем с установки фона

Установка фона циферблатаДля этого в меню справа выбираем пункт «Фон (Background)», а в раскрывшемся пространстве из выпадающего списка «Image» выберем наш фон его индекс «0»

Таким же образом сразу установим и «Preview», у него индекс «1«

Внесенные изменения сразу же отобразятся в блоке просмотра циферблата и в блоке файла настроек

Установленный фон и превью циферблатаВыставляем цифровые часы 

Для этого открываем пункт «Время (Time)» в меню справа и рассмотрим его подробно.
Настройка цифровых часовЧекбокс «Использовать» — включаем его, если в нашем циферблате будут цифровые часы. А это так и есть 

Вкладки «Часы, Минуты, Секунды» — выглядят они одинаково, поэтому смотрим на примере часов.

Чекбокс «Отображать» — отвечает за отображение элемента вкладки на циферблате. 

Блок «Десятки» — отвечает за вывод на экран изображений разряда десятков. Для этого мы указываем координаты X и Y для верхнего левого угла картинки, указываем первый индекс набора символов ImageIndex, и число картинок в наборе ImagesCount. По умолчанию всегда «10» и менять это для цифровых часов не стоит, так как по-другому наши часы не могут 

Блок «Единицы» — отвечает за вывод изображений разряда единиц. Настраивается аналогично десяткам. 
Имейте ввиду, что ImageIndexи у десятков и у единиц в пределах вкладки должен быть одинаковым! А вот между вкладками Часов, Минут и Секунд можно использовать разные наборы картинок.

Я, когда увидел возможность указать разные наборы картинок для десятков и единиц, очень обрадовался. По идее можно разряды сделать разных цветов и размеров, даже составы наборов можно сделать непохожими! Но… жестоко был наказан, как оказалось на текущий момент наши часики так не могут  

Блок «12/24» — позволяет поддерживать разные режимы формата часов. Если вы установите чекбокс «12-часовой формат», то вам необходимо добавить к ресурсам две картинки «АМ» и «РМ» и указать координаты размещения этого индикатора. Помните — часы показывают в том формате, который используется в телефоне.

Блок «Разделитель» — отвечает за вывод изображения разделителя между часами и минутами. Чекбокс «Отображать», координаты и ImageIndex, думаю уже понятны? 

Итак переключаемся на вкладку «Часы». Устанавливаем чекбокс «Отображать».

Для вывода цифровых часов у нас есть набор картинок 002-011, а значит значение ImageIndex у десятков и единиц будет 2.
В блоке предосмотра вы увидите как в углу появились символы, так как координаты x=0, y=0, это и есть верхний левый угол.
Символы десятков и единиц указаныДля удобства работы я всегда открываю окно просмотра циферблата в максимально большом для моего монитора масштабе кнопкой «Увеличить» в левой колонке редактора. Мне это помогает правильно выставить элементы на циферблате.

Следующим шагом я переключаюсь на вкладку «Обзор», чтобы выставить часы в предосмотре в значение 00:00, так легче точно выставить координаты символов на экране часов. Выбирайте любой набор параметров для предосмотра. Их так много только для генерации анимации GIF 
Масштабный предосмотр и его параметрыПереключаемся обратно на вкладку «Редактирование» и выставляем координаты для вывода символов. Это можно сделать на глаз, изменяя значения для X и Y кликом мышки или клавишами стрелок на клавиатуре.
Выставляем символы «на глазок»Либо посмотреть координаты на макете. Для этого у меня параллельно запущен Photoshop с загруженным макетом. У моего графического редактора есть замечательное окошко F8 — Info, которое показывает текущие координаты курсора. Вот пользуясь им и выясняю нужные мне координаты верхнего левого угла символа, и при необходимости уже потом в редакторе выставлю так, как мне необходимо.
Определение координат на макетеПолученные значения прописываю в редакторе. Тоже самое я делаю и для минут. Секунды мы не используем, поэтому не отображаем.
Установленные символы часов и минутВ наших часах предусмотрен только 24-часовой формат, поэтому блок «12/24» не активируем, а вот разделитель у нас используется — это символ 012.png. Активируем и прописываем его координаты.

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

Все вносимые изменения сразу же фиксируются в файле настроек и отображаются в окне предосмотра — очень удобно.

Взаимосвязь выставляемых параметров в редакторе и в файле настроек

Выводим дату 

На циферблате мы выводим дату в формате ДД.ММ.ГГГГ и полное наименование дня недели. А для этого открываем в правом меню — «Дата (Date)»
Настройка вывода ДатыСтавим чекбокс «Использовать» и смотрим что нам предлагает редактор.

Вкладка «День и месяц отдельными блоками» — позволяет выводить отдельно день, отдельно месяц, а также вывести название месяца. Для этого предусмотрены отдельные настройки для каждого блока.

Вкладка «Дата в одну линию» — позволяет вывести число и месяц числами одним блоком, но только в формате Месяц-Число. А для нас, русских,  нужно Число-Месяц. Сразу отмечу, что использовать не будем.

Вкладка «День недели» — предусмотрено два варианта: 1) вывод разных картинок с днем недели по указанным координатам, либо 2) вывод картинки сегмента по разным координатам.

Вкладка «Год» — выводим четырехзначное число года по указанным координатам и с последующим разделителем (это для формата ГГГГ.ММ.ДД).
Вывод дня неделиОткрываем вкладку «День недели» и, так же как и картинки для часов, выводим день недели. Указываем координаты, ImageIndex = 25, а ImageCount = 7, указываем данные нашего набора картинок 025-031 семи дней недели.

С выводом даты чуть сложнее. Так как нам не подходит вывод «Дата в одну линию», будем использовать «День и месяц отдельными блоками», а в нем не предусмотрен вывод разделителя. Единственный вариант — добавить разделители на фоновую картинку. 
Переключаюсь на Photoshop с открытым макетом.

Делаю копию слоя с датой. 

Растрирую этот слой и стираю все цифры кроме наших точек-разделителей. 

Cохраняю фон 000.png

И таким нехитрым способом мы получаем нужные нам разделители даты 
Обновления в фоновой картинкеТеперь нам нужно в редакторе циферблата изменить фоновую картинку. Для этого мы просто перезагрузим файл настроек через вкладку «Обзор» — «Выбрать»JSON с картинками, обязательно согласитесь сохранить изменения в проекте «bigdigit.json»
Обновленный фон циферблатаВыставляем чекбоксы «Две цифры в дате» и «Две цифры в месяце»

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

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

Перехожу во вкладку «Месяц»

Устанавливаю чекбокс «Отображать».  

В ImageIndex = 13, указываем нашу группу символов 013-022ImageCount оставляем по умолчанию — 10
А вот с координатами мы сделаем так: 

  • определим координаты нижнего(!) левого углагруппы символов месяц в макете
  • В редакторе заполним только координаты X левого(!) верхнего угла, и координату Y правого нижнего(!) угла. Выравнивание установим «Вниз влево»
  • Отступы — уменьшение значения приводит к наложению и уплотнению символов, а увеличение раздвигает символы в стороны. Но не ширину символов, а расстояние между угловыми значениями.

Как видим наш месяц появился на экране. А управлять им легко. Для перемещения по горизонтали меняем X левого верхнего угла, а по вертикали Y правого нижнего угла.
Выставляем группу символов месяцаТеперь переключаемся на «Число» и таким же образом заполняем форму, но используя координаты из макета для правого(!) нижнего угла.
Выставляем группу символов ЧислаВо вкладке «Год» мы выставим группу символов года также, как и месяц — по нижнему левому углу.
Выставляем группу Год

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

Выводим число шагов, частоту пульса и заряд батареи

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

Для этого переключаемся на пункт «Активности (Activity)»
Вывод числа шаговКак видим, заполняются аналогично дате. Но есть одно отличие, дата это двухзначное число, а число шагов изменяется от 0 до 99999. Если нам надо выравнивать это число влево или вправо, тогда мы укажем в качестве координаты необходимый угол. Но в нашем макете число шагов нужно выводить по центру, а значит надо указать область. Ничего сложного, определяем в макете область вывода (верхний левый и нижний правый углы), и указываем в редакторе, а выравнивание ставим «Середина по центру»

На вкладке «Пульс» настроим вывод числа частоты. Остальные вкладки пока не трогаем.
Вывод частоты пульсаКак видите, всё просто. Мне приходится дольше объяснять, что и как делать, хотя в реальности это простые действия.

Число заряда батареи настраивается в «Батарея (Battery)», вкладка «Текст». Всё аналогично выводу шагов и пульса, только нужно во вкладке «Иконка %» установить ImageIndex без указания координат. В этом случае символ выводится в составе группы с цифрами. Но если вам нужно выводить «%» в определенном месте экрана, тогда координаты указываются.
Вывод данных о заряде батареи

Прогресс-бары шагов, пульса и батареи 

Теперь посмотрим как работать с прогресс-баром, а если точнее, то с круговой шкалой.

Круговая шкала— это полоса двигающаяся по линии окружности. А значит нам нужно указать:

  • центр этой окружности
  • радиус окружности
  • толщину линии
  • Угол начала и угол конца движения полосы (Угол — вверху, 180 — внизу, 90 — справа, -90 или 270 — слева).
  • А для красоты цвет окружности и её окончания. 

Для отрисовки прогресса шагов мы переходим в пункт «Прогресс шагов (Steps Progress)», вкладка «Круговая шкала«.
С центром всё просто — 227, 227 — при условии, что сделали как я рекомендовал в начале.
Круговая шкала пройденных шаговДумаю из рисунка выше всё понятно. Для прогресса шагов задействую верхнюю половину окружности, цвет в тон иконки шагов и круглое окончание. Начало слева, окончание справа. Даже не знаю, что еще добавить. 

Так же настроим шкалу для пульса. Переходим в «Активности (Activity)» — «Пульс» — «Пульс — круговая шкала»
Круговая шкала пульсаНачало внизу, окончание справа

И шкалу заряда батареи. Переходим «Батарея (Battery)» — «Круговая шкала»
Вывод шкалы заряда батареиНачало внизу, окончание слева. Пришлось указать угол 270, чтобы движение пошло в верном направлении. 

Индикаторы Bluetooth, Будильник и Достижение Цели

После всего что мы прошли, думаю, все будет понятно даже из картинок  Просто выводим нужную картинку в определенное место
Bluetooth, Будильник находятся в «Статусы (Status)»
Выводим индикатор BluetoothКрасный — связи нет, Оранжевый — всё Ок
Выводим индикатор БудильникаИконка Достижения цели находится в «Активности (Activity)» — «Достижение цели»
Индикатор Достижения цели

Добавляем тапы или активные зоны

Очень многим пользователям нравятся активные зоны на экране часов. Тап по такой зоне открывает дополнительные экраны часов. 

Настраиваются они очень просто. Нужно указать размеры зоны активности и координаты верхнего угла зоны. 

Открываем «Ярлыки (Shortcuts)»

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

  • Шаги — в зоне вывода количества шагов
  • Пульс — в зоне вывода частоты пульса
  • Энергосбережение — в зоне вывода заряда батареи
  • Погода — на циферблате нет погоды, но зону активности я разместил в области вывода даты

Все четыре зоны установлены

Пора делать превью циферблата

Наш циферблат практически готов, осталось сделать превью и запаковать циферблат в бинарный файл.

Открываем «Обзор», выбираем любой из наборов параметров и настраиваем данные для отображения. После этого жмем кнопку «Сохранить PNG» и редактор создаст в папке циферблата файл Preview.png. Этот файл не удаляйте он всегда пригодится для оформления поста для форума или сайта.
Сохранение превью циферблатаВ графическом редакторе открываем этот файл и уменьшаем его размер до стандартного превью циферблата GTR — 266х266 пикселей. Сохраняем его под именем 001.png

Перезагружаем JSON в редакторе и смотрим предполагаемый размер бинарного файла.
Циферблат с обновленным превью файломИтог — 1,66 мБ, это вполне допустимый объем. А вот если у вас будет получаться больше чем 1,95 мБ, то нужно уменьшать размеры 001 картинки. Если и этого не достаточно, то придется думать, на чем еще можно сократить размеры.

Пакуем бинарник!

Переходим на первую вкладку редактора — «Распаковать/запаковать»

Нажимаем заветную кнопку «Запаковать и сжать bin»

Пару раз мелькнет черное окно со строками текста… 

А затем откроется папка с ресурсами нашего циферблата с фокусом на файле bigdigit_packed_zip.bin — это сжатый bin циферблата!

Вот и всё! Циферблат готов к использованию!

После запаковки циферблата в папке появятся ещё несколько файлов, которые компилятор создает автоматически:

  • bigdigit_packed.bin — это не сжатый bin циферблата
  • bigdigit_packed.log — это лог компиляции, при ошибках помогает выяснить в чем проблема
  • PreviewStates.json — файл со всеми наборами параметров из редактора для генерации GIF.

И графические файлы компилятора, которые рекомендую удалить, по причине не всегда точной сборки картинки:

  • bigdigit_packed_animated.gif — файл с анимацией циферблата
  • bigdigit_packed_static.png — просто картинка циферблата
  • bigdigit_packed_static_266.png — файл превью для часов

Лучше использовать возможности редактора сохранить и PNG-превью циферблата, и GIF-анимацию хорошего качества кнопками «Сохранить GIF» и «Сохранить PNG» внизу левой колонки. Внешний вид кадров настраивается через наборы параметров вкладки «Обзор».

А как же 42 мм?

Да, я помню, на форуме просили под 42 мм, а мы сделали 47 мм. Но ничего страшного, ведь редактор умеет конвертировать циферблаты

Открываем вкладку редактора «Конвертирование»

Выбираем исходную модель «GTR (47)» и целевую модель «GTR (42)»

И жмем кнопку «Конвертировать»
Конвертация циферблатаРедактор сообщит что «Новый циферблат создан» и нам остается перейти на вкладку «Распаковать/Запаковать» и нажать кнопку «Запаковать и сжать bin»

В результате откроется новая папка с готовым bin-файлом и набором картинок и файлом настроек под часы 42 mm. А размещается она в папке нашего проекта рядом с папкой ресурсов для 47 мм
Папка проекта с версиями ресурсов для 47 и 42 ммКрасота!

Спасибо тем, кто добрался до этого места! Надеюсь эта статья поможет вам научиться делать хорошие циферблаты. Если у вас есть вопросы, предложения или замечания — смело пишите в комментариях. Постараюсь ответить и учесть в будущем.

И да, это не последняя статья, впереди у нас много интересного 

С уважением, O’Вагнер aka Ollegon 
PS Исходники и ресурсы проекта BigDigit 

Комментариев 5

  1. Офлайн
    Роман
    Роман 27 февраля 2021 23:42
    А вот если у вас будет получаться больше чем 1,95 мБ, то нужно уменьшать размеры 001 картинки. Если и этого не достаточно, то придется думать, на чем еще можно сократить размеры.

     

    Получается все равно сколько весит картинка, все зависит от ее размера в пикселях?? 

    1. Офлайн
      OWagner 22 марта 2021 14:01
      Именно так :( При этом попытка сжать картинку например в jpg не получится
  2. Офлайн
    Роман
    Роман 28 февраля 2021 23:54

    А можно ли сделать без фона (без файла 000) ??

    Для экономии размера файла bin.

    1. Офлайн
      OWagner 22 марта 2021 14:02
      Не получится, так как без фона циферблат просто не создастся
  3. Офлайн
    Михаил
    Михаил 30 апреля 2021 08:55
    И дальше что? Каким образом залить готовый циферблат в часы? Насколько это сложный процесс? Есть ли риск получить "кирпич"? 
    Спасибо!

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика