[Tutorial] How to create WFZ watchfaces for Stratos 3 (new style / GTRWidget)

[DxP]

Hello community,

I've been asked several times how I do it with the watch faces and what software I use. The Software-question is easy to answer: Paint Shop Pro 2020 for the graphics, Notepad ++ for the code and 7zip to pack / unpack. Nothing else.

For the HOW-question - I sat down and wrote the following tutorial.

At this point I would like to share all the information I have collected about creating watch faces in WFZ format for the Stratos 3. It is particularly about the new possibilities with the "WatchFaceComponent" elements.
This tutorial is to be understood as "work in progress". If something changes or I get new information, I'll update it here. You are welcome to participate. If you have information on the topic, please let me know.

The goal should be -> many great new watch faces!

I hope this little tutorial helps you to create your own watch face in new style for the Amazfit Stratos 3.

,cheers DxP2K
PS: English is not my mother tongue. I had to translate some things with Google. If you find any mistakes, let me know.
PSS: All my information and experiences based on the us-firmware, 4.2.6.0 and above.
--------------------------------------------------

[DxP]

Table of contents

1. THE BASICS
   1. Structure of the basic files
   2. Special configurations in the base files
   3. Structure of the "font.xml" file for displaying digits and characters
2. THE ELEMENTS
   1. WatchFaceItem elements
   2. WatchFaceComponent elements
   3. Explanations of the parameters for the WatchFaceComponent elements
3. OTHER

----
1. - THE BASICS

The WFZ files are basically normal ZIP archives with the file extension ".wfz". They can be opened/unzipped/packed with the free 7zip program. A folder structure is possible within the WFZ files and you should use it.

The following basic files must be available:

Código: Selecionar todos

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

All digits that show the time, date, steps, pulse, etc., are stored as individual PNG graphics. For the digits, I generally recommend "0.png" to "9.png". For certain elements such as the distance or the charge level of the battery, special characters such as points, commas or the percentage sign can be stored. In order to assign these graphics to certain values, a file with the name "font.xml" is required. This should be located in the same folder that is called for the item in the "watchface.xml" file.

It therefore makes sense to create separate folders in this structure for all the elements to be displayed. E.g. the folder "background" for the background image or a folder "time" for the time display.
At least the subfolder "8c" belongs to each element. This contains the graphics for the so-called "locked mode", the mode in which the clock is most of the time it is when it is not actively used.

The "locked mode" reduces the display colors, not the resolution!
The following 8 colors are available in "locked mode":

- black - #000000
- white - #ffffff
- blue - #0000ff
- light blue - #00ffff
- green - #00ff00
- yellow - #ffff00
- red - #ff0000
- pink - #ff00ff

All other colors are interpolated to the closest color. A dark gray, for example, becomes black and is no longer visible. A light gray becomes white.

For good-looking and functional watch faces, you should pay attention to this when creating the graphics. It is always worthwhile to create separate graphics for "Locked Mode" instead of having the clock do it. With a graphics program, you can get a lot more out of this than the clock's algorithm can do.


----
1.a - Structure of the basic files

The "description.xml" file contains information about the author/designer, version, name and description of the watch face. In addition, a flag can be set here if you want to make your watchface configurable by the user. This file also determines where the clock should get the preview image for this watch face.

Here's an example:

Código: Selecionar todos

<? 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>

The watchface.xml file contains all the instructions for the elements used. Exact position on the clock, location of the graphics used for the elements, etc.
Their basic structure is as follows:

Código: Selecionar todos

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


</WatchFace>

All instructions are noted within the "WatchFace"-tag.


----
1.b - Special configurations in the base files


+ The "wrist raise"-function

It is possible that the watch can briefly display the better graphics with more than 8 colors when the arm is raised, even in "locked mode". To do this, the following line must be inserted within the "WatchFace" tag in the "watchface.xml" file:

Código: Selecionar todos

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

Even if this function is explicitly not to be used, it is advisable to insert this line and then set a "false" to "config".

