App-to-app

The App-to-App component allows you to connect multiple PandaSuite applications to share data in real time. This opens up innovative possibilities for interactive experiences and multi-device projects.

In the example below, an Android smartphone controls an iPad Pro to display video thumbnails:

How the Shared Server Works

By default, PandaSuite hosts a remote server that facilitates schema sharing between devices. This solution, ideal for simple scenarios, ensures quick setup without additional installation.

However, for specific needs, it is possible to retrieve and install this server locally. This provides greater flexibility, especially for offline use or advanced functionalities.

Install and Configure the Local Server

Use Cases of the Local Server

This option is particularly useful in the following cases:

• Offline use: The local server allows the use of App-to-App without an internet connection. This is especially useful for isolated environments, such as museums or events.
• Serial port support: Connect devices like Arduino or Raspberry Pi via serial ports by enabling inspection (—serial-inspect).
• TUIO integration: The TUIO protocol, supported in the local version, is perfect for tangible or multitouch interfaces.

Step 1: Download the Local Server

Retrieve the version suited to your operating system from our GitHub Releases:

• Linux: shared-schema-linux
• macOS: shared-schema-macos
• Windows: shared-schema-win.exe

Simply launch the downloaded file to start the local server.

Step 2: Available Options

Here are the options to configure the server based on your needs:

• -k, --key <file>: Path to the SSL key file.
• -c, --cert <file>: Path to the SSL certificate.
• -s, --serial-inspect [ports]: Enables serial port inspection (optional list).
• -d, --delimiter <delimiter>: Delimiter for serial port data (default: \n).
• -t, --tuio [port]: Enables a TUIO UDP server (default: port 3333).

Usage Examples

Launch a server on port 8080 with serial port inspection:

PORT=8080 ./shared-schema-macos -s /dev/ttys063

Set up TUIO on a custom port:

./shared-schema-linux -t 5000

Use specific certificates:

./shared-schema-win.exe -k mykey.pem -c mycert.pem

These options allow you to customize the server according to your needs, whether for simple or advanced uses.

Using SSL Certificates (Optional)

To simplify local configuration, we include a valid SSL certificate for the host shared-schema.panda.st. Here’s how to use it:

1. Modify your DNS or the /etc/hosts file: Redirect shared-schema.panda.st to your local server’s IP address.
2. Download the necessary certificates:
   • Private key (privkey.pem)
   • Full certificate (fullchain.pem)

Alternatively, you can use non-SSL addresses. However, if your project is used in a web app on an SSL-protected domain, some browsers will require the secure WSS protocol to function properly.

Configure the App-to-App Component

For different displays between the controlling and displaying devices, we recommend creating two separate projects. The App-to-App component will be used in both projects.

From the Controller App

Insert the App-to-App component.

In the properties, a URL is automatically displayed. To configure the component:

• Option 1: Use PandaSuite servers, leave the URL unchanged, and choose a unique identifier for the Room.
• Option 2: Use a local server, enter the server URL.

Then, choose the event that will trigger the action.

In our example, we associate a data value (1 to 6) to identify the video clicked by the user. On each thumbnail click, the video number is associated with the data video. This data will be reused in the other app to display the correct video.

Choose the action Interact with a Component, target the App-to-App component, and select the action Modify Data.

In the Target field, define your data name using the By Key function, e.g., video. Choose the Set function and, as the Value, enter the number 1. This is a free schema, so the data is created as you define it.

From the Display App

Add a new App-to-App component to the project.

To configure the component:

• Option 1: Use PandaSuite servers, leave the URL unchanged, and for Room, use the same identifier as the other project.
• Option 2: Use a local server, enter the server URL used in the other project.

Add a Conditions component and define the associated conditions.

Add the corresponding actions.

Integrating TUIO in PandaSuite

The TUIO protocol is an open standard designed to transmit multitouch or tangible interaction data in real time, making it an ideal solution for innovative interactive interfaces or connected physical installations.

Here’s how to integrate it using the App-to-App component:

1. Add the App-to-App component to your project in PandaSuite Studio.
2. Configure it to connect to your server’s local address.

3. Ensure the host shared-schema.panda.st correctly points to your machine.

The server, launched with the option -t, captures TUIO data on the defined port and transmits it to the App-to-App component.

You can use a simulator like TUIOSimulator to test interactions:

• Place objects on the simulator scene.

• In PandaSuite Studio, enter the component context to view TUIO data in real time.

• Link the physical objects’ positions to elements in your application.

And here is the final result: