Как сделать циферблат WFZ для Stratos 3

 Привет!

Меня постоянно спрашивают, как я делаю циферблаты и какое программное обеспечение использую. На программный вопрос легко ответить: Adobe Photoshop для графики, Notepad ++ для кода и WinRAR для упаковки / распаковки. Ничего больше.

По вопросу КАК? - я перевел следующие руководство от DxP.

В частности, речь идет о новых возможностях с элементами «WatchFaceComponent».

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

Цель следующая -> больше новых замечательных циферблатов!

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

Оглавление

1. ОСНОВЫ

1. Структура основных файлов
2. Особые настройки в базовых файлах
3. Структура файла "font.xml" для отображения цифр и символов

2. ЭЛЕМЕНТЫ

1. Элементы WatchFaceItem
2. Элементы WatchFaceComponent
3. Пояснения к параметрам элементов WatchFaceComponent

ОСНОВНАЯ ИНФОРМАЦИЯ 

Файлы WFZ представляют собой обычные ZIP-архивы с расширением ".wfz". Их можно открыть / разархивировать / упаковать с помощью бесплатной программы 7zip. В файлах WFZ есть структура папок, и вы должны ее использовать.

Должны быть доступны следующие базовые файлы:

КОД: 

	|-description.xml
	|-watchface.xml
	|-sample-face.png (optional, looks nicer with it)

Все цифры, которые показывают время, дату, шаги, пульс и т. д., Сохраняются как отдельные изображения PNG. Имена для файлов цифр должны быть от "0.png" до "9.png". Для определенных элементов, таких как расстояние или уровень заряда батареи, могут быть сохранены специальные символы, такие как точки, запятые или знак процента. Чтобы присвоить этой графике определенные значения, требуется файл с именем «font.xml». Он должен находиться в той же папке, которая вызывается для элемента в файле «watchface.xml».

Поэтому имеет смысл создать отдельные папки в этой структуре для отображения всех элементов. Например, папка «background» для фонового изображения или папка «time» для отображения времени.

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

В «заблокированном» режиме уменьшаются цвета дисплея, а не разрешение!

В «заблокированном режиме» доступны следующие 8 цветов:

- черный - # 000000
- белый - #ffffff
- синий - # 0000ff
- голубой - # 00ffff
- зеленый - # 00ff00
- желтый - # ffff00
- красный - # ff0000
- розовый - # ff00ff

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

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

1.1. - Структура основных файлов

Файл «description.xml» содержит информацию об авторе / дизайнере, версии, названии и описании циферблата. Кроме того, здесь можно установить флаг, если вы хотите, чтобы ваш циферблат настраивался пользователем. Этот файл также определяет, где часы должны получать изображение предварительного просмотра для этого циферблата.

Вот пример:

КОД: 

<? xml version="1.0" encoding="utf-8"?>
<watchfaceinfo>
	<version>1.0</version>
	<author>DXP2K</author>
	<designer>DXP2K</designer>
	<title>DXP2K Watchface</title>
	<basedOn> </basedOn>
	<preview>sample-face.png</preview>
	<settings>false</settings>
	<description>A watchface to try out...</description>
</watchfaceinfo>

Файл watchface.xml содержит все инструкции для используемых элементов. Точное положение на часах, расположение графических элементов, используемых для элементов, и т.д.

Их основная структура следующая:

КОД: 

<? xml version="1.0" encoding="utf-8"?>
<WatchFace version="1.0">


</WatchFace>

Все инструкции указаны в теге «WatchFace».

1.2. - Особые конфигурации в базовых файлах

+ Функция "поднятия запястья".

Часы могут кратковременно отображать лучшую графику с более чем 8 цветами, когда рука поднята, даже в "заблокированном режиме" ". Для этого необходимо вставить следующую строку в тег «WatchFace» в файле «watchface.xml»:

КОД: 

<WatchFaceItem type="support26w" config="true" />

Даже если эта функция явно не используется, рекомендуется вставить эту строку, а затем установить «false» в «config».

Для этой функции также требуется дополнительная подпапка в каждой папке, которая содержит графику для представления элементов. Требуемая папка - «slpt». Единственными исключениями из этого правила являются элементы «timedigital» и «timehand». Эти две папки со времен Pace / Stratos 2, здесь папка должна называться «26w». Оба варианта работают для папки с фоновым изображением.

Эта папка должна находиться на том же уровне, что и папка «8c» для графики для «заблокированного режима», а также должна содержать «полноцветные» версии графики.

+ Отображение строки состояния и определение положения

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

КОД: 

<WatchFaceItem type="statusbar" x="160" y="160" />

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

1.3. - Структура файла "font.xml" для отображения цифр и символов

Файл "font.xml" гарантирует, что графика, созданная для элемента, соответствует значениям, отображаемым часами. Параметр «тип» определяет, что это символы. Параметр «config» указывает место хранения графического изображения, которое должно быть назначено. «@wfz» обозначает корневую папку циферблата, то есть тот же уровень, что и файл «watchface.xml». Следующие папки должны соответствовать созданной структуре.

КОД: 

<?xml version="1.0" encoding="UTF-8"?>
	<WatchFace version="1.0">
	<WatchFaceItem type="font" charset="0" config="@wfz/steps/0.png" />
	<WatchFaceItem type="font" charset="1" config="@wfz/steps/1.png" />
	<WatchFaceItem type="font" charset="2" config="@wfz/steps/2.png" />
	<WatchFaceItem type="font" charset="3" config="@wfz/steps/3.png" />
	<WatchFaceItem type="font" charset="4" config="@wfz/steps/4.png" />
	<WatchFaceItem type="font" charset="5" config="@wfz/steps/5.png" />
	<WatchFaceItem type="font" charset="6" config="@wfz/steps/6.png" />
	<WatchFaceItem type="font" charset="7" config="@wfz/steps/7.png" />
	<WatchFaceItem type="font" charset="8" config="@wfz/steps/8.png" />
	<WatchFaceItem type="font" charset="9" config="@wfz/steps/9.png" />
</WatchFace>

«Font.xml» должен быть упакован в каждую папку с цифровой графикой, и путь должен быть соответствующим образом адаптирован, например, также для папок «8c» и «slpt», если они есть. Дополнительные символы возможны для элементов «Дата (понедельник)», «Батарея» и «Расстояние». Они также перечислены в «font.xml». 

«Наборы символов» не соответствуют реальным элементам.

Следующая строка предназначена для отображения точки или запятой в элементе «Расстояние»:

КОД: 

<WatchFaceItem type="font" charset="." config="@wfz/distance/point.png" />
<WatchFaceItem type="font" charset="," config="@wfz/distance/comma.png" />

Следующая строка работает для единиц измерения:

КОД: 

<WatchFaceItem type="font" charset=";" config="@wfz/distance/km.png" />

Эта же строка также используется для отображения символа процента для истории батареи.

КОД: 

<WatchFaceItem type="font" charset=";" config="@wfz/battery/percent.png" />

Здесь адаптирована только графика из соответствующих папок!

Элемент даты «год» играет здесь странную роль. Хотя здесь отображаются только числа, важно определить пустое изображение символа. В противном случае часы будут работать очень и очень медленно, а батарея разрядится очень быстро. Явно глюк в прошивке. Решением является следующая строка и пустой PNG.

КОД: 

<WatchFaceItem type="font" charset="." config="@wfz/date/year/sym.png" />

2. - ЭЛЕМЕНТЫ

Циферблат состоит из различных элементов. Доступные элементы Stratos 3 разделены на две группы. Сначала элементы «WatchFaceItem» и элементы «WatchFaceComponent». Элементы «WatchFaceItem» работают на Stratos 3, а также на предыдущих моделях Pace и Stratos 2. Элементы «WatchFaceComponent» работают только на Stratos 3 и не отображаются в Pace и Stratos 2.

2.1. - Элементы WatchFaceItem

На этом этапе я остановлюсь только на трех элементах WatchFaceItem. Это «фон», «цифровое время» и «стрелка времени». Все остальные элементы WatchFaceItem очень хорошо и подробно объясняются здесь: https://amazfitwatchfaces.com/blog/creating-watchfaces-wfz

WatchFaceItems в основном совместимы с Pace, Stratos и Stratos 3. Для всех элементов существует также версия с элементами «WatchFaceComponent».

+ Элемент WatchFaceItem «background»

Фоновое изображение должно быть доступно как минимум в двух вариантах. Один раз со всеми цветами и один раз с соответствующим образом адаптированными цветами для «заблокированного режима» - это подпапка «8c». Все изображения должны иметь одно и то же имя. Разрешение должно быть 320x320 пикселей.

Фоновое изображение включается в следующую строку:

КОД: 

<WatchFaceItem type="background" config="@wfz/background/0.png" />

Параметр «config» используется для указания места хранения графики.

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

КОД: 

<WatchFaceItem type="background" config="@wfz/background/0.png" configList="@wfz/background/background_list.xml" />

Параметр «config» определяет стандартное фоновое изображение. Затем параметр «configList» обращается к списку с дополнительными фоновыми изображениями. Этот список ("background_list.xml") затем содержит перечисление доступных фоновых изображений и структурирован следующим образом:

КОД: 

<? xml version="1.0" encoding="UTF-8"?>
	<WatchFace version="1.0">
	<WatchFaceItem type="background" config="@wfz/background/0.png" />
	<WatchFaceItem type="background" config="@wfz/background/1.png" />
	<WatchFaceItem type="background" config="@wfz/background/2.png" />
</WatchFace>

Все доступные фоновые изображения также должны быть доступны под тем же именем в папке «8c». Папка «26w» или «slpt» в настоящее время игнорируется функцией «background». Просто один из замечательных багов прошивки. Вы также можете использовать «фон» с «WatchFaceComponent» вместо этого, если хотите использовать функцию «Поднять руку». Подробнее ниже ...

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

В файле «discription.xml» параметр «settings» также должен иметь значение «true», чтобы вообще разрешить настройку.

+ Элемент WatchFaceItem "timedigital"

С помощью элемента WatchFaceItem "timedigital" время выводится в цифровом формате. Отображаются часы и минуты, а также мигающий разделитель. Все цифры и разделитель (charset = ":") определяются через "font.xml". «Timedigital» включается в следующую строку:

КОД: 

<WatchFaceItem type="timedigital" x="10" y="10" width="50" height="10" font="@wfz/font" />

В этом варианте начальная позиция указывается с помощью x и y, а затем размер по всем цифрам и символам определяется с помощью «ширины» и «высоты». «Ширина» - это сумма всех значений ширины используемой графики, а «высота» - это простая высота изображения. Пример: 4 цифры каждая шириной 20 пикселей и высотой 30 пикселей плюс разделитель с шириной 10 пикселей и высотой 30 пикселей дает значение 90 для «ширины» и 30 для «высоты».

+ Элемент WatchFaceItem «timehand»

С помощью элемента WatchFaceItem «timehand» аналоговые указатели используются для отображения времени. Должны быть предоставлены три указателя:

> стрелки для часов - "hour.png"

> стрелки для минут - "minutes.png"

> стрелки для секунд - "секунды.

В следующем примере все три файла находятся в папке «timehand». Указатели, которые также должны отображаться в «заблокированном режиме», также должны быть доступны во вложенной папке «8c». Однако по умолчанию секундная стрелка не отображается. Это необходимо сначала настроить в настройках часов. Указатели объединены со следующей строкой:

КОД: 

<WatchFaceItem type="timehand" x="160" y="160" width="320" height="320" config="@wfz/timehand" />

Параметры x и y определяют точку, вокруг которой должен вращаться указатель. К сожалению, ни один другой пункт не работает из-за ошибки прошивки. Так руки всегда вращаются вокруг центра. С помощью параметров «ширина» и «высота» вы указываете, насколько велика графика для указателей. В этом примере графика имеет размер 320x320 пикселей. Обычно бывает прозрачная графика, на которой стрелки находятся в положении «12 часов».

2.2. - Элементы WatchFaceComponent

Виджеты GTR, вероятно, взяты из ветки разработки для Amazfit GTR и, к сожалению, были реализованы хуже, чем прямо в Stratos 3. Хуже, чем правильно, потому что их много, но это не так » t работают правильно или не работают вообще. Все, что работает, перечислено ниже.

