URL: https://linuxfr.org/users/lovasoa/journaux/une-nouvelle-interface-graphique-pour-wbo Title: Une nouvelle interface graphique pour WBO Authors: lovasoa Date: 2019年06月24日T14:29:03+02:00 License: CC By-SA Tags: web, annonce, webapp, tableau_blanc_interactif, wbo, dessin_vectoriel et travail_collaboratif Score: 25 Il y quelques temps, j'ai évoqué ici [WBO](https://wbo.openode.io/), un logiciel libre de dessin collaboratif en ligne ([dépêche](https://linuxfr.org/news/wbo-un-tableau-blanc-interactif)). Le logiciel a bien évolué depuis l'annonce précédente, avec quelques nouvelles fonctionnalités, la plus importante d'entre elles étant le zoom qui facilite la navigation à l'intérieur du tableau. Mais la nouveauté la plus visible est sans doute la nouvelle interface graphique, qui vient d'être déployée, et dont je suis plutôt fier. Voilà une capture d'écran de la nouvelle interface: [![Capture d'écran de WBO](https://user-images.githubusercontent.com/552629/59932227-080a6a80-9447-11e9-8893-571605e4d047.png)](https://wbo.openode.io/boards/anonymous#1243,4920,0.2) Et, à titre de comparaison, voilà l'ancienne interface: ![image](https://user-images.githubusercontent.com/552629/49140163-dd629400-f2f3-11e8-9fde-68e2c2d0aace.png) ## L'histoire ## L'ancienne interface avait un large menu qui couvrait toute la partie gauche de l'écran, et le premier objectif était de récupérer de la place pour le contenu. La première étape a donc été de supprimer tous les termes inutiles dans le menu: - Le titre. Inutile d'écrire "Menu" en haut du menu. On comprend bien que c'est un menu! - Les sections. Plus de séparation entre les outils de dessin et la sélection de paramètres comme la couleur de dessin. - Le nom des outils. Le dernier point est probablement le plus sensible, l'icône des outils de dessin n'étant pas forcément un très bon indicateur de leur fonctionnalité. J'ai donc décidé de faire apparaître le nom de l'outil lorsque son icône est survolée. Les écrans tactiles n'ont pas de notion de "survoler", j'ai donc implémenté une [animation CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) qui agrandit le bouton de l'outil pour afficher son nom lorsqu'il est survolé, puis le rétrécit après quelques instants pour ne pas gêner la visibilité. L'interface est ainsi aussi pratique à utiliser depuis un mobile. N'hésitez pas à venir tester la nouvelle interface sur l'[instance officielle](https://wbo.openode.io/), où à installer le logiciel sur votre propre serveur depuis le [dépôt github](https://github.com/lovasoa/whitebophir/).