Создал циферблат по мотивам Fallout 4

Рассказываю как создавать свои циферблаты на платформе 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 код при включенном режиме прикладываю ниже. После скана, появится ваша версия циферблата. Нажимайте на установку и радуйтесь.

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

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

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

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

Не болейте, не скучайте и играйте в хорошие игры!