La chambre des désirs est composées de six interfaces. Les trois premières sont dédiées au fonctionnement de l’exposition tandis que les trois autres tendent à la prolonger extra-muros.

A considérer comme une forme de mashup construit sur un contenu « auto-généré », ces interfaces exploitent de nombreuses « briques logicielles » issues des technologies web, relativement récentes pour la plupart (du moins en septembre 2013). Une liste non exhaustive est fournie en bas de cette page.

1. La table multitouch (drawtable)

Une table interactive permet d’exprimer un souhait en écrivant ou en dessinant avec les doigts. Le souhait se transforme en nuage de particules tridimensionnel que l’utilisateur peut encore manipuler.

La table est fournie par la société Future Instruments, une start-up dont l’origine remonte à un projet de recherche sur les interfaces tactiles, financé par la HES-SO.

Matériel

La table est équipée d’une dizaine de lasers qui produisent une fine pellicule de lumière infra-rouge, invisible à l’œil nu, sur toute sa surface. Ces faisceaux sont surveillés par deux caméras infrarouges qui repèrent l’emplacement des doigts sur la table et renvoient les évènements détectés à un ordinateur intégré au système. Celui-ci fait office de serveur DHCP et diffuse des évènements sur son réseau, en respect du protocole TUIO (Tangible User Interface Objects). Un projecteur à ultra courte focale arrimé à la table permet d’utiliser celle-ci comme un écran. L’image provient d’un second ordinateur, qui reçoit les évènements TUIO, utiles au pilotage d’une application, en lieu et place des périphériques habituels (clavier, souris).

Logiciel

La filière ingénierie des médias propose une application qui s’exécute sur un navigateur (webapp) équipé d’un plugin TUIO qui fonctionne comme un décodeur. Il est alors possible de connaître l’emplacement des doigts de l’utilisateur sur la fenêtre du navigateur. Le système supporte les dix doigts et plus encore…

L’interface est composée d’une surface de dessin et de trois boutons (annuler, effacer, envoyer). Les « œuvres » produites par les utilisateurs sont encodées en WebGL, une API Javascript permettant de rendre des objets graphiques en deux ou en trois dimensions. Il faut donc utiliser impérativement un navigateur « moderne » qui supporte ce langage.

La librairie « three.js » permet de manipuler les objets, tandis qu’un code javascript issu du projet « nucleal » organise le déplacement des particules dans l’espace.

Lorsque la table est inactive, un écran de veille invite les visiteurs à venir dessiner. Celui-ci reproduit à l’identique ce qu’un utilisateur peut faire sur la table.

2. Le back-end de gestion

En plus de s’afficher sur la table, les désirs exprimés par les visiteurs sont envoyés dans une base de données pour les faire éventuellement « revivre »…

Modération

Dans le but d’éviter la diffusion de désirs inappropriés, cette interface permet à des modérateurs de catégoriser chacune des œuvres reçues (rejetée, acceptée, admirable…).

Le modérateur est averti grâce à une notification “Pusher” de l’arrivée d’un nouveau désir.

Enfin, lorsqu’un désir est validé, il est directement injecté dans les différents sliders en activité via une notification pusher.

Administration

Cette partie du backend a d’abord été développée pour la phase de développement de l’application. En effet, elle permet de peupler automatiquement l’application avec un grand nombre de désirs pour tester la robustesse du système et simuler différentes situations.

Elle permet encore de nettoyer la base de données et de changer le statut des désirs déjà catégorisés (utile en cas d’erreur à la modération).

Events

Le système permet encore de définir des lieux physiques de projection (les « events ») pour répondre au souhait des organisateurs de « faire sortir l’exposition du musée ». (cf. Slider, ci-dessous).

Un event est donc un lieu de diffusion, caractérisé par un nom, une description de l’endroit et une adresse (reconnue par Google Maps pour générer la carte de localisation).

Un event peut être public ou privé (cf. slider ci-dessous).

3. La chambre

Au deuxième étage du musée, la chambre des désirs a été reconstituée par le scénographe du film original. Un portail en ruine bardé de toiles de fils blancs symbolise la chambre tout en en interdisant l’entrée.

Les désirs, filtrés par les modérateurs, s’affichent en boucle sur cette toile translucide (le désir validé s’affiche quelques secondes, part en nuage de fumée et laisse la place au désir suivant).

L’affichage peut être configuré en utilisant la barre d’espace (durée de l’explosion en nuage de particules, durée de l’implosion pour la transition sur l’image suivante, taille et couleur des particules, dégradés, etc.).

4. Le slider (dispositif externe)

Les désirs peuvent être projetés à de multiples endroits via une interface nommée “slider”.

Comme en prolongement de l’exposition, l’objectif consiste à disséminer dans la ville et hors du musée, des écrans, projecteurs et ordinateurs connectés au réseau, pour afficher les désirs des utilisateurs directement sur une façade, dans une vitrine ou à l’intérieur d’un espace public.

L’affichage est identique à celui du portail d’entrée de la chambre, à une différence près : il peut être configuré pour faire apparaître un QR code qui permet à la personne qui le scanne de télécharger une interface de dessin (cf. plus bas)

Les QR codes sont générés via l’API QRickit. Ils sont associés aux events créés dans l’interface de gestion. Ainsi à chaque lieu de projection correspond un code unique qui permet d’associer un lieu à un désir exprimé via un smartphone.

