Циферблат для amazfit pace своими руками

Часы Huami Amazfit могут быть не такими привлекательными или многофункциональными, как их аналоги за 399 долларов (например, Apple Watch или Galaxy Watch), но они наверняка несут за собой удар. Будь то функция «Всегда на дисплее» или впечатляющее время автономной работы, Huami загрузила на свои часы Bip и Stratos отличные функции.

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

К сожалению, часы Amazfit имеют около 15 различных циферблатов. Да, это число покажется адекватным. Но в конечном итоге у вас могут закончиться уникальные циферблаты раньше, чем вы думаете. Кроме того, не все гарантировано соответствуют вашему вкусу и требованиям.

К счастью, вы можете установить специальные часы на свои часы Amazfit, и это не ракетостроение. Есть три способа сделать это, и в этом посте мы покажем вам, как это сделать.

Также на

#wearable

1. Через файлы WFZ

Это один из самых простых способов получить новые часы на ваших часах. Файлы WFZ — это пользовательские файлы, предназначенные для умных часов AmazFit, и содержат информацию, такую ​​как Background, Indicator и TimeHand. Все, что вам нужно сделать, это получить несколько совместимых файлов WFZ и вставить их в папку WatchFace вашего телефона.

Сайт Amazfit Watch Faces — одно из лучших мест, где можно приобрести новые циферблаты. И лучше всего то, что он аккуратно разделяет их на Бип, Кор или Грани.

Amazfit Central — еще один крутой сайт, который позволяет загружать циферблаты. Тем не менее, он содержит сочетание бесплатных и платных лиц.

Посетите Амазфит часы лица

Посетите Амазфит Централ

Шаг 1: После загрузки подключите подставку часов к ПК и перейдите в раздел «Внутреннее хранилище»> «WatchFace». Сделано, вставьте файл WFZ.

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

Нажмите на него, чтобы выбрать. Виола! Совершенно новый циферблат.

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

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

Совет для профессионалов: если у вас есть Amazfit Bip, вы также можете проверить некоторые приложения в Play Store, такие как My WatchFace.

Также на

Наука позади датчиков сердца и как это помогает

2. Через APK файлы

Помимо WFZ-файлов, другой способ получить разные лица — это APK-файлы. Однако, по сравнению с файлами WFZ, файлы APK немного сложны в установке. Вы должны получить в руки установщик APK и правильный установщик ADB. Если вы видели циферблат, который был слишком хорош, чтобы его игнорировать, вот как это сделать.

Шаг 1 : Подключите часы к зарядному устройству и подключите его к компьютеру. Между тем, скачайте установщик APK по ссылке ниже.

Скачать APK Installer

Шаг 2: Откройте установщик на ПК с Windows и нажмите «Устройства» в правом верхнем углу. Ваши часы Stratos или Bip будут отображены, когда инструмент обнаружит часы.

Если нет, вам необходимо установить необходимый ADB, и одним из лучших является Minimal ADB и Fastboot.

Скачать Minimal ADB и Fastboot

Шаг 3 : Нажмите «Инструменты»> «Открыть файлы APK» и выберите файлы на своем ПК. Когда закончите, нажмите, чтобы выбрать файл APK и нажмите кнопку Установить.

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

Теперь все, что вам нужно сделать, это отключить часы от подставки, перейти на начальный экран и проверить наличие установленного циферблата в списке. Или вы можете просто найти то же самое в разделе «Выбор циферблата» в приложении Amazfit.

Важное примечание . Не устанавливайте слишком много APK-файлов на часы, поскольку это может замедлить работу интерфейса.

3. Загрузить пользовательские циферблаты

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

Чтобы загрузить обои, откройте приложение Amazfit на телефоне и выберите «Я»> «Мои часы»> «Выбрать циферблат»> «Загрузить изображение». Выберите опцию Галерея и выберите изображение, которое вы хотите в качестве фона.

Также на

10 лучших новых сайтов для бесплатных изображений высокого качества

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

Новый день, новый циферблат

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

Руководство по привратнику: как с его помощью установить и установить приложения Mac

Узнайте больше о Gatekeeper и о том, как использовать его для установки самых безопасных приложений на ваш Mac.

Теперь Amazon позволяет пользователям продавать как индивидуальные

Теперь пользователи Amazon India также смогут продавать свои бывшие в употреблении вещи на веб-сайте в своем городе — точно так же, как это делают на Olx и Quickr .

Как установить, установить принтер hp officejet 6500a plus «все в одном»

Узнайте, как настроить и установить принтер HP Officejet 6500A Plus «все в одном».

Источник

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

Вступление

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

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

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

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

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

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

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 — бесплатные и выдержанные в стиле

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

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

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

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, удаляю все элементы, кроме слоя с часами и фоновых слоев.
Для вывода времени нам понадобятся цифры от «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 с открытым макетом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник