Journée Innovation chez Frianbiz

Durant toutes ses éditions précédentes, la journée fait naitre des idées innovantes tout en manipulant des technologies et frameworks de pointe. Cette édition n’était pas une exception. Il y avait au menu :

• De la réalité augmentée
• De la gestion de socket sur iOS
• Du Machine Learning
• Du contrôle d’écran via Motion Capture
• Du dessin de graphe en Javascript Les équipes vont maintenant vous présenter leurs projets respectifs :

Pixology par Lucas et Loïc

Pour cette journée innovation, nous avons décidé de tester les sockets avec iOS. L’objectif était simple : réaliser une application où un joueur devait faire deviner un film avec des emojis.

Lorsque le joueur 1 ajoute un emoji, celui-ci s’affiche instantanément sur l’écran du second joueur. À l’inverse, lorsque le joueur 2 commence à saisir une réponse, celle-ci s’affiche sur l’écran du joueur 1.

Pour ce faire, nous avons créé une application iOS (que nous avons nommé Pixology), utilisant la librairie socket.io-client-swift et un serveur node utilisant aussi socket.io.

Socket.io, aussi bien sur web que mobile, permet de diffuser des événements et de s’y abonner. Ainsi nous avons réalisé des échanges via sockets, et le résultat est sans appel : une réactivité sans précédent. Le fait de ne pas dépendre de service push offre une plus grande instantanéitée.

La documentation claire et simple nous a permis de réaliser une application avec de nombreux échanges en un temps réduit.

Le prochain objectif sera de porter l’application sur Android, afin de pouvoir utiliser les sockets sur nos futures applications.

Arbre généalogique via 3D par Eric D

Lors de cette journée, j’ai souhaité réaliser un arbre généalogique afin d’étudier la visualisation de données avec la librairie D3 (pour Data-Driven Document).

La création de l’arbre a demandé plus d’algorithmie que prévu. D3 offre bien des outils afin de créer toutes sortes de graphs facilement, mais j’ai préféré m’en passer afin d’avoir plus de liberté sur la disposition des membres de la famille (branches qui se rejoignent, réduction du nombre de croisement des liens, familles recomposées…)

Ca faisait beaucoup de choses pour une journée ! J’ai donc triché en la prolongeant pour arriver à ceci : En résumé, je suis très impressionné par D3. Mon projet n’est pas encore en ligne mais va se poursuivre.

Et pour ceux qui souhaiteraient s’initier pas à pas à cette librairie, je recommande fortement la lecture de Interactive Data Visualisation for the Web.

ParkingPlacesDetector par Antoine et Mohamed

Parking Places Detector est une app iOS qui -à l’aide du Machine Learning Kit- permet de détecter en temps réel les places libre de notre parking de bureau. A l’aide d’un serveur ExpressJS, elle envoit des notifications directement sur notre chaîne Slack via un bot dédié. Nous avons partagé notre code sur le github suivant si vous souhaitez en savoir plus.

Google ARCore par Joe, Eric F et Benjamin

Nous avons déjà eu l’opportunité chez Frianbiz de réaliser des mini-jeux pour certains de nos clients.

Dans l’idée de proposer plus d’interaction avec les joueurs, nous avons décidé de réaliser un POC autour de la technologie ARCore de Google. Il s’agit d’un SDK disponible pour Android et iOS permettant de créer des applications en réalité augmentée.

Suite à la réalisation du tuto de base permettant la création d’un “snake”, nous nous sommes lancés dans la création d’un mini-jeu d’aventure (aka dungeon crawler) permettant au joueur d’évoluer dans son environnement réel et de voir apparaître au travers de son téléphone différents évènements comme des monstres et des coffres. Ayant déjà pu expérimenter Unity (voir notre GameJam), nous avons utilisé l’intégration d’ARcore via Unity pour Android, l’avantage étant de pouvoir déployer notre application aussi sur iOS sans changer le code.

La documentation est claire mais une fois les concepts de base intégrés, nous nous sommes vite retrouvés à écrire plus de code pour le jeu que pour l’utilisation du SDK.

Finalement, l’intégration de ce SDK dans une application est très simple et le rendu utilisateur fait tout de même son effet ?

Frianboard par Guillaume, Sébastien et Lancelot

Vous aussi vous auriez voulu avoir un écran tactile de deux mètres de diagonale ? Vous aussi vous vous êtes dit que c’était hors de prix ? Nous non ! Le principe de ce prototype est de transformer un bête tableau blanc en écran tactile. Une webcam permet l’analyse des mouvements dans l’image et la détection d’un pointeur qui sera lié à des interaction sur une page Web.

Le projet est composé de deux modules:

Le moteur

Écrit en Python, il permet la détection de deux pointeurs grâce à une caméra et la bibliothèque OpenCV. On peut s’y connecter via WebSocket qui émettra les coordonnées du pointeur à chaque mouvement.

L’extension pour navigateur (Chrome)

Écrite en JavaScript, une fois installée sur votre navigateur, elle se connecte au WebSocket du moteur et capte les coordonnées du pointeur pour les déplacer à l’écran. Les pointeurs sont injectés par dessus n’importe quelle page web sous forme de petits carrées de couleur.

Et les pointeurs physiques dans tout ça ?

Détecter un doigt au bout d’un corps dans une image n’est pas aisé. Pour simplifier la tâche du moteur, nous avons utilisé des marqueurs de couleur. Le premier marqueur est le principal. Il correspond à la position de l’index qui serait utilisé dans un écran tactile classique.

Le second marqueur permet de cliquer. Lorsqu’il se rapproche du premier, le moteur émet un événement de clic vers l’extension.

L’extension Chrome étant du simple javascript injecté dans les pages web visitées, il suffit de traiter des positions absolues des curseurs grâce à du css, et de surcharger les événements classiques de la souris (“mousemove”, “mouseup”, “mousedown”, par exemple…”) ou de “touch”.

Et la suite ?

Le principal problème rencontré lors des tests de notre solution est que les couleurs sont difficiles à détecter en fonction de la luminosité de la pièce, ou des couleurs des pages web qui viennent se confondre avec celle des marqueurs.

On peut imaginer remplacer ces marqueurs par des formes imposées dans le script Python évitant le problème des couleurs, ou encore utiliser d’autres technologies que la détection d’image (la détection d’objets dans l’espace par exemple).

La deuxième contrainte est de ne pouvoir interagir qu’avec des pages web. Le remplacement de l’extension Chrome par une application native OS X ou Windows permettrait d’avoir un contrôle complet de la machine hôte en remplaçant directement le fonctionnement de la souris.

Et Voilà ! Ceci était la récolte de cette journée inno. À bientôt pour le prochain rdv ??.