Les events définis par les administrateurs peuvent être « publics » ou « privés ». Dans le premier cas le slider se contentera d’afficher des désirs validés, tandis que dans le second cas, les désirs envoyés via un smartphone s’affichent immédiatement, une seule fois.

5. La table virtuelle (drawsmartphone)

La majorité des smartphones et autre tablettes ne supportent pas le WebGL. Par ailleurs ils sont déjà équipés de technologies “screen touch” et ne nécessitent donc pas l’utilisation du protocole TUIO.

Pour ces raisons, une interface de dessin différente a été réalisée (webapp). Les évènements tactiles sont captés par le navigateur (via javascript) et sont ensuite dessinés à l’aide de la balise HTML5 <canvas>. Comme sur l’interface de dessin de la table interactive, il est possible d’annuler ses derniers traits (fonction undo), d’effacer complètement son œuvre (fonction delete) et d’envoyer son désir (fonction save).

L’utilisateur a dès lors la possibilité de le retrouver dans le webslider (cf. ci-dessous) via une url unique générée grâce à un jeton (“token”).

Afin que les désirs issus des smartphones prennent un aspect identique à ceux qui viennent de la table multitouch, ils subissent un traitement supplémentaire à l’enregistrement.

6. Le webslider

Le webslider regroupe les désirs produits par les visiteurs de l’expo sur la table interactive et ceux qui proviennent de la « webapp » pour les smartphones.

Ces désirs défilent automatiquement les uns après les autres. Le webslider se présente sous deux formes différentes dépendamment de la capacité du browser à interpréter le WebGL.

S’il est capable de l’interpréter, le webslider aura le même rendu graphique que la table, la chambre et le slider. Dans le cas contraire, les désirs seront affichés tour à tour avec une transition de type « fade in – fade out » sous forme de simples images au trait blanc sur fond noir.

Un scroller vertical disponible sur la gauche de l’écran permet de rechercher un désir par date, pour l’afficher ou le partager…

Une fois un désir sélectionné, l’utilisateur a quelques secondes pour le partager sur son mur Facebook mais il a également le choix de le projeter sur d’autres murs, moins virtuels, en accédant à la liste des events définie par les administrateurs (cf. plus haut).

Le webslider n’affiche que les désirs validés. Cependant, il permet à un utilisateur de visualiser son propre désir, une fois envoyé via la webapp. L’URL générée par l’application est unique et contient deux paramètres (id, token) qui doivent correspondre à ce qui se trouve dans la base de données.

La possibilité de partager son propre désir sur un mur facebook ou public est réservée aux désirs modérés.

Enfin, le webslider est également adapté à un affichage sur mobile.

Les artisans du projet

De l’énoncé du concept à la réalisation, les collaborateurs et collaboratrices de la HEIG-VD impliqués ont été les suivants :

François-Xavier Aeberhard (développement front end), Gisèle Alvez Dos Santos Souza (concept), Adrien Bigler (développement front end), Sandrine Divorne (design), Raphaël Fischer (développement backend), Jérome Freyre (développement mobile), Loïc Privet (concept), Daniel Rappo (coordination), Justine Rieder (concept).

Les technologies en jeu

Ce projet de développement web intègre bon nombre de briques logicielles, API et autres services. La liste ci-dessous n’est pas exhaustive mais donne une bonne idée de l’ensemble :

TUIO
Tangible User Interface Objects, un protocole permettant le transfert de données descriptives des interactions entre un (ou plusieurs) utilisateur(s) et une surface interactive. Ce protocole est utilisé par la table pour envoyer des informations au browser.

PostgreSQL
Système de gestion de base de données relationnelle, utilisé pour stocker les données de l’application (désirs, events).

RoR
Ruby on Rails, un framework de développement Web en Ruby, utilisé pour le développement de l’application.

YUI
Yahoo User Interface, une librairie JavaScript et CSS développée par Yahoo, utilisée notamment pour permettre la configuration du slider.

JQuery
Librairie Javascript libre, utilisée notamment pour le scroller du webslider.

WebGL
Spécification d’affichage 3D pour les navigateurs web. Les particules sont décrites en WebGL.

<canvas>
Balise HTML5 permettant d’utiliser des fonctionnalités graphiques (dessins, animations).

Pusher
API Websocket compatible avec la plupart des langages de programmation. Le service est utilisé pour mettre à jour le backend et le slider lorsqu’un nouveau désir est produit.

Websocket
Protocole permettant de créer un canal de communication bi-directionnel entre un client et un serveur.

QRickit (QRcode)
Quick Response Code, un genre de code barre en 2D permettant de stocker beaucoup plus d’informations qu’un code barre classique. Il peut être lu via des applications pour smartphone, pour accéder à des URLs, vidéos, etc. Le service QRickit est utilisé pour générer les QR du slider.

Three.js
Cette librairie JavaScript 3D permet de manipuler les objets WebGL.

Nucleal
Projet WebGL proposant différents effets d’explosion d’une image en particules, sert de base au slider pour fournir la physique du déplacement des particules.Image Magick
Logiciel permettant de travailler sur des images (édition, composition, conversion, etc.), utilisé côté serveur pour recalibrer les images reçues de différentes sources.