Le composant Minuteur

Le minuteur est un composant puissant qui permet de gérer le temps de manière interactive dans vos projets. Que ce soit pour animer un contenu, créer des jeux ou contrôler le déroulement d’une expérience, le minuteur s'adapte à de nombreux cas d'usage. Il offre un contrôle précis sur la gestion du temps et permet d’interagir avec les autres composants de manière fluide.

Insérer un composant Minuteur

Un minuteur est un composant qui peut afficher un temps ou lancer une action après un certain délai, défini en secondes. Il peut être utilisé pour déclencher des actions spécifiques, comme l'apparition d'un élément, le changement de diapositive ou encore l'arrêt d'une animation.

Accédez à la section Composants et ajoutez le composant Minuteur dans votre projet. Le Minuteur est un composant système qui n'a pas de représentation visible à l'écran. Vous pouvez le trouver dans la liste des Objets en bas à gauche.

Voici les propriétés du Minuteur :

Type : choisissez entre Normal et Inactivité. En mode Normal, le minuteur fonctionne en fonction de la durée spécifiée et commence à décompter ou à progresser dès qu'il est activé ou déclenché. En mode Inactivité, le minuteur prend en compte l'activité ou les interactions de l'utilisateur pour déterminer son comportement. Le minuteur se réinitialisera et recommencera son décompte ou sa progression chaque fois qu'une activité utilisateur sera détectée.
Lecture automatique : détermine si le minuteur démarre automatiquement lorsque l'écran ou le composant contenant le minuteur est chargé ou affiché.
Répétition : détermine si le minuteur doit redémarrer automatiquement et répéter son décompte ou sa progression après avoir atteint sa durée définie. Il contrôle si le minuteur fonctionne en mode à exécution unique ou répétitive.

💡 Remarque : s'il y a plusieurs répétitions du composant Minuteur, l'action d'arrêt se produira uniquement à la fin des répétitions.

Durée : spécifie la durée pendant laquelle le timer fonctionnera avant de terminer son décompte ou sa progression. Cela représente la durée totale pendant laquelle le timer sera actif.

Cas d'utilisation pratique

Explorons plusieurs scénarios pratiques qui mettent en évidence les fonctionnalités du composant Minuteur.

Exécuter une animation en un temps donné

Si vous souhaitez exécuter une animation pendant une durée précise, vous pouvez combiner les composants Synchronisation et le Minuteur.

Pour définir la vitesse de défilement automatique d'une zone de défilement, suivez ces étapes :

Insérez un composant Zone de défilement et configurez-le pour un défilement horizontal (2000 pixels)
Insérez un composant Minuteur et réglez-le en Lecture automatique avec une durée de 4 secondes.
Insérez un composant Synchronisation et sélectionnez les deux autres composants dans les propriétés.
Synchronisez le temps du Minuteur avec les positions "x" de la Zone de défilement.

Déclencher une action à un moment spécifique

Vous pouvez également ajouter des marqueurs sur le composant Minuteru pour définir une série d'événements. Cela peut être utile à diverses fins, telles que la création de mécanismes de jeu ou l'orchestration de séquences d'actions sans dépendre uniquement des délais.

Pour afficher automatiquement une fenêtre contextuelle après 5 secondes, suivez ces étapes :

Insérez un composant Pop-up et personnalisez son contenu.
Insérez un composant Timer, réglez-le en lecture automatique avec une durée de 4 secondes.
Créez un marqueur à 4 secondes.
Accédez aux Actions et ajoutez une nouvelle action.
En tant que déclencheur, sélectionnez le marqueur nommé Time 00:04.00.
En tant qu'action, Interagir avec un composant > Pop-up > Ouvrir la Pop-up

En utilisant efficacement le composant Minuteur, vous pouvez orchestrer des animations et des actions basées sur le timing précis dans vos projets. Profitez de cet outil puissant pour créer des expériences engageantes et dynamiques pour vos utilisateurs.

Afficher un compte à rebours

Il est par ailleurs possible d'utiliser le composant Minuteur pour créer un décompte, par exemple pour un quiz, un jeu ou une animation interactive. Voici les étapes pour créer un décompte dans PandaSuite :

Insérez un composant Minuteur dans votre écran et définissez la durée à X secondes (par exemple, 30 secondes).
Ajoutez un bloc de texte dans lequel le décompte sera affiché. Ce texte sera lié au minuteur pour afficher la valeur du temps restant.
Utilisez le data binding pour afficher la valeur du minuteur.
Pour inverser les valeurs et afficher le temps restant, utilisez la fonction Substract de X secondes et la fonction Multiply par -1.
Pour afficher le nombre dans un format lisible (sans décimales), utilisez la fonction FormatNumber dans la formule. Cela affichera le temps restant sous forme d'entier, sans décimales.

Déclencher une action en cas d'inactivité de l'utilisateur

Consultez cet article : Déclencher une action en cas d'inactivité de l'utilisateur