URL: https://linuxfr.org/news/wbo-un-tableau-blanc-interactif Title: WBO : un tableau blanc interactif Authors: lovasoa ZeroHeure, Julien Jorge, Davy Defaud et palm123 Date: 2018年11月27日T18:31:11+01:00 License: CC By-SA Tags: wbo, dessin_vectoriel, tableau_blanc_interactif et travail_collaboratif Score: 51 WBO est une application Web de **dessin collaboratif** en temps réel (licence GPL v3). Est‐ce qu’il vous est déjà arrivé de passer plusieurs minutes à expliquer un concept simple lors d’une vidéoconfé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](https://wbo.openode.io/) [Le code source sur GitHub](https://github.com/lovasoa/whitebophir) ---- 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. ![Capture d’écran de l’interface graphique de Whitebophir](https://user-images.githubusercontent.com/552629/49140163-dd629400-f2f3-11e8-9fde-68e2c2d0aace.png) Il y a pour l’instant six outils disponibles : 1. le _crayon_, pour dessiner à main levée ; 1. l’outil de _texte_, pour écrire de courtes lignes de texte ; 1. 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é ; 1. _ligne droite_, qui 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 ; 1. _rectangle_, pour dessiner des rectangles. On peut en outre 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 cadriciel, 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](https://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 gèrent les [WebSockets](https://fr.wikipedia.org/wiki/WebSocket), mais aussi de prendre en charge 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](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) ; - 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](https://github.com/lovasoa/whitebophir) : il est plutôt court et simple ; ajouter un nouvel outil se fait en quelques heures tout au plus. Toutes les demandes d’intégration (_pull requests_) sont les bienvenues ! Je suis également preneur de toute suggestion que vous pourriez faire en commentaire.

AltStyle によって変換されたページ (->オリジナル) /