Arrange elements into groups

Groups allow you to separate your watch face design into a logical structure.

This can be useful to help you organize components. You can give each group a name to indicate what it is for.

A further reason that groups are very useful is that you can then treat everything within that group as a single entity for the purpose of adjusting its appearance, even dynamically adjusting to changing data sources.

Here are some examples of how this can be useful. The following Group contains various PartText, PartImage and PartDraw elements that make up a single logical part of the watch face:

<Group name="decorations" ...>
  <PartText ...>
  <PartImage ...>
  <PartDraw ...>
</Group>

Change ambient behavior

Having defined the Group, the visibility of the whole Group can be adjusted for Ambient mode, for example, to hide the Group:

<Group ...>
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <PartText ...>
  <PartImage ...>
  <PartDraw ...>
</Group>

This avoids the need to add a Variant element individually to each child element.

Transform a group

Similar to adjusting the ambient behavior, using Variant, many of the properties of Group can be adjusted using one or more Transform elements.

In this example, the Group is rotated based on the second. By specifying pivotX and pivotY as 0.5, the rotation occurs around the center of the Group, irrespective of where each element, such as PartText or PartImage sits within that Group:

<Group x="0" y="0" width="450" height="450" pivotX="0.5" pivotY="0.5">
  <!-- One full rotation per minute -->
  <Transform target="angle" value="[SECOND] * 6" />
  <PartText ...>
  <PartImage ...>
  <PartDraw ...>
</Group>