This function also requires a further subfolder in each folder that contains graphics for the representation of elements. The required folder is "slpt". The only exceptions to this are the elements "timedigital" and "timehand". These two folders are from the times of the Pace/Stratos 2, here the folder must be called "26w". Both variants work for the folder for the background image.

This folder must be on the same level as the "8c" folder for the graphics for the "Locked Mode" and should also contain the "full-color" versions of the graphics.

> slpt = new elements (Stratos 3/GTRWIDGET)
> 26w = old elements (Stratos 3/Stratos/Pace)



+ Display the status bar and determine the position

The optional status bar shows the following symbols depending on the situation. Watch is charging, Airplane mode, Do not disturb mode, and Smartphone disconnected. The status bar does not have to be integrated, but it is helpful and you should not do without it. With the following line the status bar is inserted and its position is determined:

Código: Selecionar todos

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

With this value, the symbols of the status bar are displayed exactly in the middle of the watch face. If several symbols are displayed at the same time, they are always centered on their X-axis.


----
1.c - Structure of the "font.xml" file for displaying digits and characters

The "font.xml" file ensures that the graphics created for an element are assigned to the values to be displayed by the clock. The "type" parameter defines that these are characters. The "config" parameter specifies the storage location of the graphic that is to be assigned. "@wfz" stands for the root folder of the watchface, i.e. the same level as the "watchface.xml" file. The following folders should then follow the structure created. In the following example the graphics are in the "steps" folder.

Código: Selecionar todos

<?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>

A "font.xml" must be packed into each folder with digit graphics and the path must be adapted accordingly, for example also for the folders "8c" and "slpt", if available. Additional characters are possible for the elements "Date (mon_day)" "Battery" and "Distance". These are also listed in the "font.xml". The "charsets" do not correspond to the real characters.

The following line works to display a point or comma in the "Distance" element:

Código: Selecionar todos

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

The following line works for the units of measurement:

Código: Selecionar todos

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

The same line is also used to display the percentage symbol for the battery history.

Código: Selecionar todos

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

Only the graphics in the respective folders are adapted here!


The date element "year" plays a strange role here. Although only numbers are displayed here, it is essential to define an empty symbol image. Otherwise, the clock will be very, very slow and the battery will drain very quickly. Obviously a bug in the firmware. The solution is the following line and an empty PNG.

Código: Selecionar todos

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

----
2. - THE ELEMENTS

A watchface is made up of various elements. The available elements on the Stratos 3 are divided into two groups. First the "WatchFaceItem" elements and the "WatchFaceComponent" elements. The "WatchFaceItem" elements work on the Stratos 3 and also on the previous models Pace and Stratos 2. The "WatchFaceComponent" elements only work on the Stratos 3 and are not displayed by the Pace and Stratos 2.


----
2.a - WatchFaceItem elements

At this point, I'll only go into three WatchFaceItem items. These are "background", "timedigital" and "timehand". All other WatchFaceItem elements are explained very well and in detail here: https://amazfitwatchfaces.com/blog/crea ... hfaces-wfz

WatchFaceItems are basically compatible with the Pace, Stratos and Stratos 3. For all elements there is also a version with "WatchFaceComponent" elements.



+ The WatchFaceItem element "background"

A background image should be available in at least two variants. Once with all colors and once with appropriately adapted colors for "locked mode" - keyword: folder "8c". The pictures must all have the same name. The resolution should be 320x320px.

The background image is included with the following line:

Código: Selecionar todos

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

The "config" parameter is used to specify the storage location for the graphic.

It is still possible to offer several background images to choose from, which the user can configure himself. The following line is required for this:

Código: Selecionar todos

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

The "config" parameter defines the standard background image. The "configList" parameter then refers to the list with the additional background images. This list ("background_list.xml") then contains an enumeration of the available background images and is structured as follows:

Código: Selecionar todos

<? 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>

All available background images must also be available with the same name in the "8c" folder. The "26w" or "slpt" folder is currently ignored for the "background" function. Just one of the great bugs in the firmware. You can use also "background" with the "WatchFaceComponent" instead of this, if you want use the "Hand-raise"-function. More below...

