Minuteur

Le composant Minuteur permet de gérer le temps de manière interactive dans vos projets PandaSuite. Il est particulièrement utile pour déclencher des actions à des moments précis, contrôler des animations ou créer des interactions dynamiques basées sur le temps.

Ce composant est invisible dans l’interface, mais fonctionne en arrière-plan pour orchestrer des événements.

Cas d’utilisation

Le composant Minuteur peut être utilisé dans divers scénarios, tels que :

• Création d’un compte à rebours pour un quiz ou un jeu
• Déclenchement d’actions en cas d’inactivité de l’utilisateur
• Synchronisation avec d’autres composants, comme une zone de défilement

Mise en place du composant

Insérer le composant Minuteur

1. Accédez à la section Composants dans PandaSuite.
2. Ajoutez le composant Minuteur à votre projet.

Notez que le Minuteur est un composant système qui n’a pas de représentation visible à l’écran. Il est accessible depuis la liste des Objets en bas à gauche.

Configuration initiale

Après l’ajout du composant, configurez ses paramètres essentiels :

• 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 détecte l’absence d’interaction utilisateur et se réinitialise à chaque activité. Vous pouvez ainsi déclencher une action en cas d’inactivité de l’utilisateur.
• Lecture automatique : démarrage automatique lorsque l’écran ou le composant contenant le minuteur est affiché.
• Répétition : redémarrage automatique après chaque cycle.
• Durée : durée totale du compte à rebours.

Caractéristiques du composant

Événements déclencheurs

Le Minuteur permet de déclencher des actions basées sur le temps. Voici les principaux événements déclencheurs :

• Commence lecture
• Mise en pause
• Arrêt lecture
• Fin lecture
• Temps : si un marqueur a été défini

Actions interactives

Voici les actions associées à ce composant :

• Lecture / Pause
• Lecture
• Mettre en pause
• Arrêter
• Avancer
• Reculer
• Redémarrer au début

Et si un marqueur a été défini :

• Changer temps
• Temps suivant
• Temps précédent
• Temps aléatoire

Interactions avancées

Synchronisation avec d’autres composants

Le Minuteur peut être synchronisé avec d’autres composants pour des interactions complexes. Par exemple, pour faire défiler une zone horizontalement en synchronisation avec un Minuteur :

1. Ajoutez un composant Zone de défilement et paramétrez-le.
2. Insérez un Minuteur avec une durée de 4 secondes et activez la lecture automatique.
3. Ajoutez un composant Synchronisation et sélectionnez les deux composants.
4. Synchronisez le temps du Minuteur avec la position “x” de la Zone de défilement.

Utilisation de marqueurs

Les marqueurs permettent d’exécuter des actions à des moments précis :

1. Créez un marqueur à 4 secondes.
2. Accédez aux Actions.
3. Ajoutez une action déclenchée par le marqueur.
4. Sélectionnez l’action souhaitée (ex : ouvrir une Pop-up).

Exemples pratiques

Afficher le minuteur

1. Ajoutez un Minuteur et choisissez sa durée maximale.
2. Insérez un bloc de texte.
3. Utilisez le data binding pour lier la valeur du Minuteur au texte. La valeur est exprimée en secondes.
4. Pour afficher le temps dans le bon format, vous allez utiliser la fonction Format Date. Celle-ci nécessite une valeur exprimée en millisecondes :

• Multipliez la valeur du temps par 1000 pour la convertir en milli.secondes.

  

• Puis, pour la formater au format MM:SS, choisissez le type Personnalisé et les codes universels mm:ss.

• Comme Fuseau horaire, prenez UTC, l’heure de référence dans le monde entier qui n’est pas sensible aux fuseaux horaires.

Afficher un compte à rebours

Pour afficher le minuteur sous la forme d’un compte à rebours, la procédure reste proche de la manière d’afficher le minuteur. Ce sont les fonctions et les calculs qui changent :

1. Ajoutez un Minuteur et choisissez sa durée.
2. Insérez un bloc de texte .
3. Utilisez le data binding pour lier la valeur du Minuteur au texte. La valeur est exprimée en secondes.
4. Pour afficher le temps en mode compte à rebours :
   • Appliquez la fonction Substract et comme valeur, saisissez la durée totale de votre minuteur (en secondes).
   • Utilisez la fonction Multiply pour multiplier par -1 pour inverser les valeurs.
   • Vous allez utiliser la fonction Format Date. Celle-ci nécessite une valeur exprimée en millisecondes : multipliez la valeur du temps par 1000 pour la convertir en milli.secondes.
   • Puis, pour la formater au format MM:SS, choisissez le type Personnalisé et les codes universels mm:ss.
   • Comme Fuseau horaire, prenez UTC.

Animer un compteur

Découvrez comment créer des animations sur-mesure sur vos données chiffrées, par exemple un compteur animé, dans le cadre d’infographies interactives.

Déclencher une action en période d’inactivité

Rendez-vous sur l’article dédié pour en savoir plus :

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