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

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

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

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

1. Фон (Background) 

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

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)

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

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

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

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

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

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

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

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

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

3. А далее просто рисую всё что хочу видеть на циферблате. Каждый элемент именую, группирую, в общем делаю так, чтобы в дальнейшем  можно будет перекрашивать элементы, перемещать их по циферблату и так далее и тому подобное. Кто знает, что еще захочу делать на основе этого циферблата?Да, получилось простенько, но основную задачу — крупный читаемый текст — он выполняет. Я планирую пустить вдоль края прогресс-бары шагов, заряда и пульса, а это мы будем делать в редакторе watchfaces Циферблат должен быть функциональным и красивым. А для этого нужно «играть» композицией, шрифтами и цветом.Композицию можно брать с других образцов, со временем вы сможете составлять её и без подсказок. Смотрите сайты крупных часовых фирм, там всё-таки «матерые» дизайнеры работают — у них можно учиться смело. Например: Tissot или FacerШрифты так же можно искать в интернете, я пользуюсь двумя источниками: Google Fonts и Шрифты ОнлайнИконки очень важны и последние годы пользуюсь в основном только Icons8 — бесплатные и выдержанные в стилеНу и наконец цветовые решения:  и Adobe ColorКонечно, источников гораздо больше, но для начала этих примеров достаточно 

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

Теперь пара рекомендаций о том, как сохранять свои проекты.1. В папке редактора создайте папку для своих проектов например так — _MyWatchfaces (в названии пути только латинские буквы и цифры без пробелов!)  2. Далее в этой папке создаем папку нашего проекта — BigDigit3. И вот в эту папку мы будем сохранять наши исходники: PSD-файлы, картинки, шрифты, цветовые схемы, макеты, заготовки… Всё, что относится к нашему проекту и нужно иметь под руками4. В папке проекта создадим папку — bin47 — в ней мы уже будем сохранять наборы картинок и файл настройки циферблата. Такой подход позволит вам не потеряться среди множества ваших проектов и циферблатов в будущем И наконец, сохраняем макет из Photoshop в папке проекта. Готово! Молодцы!

Добавление параметров

Конструктор циферблатов также позволит добавить или заменить отображение нужной информации. Если на выбранном циферблате не хватает того или иного параметра, добавить его можно в разделе «РЕДАКТОР». В правой колонке данного раздела есть все варианты отображения информации. В кодовом редакторе задается расположение объектов по координатам и выравнивание по левому или правому краю. А также отступы между символами в одном значении.

Такое конструирование немного сложнее, но интуитивно понятно и разобраться в значениях может каждый. После добавления или отключения параметров отображения информации, проверяем «НАСТОЯЩИЙ МАШТАБ» и сохраняем проект. Компилируем watchface и заливаем в наши смарт часы.

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

Нужна помощь в создании или изменении циферблата, пишите комментарии. Мы обязательно Вам поможем!

Описание Приложения

Amazfit Пэйс является GPS с поддержкой SmartWatch с 5 дней Средний срок службы батареи. Встроенный хранения музыки позволяет телефона свободной работать во время отслеживания основные показатели, как темп, частота вращения педалей, расстояние, время, частота сердечных сокращений и многое другое. Вы также будете иметь возможность получать уведомления о входящих вызовах, сообщениях, электронной почты и других приложений с помощью дисплея всегда-на. Это приложение в основном функционирует в качестве командного центра для вашего Amazfit SmartWatch как создание учетной записи (зарегистрироваться и Войти), Bluetooth спаривания, смарт настройки уведомлений, смотреть настройки лица, синхронизации данных, смотрите настройки приложения и многое другое. Все запущенные данные могут быть синхронизированы с Страва.Версия AMAZFIT ПАСЕ ЧАСЫ БЛОКА.· Запуск отслеживания: Отслеживание пробега и дистанцию ​​захвата, время, темп, частоту сердечных сокращений, калории, скорость, частота вращения педалей, максимальная / скользящая средняя темп, макс / сред скорость движения, макс / сред частоты вращения педалей, высота, усиление высоты, потеря высоты и мин / макс высота над уровнем моря.· Телефон-Free Music: Беспроводное подключение к Bluetooth наушники и наслаждаться музыкой и средств массовой информации с внутренней памяти для телефона неизрасходованного-свободного хода.· GPS: Отслеживание маршрута и расстояния со встроенным GPS.· Уведомления: Получение уведомлений о входящих вызовах, сообщениях, электронной почты и других приложений.· Частота сердечных сокращений: Автоматический контроль частоты сердечных сокращений и непрерывного отслеживания частоты сердечных сокращений во время тренировок.Часы особенности смарт-уведомлений и оповещений вибрации для входящих вызовов, сообщений электронной почты и прямой доступ к прогноз погоды, секундомер, компас, сигналы тревоги, управления музыкой, данные сна и многое другое. Пейс автоматически отслеживает ваши ежедневные шаги, расстояние, калории и сон. Керамический безель является прочным и устойчивым к царапинам. Всегда на дисплее легко читается даже при ярком солнечном свете. Часы IP67 сертифицирована, а это значит, устойчивы к пыли, дождя, брызг и случайного погружения в воду. Часы позволяет устанавливать беспроводное соединение с Bluetooth-наушники для прослушивания музыки и средств массовой информации с внутренней памяти для телефона неизрасходованного-свободного хода.Мы процветают на постоянно улучшать свой опыт, пожалуйста, обратиться к нам с вопросами и обратной связи через www.amazfit.com