A mask is also required for the selection during configuration on the clock. In this case a circle on a transparent background the size of the screen (160 radius).

In the "discription.xml" file, the "settings" parameter must also be set to "true" to enable configuration at all.



+ The WatchFaceItem element "timedigital"

With the WatchFaceItem element "timedigital" the time is output in digital format. Hours and minutes and a flashing separator are displayed. All digits and the separator (charset=":") are defined via a "font.xml". "Timedigital" is included with the following line:

Código: Selecionar todos

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

With this variant, the start position is specified with x and y and then the extent over all digits and characters is defined with "width" and "height". "Width" is the sum of all the widths of the graphics used and "height" is the simple height of a graphic. Example: 4 digits each 20px width and 30px height plus the separator with 10px width and 30px height results in a value of 90 for "width" and 30 for "height".



+ The WatchFaceItem element "timehand"

With the WatchFaceItem element "timehand", analog pointers are used to display the time. Three pointers must be provided:

> Hands for hours - "hour.png"
> Hands for minutes - "minutes.png"
> Hands for seconds - "seconds.png"

In the following example, all three files are in the "timehand" folder. The pointers that should also be displayed in "Locked Mode" must also be made available in the "8c" subfolder. However, the second hand is not displayed by default. This must first be configured in the clock settings. The pointers are integrated with the following line:

Código: Selecionar todos

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

The parameters x and y define the point around which the pointer should rotate. Unfortunately, no other point works due to a firmware error. So the hands always rotate around the center. With the parameters "width" and "height" you specify how big the graphics for the pointers are. In this example, the graphics have a dimension of 320x320 pixels. Usually there are transparent graphics in which the hands are at the 12 o'clock position.


----
2.b - The WatchFaceComponent elements

The GTR widgets probably come from the development branch for the Amazfit GTR and were unfortunately implemented more poorly than right in the Stratos 3. Worse than right because a lot is there, but it doesn't work properly or not at all. Everything that works is listed below.


+ WatchFaceComponent type="background" - background image

This is a second option to include a background image. The "hand raise"-function also works here. The background image should be available in at least two versions. Once with all the colors for the active mode and once with appropriately adapted colors for the "Locked Mode", in the "8c" folder. Just like the old "WatchFaceItem". If the "wrist raise"-function is to continue to be used, there must also be a picture in the "slpt" folder. The images must each have the same name. The background image is integrated with the following line.

Código: Selecionar todos

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

The "config" parameter is used to specify the storage location for the graphic.
A configuration with several background images to choose from does not seem to be possible here.



+ WatchFaceComponent type="timedis" - digital time display

With this variant of the digital time, hours, minutes and seconds can be displayed in different fonts and font sizes. A separate graphic can be created for the possibly required separator, usually a colon. Indicators for the time additions "AM" and "PM" can also be created and displayed. The seconds are hidden by default in "Locked Mode". This can be configured in the clock settings.

The time is included in the following lines:

Código: Selecionar todos

<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>

The parameters "high.x" and "high.y" indicate the starting point of the tens of the hours. "Low.x" and "low.y" are the units of the hour. This also applies to the minutes and seconds. For the separator ("colon_hm") only the x and y positions are given. The same applies to the graphics for displaying "AM" and "PM". The positioning always defines the upper left corner of the graphic. Individual lines can be left out if you do not want to use the values ​​shown.



+ WatchFaceComponent type="timehand" - displays time hands

With the WatchFaceComponent element "timehand", analog pointers are used to display the time.

In the example below, all three files are in the "timehand" folder. The pointers that should also be displayed in "Locked Mode" must also be made available in the "8c" subfolder. However, the second hand is not displayed by default. This must first be configured in the clock settings. Pointers that should not be displayed must still be available as empty "graphics".

The pointers are integrated with the following lines:

Código: Selecionar todos

<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>

