# Image Recognition

> Detect any real image with the camera and instantly trigger an action in your PandaSuite application.

https://docs.pandasuite.com/essentials/components/image-recognition/

**Detect any real image with the camera and instantly trigger an action in your PandaSuite application.**

[Video: Image Recognition tutorial: trigger content in a PandaSuite application by pointing the device camera at an image](https://www.youtube.com/embed/PcgwHrOyd00)

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.).

> **Info: Compatible Platforms**
>
> 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

1. Open the **Components** panel.
2. 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.

[Image: Image Recognition properties next to a plant ID screen: three plant signs added as reference images, and the Add button]

| 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)                                                           |

> **Warning: Image Quality**
>
> 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.).

> **Info: Multiple Images**
>
> 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 **Interact with 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

1. Insert the **Image Recognition** component and import the image *poster\_museum.jpg*.
2. Create a **Pop-up** containing the work's information sheet.
3. Add a button to trigger image recognition:

**Tap/Click** ➜ **Interact with a component** ➜ **Image Recognition** ➜ **Open Camera**

4. On this component, create the action:

**MATCH \[poster\_museum.jpg]** ➜ **Interact with a component** ➜ **Pop-up**

5. 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 [Datastore](https://docs.pandasuite.com/essentials/data/datastore/).
- A **Condition** component checks *progression* to display the victory screen.

## Additional Resources

- [Camera Component](https://docs.pandasuite.com/essentials/components/camera/)
- [Understanding Actions](https://docs.pandasuite.com/essentials/interactions/interactive-actions/)
- [Using Variables](https://docs.pandasuite.com/essentials/data/variables/)
- [Code Reader](https://docs.pandasuite.com/essentials/components/code-reader/)