Créer un cadran avec Watch Face Studio

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Ce guide décrit les principaux outils et fenêtres inclus dans Watch Face Studio (WFS).

créer-un-cadran

Outils

WFS inclut les outils suivants :

  • Add Component (Ajouter un composant) : affiche une liste de composants que vous pouvez ajouter au cadran.
  • Forward / Backward (Avancer/Reculer) : déplace un composant sélectionné vers l'avant ou l'arrière.
  • Group/Ungroup (Regrouper/Dégrouper) : regroupe plusieurs composants pour les contrôler comme une seule entité.
  • Mask (Masque) : recouvre tout ou partie des autres couches en fonction du contour de la couche inférieure.
  • Build : ouvre la boîte de dialogue de build.
  • Run on device (Exécuter sur l'appareil) : ouvre une boîte de dialogue permettant de prévisualiser votre cadran sur un appareil.

raccourcis

Composants

Ajoutez autant de composants différents que vous le souhaitez à votre cadran. Vous pouvez également utiliser une mise en page personnalisée pour vos composants. Par exemple, affichez les données de fréquence cardiaque ou de nombre de pas avec un composant texte ou ajoutez une image personnalisée pour lancer une application particulière.

Types de composants

Les composants compatibles sont décrits dans les sections suivantes.

Canevas du cadran

Définissez la couleur du canevas de la couche inférieure du cadran.

canevas

Texte

Par défaut, les champs de texte sont des textes normaux. Le texte normal est statique et ne change pas. Dans la fenêtre des propriétés de votre champ de texte, vous pouvez remplacer le texte normal par du texte de données. Le texte de données change et est inséré en fonction des balises.

Pour en savoir plus, consultez Expressions de balises.

Sélectionnez l'option Apply Curved Text (Appliquer le texte incurvé) pour créer un texte qui se courbe en suivant le cadran.

Déterminez la courbe de votre texte en définissant la largeur (W) et la hauteur (H). Toute modification de largeur et de hauteur modifie automatiquement la dimension de votre composant texte. Pour définir la position de votre texte, sélectionnez l'une des options de plage préréglées. Vous pouvez créer des plages supplémentaires en précisant le début dans Start et la distance angulaire dans Angular distance. Définissez l'orientation du texte dans le sens des aiguilles d'une montre ou en sens inverse.

texte-incurvé

Forme

Ajoutez différentes formes, y compris des points de suspension et des rectangles.

Image

WFS permet d'importer des images personnalisées.

Animation

Importez des séquences d'images d'animation.

animation

Pour ajouter une animation, procédez comme suit :

  1. Créez votre propre séquence d'animation avec un programme de conception comme Adobe Flash ou Adobe Premiere.
  2. Cliquez sur Add Component > Animation (Ajouter un composant > Animation) pour ajouter des fichiers d'animation à votre cadran.
  3. Sélectionnez une séquence d'images dans votre explorateur de fichiers, puis cliquez sur Upload (Importer).
  4. Modifiez l'animation en changeant l'ordre de chaque image, en supprimant ou en ajoutant des images.
  5. Définissez Trigger value (Valeur du déclencheur) pour déterminer le moment auquel vous souhaitez que l'animation se lance.

Définissez la valeur du déclencheur sur WatchFace on (Cadran actif) pour lancer votre animation dès que le cadran s'affiche. Les autres options disponibles sont Tap (Au clic), Every Sec (Toutes les secondes), Every Min (Toutes les minutes) et Every Hour (Toutes les heures). Vous pouvez également retarder le démarrage en utilisant Delay (Retarder) et en indiquant un nombre de secondes.

D'autres options d'animation existent :

  • Auto replay (Relire automatiquement) : répète immédiatement l'animation lorsqu'elle se termine jusqu'à ce qu'une interruption, par exemple l'arrêt de l'écran, ne se produise.
  • Repeat delay (Délai de répétition) : définit un délai entre les répétitions de l'animation.
  • Resume Playback (Reprendre la lecture) : détermine si l'animation doit se poursuivre ou recommencer du début lorsque la lecture est interrompue (par une notification ou un appel téléphonique, par exemple).
  • Hide before playing (Masquer avant la lecture) : détermine si l'animation doit être masquée ou non jusqu'au déclenchement de la lecture.
  • Hide after finished (Masquer après la fin) : détermine si l'animation doit être masquée à la fin de la lecture.

animation

Multimédia

Importez des images déjà animées telles que des fichiers AGIF, Lottie ou WebP.

Ajoutez une image multimédia de la manière suivante :

  1. Cliquez sur Add Component > Multimedia (Ajouter un composant > Multimédia).
  2. Sélectionnez le fichier dans votre explorateur de fichiers, puis cliquez sur Upload (Importer).
  3. Définissez Trigger Value (Valeur du déclencheur) sur l'heure de début de l'animation.

N'oubliez pas que la taille du fichier, la résolution et le nombre d'images de l'image multimédia peuvent affecter les performances de l'appareil et l'utilisation de la batterie. Les images multimédias sont chargées de manière asynchrone pendant l'opération. Leur lecture peut être retardée en fonction des capacités de votre montre et des différentes caractéristiques de l'image.

Aiguilles analogiques

Ajoutez des aiguilles analogiques pour les heures, les minutes et les secondes. Ouvrez l'explorateur de fichiers pour sélectionner un fichier image à importer pour chaque aiguille.

aiguilles-analogiques

Les aiguilles analogiques possèdent une propriété Rotation. Cette propriété inclut les options suivantes : * Sync with (Synchroniser avec) * Time Zone (Fuseau horaire) * Rotate (Faire pivoter) * Value (Valeur) * Movement Effect (Effet de mouvement)

aiguilles-analogiques

Sync With (Synchroniser avec) propose les options suivantes : * Hour in Day (Heure dans un jour) * Minute in Hour (Minute dans une heure) * Second in Minute (Seconde dans une minute) * Day of Month (Jour du mois) * Month of Year (Mois de l'année) * Day of Week (Jour de la semaine) * Day of Year (Jour de l'année) * Moon Phase (Phase lunaire)

Parmi ces options, seule "Second in Minute" (Seconde dans une minute) fonctionne avec l'effet Sweep movement (Mouvement de balayage). Cet effet est défini automatiquement lorsque vous ajoutez le deuxième composant d'aiguille.

aiguilles-analogiques

Horloge numérique

Les options de l'horloge numérique incluent "Date" et "Time" (Heure). Lorsque vous ajoutez la date, ajoutez un composant texte avec la balise de date. L'affichage par défaut pour les dates est DAY_WEEK_S MON_S DAY_1_31_Z. Lorsque vous ajoutez l'heure, ajoutez un composant texte avec une balise d'horloge numérique. L'affichage par défaut pour l'horloge numérique est HOUR_1_12_Z:MIN_Z:SEC_Z.

horloge-numérique

Barre de progression

Ajoutez une barre de progression à votre cadran pour suivre différentes activités. Les options du composant de barre de progression incluent une barre de progression linéaire et circulaire. Déterminez la position de votre barre de progression en sélectionnant l'une des six plages prédéfinies. Vous pouvez créer des plages supplémentaires en précisant le début dans Start et la distance angulaire dans Angular distance. Définissez l'orientation de la barre de progression dans le sens des aiguilles d'une montre ou en sens inverse.

Gestion des composants

Gérez vos composants à l'aide des outils WFS. Vous pouvez ajouter, regrouper, dégrouper et commander des composants sur votre cadran, comme le décrit la section suivante.

Ajouter des composants

Lorsque vous ajoutez un composant, il est placé par défaut sur le canevas. Le composant est automatiquement sélectionné pour être facilement modifié.

fenêtre-d'aperçu

Regrouper/Dégrouper des composants

Un groupe est une combinaison d'un ou plusieurs composants. Tous les composants peuvent être regroupés. Les groupes peuvent être dissociés.

groupe groupe

Composants Masque / Sans masque

La forme de la couche inférieure détermine la partie visible du groupe masque. Les couches supérieures n'apparaissent que dans le contour de la couche inférieure. Par exemple, si vous placez une image triangulaire dans la couche inférieure et une image et une animation dans les couches supérieures, l'image et l'animation ne s'afficheront que via le contour en forme de triangle de la couche inférieure.

groupe

Pour créer le groupe masque, procédez comme suit :

  1. Sélectionnez les couches que vous souhaitez regrouper.
  2. Choisissez Mask (Masque) dans la zone de raccourcis clavier ou effectuez un clic droit sur les couches, puis sélectionnez Mask.

Pour libérer le groupe "Mask" dans la fenêtre "Layers" (Couches), procédez comme suit :

  1. Sélectionnez le groupe Masque.
  2. Choisissez Unmask (Sans masque) dans la zone de raccourci d'accès rapide ou effectuez un clic droit sur les couches, puis sélectionnez Unmask.

Fenêtre d'aperçu

La fenêtre d'aperçu est la zone de travail principale lorsque vous concevez votre cadran.

Ajoutez tous les éléments du cadran au canevas qui s'affiche dans la fenêtre d'aperçu. Sur le canevas, faites glisser les éléments en position, redimensionnez-les, organisez-les et faites-les pivoter.

fenêtre-d'aperçu

Fenêtre de couche

La fenêtre de couche affiche la liste des composants et des groupes affichés dans la fenêtre d'aperçu. Chaque composant possède sa propre couche par défaut.

couche

Dans la fenêtre de couche, les actions suivantes sont disponibles :

  • Rechercher : recherchez des couches par nom.
  • Show / Hide (Afficher/Masquer) : les couches peuvent être affichées ou masquées. Les couches masquées ne sont pas lues dans la fenêtre d'aperçu.
  • Theme color (Couleur du thème) : activez ou désactivez les couleurs de votre thème.
  • Rename (Renommer) : modifiez le nom de la couche en effectuant un double clic sur le champ de nom et en saisissant un nouveau nom.

Un clic droit sur des couches affiche les options de menu suivantes :

  • Verrouiller/Déverrouiller (Lock/Unlock) : verrouille la couche de sorte qu'elle ne soit pas déplacée sur le canevas.
  • Group/Ungroup : regroupe plusieurs composants et les contrôle comme un seul élément.
  • Mask/Unmask : fait apparaître les couches situées au-dessus de la couche inférieure uniquement.
  • Swap image (only for images) (Remplacer l'image (uniquement pour les images)) : modifie le fichier image d'une couche à une autre.
  • Couleur du calque : ajoute un libellé de couleur à la couche pour la différencier des autres.

Lignes conditionnelles

Les lignes conditionnelles vous permettent d'afficher et de masquer des composants sur un cadran et de contrôler leur comportement. Utilisez des lignes conditionnelles pour modifier l'apparence du cadran en fonction de certaines conditions comme l'heure, le nombre de pas, la batterie ou l'événement. Lorsque vous ajoutez un composant, la condition de temps (time) est définie par défaut. Pour ajuster ces conditions, cliquez sur l'icône de condition sur la couche souhaitée. Pour que la condition se répète, effectuez un clic droit sur la zone de frame, puis sélectionnez Loop (Boucle).

N'oubliez pas que les couches masquées n'affectent pas les performances ni l'autonomie de votre batterie.

éléments éléments

Vous pouvez configurer votre cadran pour qu'il réponde aux conditions suivantes :

Heure

Le cadran de votre montre peut changer de façon dynamique en fonction de l'intervalle de temps. Par exemple, il peut être lumineux pendant la journée, puis s'assombrir progressivement au fil du temps. Vous pouvez définir la durée de mesure en heures, minutes ou secondes.

Pour ajouter une condition de temps, procédez comme suit :

  1. Créer des couches
  2. Définissez des périodes pour contrôler l'affichage de chaque couche. Sélectionnez la barre de démarrage, puis la plage de temps.
  3. Cliquez sur la barre de début et faites-la glisser vers la barre de fin.
  4. Répétez les étapes 2 et 3 pour définir des périodes pour chacune des couches.
  5. Cliquez sur Exécuter pour prévisualiser vos modifications.

L'exemple suivant montre comment afficher différents cadrans pour les paramètres 12 heures et 24 heures, en fonction du paramètre choisi sur le téléphone de l'utilisateur :

  1. Ajoutez deux composants d'horloge numérique. Le premier composant affiche la version 12 premières heures, le second celle en 24 heures.
  2. Placez-les à la même position.
  3. Ajoutez une condition de 12 heures et 24 heures aux lignes conditionnelles.
  4. Définissez des périodes pour afficher la première horloge numérique au format 12 heures pour la couche de 12 heures et au format 24 heures pour l'autre couche.

Contrôle de l'heure

Le curseur de contrôle de l'heure vous permet de voir votre cadran en action. Prévisualisez l'évolution du cadran dans la fenêtre d'aperçu tout au long de la journée. Faites glisser le curseur pour sélectionner des heures spécifiques ou affichez les animations de votre cadran à l'aide des boutons de lecture et d'avance rapide.

contrôle-de-l'heure

Nombre de pas

Vous pouvez configurer le cadran afin qu'il change de façon dynamique en fonction du nombre de pas. Par exemple, vous pouvez créer un cadran qui change en fonction du pourcentage de pas effectués par jour.

Batterie

Vous pouvez configurer le cadran afin qu'il change de façon dynamique en fonction du pourcentage d'autonomie restante de la montre.

Événement

Vous pouvez configurer le cadran de sorte qu'il change de manière dynamique en fonction de l'état de l'appareil ; par exemple, en cas de batterie faible ou de notifications non lues. Pour ce faire, sélectionnez la section d'événement souhaitée ainsi que l'image ou l'animation que vous souhaitez afficher pendant cet événement.

propriétés

Fenêtre des propriétés

Chaque composant possède une plage de propriétés modifiables. Vous pouvez par exemple modifier la couleur des chiffres d'une horloge numérique ou choisir que les aiguilles mesurent les heures, les minutes ou les secondes.

propriétés

Panneau d'action

Le panneau d'action de la fenêtre des propriétés permet d'interagir avec votre cadran. L'utilisateur peut appuyer sur un composant pour changer les images, ouvrir différentes applications ou mesurer la fréquence cardiaque.

panneau-d'action

Style

Utilisez l'onglet "Style" pour modifier les styles de la couche sélectionnée. Vous pouvez ajouter des styles pour les images, les images multimédias, l'index et les composants des aiguilles. Vous pouvez ajouter jusqu'à 30 couleurs de thème et 10 images.

style

Utilisez le bouton Customization Editor (Éditeur de personnalisation) pour appliquer des styles personnalisés à tous ces éléments en une seule fois.

style

Dans la boîte de dialogue Customization Editor (Éditeur de personnalisation), vous pouvez personnaliser le style de chaque composant, calque et nom. Vous pouvez également réorganiser ou fusionner les styles dans cette boîte de dialogue.

style

Vous pouvez ajouter jusqu'à 30 couleurs de thème. Chaque couleur de thème peut comporter jusqu'à trois variantes de couleur dans l'onglet Style.

style

Définissez ces couleurs dans l'onglet Layer (Couche) ou Properties (Propriétés). Dans l'onglet Layer (Couche), définissez la couleur en activant/désactivant l'icône Apply Theme Color (Appliquer la couleur du thème) jusqu'à trois fois. Dans l'onglet Properties (Propriétés), définissez la couleur en sélectionnant la case d'option Apply Theme Color (Appliquer la couleur du thème).

style style

Couleur

Appliquez une couleur spécifique à votre composant ou enregistrez une couleur de thème pour le cadran. Pour les complications, le thème de couleur initial s'affiche en nuances de gris.

Apparence de l'image

Modifiez l'apparence de l'image à l'aide des commandes suivantes :

  • Hue (Teinte) : curseur permettant de contrôler le ton de la couleur.
  • Saturate (Saturation) : curseur permettant d'augmenter ou de diminuer la luminosité de la couleur de l'image.
  • Lightness (Luminosité) : curseur permettant d'éclaircir les couleurs de l'image.

Apparence du texte

Utilisez l'onglet Text appearance (Apparence du texte) pour définir l'alignement du texte et le style de la police. Décorez le texte en sélectionnant Add Bitmap Font (Ajouter une police bitmap) dans Project Settings (Paramètres du projet). Si vous souhaitez utiliser la taille de police par défaut parmi les polices Bitmap ajoutées au projet, cochez la case Apply Default Font Size (Appliquer la taille de police par défaut).

style-du-texte

Exécuter

Vous pouvez également exécuter votre cadran dans WFS via le panneau Run (Exécuter). Vous pouvez ajuster l'heure, la date, la batterie de l'appareil, le nombre de pas, la fréquence cardiaque ou les valeurs GYRO dans WFS pour tester l'apparence du cadran dans différentes situations. Vous pouvez également ajuster d'autres styles définis dans la boîte de dialogue Customization Editor (Éditeur de personnalisation), y compris le nombre de notifications non lues, d'expressions avec balises ou de lignes conditionnelles. L'aperçu de l'exécution peut être défini sur "Active" (Actif) ou "Always-on" (Toujours activé). Lorsque le mode Always-on (Toujours activé) est utilisé, WFS affiche la valeur Current-On Pixel Ratio (Format de pixel actuel) et le bouton Analyze (Analyser).

exécution exécution

exécution-toujours-activée

Testez votre cadran à l'aide de l'option Exécuter sur l'appareil.

Pour en savoir plus, consultez Tester votre cadran.