However, there are deviations here from the WatchFaceItem "timehand". The parameters x and y define the point in the graphic around which it should rotate. They don't define the point on the display! This is always 160x160, but can be shifted individually for each pointer using the "xCenter" and "yCenter" parameters. The parameters indicate the value in pixels that the pointers should be moved from the center of the screen.

An example: the value xCenter = "40" shifts the pointer by 40 pixels to the right, the value xCenter = "- 40" shifts the pointer by 40 pixels to the left.

In this example, the graphics have a dimension of 320x320 pixels, the pivot point (axis) is 160x160. The hands are always drawn at the 12 o'clock position. Usually transparent graphics are used.



+ WatchFaceComponent type="datehand" - displays date with pointers

With the WatchFaceComponent element "datehand", analog pointers are used to display the date. Three pointers can be provided.

In the example below, all three files are in the "datehand" folder. The pointers that should also be displayed in "Locked Mode" must also be made available in the "8c" subfolder. The individual steps on the circular path correspond to the maximum possible displayable values. For days 31, months 12 and weekdays 7, starting with Sunday.

The pointers are integrated with the following lines:

Código: Selecionar todos

<WatchFaceComponent type="timehand">
	<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>

The parameters x and y define the point in the graphic (pointer) around which it should rotate. They don't define the point on the display! This is always 160x160, but can be moved individually for each pointer using the "xCenter" and "yCenter" parameters. The parameters indicate the value in pixels that the pointers should be moved from the center of the screen. Negative values ​​are also possible to shift up or left. The parameters a0 and a1 describe the starting point and the end point in degrees on a circular path running clockwise where 0 and 360 degrees correspond to the 12 o'clock position.



+ WatchFaceComponent type="date" - date display

There are 4 values ​​available for the date display. Day, day of the week, month and year. However, in certain configurations it is quite complicated. For details, see the breakdown below.
Basically, the display of the date is defined within the following block (example):

Código: Selecionar todos

<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>

You can find the explanations of the individual parameters below!



++ Definition day

The current day can be displayed via the following line:

Código: Selecionar todos

<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" />

A "font.xml" file is required in the folder for the day!



++ Definition month

The current day can be displayed via the following line:

Código: Selecionar todos

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

There is also a combination of day and month, but is tied to the american date format (first month, then day) and you need a separator. Here is the line for that:

Código: Selecionar todos

<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"/>

It is also possible to display the month as a graphic. The line for this is:

Código: Selecionar todos

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

In this case you have to create 12 graphics with the names, icons or the numerical values ​​of the individual months. They start with January in the file "00.png". December is the last month and can be found in the file "11.png". There does not have to be "font.xml" in the folder for the months.



++ Definition of days of the week

The days of the week can also be displayed separately. For this you need 7 graphics with the weekday names beginning with Sunday in the file "0.png". Then Monday with "1.png" etc. Saturday is the last day of the week and can be found in the file "6.png". The day of the week is included with this line:

Código: Selecionar todos

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

Now it's getting interesting again. The days of the week have to be packed in the folder "weekday" in the subfolder "EN" (for English). Even if this folder is not specified when it is called. In addition, there must also be a "CN" folder (for Chinese) next to the "EN" folder. The 7 weekday graphics must also be located there. Ideally in Chinese, but a copy of the English folder is sufficient. If one of the two folders is missing, the day of the week cannot be seen on the respective firmware version (US, CN) or is shown in red with system fonts. No "font.xml" is required for the days of the week.



++ Definition year

The year is included with the following line:

Código: Selecionar todos

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

A "font.xml" file is required in the folder for the year!

Please note that there must also be an extra graphic in the folder, which is included in the "font.xml" with the following line.

Código: Selecionar todos

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

The graphic can be emty, but without this, the clock will be very slow and the battery will empty very quickly. I'm guessing it is a bug.



+ WatchFaceComponent type="GTRwidget" and the "dataType"

The "dataType" element essentially corresponds to the information already known about the values recorded by the clock. 11 types are currently known, but only 6 of them work.
Here is a list of the known dataTypes:

1. steps - works
2. daily workout distance - works
3. total workout distance - works
4. daily calories - works
5. heart rate - works
6. date - not working
7. weather - not working
8. air quality - not working
9. battery - works
10. messages - not working
11. floors - not working

