Reconnaissance d'images
Détectez n’importe quelle image réelle avec l’appareil photo et déclenchez instantanément une action dans votre application PandaSuite.
Le composant Recognizer transforme n’importe quelle image imprimée ou affichée à l’écran en déclencheur interactif.
Lorsque l’utilisateur·rice pointe la caméra de son appareil, le composant compare le flux vidéo aux images de référence que vous avez importées.
Dès qu’une correspondance est trouvée : l’action de votre choix se lance (ouvrir un écran, lire une vidéo, incrémenter un score, etc.).
La reconnaissance d’images fonctionne hors ligne sur les applications iOS & Android (build natif) et pour les web apps.
Cas d’utilisation
- Audioguide de musée : scannez un tableau pour obtenir des informations contextuelles.
- Chasse au trésor : révélez un indice caché derrière une image à trouver.
- Catalogue produit : « Scannez pour acheter » depuis un flyer imprimé.
- Formation technique : détectez un schéma et affichez une procédure de maintenance.
Mise en place du composant
- Ouvrez le panneau Composants.
- Glissez Reconnaissance d’images dans la liste des Objets (composant non visuel).
Caractéristiques du composant
Propriétés
Dans les Propriétés du composant, cliquez sur + Ajouter pour importer une ou plusieurs images de référence.
| Propriété | Rôle |
|---|---|
| Images | Liste des visuels de référence à reconnaître |
| Sensibilité | Ajuste la tolérance de détection (0.1–10). Plus la valeur est haute, plus le composant est sensible. |
| Nombre de matches | Nombre de confirmations avant déclenchement (1 par défaut) |
| Caméra | Utilise la caméra arrière du device (par défaut) |
Évitez les visuels trop simples ou monochromes. Préférez des images riches en détails, minimum 600 × 600 px.
Événements déclencheurs
Déclencheur disponibles depuis l’onglet Actions du composant :
- Match [image.png] : se produit dès que [image.png] est détectée. .
Il vous permet de déclencher n’importe quelle action PandaSuite (Changer d’écran, Ouvrir pop-up, Définir variable, etc.).
Vous pouvez ajouter plusieurs images à reconnaître au sein d’un seul composant. Chaque image possède son propre déclencheur et sa propre action.
Actions associées
Vous pouvez agir sur le composant via l’action Agir sur un composant :
- Ouvrir la caméra : lance la détection (plein écran par défaut).
Interactions avancées
Utilisation du composant Camera
Combinez le composant Reconnaissance d’images et le composant Camera lorsque vous souhaitez superposer des éléments UI (cadre, instructions).
Utilisez alors les événements du composant Camera (déclencheur Changement de frame) pour déclencher la reconnaissance d’images.
Bonnes pratiques et astuces
- Testez vos images sur plusieurs appareils (lumière, distance, reflets).
- Si la détection est trop lente, augmentez Sensibilité ou enrichissez le visuel.
- Si des faux positifs surviennent, baissez Sensibilité ou augmentez Nombre de matches.
- Proposez du feedback : vibration, son ou animation lors de la réussite.
Exemples pratiques
Déclencher une pop-up d’information
- Insérez le composant Reconnaissance d’images et importez l’image poster_museum.jpg.
- Créez une Pop-up contenant la fiche de l’œuvre.
- Ajoutez un bouton pour déclencher la reconnaissance d’images :
Tape/Clique ➜ Agir sur un composant ➜ Reconnaissance d’images ➜ Ouvrir la caméra
- Sur ce composant, créez l’action :
MATCH [poster_museum.jpg] ➜ Agir sur un composant ➜ Pop-up
- Prévisualisez sur appareil : scannez l’affiche, la pop-up s’ouvre.
Créer une chasse au trésor multi-indices
- Ajoutez 5 images de référence (indices A → E) dans le même composant Reconnaissance d’images.
- Chaque reconnaissance met à jour la variable progression de la base de données PandaSuite.
- Un composant Condition vérifie progression pour afficher l’écran de victoire.