# QR Code Generator

> Générez et affichez un QR code à partir d'un texte ou d'une URL dans votre application PandaSuite. Personnalisez les couleurs, la marge et le niveau de correction d'erreur, puis mettez à jour le code via une action ou un data binding.

https://docs.pandasuite.com/fr/essentials/components/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.**

> **Info : QR Code Generator vs Lecteur de code**
>
> Le composant QR Code génère et affiche un QR code. Si vous souhaitez scanner un QR code avec
> la caméra, utilisez [Lecteur de code](https://docs.pandasuite.com/fr/essentials/components/code-reader/).

## 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                                                                                                                                                                  |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Texte**               | Le contenu à encoder (URL, texte, etc.). Si vide, la zone du QR code est effacée. Compatible data binding.                                                                   |
| **Correction d'erreur** | Dé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 modules** | Couleur des modules (pixels foncés) du QR code.                                                                                                                              |
| **Couleur de fond**     | Couleur de fond (pixels clairs).                                                                                                                                             |
| **Marge**               | Marge (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é** :
   **Agir sur un composant** → **QR Code** → **Définir le texte**
4. Dans le paramètre **Texte**, ajoutez un data binding : **Depuis l'événement** → **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](https://docs.pandasuite.com/fr/essentials/components/app-to-app/) pour permettre aux joueurs de rejoindre une session partagée en scannant un QR code.

1. Utilisez [App-to-App](https://docs.pandasuite.com/fr/essentials/components/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](https://docs.pandasuite.com/fr/essentials/data/functions/) :
   - Récupérez l'URL de la page via data binding : **Projet** → **Contexte** → **Launch** → **URL**
   - Ajoutez le code de room en [paramètre d'URL](https://docs.pandasuite.com/fr/essentials/project-properties/url-parameters/), 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

- [Lecteur de code](https://docs.pandasuite.com/fr/essentials/components/code-reader/)
- [App-to-App](https://docs.pandasuite.com/fr/essentials/components/app-to-app/)
- [Paramètres d'URL](https://docs.pandasuite.com/fr/essentials/project-properties/url-parameters/)
- [Saisie de texte](https://docs.pandasuite.com/fr/essentials/components/text-input/)