++ dataType 1 - steps

There are two display variants for dataType 1. Once as a number and once as a graphic (e.g. progress bar).

1st variant - as a number - is included with the following line

Código: Selecionar todos

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

2nd variant - as a graphic (e.g. progress bar) - is integrated with the following lines

Código: Selecionar todos

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

Please note that the graphic for index 0 does not represent the end, but rather the last step before it. With 10 graphics, this corresponds to the first tenth, 10% of the daily target.

The "continueMode" parameter determines whether the graphics should be displayed individually according to the index (value=1) or whether all graphics up to the index (value=0) should be displayed simultaneously. The latter is only useful for very few and especially small graphics. Otherwise the clock will be very slow and the battery consumption will increase significantly. Currently, however, continueMode="1" does not work properly due to a bug in the watch firmware. The value "0" must therefore be used.

A file "additive.xml" must be located in the folder for the graphics. This must be structured as follows (e.g. 10 graphics):

Código: Selecionar todos

<? 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>

The x and y coordinates can be the same as in the corresponding line in the watchface.xml. Then all graphics are in the same place. But you can also position them specifically if they are, for example, one behind the other (a progress bar with gaps, etc.).



++ dataType 2 - Today's training distance

The dataType 2 shows the daily workout distance. No distances are shown for the daily steps!
The dataType 2 is integrated as follows:

Código: Selecionar todos

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

A graphic for a separator is necessary in the graphics folder for this element! A graphic for the unit of measurement can also be added as an option.
Both are noted in the "font.xml" as follows:

Código: Selecionar todos

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

++ dataType 3 - Total training distance

The dataType 3 shows the total workout distance. Unfortunately, it is also reset when the clock is reset.
The dataType 3 is integrated as follows:

Código: Selecionar todos

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

A graphic for a separator is necessary in the graphics folder for this element! A graphic for the unit of measurement can also be added as an option.
Both are noted in the "font.xml" as follows:

Código: Selecionar todos

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

++ dataType 4 - calories

The dataType 4 shows the daily calorie consumption.
The dataType 4 is integrated as follows:

Código: Selecionar todos

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

++ dataType 5 - pulse or heart rate in BPM

The dataType 5 shows the currently measured pulse rate / heart rate.
The dataType 5 is integrated as follows:

Código: Selecionar todos

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

++ dataType 10 - battery

There are two variants of the display of the battery charge. Once as a number and once as a graphic (e.g. progress bar).

1st variant - as text - is included with the following lines:

Código: Selecionar todos

<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>

In the "font.xml" file belonging to this display, the following line can be used to display the percent sign (if available as a graphic).

Código: Selecionar todos

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

2nd variant - as a graphic - is integrated with the following lines

Código: Selecionar todos

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

Please note that there can be a maximum of 12 graphics. More are not processed. It starts with "00.png" and adds up to a maximum of "11.png". However, the "00.png" file is not the end, but the last step before it. With 10 graphics the display of "00.png" corresponds to the last tenth, like 10% battery.



+ WatchFaceComponent type="icon" - embed a graphic at any point

You can insert a graphic anywhere with the following line:

Código: Selecionar todos

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

The parameters "x" and "y" indicate the position and define the upper left corner of the graphic.



+ WatchFaceComponent type="pointer" - integration of a graphic as a pointer for different values

A pointer can be integrated with the following code (here using the battery indicator as an example):

Código: Selecionar todos

<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>

The parameters x and y define the point in the graphic around which it should rotate. They don't define the point on the display! This is always 160x160, but can be moved individually for each pointer using the "xCenter" and "yCenter" parameters. The parameters indicate the value in pixels that the pointers should be moved from the center of the screen. Negative values ​​are also possible to shift up or left. The parameters a0 and a1 describe the starting point and the end point in degrees on a circular path running clockwise where 0 and 360 degrees correspond to the 12 o'clock position. In the example shown here, the pointer begins vertically downwards (6 o'clock) and then moves upwards (12 o'clock).



