Aller au contenu
PandaSuite Docs

QR Code Generator

Générez un QR code à partir d’un texte, d’une URL ou de n’importe quelle valeur disponible en data binding, puis affichez-le dans votre interface.

QR Code Generator vs QR Code Scanner

Le composant QR Code génère et affiche un QR code. Si vous souhaitez scanner un QR code avec la caméra, utilisez le composant QR Code Scanner.

Cas d’usage

  • Liens de partage : afficher un lien de projet, un channel de hub privé ou n’importe quelle URL sous forme de QR code.
  • Parcours sur site : permettre aux utilisateurs de continuer sur un autre appareil en scannant le QR code généré.
  • Contenu dynamique : générer des QR codes à partir d’une variable, d’une source de données ou d’une saisie utilisateur.
  • Support et diagnostic : afficher un QR code qui encode un jeton de debug ou un identifiant de session.
  • Onboarding multijoueur : générer un lien d’invitation avec un code de room pour que d’autres joueurs rejoignent une session partagée.

Configuration du composant

  1. Ouvrez le panneau Composants.
  2. Glissez-déposez QR Code dans votre écran (composant visuel).
  3. Redimensionnez la zone du composant (elle définit la zone visible du QR code).
  4. Dans les Propriétés, renseignez Texte (ou ajoutez un data binding).

Fonctionnalités du composant

Propriétés

PropriétéDescription
TexteLe contenu à encoder (URL, texte, etc.). Si vide, la zone du QR code est effacée. Compatible data binding.
Correction d’erreurDéfinit la résistance du QR code : Basique, Standard (par défaut), Élevé, Maximum. Une correction plus élevée améliore la fiabilité mais réduit la capacité.
Couleur des modulesCouleur des modules (pixels foncés) du QR code.
Couleur de fondCouleur de fond (pixels clairs).
MargeMarge (quiet zone) autour du QR code (en modules).

Événements déclencheurs

Déclencheurs disponibles dans l’onglet Actions du composant :

  • QR Code généré : se déclenche quand le QR code est rendu correctement. Expose Texte encodé.
  • Erreur de génération : se déclenche si la génération échoue. Expose Message d’erreur.

Actions associées

Vous pouvez agir sur le composant via l’action Agir sur un composant :

  • Définir le texte : met à jour le contenu du QR code.

Propriétés exposées

QR Code expose des données utilisables en data binding :

  • Texte encodé : le dernier texte généré avec succès.

Exemples pratiques

Générer un QR code depuis une Saisie de texte

  1. Ajoutez un composant Saisie de texte pour que l’utilisateur saisisse une URL ou un texte.
  2. Ajoutez QR Code sur votre écran.
  3. Sur Saisie de texte, créez une action sur Validé :
    1 Agir sur un composant
    →
    2 QR Code
    →
    3 Définir le texte
  4. Dans le paramètre Texte, ajoutez un data binding :
    1 Depuis l’événement
    →
    2 Valeur de saisie
    .

Afficher un message d’erreur si la génération échoue

  1. Sélectionnez QR Code puis ouvrez Actions.
  2. Choisissez le déclencheur Erreur de génération.
  3. Ajoutez une action (par exemple Ouvrir une pop-up ou Définir une variable) en utilisant le Message d’erreur depuis Depuis l’événement.

Jeu multijoueur : inviter des joueurs via QR code

Combinez le QR Code Generator avec App-to-App pour permettre aux joueurs de rejoindre une session partagée en scannant un QR code.

  1. Utilisez App-to-App pour générer ou récupérer un code de room unique (stocké dans une variable).
  2. Construisez l’URL d’invitation dynamiquement avec une fonction :
    • Récupérez l’URL de la page via data binding :
      1 Projet
      →
      2 Contexte
      →
      3 Launch
      →
      4 URL
    • Ajoutez le code de room en paramètre d’URL, par ex. ?room=ABC123
  3. Liez la propriété Texte du composant QR Code au résultat de cette fonction.
  4. Affichez le QR code sur l’écran de l’hôte. Les autres joueurs le scannent pour ouvrir l’app avec le code de room pré-rempli et rejoindre automatiquement la session.

Ce pattern simplifie l’onboarding multijoueur : plus besoin de saisir ou partager manuellement des codes.

Ressources complémentaires