+ WatchFaceComponent type = "background" - фоновое изображение

Это второй вариант включения фонового изображения. Здесь также работает функция «подъем руки». Фоновое изображение должно быть доступно как минимум в двух версиях. Один раз со всеми цветами для активного режима и один раз с соответствующим образом адаптированными цветами для «Заблокированного режима» в папке «8c». Прямо как старый WatchFaceItem. Если функция «поднять запястье» будет продолжать использоваться, в папке «slpt» также должно быть изображение. Все изображения должны иметь одно и то же имя. Фоновое изображение объединяется со следующей строкой.

КОД: 

<WatchFaceComponent type="background" config="@ wfz/background/0.png" />

Параметр «config» используется для указания места хранения графики.

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

+ WatchFaceComponent type = "timedis" - цифровое отображение времени.

В этом варианте цифрового времени часы, минуты и секунды могут отображаться в различных шрифтах и ​​размерах шрифта. Для возможно необходимого разделителя, обычно двоеточия, можно создать отдельный рисунок. Индикаторы для добавления времени «AM» и «PM» также могут быть созданы как рисунок. Секунды по умолчанию скрыты в «заблокированном режиме». Это можно настроить в настройках часов.

Время указано в следующих строках:

КОД: 

<WatchFaceComponent type="timedis">
	<Item type="hour" high.x="37" high.y="124" low.x="93" low.y="124" font="@wfz/time/hours" />
	<Item type="min" high.x="177" high.y="124" low.x="233" low.y="124" font="@wfz/time/minutes" />
	<Item type="sec" high.x="144" high.y="275" low.x="161" low.y="275" font="@wfz/time/seconds" />
	<Item type="colon_hm" x="157" y="140" config="@wfz/time/colon/colon.png" />
	<Item type="AM" x="153" y="128" config="@wfz/time/format/am.png" />
	<Item type="PM" x="153" y="128" config="@wfz/time/format/pm.png" />
</WatchFaceComponent>

Параметры «high.x» и «high.y» указывают начальную точку десятков часов. «Low.x» и «low.y» - единицы часа. Это также относится к минутам и секундам. Для разделителя ("двоеточие") указаны только позиции x и y. То же самое относится к графике для отображения «AM» и «PM». Позиционирование всегда определяет верхний левый угол изображения. Отдельные строки можно пропустить, если вы не хотите использовать показанные значения.

+ WatchFaceComponent type = "timehand" - отображает стрелки времени.

В элементе WatchFaceComponent "timehand" аналоговые указатели используются для отображения времени.

В приведенном ниже примере все три файла находятся в папке "timehand". Указатели, которые также должны отображаться в «заблокированном режиме», также должны быть доступны во вложенной папке «8c». Однако по умолчанию секундная стрелка не отображается. Это необходимо сначала настроить в настройках часов. Указатели, которые не должны отображаться, должны быть доступны как пустая «графика».

Указатели объединены со следующими строками:

КОД: 

<WatchFaceComponent type = "timehand">
	<Item type="hour" x="160" y="160" xCenter="0" yCenter="0" config="@wfz/timehand/hour.png" />
	<Item type="min" x="160" y="160" xCenter="0" yCenter="0" config="@wfz/timehand/minute.png" />
	<Item type="sec" x="160" y="160" xCenter="0" yCenter="0" config="@wfz/timehand/seconds.png" />
</WatchFaceComponent>

Однако здесь есть отклонения от «хронометра» WatchFaceItem. Параметры x и y определяют точку на графике, вокруг которой он должен вращаться. Они не определяют точку на дисплее! Это всегда 160x160, но его можно сдвинуть индивидуально для каждого указателя с помощью параметров «xCenter» и «yCenter». Параметры указывают значение в пикселях, на которое указатели должны быть перемещены от центра экрана.

Пример: значение xCenter = "40" сдвигает указатель на 40 пикселей вправо, значение xCenter = "- 40" сдвигает указатель на 40 пикселей влево.

В этом примере графика имеет размер 320x320 пикселей, точка поворота (ось) - 160x160. Стрелки всегда нарисованы в позиции «12 часов».