+ WatchFaceComponent type="progress" - - progress display as a continuous, stepless, circular progress bar

The second variant of progress bar that I know. In this case as a freely definable circle or a part of it around the dial or in the middle of it.

Here is an example for the dataType 1 = steps. The color is specified here as a Windows decimal value.
A great converter can be found here: https://www.htmlcsscolor.com/hex/00DCFF

Código: Selecionar todos

<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>

The parameters "xCenter" and "yCenter" describe the center point of the circle, while "rx" and "ry" determine the distance to the center point at which the drawing is started. With "size" the thickness of the drawn circle is given. The parameters "a0 and" a1 "specify the start and end point in degrees. Both are at 12 o'clock and the direction is counterclockwise. If the circle should start at 9 o'clock and end at 12 o'clock, the value -90 to choose for "a0" and 270 for "a1". "cap" currently has no function ... a Bug? I don't know.



----
2.c - Explanations of the parameters for the WatchFaceComponent elements

Most types are positioned using x0, y0, x1, y1 and are to be understood as a rectangle. The distance from x0 to x1 should result in the sum of the width of all possible character graphics plus the distances (space). The distance between y0 and y1 corresponds to the height of the character graphic. The rectangle can be made larger than necessary. But then an alignment using "align" is necessary in order to determine the position of the display and to prevent the digits from "jumping" when changing between the clock's operating modes.

Código: Selecionar todos

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

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

The parameter "align" within the dataType instruction is responsible for the alignment within the specified area. This area corresponds to the rectangle which was defined by x0, y0, x1, y1.
Within this area, the graphics can then be aligned as follows.

Código: Selecionar todos

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

The values ​​for a vertically centered alignment, for example, would be as follows: 66 for left, 69 for right or 72 for centered. This is particularly useful if the area is defined in such a way that the vertical extent also corresponds to the height of the graphics.

An example: Display of steps with max. 5 digits. One digit (graphic) is 10x15px. So results in an area of ​​50x15px. In this area you should now define the alignment of the graphics, since numbers with fewer than the maximum of 5 possible digits will otherwise jump when the clock changes to "locked mode", for example. With a centered alignment, the number 50 (2 digits, 20px) would be displayed in the middle of the defined area.


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


The parameter "space" within the dataType instruction defines a distance between the character graphics in pixels.



----
3. - OTHER

Nothing yet.

[DxP]

*reserved for additional information*

[DxP]

Update 07/10

• New information about: WatchFaceComponent "background" and "timehand".

Update 08/10

• Corrected an error in the code for the graphical display of the step counter. The parameters are case sensitive! Additiveimage changed to AdditiveImage

  Código: Selecionar todos

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

• Minor structural changes for easier reading

Update 11/10

• Text adjustment for found firmware errors when using AdditivImages in the step counter area.

[fcaronte]

About weather, as now is working correctly if you use AmazMod to push the weather to clock (need AmazMod service on watch too). I'm using it on my Stratos 3.

And about ultra mode? Have you found a way to use a custom watchface on this mode? Seem impossible for me.

[DxP]

Yes, I am familiar with AmazMod and I also use it, but I cannot assume that for everyone. So unfortunately without the weather for now.


I don't know any way.

[AlainProvist]

About weather, as now is working correctly if you use AmazMod to push the weather to clock (need AmazMod service on watch too). I'm using it on my Stratos 3.

And about ultra mode? Have you found a way to use a custom watchface on this mode? Seem impossible for me.

fcaronte so, are you basically saying that the gtr widget (using the "WeatherInfo" provider service) will work correctly if amazmod is set to push the weather data?

[DxP]

edit: missunderstanding...

[fcaronte]

About weather, as now is working correctly if you use AmazMod to push the weather to clock (need AmazMod service on watch too). I'm using it on my Stratos 3.

And about ultra mode? Have you found a way to use a custom watchface on this mode? Seem impossible for me.

@fcaronte so, are you basically saying that the gtr widget (using the "WeatherInfo" provider service) will work correctly if amazmod is set to push the weather data?

