App-to-App

Le composant App-to-App vous permet de connecter plusieurs applications PandaSuite pour partager des données en temps réel. Cela ouvre des possibilités innovantes pour des expériences interactives et des projets multi-appareils.

Dans l’exemple ci-dessous, un smartphone Android contrôle un iPad Pro pour afficher des vignettes vidéos :

Fonctionnement du serveur partagé

PandaSuite héberge par défaut un serveur distant qui facilite le partage des schémas entre appareils. Cette solution, idéale pour les scénarios simples, garantit une configuration rapide et sans installation supplémentaire.

Cependant, pour des besoins spécifiques, il est possible de récupérer et installer ce serveur localement. Cela permet davantage de flexibilité, notamment pour des usages hors ligne ou des fonctionnalités avancées.

Installer et configurer le serveur local

Principaux usages du serveur local

Cette option est particulièrement utile dans les cas suivants :

• Usage hors connexion : le serveur local permet d’utiliser App-to-App sans connexion internet. Cela est particulièrement utile pour des environnements isolés, comme des musées ou des événements.
• Support des ports séries : connectez des appareils comme Arduino ou Raspberry Pi via les ports séries en activant l’inspection (—serial-inspect).
• Intégration TUIO : le protocole TUIO, pris en charge dans la version locale, est parfait pour des interfaces tangibles ou multitouch.

Étape 1 : télécharger le serveur local

Récupérez la version adaptée à votre système d’exploitation depuis notre GitHub Releases :

• Linux : shared-schema-linux
• macOS : shared-schema-macos
• Windows : shared-schema-win.exe Lancez simplement le fichier téléchargé pour démarrer le serveur local.

Étape 2 : options disponibles

Voici les options pour configurer le serveur selon vos besoins :

• -k, --key <file> : Chemin vers le fichier clé SSL.
• -c, --cert <file> : Chemin vers le certificat SSL.
• -s, --serial-inspect [ports] : Active l’inspection des ports séries (liste facultative).
• -d, --delimiter <delimiter> : Délimiteur pour les données des ports séries (par défaut : \n).
• -t, --tuio [port] : Active un serveur UDP TUIO (par défaut : port 3333).

Exemples d’utilisation

Lancer un serveur sur le port 8080 avec inspection des ports séries :

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

Configurer TUIO sur un port personnalisé :

./shared-schema-linux -t 5000

Utiliser des certificats spécifiques :

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

Ces options permettent de personnaliser le serveur selon vos besoins, que ce soit pour des usages simples ou avancés.

Utilisation des certificats SSL (optionnel)

Pour simplifier la configuration locale, nous incluons un certificat SSL valide pour l’hôte shared-schema.panda.st. Voici comment en tirer parti :

1. Modifier votre DNS ou le fichier /etc/hosts : Redirigez shared-schema.panda.st vers l’adresse IP de votre serveur local.

2. Télécharger les certificats nécessaires:

   • Clé privée (privkey.pem)
   • Certificat complet (fullchain.pem)

Si vous préférez, vous pouvez également utiliser des adresses non-SSL. Toutefois, notez que si votre projet est utilisé dans une web app sur un domaine protégé par SSL, certains navigateurs exigeront le protocole sécurisé WSS pour fonctionner correctement.

Configurer le composant app-to-app

Pour avoir deux affichages différents entre l’appareil qui contrôle et celui qui affiche, nous vous recommandons de créer 2 projets distincts. Le composant App-to-App sera utilisé dans les deux projets.

Depuis l’app qui contrôle (controller)

Insérez le composant App-to-App.

Dans les propriétés, une URL est automatiquement affichée. Pour configurer le composant:

• Option 1 : vous passez par les serveurs de PandaSuite, ne changez pas l’URL et choisissez un identifiant unique pour la Room.
• Option 2 : vous utilisez un serveur local, saisissez l’URL du serveur.

Ensuite, choisissez l’événement qui va déclencher l’action.

Dans notre exemple, nous souhaitons associer une donnée (de 1 à 6) pour connaître la vidéo sur laquelle l’utilisateur a cliqué. Au clic sur chaque vignette, le numéro de la vidéo est associée à la donnée video. Cette donnée sera réutilisée dans l’autre app pour afficher la bonne vidéo.

Choisissez l’action Interagir sur un composant, ciblez le composant App-to-App et l’action Modifier la donnée.

Dans le champ Cible, définissez le nom de votre donnée avec la fonction By key, par exemple video. Choisissez la fonction Définir et comme Valeur le nombre 1. En effet, il s’agit d’un schéma libre et la donnée se crée dès que vous la définissez.

Depuis l’app qui affiche

Ajoutez un nouveau composant App-to-App au niveau du projet.

Pour configurer le composant:

• Option 1 : vous passez par les serveurs de PandaSuite, ne changez pas l’URL et pour Room, indiquez le même identifiant que dans l’autre projet.
• Option 2 : vous utilisez un serveur local, saisissez l’URL du serveur, déjà utilisée pour l’autre projet.

Ajoutez un composant Conditions et définissez les conditions associées.

Ajoutez les actions correspondantes.

Intégrer le TUIO dans PandaSuite

Le protocole TUIO est une norme ouverte conçue pour transmettre des données multitouch ou des interactions tangibles en temps réel, ce qui en fait une solution idéale pour des interfaces interactives innovantes ou des installations physiques connectées.

Voici comment l’intégrer via le composant App-to-App :

1. Ajoutez le composant App-to-App à votre projet dans PandaSuite Studio.
2. Configurez-le pour qu’il se connecte à l’adresse locale de votre serveur.

3. Assurez-vous que l’hôte shared-schema.panda.st pointe bien vers votre machine.

Le serveur, lancé avec l’option -t, capte les informations TUIO sur le port défini et les transmet au composant App-to-App.

Vous pouvez utiliser un simulateur comme TUIOSimulator pour tester l’interaction :

• Placez des objets sur la scène du simulateur.

• Dans PandaSuite Studio, entrez dans le contexte du composant pour voir les données TUIO en temps réel.

• Liez les positions des objets physiques aux éléments de votre application.

Et voici le résultat de la simulation :