WBO : un tableau blanc interactif

Posté par . Édité par ZeroHeure, Davy Defaud, Julien Jorge et palm123. Modéré par Trollnad Dump. Licence CC by-sa.
49
28
nov.
2018
Cloud

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.

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

Il y a pour l’instant six outils disponibles :

  1. le crayon, pour dessiner à main levée ;
  2. l’outil de texte, pour écrire de courtes lignes de texte ;
  3. 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é ;
  4. 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 ;
  5. 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 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, 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 ;
  • 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 demandes d’intégration (pull requests) sont les bienvenues ! Je suis également preneur de toute suggestion que vous pourriez faire en commentaire.

Aller plus loin

  • # Très bonne idée

    Posté par . Évalué à 3 (+3/-1).

    J'aime le concept ! Ça va finir en rôle ansible pour le déployer chez moi dès que j'ai un moment libre

  • # Idée d'amélioration

    Posté par . Évalué à 5 (+4/-0).

    Je ne sais pas trop si c'est possible techniquement, mais pour les explications rapides, pouvoir coller une image (bien qu'en pixels) donne plus d'intérêt à l'outil.

    • [^] # Re: Idée d'amélioration

      Posté par . Évalué à 4 (+3/-0). Dernière modification le 28/11/18 à 21:21.

      Je ne sais pas si c'est le but de l'outil, personnellement j'utiliserais la fonctionnalité capture d'écran de firefox qui permet de facilement partager une image rasterisée du rendu pour cela.

      Comme une image vaut mille mots, ceci illustre peut-être mieux l'intérêt de l'application.

      Peut-être suggérais-tu de pouvoir coller un bitmap dans le tableau ?

      • [^] # Re: Idée d'amélioration

        Posté par . Évalué à 1 (+1/-0). Dernière modification le 29/11/18 à 10:30.

        C'est un bébé projet très intéressant!
        A mon avis il manque tout l'arsenal de libre office, formes, couleurs undo/redo selection alignement monter/descendre images rotation blablabla…
        A l'heure ou j'écris des gens s'éclatent bien sur le lien j'ai commencé à (100) j'en suis à (700) :D

        • [^] # Re: Idée d'amélioration

          Posté par . Évalué à 5 (+4/-0).

          il manque tout l'arsenal de libre office, formes, couleurs undo/redo selection alignement monter/descendre images rotation blablabla

          Houlà non justement. Il manque quelques trucs oui, mais il faut que ça reste un outil simple, pour de la prise de note, pas une usine comme Libreoffice avec plus de boutons qu'un cockpit d'avion !

  • # Test de Charge

    Posté par (page perso) . Évalué à 4 (+2/-0).

    … réussi avec la linuxfrisation de la page publique, vu son activité actuelle.

    ⚓ À g'Auch TOUTE! http://afdgauch.online.fr

    • [^] # Re: Test de Charge

      Posté par (page perso) . Évalué à 2 (+1/-0).

      J'ai aussi vu ce projet sur HackerNews, je pense que le test de charge est validé

      Un LUG en Lorraine : https://enunclic-cappel.fr

  • # Super chouette outil qui tombe bien

    Posté par (page perso) . Évalué à 5 (+4/-0).

    J'ai un client qui m'a demandé de lui trouver un outil de ce genre, c'est sa façon de fonctionner. J'espère qu'on va trouver rapidement des gens pour héberger ce tableau et le proposer à leurs clients, amis, que sais-je.

    Bémol : on ne peut pas enregistrer le contenu du tableau, je trouve que ce serait vraiment bien.

    OS préféré Mageia 6 , CMS préféré SPIP suite bureautique préférée LibreOffice, logiciel de dessin préféré Inkscape.

  • # Faire un GéGé vectoriel ?

    Posté par (page perso) . Évalué à 5 (+2/-0). Dernière modification le 28/11/18 à 21:43.

    À quel point pourrait-on utiliser cela pour obtenir « un équivalent de GéGé, Geektionnerd Generator (basé sur du png) mais qui serait basé sur du vectoriel », évoqué lors d'une rétrospective de la seconde quinzaine de mars 2018 ?

  • # anarchy in the wbo

    Posté par . Évalué à 1 (+0/-0).

    la gomme permet de supprimer l'élément sélectionné par un clic
    une évolution possible serait que l'outil gomme puisse supprimer l'ensemble des éléments sélectionnés dans le rectangle défini par la sélection de la souris ?

    • [^] # Re: anarchy in the wbo

      Posté par . Évalué à 1 (+0/-0).

      J'y ai pensé, mais j'ai peur que ça tue toute la créativité du tableau public. En fait, je trouve que les gens suppriment déjà trop de choses. Je pense que des trolls se serviraient de cet outil pour supprimer en permanence la totalité du tableau.

      • [^] # Re: anarchy in the wbo

        Posté par (page perso) . Évalué à 3 (+1/-0).

        Je pense que des trolls se serviraient de cet outil pour supprimer en permanence la totalité du tableau.

        moui, bah au début tu ne regardes que la zone sur laquelle tu arrives. Autant limiter à cette zone, ça limitera les dégâts.
        Ensuite, tu descends et tu vois des super dessins avec des gens doués : je doute que cela soit effacé ;-)

        Merci de ce moment qui m'a rappelé les destructions massives de minetest sur le spot par défaut là où d'autres construisent un Louxor (ou équivalent, plus loin…)

        Reste à ajouter un chat^W^Wune tribune et cela sera une révolution pour /board/ (le vrai site derrière LinuxFr.org :D).

        Ce serait pas mal d'avoir du zoom-in/out pour avoir la vue d'ensemble (ça devindra fractal à un moment…).

        • [^] # Re: anarchy in the wbo

          Posté par . Évalué à 4 (+2/-0). Dernière modification le 29/11/18 à 05:40.

          J'approuve le zoom out
          Perso après avoir rafraichi je n'ai plus retrouvé ce que je venais de faire en plein milieu de la surface déjà bien étendue et les gens avec des écrans très grands n'ont pas nécessairement la même échelle de "travail".

          Ensuite, tu descends et tu vois des super dessins avec des gens doués : je doute que cela soit effacé ;-)

          Malheureusement j'ai vu passer un mec qui abusait de la gomme même en dehors de la zone "de combat"
          D'autres ont réussi à scripter, mettant des images ou des bandes assez compliquées à gommer.

          • [^] # Re: anarchy in the wbo

            Posté par . Évalué à 1 (+0/-0).

            Oui, c'est vrai qu'une fonction de zoom serait bien pratique! Mais en attendant, on peut se servir du zoom du navigateur, avec Ctrl + molette.

      • [^] # Re: anarchy in the wbo

        Posté par . Évalué à 3 (+2/-0).

        C'est marrant, j'avais écrit un projet un peu similaire (mais non vectoriel): il y a quelques années. On en avait parlé ici.

        J'ai eu le même dilemme avec la gomme: une gomme trop fine n'est pas pratique à utiliser et une gomme trop grosse est un outil parfait pour troller.

  • # CryptPad

    Posté par . Évalué à 1 (+0/-0).

    Avez vous pensez vous rapprocher de l'équipe de https://cryptpad.fr ?
    Ils ont un tableau blanc, mais qui tient beaucoup plus du gadget, et en png.

  • # Coccinela et Inkscape

    Posté par . Évalué à 4 (+3/-0).

    Il y a eu une tentative de tableau blanc partagé par réseau, qui avait si je me rappelle mobilisé un GSOC pour inkscape, ça a du marché pendant quelques jours sur des bétas, puis abandonné, compliqué à gérer avec les grosses évolutions d'inkscape en plein développement de ses bases à l'époque. maintenant que c'est relativement stable et que la base est très bonne, ça serait peut être une idée de s'y repencher ? Il y a une espèce de mini-clone en web aussi, pourrait être mixé avec ça ?

    Il existait aussi l'application Coccinella en tableau blanc partagé par le réseau il y a bien 15 ans. http://coccinella.im

    • [^] # Re: Coccinela et Inkscape

      Posté par (page perso) . Évalué à 6 (+4/-0).

      Sauf erreur, les 2 étaient basés sur XMPP, et c'est toujours possible (je crois que Gajim le fait également).

      C'est un des nombreux projets que j'ai dans les cartons, mais pas une grosse priorité à l'heure actuelle.

  • # Mercure

    Posté par . Évalué à 3 (+2/-0).

    C'est le genre d'appli web qui pourrait profiter à fond de Mercure, non ?
    https://linuxfr.org/news/mercure-un-nouveau-protocole-web-pour-mettre-a-jour-les-navigateurs-en-temps-reel-push

  • # Gestion de session

    Posté par . Évalué à 1 (+1/-0).

    Projet très sympathique.

    La version de démo montre qu'il suffit de connaître l'URL pour y accéder. Existe-t-il une gestion sécurisée de session (id/mot de passe, etc.) avec ? Désolé si j'ai loupé l'info en regardant la page du code source.

    • [^] # Re: Gestion de session

      Posté par . Évalué à 5 (+4/-0). Dernière modification le 29/11/18 à 17:10.

      Bonjour! Non, il n'y a pas de mécanisme de sessions. Mais il n'y a pas non plus de liste des tableaux, donc le seul moyen de se connecter à un tableau que vous créez est de connaître son nom. Donc si vous générez un nom avec openssl rand -hex 32 par exemple, vous devriez être tranquille :)

  • # fonctionnalité de déplacement d'entité ? Intégration dans tracim ?

    Posté par (page perso) . Évalué à 9 (+7/-0).

    Bonjour,

    Super projet. J'ai testé vite fait, et je vois une fonctionnalité manquante : l'édition des éléments déjà créés (et en particulier le déplacement). Est-ce prévu ?

    Petites remarques d'ergonomie / utilisabilité :

    • je rejoins les remarques concernant le zoom / dézoom
    • l'outil "main" gagnerait à être séparé des outils de dessin (l'outil main ne créé pas d'entité graphique, contrairement à ligne droite, rectangle par exemple)
    • l'outil gomme gagnerait à être mis à la fin des entités graphiques car il ne créé rien, il retire
    • la taille configurée gagnerait à être affichée d'une manière ou d'une autre (soit une preview en dessous, soit la taille en pixels - si c'est géré en pixels, soit les deux.

    Avec un outil de déplacement, je serais assez tenté de l'intégrer dans tracim en tant qu'application complémentaire : l'outil est simple, compte tenu de sa conception on peut facilement la "proxifier" pour gérer les tableaux blancs et droits d'accès via tracim mais donner accès à l'application directement ensuite (intégration légère, qui a l'avantage de permettre des mises à jour plus faciles). Dans cette optique, est-ce que tu (vous?) seriez ouverts à des MR concernant le design de l'interface utilisateur (ou à l'implémentation d'un mécanisme pour "templater" l'interface) ?

  • # Framasoft

    Posté par . Évalué à 4 (+3/-0).

    Ça me semble une application de base, ça manquait. J'espère que ce service sera proposé par Framasoft bientôt.

    • [^] # Re: Framasoft

      Posté par . Évalué à 2 (+1/-0).

      Je serais très content de pouvoir en héberger une instance chez Framasoft. Est-ce que quelqu'un sait qui il faut contacter pour cela ?

      • [^] # Re: Framasoft

        Posté par (page perso) . Évalué à 1 (+0/-0).

        Tu peux probablement en parler ici:

        https://contact.framasoft.org/

        Un LUG en Lorraine : https://enunclic-cappel.fr

        • [^] # Re: Framasoft

          Posté par (page perso) . Évalué à 4 (+3/-0).

          C'est la bonne adresse pour nous écrire, oui.

          On peut en discuter, mais notre objectif est plutôt d'arrêter d'empiler des couches de logiciels qu'ils faut ensuite maintenir et pour lesquels il faut assurer le support (on atteindra bientôt les 100 msg/jour).

          Bref, deframasoftisez les internets !
          (C'est pas pour rien qu'on a impulsé chatons.org ;-) )

      • [^] # Re: Framasoft un CHATONS plutôt

        Posté par (page perso) . Évalué à 2 (+1/-0).

        Par exemple la mère zaclys (d'accord c'est le CHATONS auquel je suis abonnée). Si c'est facile à mettre en place, ça ne devrait pas poser de problème.

        OS préféré Mageia 6 , CMS préféré SPIP suite bureautique préférée LibreOffice, logiciel de dessin préféré Inkscape.

  • # zoom aussi

    Posté par . Évalué à 3 (+2/-0).

    les touches + et - pour zoomer comme les autres programmes de dessin ce serait super. Eventuellement un grid serait aussi pas mal et un cercle

  • # Concurrents?

    Posté par . Évalué à -2 (+0/-2).

    Bonjour,
    C'est super, mais il y a déjà des concurrents non?
    Trouvé aggie.io et sketchboard.me en quelques secondes.

    • [^] # Re: Concurrents?

      Posté par (page perso) . Évalué à 6 (+4/-0).

      Intéressant, mais sauf erreur de ma part, ni l'un ni l'autre ne sont des logiciels libres.

      • [^] # Re: Concurrents?

        Posté par (page perso) . Évalué à 1 (+0/-0).

        Il y a https://github.com/JohnMcLear/draw (basé sur etherpad)

        • [^] # Re: Concurrents?

          Posté par . Évalué à 2 (+1/-0).

          Effectivement, les deux outils semblent très similaires. Mais le site de démonstration de draw ne semble pas fonctionner…
          Je pense que la "killer feature" de WBO, ce sont les tableaux infinis. J'adore regarder évoluer le joyeux bazar du tableau blanc public.

          • [^] # Re: Concurrents?

            Posté par . Évalué à 3 (+1/-0).

            Effectivement, les deux outils semblent très similaires. Mais le site de démonstration de draw ne semble pas fonctionner…

            Il fonctionne en passant par le site web, l'adresse a changé et ça passe par un service tiers avec un tableau personnel (certainement suite à une expérience similaire de bazar dans une session publique).
            Cet outil par contre est bien plus complexe et me semble davantage orienté traitement de texte que dessin.

            Je pense que la "killer feature" de WBO, ce sont les tableaux infinis.

            C'est sympa oui mais sans règle de repères ou de coordonnées et toujours sans véritable zoom c'est pas pratique. De plus ce n'est pas indispensable pour une fonction de tableau blanc destinée à montrer des petits schémas pour mieux expliquer un concept lors d'une discussion. C'est comme pour le réglage d'opacité que tu as ajouté, c'est bien pour du dessin avancé mais tu sembles t'éloigner de l'idée de départ décrite dans cet article.
            ÀMHA quelque chose de pertinent pour permettre de faire des schémas plus présentables serait d'ajouter une option grille collante façon Inkscape ou un outil de tracé de lignes uniquement verticales et horizontales. La possibilité de faire un système de droit pourrait aussi être pratique, par exemple dans un usage éducatif ou une présentation en direct.

            J'adore regarder évoluer le joyeux bazar du tableau blanc public.

            Avoues, tu veux créer une expérience sociale de MMO anarchiste :D
            J'aime bien aussi jeter un œil de temps en temps mais actuellement Erreur 502.
            Après, entre les gens qui spamment des figures automatisées et ceux qui abusent de la gomme ça donne pas vraiment envie d'y faire quelque chose un minimum constructif donc il ne reste plus qu'un tas de gribouillis avec quelques blagues et discussions (éphémères).

  • # C'est tout simplement génial!

    Posté par . Évalué à 2 (+1/-1).

    Un outil comme ça est parfait pour les écoles. Dans celle de ma fille, des tableaux blancs sont déployés un peu partout dans les classes… mues par des ordinateurs sous Windows — bonjour, «financement de l'enseignement»! De tels outils pourraient être utilisés de manière encore plus efficace qu'avec ceux en place.

  • # Intégration draw.io ou mxgraph

    Posté par . Évalué à 2 (+2/-0).

    Beau travail !
    Un outil de dessin simple, collaboratif et libre manque vraiment.

    Je n'arrive pas à me représenter le travail que représente une intégration à un outil comme draw.io ou l'utilisation d'une biliothèque cliente comme [mxgraph.

    Une telle intégration est-elle réaliste ?
    Quel effort cela représente-t-il par rapport à ce qui a déjà été réalisé ?

    • [^] # Re: Intégration draw.io ou mxgraph

      Posté par . Évalué à 2 (+1/-0).

      Oui, ce serait possible, mais je pense que ce serait effectivement beaucoup de travail.
      Pour l'instant, WBO, c'est 1737 lignes de code pour le client, et 441 (!) pour le serveur. Je suis le seul contributeur pour l'instant. Draw.io est un projet de bien plus grande envergure.

      • [^] # Re: Intégration draw.io ou mxgraph

        Posté par (page perso) . Évalué à 1 (+0/-0).

        De mon point de vue, il faut garder l'outil le plus léger possible, c'est ce qui fait sa force.

        OS préféré Mageia 6 , CMS préféré SPIP suite bureautique préférée LibreOffice, logiciel de dessin préféré Inkscape.

  • # Ça existe déjà ;-)

    Posté par (page perso) . Évalué à 4 (+2/-0). Dernière modification le 05/12/18 à 16:29.

    C'est marrant, j'ai réalisé exactement le même projet avec des potes :-)

    Bon, en fait c'était un peu plus évolué, parce qu'il s'agissait d'une implémentation du jeu "dessiné c'est gagné" : sur chaque client il y avait une zone de saisie permettant de proposer un mot, que le dessinateur de son coté validait ou pas. L'autre différence bien sûr, c'était qu'il n'y avait qu'un seul dessinateur à la fois, règles du jeu obligent.

    Cependant, il y avait des similitudes : ce n'est pas le dessin qui était transmis, mais des ordres de dessin, genre dessiner des lignes, en fonction des actions de la souris, en temps réel donc. Tout ça relayé par le serveur aux multiples clients, puisqu'il pouvait y avoir plusieurs joueurs.

    Bon, ok, il y avait quelques autres différences :

    • c'était codé en C/C++, avec du bon vieux code bas niveau TCP/IP (socket etc), client et serveur.
    • client codé sous X-Windows, avec du beau gros toolkit Motif derrière :-)
    • on faisait tourner ça sur des belles stations X HP, reliées à un système unix central (une machine Bull sous AIX je crois, mes souvenirs commencent à s'effacer :) …)

    Et c'était il y a 23-24 ans, à l'IUT d'Orsay, dans le cadre d'un projet en équipe :-D.

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.