Aller au contenu
PandaSuite Docs

Lecteur de code

Scannez des codes-barres et des codes 2D dans votre application, via un scanner plein écran ou une interface personnalisée.

Afficher un QR code ?

Si vous souhaitez générer et afficher un QR code plutôt que le scanner, utilisez QR Code Generator.

Cas d’usage

  • Recherche produit : scanner un code-barres EAN-13 ou EAN-8 pour ouvrir une fiche produit.
  • Validation de billets : détecter des QR codes, Aztec ou PDF417 sur des billets et cartes d’embarquement.
  • Inventaire et logistique : scanner des étiquettes Code 128, ITF ou Codabar sur des rayons et colis.
  • Cartes de fidélité et accès : lire un code enregistré et déclencher un workflow de marqueur dédié.
  • Parcours de scan personnalisés : combiner le composant avec Caméra pour afficher votre propre overlay, repère ou consigne.

Formats pris en charge

  • QR code
  • Aztec
  • PDF417
  • Data Matrix
  • Code 128
  • Code 39
  • Code 93
  • Codabar
  • EAN-13
  • EAN-8
  • UPC-E
  • ITF
Un format par composant

Le Lecteur de code détecte un seul format à la fois. Si vous souhaitez gérer plusieurs formats dans le même projet, ajoutez un composant distinct par format.

Configuration du composant

  1. Ouvrez le panneau Composants.
  2. Ajoutez Lecteur de code dans la liste des Objets. Il s’agit d’un composant non visuel : rien ne s’affiche directement à l’écran.
  3. Dans les Propriétés, choisissez le Format à détecter.
  4. Dans Orientation, choisissez Caméra arrière ou Caméra avant selon votre parcours de scan.

Fonctionnalités du composant

Propriétés

PropriétéDescription
FormatLe format de code-barres ou de code 2D détecté par le composant.
OrientationSélectionnez Caméra arrière pour la plupart des scans, ou Caméra avant pour un usage orienté selfie.

Événements déclencheurs

L’événement de détection disponible dépend du Format sélectionné. Chaque événement expose une Valeur correspondant au contenu décodé :

  • QR code détecté
  • Aztec détecté
  • PDF417 détecté
  • Data Matrix détecté
  • Code 128 détecté
  • Code 39 détecté
  • Code 93 détecté
  • Codabar détecté
  • EAN-13 détecté
  • EAN-8 détecté
  • UPC-E détecté
  • ITF détecté

Actions associées

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

  • Ouvrir le scanner : ouvre une vue scanner plein écran qui capture un code de façon autonome. C’est la configuration la plus simple.
  • Scanner la frame de prévisualisation : lit une image fournie par un composant Caméra distinct, pour construire votre propre interface de scan. Voir Scanner depuis un composant Caméra.

Propriétés exposées

Le Lecteur de code expose :

  • Valeur : la dernière valeur décodée.

Marqueurs enregistrés

Vous pouvez créer des marqueurs enregistrés sur le composant. Chaque marqueur stocke :

  • Format
  • Valeur

Quand un code scanné correspond à la fois au format et à la valeur enregistrés, le marqueur se déclenche et exécute automatiquement les actions associées.

Scanner depuis un composant Caméra

Avec Ouvrir le scanner, le Lecteur de code affiche son propre scanner plein écran et fonctionne de façon autonome. Lorsque vous avez besoin d’une interface personnalisée à la place — votre propre overlay, repère de cadrage ou consignes à l’écran — associez Lecteur de code à un composant Caméra. La Caméra affiche l’aperçu en direct à l’écran, et chaque image qu’elle capture est envoyée au Lecteur de code pour analyse :

  1. Ajoutez Caméra sur votre écran.
  2. Ajoutez Lecteur de code dans la liste des Objets et réglez son Format (par exemple EAN-13).
  3. Sur Caméra, créez l’action :
    1 Changement de frame
    →
    2 Agir sur un composant
    →
    3 Lecteur de code
    →
    4 Scanner la frame de prévisualisation
  4. Sur Lecteur de code, utilisez l’événement de détection (par exemple EAN-13 détecté) pour mettre à jour une variable, ouvrir une fiche produit ou déclencher une autre action avec
    1 Depuis l’événement
    →
    2 Valeur
    .

Comme l’image provient de la Caméra, Scanner la frame de prévisualisation n’est disponible que lorsque l’action est déclenchée depuis un événement Caméra (par exemple Changement de frame).

Exemples pratiques

Ouvrir une URL depuis un QR code

  1. Ajoutez Lecteur de code dans la liste des Objets.
  2. Réglez Format sur QR code.
  3. Ouvrez l’onglet Actions du composant puis sélectionnez QR code détecté.
  4. Ajoutez l’action Ouvrir une URL.
  5. Dans URL, ajoutez un data binding :
    1 Depuis l’événement
    →
    2 Valeur
    .

Bonnes pratiques et conseils

  • Utilisez Caméra arrière pour la majorité des scénarios de scan.
  • Ajoutez un composant par format au lieu de changer le format en cours de parcours.
  • Utilisez Ouvrir le scanner pour une expérience simple en plein écran.
  • Utilisez Caméra + Scanner la frame de prévisualisation lorsque vous avez besoin d’une interface personnalisée.
  • Si vous utilisez des marqueurs enregistrés, le format et la valeur décodée doivent tous les deux correspondre.
  • Testez vos parcours de scan sur les appareils cibles et dans les conditions de lumière réelles.

Ressources complémentaires