Read more

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

Переходим на первую вкладку редактора — «Распаковать/запаковать»…Нажимаем заветную кнопку «Запаковать и сжать 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» внизу левой колонки. Внешний вид кадров настраивается через наборы параметров вкладки «Обзор».

Где искать новые циферблаты

Большинство циферблатов для Amazfit Bip делают другие владельцы устройства, чтобы придать гаджету индивидуальность, шик, обновить устройство под своё настроение.

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

1. в PlayMarket существует удобное приложение Amazfit Bip / Lite & Cor WatchFaces – оно с собственным поиском, так что подобрать циферблат можно будет даже по строго определенным параметрам (приложение работает бесплатно);
2. сайт MyWatchFace: тоже бесплатный, с выбором циферблатов не только на гаджет от «Сяоми», но и для других умных устройств; правда, придётся заморочиться, чтобы перебросить загрузку на часы.

Установка циферблатов

Еще некоторое время после приобретения фитнес-браслета юзеры довольствуются стандартными интерфейсами, и у них не возникает вопросов о том, как установить сторонний циферблат из Интернета. Однако позже появляются мысли о замене.

Стандартный

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

• Первым шагом надо включить девайс;
• Затем следует перейти к настройкам. Для этого надо сделать в левую сторону свайпы;
• Выбрать пункт “Циферблат”;
• Сделать свайп вверх;
• Из доступных вариантов выбрать необходимый.

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

Сторонний

Чтобы поставить новый интерфейс, скачанный из интернета, придется немного попотеть. Для этого следует установить приложение Gadgetbridge. Эта утилита помогает подключиться к устройствам без специального ПО и аккаунта. Программа также устанавливает на гаджеты загруженные из сети циферблаты. Ее надо установить на телефон.

Price: Free

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

Перед загрузкой нового оформления надо зайти в настройки Ми Фит (или другое приложения, которое указано выше), включить видимость девайса. Чтобы изменить интерфейс, далее надо проделать следующее:

• Запустить утилиту Gadgetbridge, нажать плюс, чтобы добавить новое устройство;
• Когда обнаружится, надо кликнуть по нему;
• После синхронизации часы отобразятся на главном дисплее программы Gadgetbridge;

Затем свернуть приложение, запустить файловый менеджер, найти скачанный ранее файл bin, открыть c помощью gadgetbridge;

Нажать кнопку “Установить”.

Процедура установки занимает максимум 2 минуты. В заключение надо вернуть в первоначальное положение ползунок видимости устройства в Ми Фит.

Где скачать циферблаты

Есть много циферблатов для Амазфит Бип. Бесплатно и без проблем их возможно скачать с официального сайта amazfitwatchfaces.com. Здесь можно через поисковый запрос найти какой-то определенный, либо подобрать из предложенного списка. Загружать файл необходимо с расширением bin.

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

• Mi Fit;
• AmazFaces;
• Amazfit Bip & Cor WatchFaces;
• Watchfaces for Amazfit Bip;
• Мой циферблат;
• Facer Watch Faces.

Эти программы достаточно просто будет загрузить как на телефоны, работающие с ОС Андроид, так и на Айфоны. Надо просто найти то или иное приложение в Апп Стор или Гугл Плей.

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

Price: Free

Price: Free

Price: Free

Price: Free

Price: Free

Price: Free

Вступление

Разработкой циферблатов я увлекся в июле 2020 года, когда приобрел себе первые смарт-часы Amazfit GTR 47mm Lite. Еще перед покупкой я знал, что можно кастомизировать этот гаджет и это было не маловажным фактором для приобретения именно этой модели.  Основной источник информации по часам (да и не только) — это форум 4PDA.ru, на котором я «тусуюсь» с 2007 года :). Там же я посмотрел видео о том, как делать циферблаты и, естественно, нашел замечательный редактор AmazFit Watchface Editor от SashaCX75Для меня это стало хобби, «отдушиной» от ежедневной рутины, да и «часики» мои полюбили и они довольно симпатичны и функциональны. Посмотреть их можно на одном из лучших ресурсов для наших часов — AmazfitWatchfaces.ComИ хотя у меня не большой опыт создания циферблатов, думаю, что достаточно хорошо овладел инструментом и готов делится знаниями и фишками в этой деятельности. И, если вам интересно как создать циферблат с «нуля» — присоединяйтесь! 

Как поменять циферблат

Поменять циферблат можно двумя способами: через сами часы или с помощью приложения на смартфоне.

Первый способ предполагает несложный порядок действий: потребуется просто открыть настройки и нажать на самый первый пункт. Он так и будет называться – «циферблат». Если его открыть, то можно свайпами вверх и вниз пролистать все доступные варианты. Если какой-то понравится, то достаточно нажать на него – он установится моментально

Важно отметить, что выбор будет ограничен теми вариантами, которые либо были загружены ранее, либо были предложены производителем

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

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