+ WatchFaceComponent type = "datehand" - отображает дату с указателями.

В элементе WatchFaceComponent "datehand" аналоговые указатели используются для отображения даты. Могут быть предоставлены три указателя.

В приведенном ниже примере все три файла находятся в папке «datehand». Указатели, которые также должны отображаться в «заблокированном режиме», также должны быть доступны во вложенной папке «8c». Отдельные шаги на круговой траектории соответствуют максимально возможным отображаемым значениям. Для 31-го дня, 12-го месяца и 7-го дня недели, начиная с воскресенья.

Указатели объединены со следующими строками:

КОД: 

<WatchFaceComponent type="datehand">
	<Item type="day" x="125" y="125" xCenter="0" yCenter="0" config="@wfz/datehand/day.png" a0="0" a1="348"/>
	<Item type="month" x="125" y="125" xCenter="0" yCenter="0" config="@wfz/datehand/month.png" a0="0" a1="348"/>
	<Item type="week" x="125" y="125" xCenter="0" yCenter="0" config="@wfz/datehand/week.png" a0="0" a1="348"/>
</WatchFaceComponent>

Параметры x и y определяют точку на графике (указатель), вокруг которой он должен вращаться. Они не определяют точку на дисплее! Это всегда 160x160, но его можно перемещать индивидуально для каждого указателя с помощью параметров «xCenter» и «yCenter». Параметры указывают значение в пикселях, на которое указатели должны быть перемещены от центра экрана. Отрицательные значения также можно сдвигать вверх или влево. Параметры a0 и a1 описывают начальную и конечную точки в градусах на круговой траектории, идущей по часовой стрелке, где 0 и 360 градусов соответствуют положению на 12 часов.

+ WatchFaceComponent type = "date" - отображение даты

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

По сути, отображение даты определяется в следующем блоке (пример):

КОД: 

<WatchFaceComponent type="date" model="0">
	<Item type="day" x0="48" y0="46" x1="82" y1="69" align="72" space="0" font="@wfz/date/day" mon_fillzero="false" day_fillzero="false" day_has_end="false" />
	<Item type="week" x="47" y="72" font="@wfz/date/weekday" />
	<Item type="month_image" x="233" y="52" config="@wfz/date/month" />
	<Item type="year" x0="242" y0="70" x1="280" y1="81" align="72" space="0" font="@wfz/date/year" />
</WatchFaceComponent>

Вы можете найти пояснения к отдельным параметрам ниже!

++ Определение день

Текущий день может отображаться в следующей строке:

КОД: 

<Item type="day" x0="48" y0="46" x1="82" y1="69" align="72" space="0" font="@wfz/date/day" day_fillzero="false" day_has_end="false" />

В папке на день необходим файл "font.xml"!

++ Определение месяц

Текущий день можно отобразить в следующей строке:

КОД: 

<Item type="month_text" x0="48" y0="46" x1="82" y1="69" align="72" space="0" font="@wfz/date/mon" mon_fillzero="false" />

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

КОД: 

<Item type="mon_day" x0="48" y0="46" x1="255" y1="107" align="72" space="0" font="@wfz/date/day" mon_fillzero=" false "day_fillzero="false" day_has_end="false"/>

Также возможно отображение месяца в графическом виде. Строка для этого:

КОД: 

<Item type="month_image" x="48" y="46" config="@wfz/date/month" />

В этом случае вам нужно создать 12 графиков с названиями, значками или числовыми значениями отдельных месяцев. Они начинаются с января в файле «00.png». Декабрь - последний месяц, его можно найти в файле «11.png». В папке с месяцами не обязательно должен быть "font.xml".

++ Определение дней недели

Дни недели также могут отображаться отдельно. Для этого вам понадобится 7 рисунков с названиями дней недели, начинающимися с воскресенья, в файле «0.png». Затем понедельник с «1.png» и т.д. Суббота - последний день недели, его можно найти в файле «6.png». День недели включается в эту строку:

КОД: 

<Item type="week" x="47" y="72" font="@wfz/date/weekday" />