Yes exactly, I'm use the openweather data from AmazMod app and the gtr widget is work correctly. Try one of my pushed wfz on the site

[AlainProvist]

Good to know, and thx for the info. I wrongly thought this option was only usable with greatFit-based apk watchfaces.

[AlainProvist]

DxP, You can have the month and the day separately with "month_text" and "day". "mon" does not exist actually :p.

[DxP]

I have updated the tutorial.
Thanks man.

Update 10/11

• Changes in Date/Month section

[COM-D]

Type "progress" not working yet ?

[DxP]

What you mean?

[COM-D]

I am trying to add code - type="progress", for steps
<WatchFaceComponent type="progress" dataType="1">........</WatchFaceComponent>
but it doesn't work.
Have you tried implementing this code in your projects?

[COM-D]

Here is an example of my code.

Código: Selecionar todos

<WatchFaceComponent type="progress" dataType="1">
<Item type="Arc" a1="360" a0="0" size="13" color="65535" ry="48" rx="48" yCenter="211" xCenter="90"/>
</WatchFaceComponent>

But, it doesn't work.

[DxP]

Yes, I implemented this code successfully... Look at "DXP2K The Circle".

[COM-D]

Thank you so much. I found a bug. I did not correctly indicate the color.

[mato]

First of all, thank you for this documentation, I learned a lot from it.

My experience shows that the Stratos 3 can handle many widgets, not just 9, and even the battery and other bars can show up to 30+ images.

It all works great super as long as the watch face is active.
The option dies there when the Stratos 3 enters locked mode.

I experimented a lot because I see on some watch faces downloaded from SAWB that it works.

But I can't figure out what the limit is.
Perhaps the size of png's that take up memory at the same time?

An example of this is my most recently assembled dial ( /pace/view/7255 ) , which still stops at me at midnight in locked mode. It returns to the 00:00 time state in locked mode, but only in locked mode.

And I don't know why.

Once I reboot my watch, it’s perfect until next midnight.
Is the watch memory defective from the factory?
Or something too much?

Now I gave id "10" the battery bar, and waiting for midnight.

Do you have an idea?

[DxP]

Yes, the size of the PNGs does matter. Too many large graphics cause the clock to stutter.

What is SAWB ?

[mato]

Hm. Thanks.
The situation has changed so much that it no longer freezes, but the hands disappear at midnight.
There was no feedback, so it may just be the case on my watch.
I try smaller bars.

SAWFB - Simple Amazfit Watchface Builder

[fcaronte]

DxP Do you know how to change additive image for the HR value? I try to increase it but the HR step are always the same and are too wrong for non working mode. As now from 0 to 130 bps is the first step, up 130 second step and up 150 third step, so practically on normal situation it always stay on first PNG, and this have no sense because if I'm run and go up with the bps probably I'm not stay with Wfz but instead I'm in a running mode

[DxP]

As far as I can tell, the heart rate doesn't work with the AdditiveImages. I haven't managed to do that either, so I'm not using it. The ItemType "Arc" works with the heart rate. Maybe this will help you.

The SAWB only uses the original Huami widgets that also run on the Stratos 2 and the PACE. Everything works cleanly too. The GTR Widgeds, which only the Stratos 3 can handle, cause problems. Some things don't work and others only partially.

You use the "old" function for the pointers in your watchface. Try the new version -> WatchFaceComponent type = "timehand". There you can make the graphic for the pointer as small (dimensions) as it is minimally necessary for the pointer. E.g. 31x170px - xCenter must then be 15 and yCenter must be 160. With this you determine the axis of rotation. Take a look at the tutorial.

[Walther]

Hi, how many digits has the weater widget - i need to fit it in the box.. On my Stratos 3 it shows sometimes "3°C" and sometimes "3/5°C" is it normal? I'm using following code

<WatchFaceItem type="datawidget" id="1" x="72" y="226" dataType="8" model="2"/>

[COM-D]

Yes, it is normal. Compare with the original clock weather widget.