Рассказываю как создавать свои циферблаты на платформе Zepp Watchface.
Привет всем любителям гаджетов!
Сегодня я бы хотел показать вам как пользоваться сервисом Zepp Watchface. Покажу на пальцах как работать с сервисом и для самых искушенных оставлю бонус в конце.
Zepp — программа для поддержки и настройки часов Amazfit.
Zepp Watchface — утилита в виде сайта для создания собственных циферблатов с крайне неудобным и мерзким интерфейсом.
Написать гайд вдохновила: @Norhala со свой статьей «Мой Personal Information Processor» в комментариях, к которой, люди просили рассказать как я создаю циферблаты.
В данный момент я сделал циферблат по мотивам недавно вышедшего Starfield, а на момент написания статьи, освежился и сделал еще и по любимому Fallout 4.
Информацию буду дробить для вашего удобства. Если что-то не получается, пишите в комментариях, помогу.
На данный момент ношу Amazfit GTR 4, за что отдельное спасибо моей любимой женщине. Поэтому и весь гайд будет опираться на выбранную модель и ей подобные, а именно:
Поддерживаемые версии часов:
[7930112]Amazfit GTR 4
[7930113]Amazfit GTR 4
[7864576]Amazfit GTR 4 Limited Edition
[7864577]Amazfit GTR 4 Limited Edition
Знакомство с сайтом
При первом знакомстве с платформой, необходима регистрация.
Это будет ваш личный кабинет со всеми созданными циферблатами. Советую не втыкать фейки, а запомнить введенные данные.
Сайт для создания и Официальный мануал
Система любезно предложит выбрать вашу модель часов, после чего начнется самое интересное.
Подготовка к созданию
Рекомендую сначала ознакомиться с заготовленными шаблонами от сайта.
На выбор есть несколько видов. При детальном разборе с каждым, будет складываться понимание, как работают определенные метрики.
Например, пройденную дистанцию можно показать несколькими видами: числа или динамические картинки.
Начнем с нуля. Проверяем разрешение экрана часов, определяем, для Zepp ЛИ OS наш новый циферблат. Пишем название для прототипа и нажимаем «create».
Будем работать с моим заготовками, которые специально создал для наглядности. И для тех, кто не хочет париться, но хочет взять мою работу под свой формат часов.
Исходники тут. Все ресурсы, исходные картинки и шаблоны для их редактирования внутри. Пользуйтесь с удовольствием.
Воссоздание циферблата
Я невероятно люблю Fallout 4. Думаю, вы это заметили по моим прошлым статьям. Поэтому, соблюсти аутентичность было моей главной целью. А еще меня тошнит от представителей подобных циферблатов:
Наверное, поэтому я и создал для себя минималистичное решение, которое могу редактировать в любое время, настраивая каждый элемент под свой вкус. Эту возможность дарю вам.
Все иконки, что использовались при создании, я брал с этого сайта.
Итак, приступим.
Первым делом добавляем фон. Кликаем на Background — подтверждаем выбор, повторно нажав на первый в списке элемент. Слева в окне появился слой. При нажатии, открывается левое окно с настройкой этого слоя. Выбираем заготовленный фон. Спустя время, он отобразится на нашем прототипе. Начало положено.
UPD: Известна проблема, когда фон не отображается. Для этого необходимо нажать на иконку глаза в левом меню. Скрыть и снова отобразить фон.
Далее выставляем метрики из списка сверху, в зависимости от того, что хотим видеть на часах. Ранее упомянул про разделение левого меню на две категории «Normal Watch Face» и «Always on Display».
Я ношу часы со вторым режимом, поэтому сначала необходимо настроить первый, чтобы затем скопировать метрики, их расположение и выставленные данные во второй режим.
Не торопитесь и не редактируйте второй режим, иначе «Normal Watch Face» придется редактировать повторно, так как на него не копируются настройки.
Продолжим настройку с добавления даты, аналоговых часов, месяца и дней недели. Для этого добавим первым параметр «Date».
Внутри нового параметра отмечаем только «Day» и «Month». Это позволит нам вывести отображение только дня и месяца.
После выбора параметра, в правом окне листаем до параметров «Digital Slice». Он отвечает за создание новых визуальных данных или использование уже существующих, которые вы добавили в прототип ранее.
Мы работаем с этим впервые, поэтому нажимаем «Use New Slice» и ниже загружаем изображения по кнопке «Upload Image».
Загружаем данные по очереди из папки «Даты» с моего Google Диска.
Алгоритмы платформы работают следующим образом: необходимо называть «пикчи» в том порядке, в котором их сможет прочитать Zepp.
То есть, цифра должна называться «1.png», а не «Один.png» или «One.png».
То же самое и с месяцами, днями неделями и так далее.
После успешной загрузки цифр в циферблат, листаем ниже и находим координаты. Выставляем следующие значения: х:123, у:232.
Выравнивание ниже ставим на «Aligment Center» А параметр «Spacing» на -35. Если все сделано правильно, то день займет положение в слева от центра. Сделано это для того, чтобы название месяца выводилось по центру.
Опять же — все можете настраивать по своему усмотрению, я же показываю как делал лично для себя.
Далее настроим месяц. По той же аналогии — кликаем на параметр слоя слева, загружаем новые изображения в меню справа. Ссылка на месяцы.
По настройкам выставляем следующее.
Координаты: х45, у253 В «Preview Language» выбираем «EnglishThumbnail».
А еще ниже, в «Month Preview» можно покликать на разные месяцы, чтобы убедиться в правильности работы.
Далее я добавил индикатор пульса. Тут все просто. Выбираем на верхнем меню, кликаем слева и активируем только один параметр «Data». В самых верхний параметр из правого меню под названием «No Data» ставим картинку.
Так будет отображаться пульс, если данные не были распознаны или созданы в течение какого-то количества времени. Без этого нас не пустят редактировать дальше.
Снова загружаем новые «Слайсы» и теперь можем их назвать, так как добавляем картинки цифр, которые нам пригодятся и для других метрик чуть позже. Ссылка на цифры.
Загружаем, выставляем координаты:
х292, у36 и прописываем ниже «Spacing»: -41.
В самом конце списка можно вновь проверить как отображается показатель.
По этой аналогии будем работать в дальнейшем. Самое сложное позади, осталось внести все метрики по шаблону, сохранить и загрузить на часы.
Отдельно хочу рассказать и про левое меню.
Так как это слои, которые накладываются друг на друга, то верный распорядок вы можете увидеть на скриншоте. Если что-то не так, зажимайте ЛКМ и перетягивайте слои вверх или вниз.
Если не получается — пробуйте перетаскивать слой через два, а то и через один. Для Zepp это нормальная тема.
Теперь добавим отображение показателей батареи часов. Платформа требует 10 видов отображения, поэтому мой план по добавлению четырех состояний провалился с треском. Создал для вас 10 индикаторов. Всего 5 ключевых состояний, у каждого из них еще по виду.
В изначальном состоянии батареи вы увидите насыщенный цвет. Когда ресурс тратится, он начинает тускнеть. Затем сбрасывается до другого цвета, который так же тускнеет и идет дальше от цвета к цвету. Скачивать тут.
«Display Method» выбираем «Single Display». Загружаем все изображения и выставляем: х277, у66. Отлично! Еще одной мутью меньше.
Теперь самое интересное — Digital Time. Цифровое время. С аналоговым я не работал, поэтому ничего не могу сказать. Да и как по мне, цифровое в разы удобнее. Снова скачивать здесь. Это все разные ссылки для вашего удобства.
Отмечаем два параметра в настройках отображения: Hr — часы и Min — минуты. Загружаем изображения через уже привычный «Use New Slice» и придумываем название.
Координаты и спайсинг:
х140, у190, -15.
Параметр «Alignment» ставим в положение: «Right Align»
В «Data Type Image» закидываем двоеточие.
Прописываем координаты: х210, у190
Переходим к минутам. В левом окне выбираем параметр «Min» во вкладке «Digital Time». Бежим глазами на правое меню.
Во вкладке «Digital Slice» выбираем «Use Uploaded Slice» и ниже выбираем имя, которое написали шагом ранее. Шаблон вставит цифры, которые уже есть в проекте, но до этой поры использовались только в отображении часов.
Координаты: х235, у190.
Alignment: Align Center Spacing: -15
Заканчиваем с центральной частью и добавляем отображение дня недели. Вновь обращаемся к верхней панели с доступными метриками: Date — Week. В созданном слое включаем только «Image». Справа загружаем изображения.
И выставляем координаты: х23, у172. Снизу выбираем «EnglishThumbnail» если стояло что-то другое.
Небольшой перерыв
Хотел сделать ремарку, что не силен в написании информационных текстов и подобных гайдов. Разжевывание, которое вы могли заметить — намеренное. Пишу так, как хотел бы читать гайды, со всеми разборами и повторением одного и того же, чтобы свести шанс ошибок к минимуму.
Так же советую ознакомиться с другой статьей по замечательной и любимой Fallout 4.
Рад конструктивной критикие и вашим комментариям ниже. Благодарю за справедливую оценку и подписку на мой телеграм канал.
Моя аудитория самая крутая. Спасибо вам.
Продолжаем. Почти закончили.
Финальные штрихи
Осталось всего пять метрик, все они опциональны, но прогоним от и до: Отображение минутной, секундной и часовой стрелок, количество сожжённых калорий, температура на улице, количество шагов и пройденное за сутки расстояние.
Сверху нажимаем на «Time» и на этот раз добавляем «Pointer Time». Тут замутов будет больше, но не стоит пугаться. Ссылка на все стрелки.
— Начнем с часовой. Верхние координаты: х233, у233. Средние координаты: х25, у233. Нижние не трогаем.
— Минутная стрелка. Верхние координаты: х233, у233. Средние координаты: х25, у233. Нижние не трогаем.
— Секундная стрелка. Все то же самое.
Снова обращаемся к верхней панели, в параметре «Workout» выбираем «Calorie Consumption». Показатель отображает количество сожжённых калорий за сутки.
Включаем только отображение «Data». А в правом меню выбираем шаблон, который использовали для настройки пульса.
Координаты и спайсинг: х107, у36, -41
И снова лезем в верхнее меню. Weather — Temperature. Включаем только Real-Time temperature. Снова выбираем шаблон цифр, которые использовали для настройки пульса.
Координаты: х120, у335.
Alignment: Left Align. Spacing: -41.
Negative Sign Image.
Последние два пункта — шаги и пройденное расстояние. Оба можно найти во вкладке сверху «Workout» — Steps и Distance соответственно.
В шагах включаем только «Real-Time Steps». Вновь используем добавленные слайсы из пульса.
Координаты: х198, у37.
Alignment: Left Align. Spacing: -41.
В дистанции отмечаем только «Data». Абсолютно то же самое, но другие корды.
Координаты: х265, у335.
Alignment: Left Align. Spacing: -41.
Decimal Point Image.
Вот и все. Теперь в лабораторию!
Конвертация и установка
На ПК все готово. По сохранению вы увидите QR код, который необходимо считать с телефона, при подключенных к нему часах. И потребуется режим разработчика в Zepp.
Инструкция по его включению. Не бойтесь языка, делайте по скриншотам. Все просто. Видео-инструкцию, как считать QR код при включенном режиме прикладываю ниже. После скана, появится ваша версия циферблата. Нажимайте на установку и радуйтесь.
Однако, после копирования может пропасть фон. Чтобы его вернуть, добавляем через верхнее меню, выбираем фон в файловом менеджере и тянем за границу в самый низ. Чтобы все метрики не перекрывались картинкой, а находились «выше него».
Послесловие
Спасибо за прочтение, господа.
Старался выдать интересный материал без воды и с максимумом полезной информации. Получилось или нет — судить вам.
Комментарии всегда открыты, рад буду подискутировать или помочь.
Особенная благодарность моим сабам из Телеграма, которые поддерживают мои начинания и эксперименты. С лонгов попробовался в гайды.
Не болейте, не скучайте и играйте в хорошие игры!