Теперь снова становится интересно. Дни недели должны быть запакованы в папку «будний день» в подпапке «EN» (для английского языка). Даже если эта папка не указана при ее вызове. Кроме того, рядом с папкой «EN» должна быть папка «CN» (для китайского языка). Там же должна быть графика 7 будних дней. В идеале на китайском, но достаточно копии английской папки. Если одна из двух папок отсутствует, день недели не отображается в соответствующей версии прошивки (США, Китай) или отображается красным цветом с системными шрифтами. Для дней недели не требуется "font.xml".

++ Определение год

Год указывается в следующей строке:

КОД: 

<Item type="year" x0="242" y0="70" x1="280" y1="81" align="72" space="0" font="@wfz/date/year" />

В папке на год необходим файл "font.xml"!

Обратите внимание, что в папке также должен быть дополнительный рисунок, который включен в "font.xml" со следующей строкой.

КОД: 

<WatchFaceItem type="font" charset="." config="@wfz/date/year/xtra.png" />

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

+ WatchFaceComponent type = "GTRwidget" и элемент "dataType" 

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

Вот список известных типов данных:

1. шаги - работает
2. ежедневная дистанция тренировки - работает
3. общая дистанция тренировки - работает
4. ежедневные калории - работает
5. пульс - работает
6. дата - работает
7. погода - не работает
8. качество воздуха - не работает
9. аккумулятор - работает
10. сообщения - не работает
11. этажи - не работает

++ dataType 1 - шаги

Есть два варианта отображения для dataType 1. Один раз в виде числа и один раз в виде графика (например, индикатор выполнения).

1-й вариант - в виде числа - включается в следующую строку

КОД: 

<WatchFaceComponent type="gtrwidget" id="0" dataType="1" x0="10" y0="10" x1="100" y1="25" align="66" space="0" font="@wfz/steps"/>

2-й вариант - в виде графика (например, индикатор выполнения) - объединяется со следующими строками

КОД: 

<WatchFaceComponent type="gtrwidget" dataType="1">
	<Item type="AdditiveImage" x="10" y="10" additiveBitmapConfig="@wfz/steps/image" additiveBitmapCount="10" continueMode="0" />
</WatchFaceComponent>

Обратите внимание, что рисунок для индекса 0 представляет не конец, а последний шаг перед ним. При 10 графиках это соответствует первой десятой, 10% дневной цели.

Параметр continueMode определяет, должны ли графики отображаться индивидуально в соответствии с индексом (значение = 1) или все графики до индекса (значение = 0) должны отображаться одновременно. Последнее полезно только для очень небольшого количества и особенно для маленькой графики. В противном случае часы будут работать очень медленно, и расход батареи значительно возрастет. Однако в настоящее время continueMode = "1" не работает должным образом из-за ошибки в прошивке часов. Следовательно, необходимо использовать значение «0».

Файл «add.xml» должен находиться в папке с графикой. Он должен иметь следующую структуру (например, 10 рисунков):

КОД: 

<? xml version='1.0' encoding='utf-8'?>
<WatchFace version="1.0">
	<WatchFaceItem type="addtiveimage" index="0" x="10" y="10" config="@wfz/steps/image/00.png" />
	<WatchFaceItem type="addtiveimage" index="1" x="10" y="10" config="@wfz/steps/image/01.png" />
	<WatchFaceItem type="addtiveimage" index="2" x="10" y="10" config="@wfz/steps/image/02.png" />
	<WatchFaceItem type="addtiveimage" index="3" x="10" y="10" config="@wfz/steps/image/03.png" />
	<WatchFaceItem type="addtiveimage" index="4" x="10" y="10" config="@wfz/steps/image/04.png" />
	<WatchFaceItem type="addtiveimage" index="5" x="10" y="10" config="@wfz/steps/image/05.png" />
	<WatchFaceItem type="addtiveimage" index="6" x="10" y="10" config="@wfz/steps/image/06.png" />
	<WatchFaceItem type="addtiveimage" index="7" x="10" y="10" config="@wfz/steps/image/07.png" />
	<WatchFaceItem type="addtiveimage" index="8" x="10" y="10" config="@wfz/steps/image/08.png" />
	<WatchFaceItem type="addtiveimage" index="9" x="10" y="10" config="@wfz/steps/image/09.png" />
