Image Recognition
Detect any real image with the camera and instantly trigger an action in your PandaSuite application.
The Recognizer component transforms any printed or displayed image into an interactive trigger.
When the user points their device’s camera, the component compares the video feed to the reference images you have imported.
As soon as a match is found: an action of your choice is triggered (open a screen, play a video, increase a score, etc.).
Image recognition works offline on iOS & Android apps (native build) and for web apps.
Use cases
- Museum audioguide: scan a painting to get contextual information.
- Treasure hunt: reveal a hint hidden behind an image to find.
- Product catalog: “Scan to buy” from a printed flyer.
- Technical training: detect a diagram and display a maintenance procedure.
Setting up the component
- Open the Components panel.
- Drag and drop Image Recognition into the Object list (non-visual component).
Component features
Properties
In the component Properties, click + Add to import one or more reference images.
| Property | Role |
|---|---|
| Images | List of reference visuals to recognize |
| Sensitivity | Adjusts the detection tolerance (0.1–10). The higher the value, the more sensitive the component is. |
| Number of matches | Number of confirmations before triggering (1 by default) |
| Camera | Uses the device’s rear camera (by default) |
Avoid too simple or monochrome visuals. Prefer images rich in details, minimum 600 × 600 px.
Trigger events
Triggers available from the component’s Actions tab:
- Match [image.png]: occurs as soon as [image.png] is detected.
It allows you to trigger any PandaSuite action (Change screen, Open pop-up, Set variable, etc.).
You can add multiple images to recognize within a single component. Each image has its own trigger and action.
Associated actions
You can act on the component via the Act on a component action:
- Open Camera: launches detection (full screen by default).
Advanced interactions
Using the camera component
Combine the Image Recognition component with the Camera component when you want to overlay UI elements (frame, instructions).
Then use the events of the Camera component (trigger Frame change) to trigger image recognition.
Best practices and tips
- Test your images on multiple devices (light, distance, reflections).
- If detection is too slow, increase Sensitivity or enrich the visual.
- If false positives occur, lower Sensitivity or increase Number of matches.
- Provide feedback: vibration, sound, or animation upon success.
Practical examples
Triggering an information pop-up
- Insert the Image Recognition component and import the image poster_museum.jpg.
- Create a Pop-up containing the work’s information sheet.
- Add a button to trigger image recognition:
Tap/Click ➜ Interact with a component ➜ Image Recognition ➜ Open Camera
- On this component, create the action:
MATCH [poster_museum.jpg] ➜ Act on a component ➜ Pop-up
- Preview on a device: scan the poster, the pop-up opens.
Creating a multi-clue treasure hunt
- Add 5 reference images (clues A → E) in the same Image Recognition component.
- Each recognition updates the progression variable in the PandaSuite database.
- A Condition component checks progression to display the victory screen.