WBO : Un tableau blanc interactif
-
WBO est une application web de dessin collaboratif en temps réel (licence GPL 3). Est-ce qu’il vous est déjà arrivé de passer plusieurs minutes à expliquer un concept simple lors d’une vidéo-conférence alors qu’un petit schéma aurait suffi ? WBO résout ce problème en permettant la création de croquis partagés en temps réel entre plusieurs utilisateurs.
Démonstration de l’application web WBO
Le code source sur Github
Fonctionnalités
WBO est un outil de dessin vectoriel, ce qui signifie que l’on peut zoomer autant que l’on veut sur le tableau blanc sans qu’il n’apparaisse jamais pixelisé.
L’interface graphique est très simple, et essaie de laisser beaucoup de place au contenu.
Il y a pour l’instant 6 outils disponibles:
- Le crayon pour dessiner à main levée
- L’outil de texte pour écrire de courtes lignes de texte
- L’effaceur. Comme le dessin est vectoriel, l’effaceur efface le dessin “par morceaux”. Il supprime tout l’élément sur lequel il est appliqué.
- Ligne droite permet de dessiner une ligne. La ligne apparaît immédiatement sur le tableau de tous les participants dès qu’elle est commencée.
- Rectangle, pour dessiner des rectangles.
On peut de plus choisir la taille et la couleur de l’élément que l’on dessine.
Détails techniques
L’application est entièrement réalisée en JavaScript, sans framework ni du côté client ni du côté serveur. Son architecture est très simple.
Serveur
Le serveur est écrit en node.js. Il utilise la bibliothèque socket.io pour communiquer en temps réel avec tous les clients connectés. Cela permet d’établir une connexion en temps réel avec les navigateurs récents qui supportent les WebSockets, mais aussi de supporter les navigateurs anciens en mode dégradé.
Chaque fois qu’un client émet un évènement (parce que l’utilisateur a ajouté un nouveau point dans la ligne qu’il est en train de tracer, par exemple), le serveur se contente de le diffuser à tous les autres clients connectés et d’enregistrer l’évènement dans un fichier.
Lorsqu’un nouveau client se connecte à un tableau, le serveur lui envoie la liste de tous les évènements passés associés à ce tableau. C’est le client qui se chargera de transformer les évènements en dessin.
Le serveur est aussi capable de générer lui-même une image à partir des évènements d’un tableau, ce qui lui permet de fournir des aperçus des tableaux.
Client
Le client est plus complexe que le serveur. C’est lui qui doit se charger du dessin en temps réel, à la fois de la part de l’utilisateur du navigateur et des autres utilisateurs connectés de la part desquels il reçoit des évènements.
Le code du client est autant que possible séparé en outils indépendants, chacun correspondant à un type de dessin (ligne, texte, rectangle, …). Chaque outil peut déclarer les propriétés suivantes :
- un nom ;
- une icône ;
- un style de curseur ;
- une fonction de dessin ;
- un triplet de fonctions à appeler respectivement lorsque le bouton de la souris est pressé, lorsque la souris se déplace, et lorsque le bouton de la souris est relâché.
La fonction de dessin prend en paramètre un évènement (qui peut venir de l’utilisateur local ou d’un autre utilisateur connecté) et modifie l’élément SVG de la page actuelle pour refléter les modifications décrites dans l’évènement (comme ajouter un point à une ligne, par exemple).
Les fonctions appelées lors d’un appui de souris ne dessinent rien. Elles se contentent d’émettre des évènements. Ces évènements seront alors d’une part émis vers le serveur, et d’autre part envoyés vers les fonctions de dessin local. Chaque évènement contient l’identifiant de l’outil qui l’a émis, de manière à pouvoir l’envoyer à la bonne fonction de dessin.
Conclusion
J’espère que cet outil pourra vous être utile. Je vous encourage également à aller regarder son code source : il est plutôt court, et simple ; ajouter un nouvel outil se fait en quelques heures tout au plus. Toutes les pull requests sont les bienvenues ! Je suis également preneur de toute suggestion que vous pourriez faire en commentaire.
Sauf mention contraire, le site est placé sous double licence Creative Commons BY-SA et GNU Free Documentation License propulsé par NodeBB