</WatchFace>

Координаты x и y могут быть такими же, как в соответствующей строке файла watchface.xml. Тогда вся графика находится на одном месте. Но вы также можете расположить их специально, если они, например, расположены один за другим (индикатор выполнения с пробелами и т. Д.).

++ dataType 2 - сегодняшнее тренировочное расстояние

dataType 2 показывает ежедневное тренировочное расстояние. Для ежедневных шагов расстояния не показаны!

DataType 2 интегрирован следующим образом:

КОД: 

<WatchFaceComponent type="gtrwidget" id="0" dataType="2" x0="10" y0="10" x1="100" y1="25" align="66" space="0" font="@wfz/daily_km" />

В папке с графикой для этого элемента необходима графика для разделителя! Графика для единицы измерения также может быть добавлена ​​в качестве опции.

Оба они отмечены в "font.xml" следующим образом:

КОД: 

<WatchFaceItem type="font" charset="." config="@wfz/daily_km/point.png"/>
<WatchFaceItem type="font" charset=";" config="@wfz/daily_km/km.png"/>

++ dataType 3 - Общее тренировочное расстояние

dataType 3 показывает общее тренировочное расстояние. К сожалению, он также сбрасывается при сбросе часов.

DataType 3 интегрирован следующим образом:

КОД: 

<WatchFaceComponent type="gtrwidget" id="0" dataType="3" x0="10" y0="10" x1="100" y1="25" align="66" space="0" font="@wfz/total_km" />

В папке с графикой для этого элемента необходима графика для разделителя! Графика для единицы измерения также может быть добавлена ​​в качестве опции.

Оба они отмечены в "font.xml" следующим образом:

КОД: 

<WatchFaceItem type="font" charset="." config="@wfz/total_km/point.png"/>
<WatchFaceItem type="font" charset=";" config="@wfz/total_km/km.png"/>

++ dataType 4 - калории

DataType 4 показывает ежедневное потребление калорий.

DataType 4 интегрирован следующим образом:

КОД: 

<WatchFaceComponent type="gtrwidget" id="0" dataType="4" x0="10" y0="10" x1="100" y1="25" align="66" space="0" font="@wfz/kcal" />

++ dataType 5 - пульс или частота сердечных сокращений в ударах в минуту. 

dataType 5 показывает текущую измеренную частоту пульса / частоту сердечных сокращений.

DataType 5 интегрирован следующим образом:

КОД: 

<WatchFaceComponent type="gtrwidget" id="0" dataType="5" x0="10" y0="10" x1="100" y1="25" align="66" space="0" font="@wfz/pulse" />

++ dataType 10 - аккумулятор

Есть два варианта отображения заряда аккумулятора. Один раз в виде числа и один раз в виде графики (например, индикатор выполнения).

1-й вариант - в виде текста - включает следующие строки:

КОД: 

<WatchFaceComponent type="gtrwidget" id="0" dataType="10">
	<Item type="level" x0="10" y0="10" x1="100" y1="25" align="66" space="0" font="@wfz/power" />
</WatchFaceComponent>

В файле «font.xml», принадлежащем этому дисплею, следующая строка может использоваться для отображения знака процента (если он доступен в виде изображения).

КОД: 

<WatchFaceItem type="font" charset=":" config="@wfz/power/percent.png" />

2-й вариант - в виде графики - объединяется со следующими строками

КОД: 

<WatchFaceComponent type="gtrwidget" id="0" dataType="10">
	<Item type="batteryimage" x="10" y="10" bitmapArray="@wfz/power/image" count="10" NewDisplayStyle="1" />
</WatchFaceComponent>

Обратите внимание, что может быть максимум 12 изображений. Больше не обрабатываются. Он начинается с «00.png» и в сумме составляет максимум «11.png». Однако файл «00.png» - это не конец, а последний шаг перед ним. С 10 изображениями отображение «00.png» соответствует последней десятой части, например, 10% заряда батареи.

+ WatchFaceComponent type = "icon" - вставить графику в любой точке

Вы можете вставить графику в любом месте с помощью следующей строки:

КОД: 

<WatchFaceComponent type="Icon" x="160" y="160" config="@wfz/icons/smiley.png" />

Параметры «x» и «y» указывают положение и определяют верхний левый угол графика.

+ WatchFaceComponent type = "pointer" - интеграция графического изображения в качестве указателя для различных значений

Указатель может быть интегрирован с помощью следующего кода (здесь используется индикатор батареи в качестве примера):

КОД: 

<WatchFaceComponent type="gtrwidget" dataType="10">
	<Item type="pointer" x="10" y="10" xCenter="0" yCenter="0" config="@wfz/power/pointer.png" a0="180" a1="360"/>
</WatchFaceComponent>

Параметры x и y определяют точку на графике, вокруг которой он должен вращаться. Они не определяют точку на дисплее! Это всегда 160x160, но его можно перемещать индивидуально для каждого указателя с помощью параметров «xCenter» и «yCenter». Параметры указывают значение в пикселях, на которое указатели должны быть перемещены от центра экрана. Отрицательные значения также можно сдвигать вверх или влево. Параметры a0 и a1 описывают начальную и конечную точки в градусах на круговой траектории, идущей по часовой стрелке, где 0 и 360 градусов соответствуют положению на 12 часов. В показанном здесь примере указатель начинается вертикально вниз (6 часов), а затем перемещается вверх (12 часов).

+ WatchFaceComponent type = "progress" - - отображение прогресса как непрерывное.

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

Вот пример для dataType 1 = steps. Цвет указывается здесь как десятичное значение Windows.

Здесь можно найти отличный конвертер: https://www.htmlcsscolor.com/hex/00DCFF

КОД: 

<WatchFaceComponent type="progress" dataType="1">
	<Item type="Arc" xCenter="160" yCenter="160" rx="151" ry="151" color="-16720641" size="9" cap="0" a0="0" a1="360"/>
</WatchFaceComponent>

Параметры «xCenter» и «yCenter» описывают центральную точку круга, а «rx» и «ry» определяют расстояние до центральной точки, с которой начинается рисование. С помощью "размера" дается толщина нарисованного круга. Параметры «a0 и« a1 »определяют начальную и конечную точки в градусах. Оба находятся в 12 часах, а направление - против часовой стрелки. Если круг должен начинаться в 9 часов и заканчиваться в 12 часов, значение -90 для выбора «a0» и 270 для «a1». «Cap» в настоящее время не работает ... Ошибка? Не знаю.

2.3. - Пояснения к параметрам элементов WatchFaceComponent

Большинство типов позиционируются с использованием x0, y0, x1, y1 и должны пониматься как прямоугольник. Расстояние от x0 до x1 должно быть суммой ширины всей возможной символьной графики плюс расстояния (пробел). Расстояние между y0 и y1 соответствует высоте графического изображения символа. Прямоугольник можно сделать больше, чем нужно. Но тогда выравнивание с использованием «align» необходимо для определения положения дисплея и предотвращения «скачков» цифр при переключении между режимами работы часов.

КОД: 

x0, y0 -------------
       |           |
       |           |
       ------------- x1, y1

--------------------------------------------------

Параметр «align» в инструкции dataType отвечает за выравнивание в указанной области. Эта область соответствует прямоугольнику, который был определен как x0, y0, x1, y1.

Затем в этой области графику можно выровнять следующим образом.

КОД: 

 2  -  8  - 4
 |     |    |
66  - 72 - 68
 |     |    |
34  - 40 - 36

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

Пример: отображение шагов с макс. 5 цифр. Одна цифра (рисунок) - 10x15 пикселей. Таким образом получается область 50x15 пикселей. В этой области вы должны теперь определить выравнивание графики, поскольку числа, содержащие менее 5 возможных цифр, в противном случае будут прыгать, например, когда часы перейдут в "заблокированный режим". При выравнивании по центру число 50 (2 цифры, 20 пикселей) будет отображаться в середине определенной области.

--------------------------------------------------

Параметр «space» в инструкции dataType определяет расстояние между графическими символами в пикселях.

Спасибо за внимание.

Буду рад если кому то помог.