jhedu Java tool for Health Education Descriptif et Mode d emploi

Transcription

1 jhedu Java tool for Health Education Descriptif et Mode d emploi

2 Introduction jhedu est un outil permettant l annotation d images dans un environnement distribué, structuré sur le modèle client-serveur. L objectif de cet outil est de permettre à des classes d étudiants dans le domaine de la santé (actuellement, des étudiants en technique de radiologie de la Haute Ecole Cantonale Vaudoise de la Santé, filière TRM) Les étudiants, organisés naturellement en classes, peuvent ainsi visualiser des images de radiologie, et les commenter par des annotations. Un professeur peut examiner le travail des étudiants et le critiquer, ou le noter. Cette fonctionnalité constitue l objectif élémentaire de jhedu et la motivation première de son développement ; un certain nombre de fonctionnalités complémentaires vient compléter l offre de ce logiciel, comme par exemple : Gestion de plusieurs classes, simultanément. Gestion d images de références, utilisées par des professeurs pour leurs enseignements Gestion du cycle de vie des applications, attribution des applications selon les catégories d utilisateurs Téléchargement de nouvelles versions d applications Gestion d applications étrangères (comme par exemple l excellent utilitaire ImageJ, très utilisé dans le cadre de la HECV-santé) Serveur de fichiers centralisé WebDAV permettant la communication et la diffusion des résultats des travaux des étudiants Gestion des droits d utilisateurs, isolation des informations. Pas d installation sur les postes client, hormis la machine virtuelle Java, souvent incluse dans le système d exploitation installé à la base. Pas de configuration particulière sur les postes client : l administration est effectuée entièrement à partir du serveur Fonctions étendues de traçage et de statistiques d utilisation sur le serveur, permettant de garantir le suivi des étudiants, mais aussi d optimiser le service en fonction de l utilisation effective des diverses applications Possibilité de publier le service dans plusieurs écoles (possibilité non implémentée dans la version diffusée actuellement à la HECVsanté, mais inhérente à la structure de jhedu)

3 L'environnement Fig 1. Schéma de l'environnement

4 L'environnement du projet se présente comme la figure 1 ci-dessus. Comme nous pouvons l'observer, le projet «jhedu» fonctionne au travers d'un client riche. Ce dernier offre les différentes connexions sécurisées dont l'application «jhedu» a besoin pour fonctionner. Il procure également un service de mise à jour et d authentification pour celleci. L'environnement est composé de trois serveurs: un serveur de fichiers sous le protocole Webdav, un serveur MySQL avec une base de données ainsi qu'un serveur d'application Tomcat. Ce dernier contient la logique métier de l'application pour le côté serveur. La logique métier permet de traduire les requêtes du client et d'y répondre. Elle sert à faire la liaison avec le serveur de base de données afin de récolter les informations nécessaires aux clients. Le serveur de fichiers permet de stocker les différentes images à annoter. Ces dernières sont entreposées dans le répertoire appartenant à l'auteur de l'image. C'est-à-dire celui qui l'a enregistrée sur le serveur. Ces images sont enregistrées en format JPEG et peuvent donc être lues en dehors de l'application «jhedu». Le serveur contient également les différentes annotations faites sur les images par les différents utilisateurs. Ces annotations sont également stockées dans le répertoire personnel de l'auteur. Elles sont sauvegardées sous le format SVG qui signifie Scalable Vector Graphics. Ceci est une spécification de W3C. Elle permet de représenter des graphiques vectoriels. Les descriptions SVG sont faites dans un format de fichiers basé sur XML. C'est-à-dire sous forme de balises. Le fait d utiliser cette normalisation permet de rendre les annotations lisibles en dehors du programme. Il est important de comprendre que ces dernières ne sont pas inscrites directement sur les images. Elles font partis de fichiers séparés et sont représentées comme des calques transparents que l on viendrait poser par-dessus. Le serveur de bases de données MySQL contient la base de données du projet «jhedu». Cette dernière est constituée des différentes tables permettant de représenter les personnes, les images et les annotations. Elle détient également les relations qui les lient entre elles. Il est ainsi possible de savoir qui est l auteur d une image ou d une annotation. Inversement, à partir d une personne, nous pouvons obtenir la liste de ses images ou annotations. Dans le programme «jhedu», nous travaillons dans un contexte d enseignement. Nous retrouvons donc plusieurs types de personnes. Nous avons des professeurs et des étudiants. Afin de regrouper ceux-ci, la base de données contient une notion de «classe». Ainsi, chacune des classes est déterminée par un professeur et un nombre illimité d élèves. Cela permet de rendre le système plus proche de la réalité et en même temps de pouvoir déterminer des droits à chacun que nous verrons par la suite. Un troisième type de personnes est représenté dans l architecture du projet. Il s agit d un rôle de professeur de référence. Comme son nom l indique, celui-ci représente une référence dans un domaine particulier. Contrairement aux autres professeurs, il ne fait pas partie d une classe et ne gère donc pas d élèves. Par contre, il peut également fournir ses propres images et annotations qui serviront d exemples disponibles pour tous. Comment [MJN1]: On pourrait imaginer d insérer un chéma de la base de données, avec des commentaires pour expliciter les rôles. Ou éventuellement un schéma simplifié permettant d expliciter ces différents rôles

5 Schéma explicatif des droits des différents rôles IMAGE P CALQUE P IMAGE E1 CALQUE E1 IMAGE E2 CALQUE E2 IMAGE PF CALQUE PF PROFESSEUR ELEVE 1 ELEVE 2 PROFESSEUR REFERENCE Visualiser Supprimer Ajouter Modifier nom/chemin Modifier visibilité

6 Connexion La connexion à l application se fait via le client riche qui fournit un système d authentification. Une fenêtre s ouvre permettant à l utilisateur d entrer son login et son mot de passe. Une fois l utilisateur authentifié, il est possible de démarrer l application «jhedu». Si elle n est pas encore disponible sur le poste, le bouton «update» du client riche permet de télécharger cette dernière comme dans la figure 2. Fig 2. Téléchargement de jhedu Explorateur d images Lors de l ouverture de «jhedu», l utilisateur a accès à l explorateur d images (voir figure 3). Ce dernier représente les différentes images «visibles» de tous les utilisateurs d une classe selon un système hiérarchique. En effet, il est possible d enregistrer des images mais de les rendre «invisibles» aux autres utilisateurs. Ce changement d état est réservé uniquement à l auteur de l image en question. A la racine du répertoire «Images», nous trouvons un dossier désignant la classe de l utilisateur. Aucune autre classe d élèves n est disponible. En effet, selon la philosophie de l application, les images d une personne donnée ne sont disponibles que pour elle-même et celles de la même classe. Le répertoire «Autre» est destiné aux professeurs de référence. Toutes les personnes ont accès à ces images. Dans chacune des classes se trouvent les différents élèves et le professeur. Les images sont désignées par un nom, une date et une heure d enregistrement. Par défaut, l arborescence du dossier personnel de la personne connectée est automatiquement entièrement déployée. Depuis cette fenêtre, l utilisateur peut entreprendre les différentes actions mentionnées ci-dessous.

7 Fig 3. Explorateur des images Ajout des images Les différentes images sont à ajouter grâce au bouton «Ajouter Images». Une nouvelle fenêtre s ouvre permettant de naviguer sur le disque dur de l ordinateur (voir figure 4). Il est possible de voir uniquement les répertoires ainsi que les images de format JPEG. Lorsqu une image est sélectionnée, nous pouvons voir dans la partie de droite une représentation miniature de cette dernière. Ainsi, il est plus facile de repérer les bonnes images à enregistrer. Il est également possible d en sélectionner plusieurs à la fois afin de simplifier l ajout. Une fois le choix effectué, il suffit d appuyer sur le bouton «Ajouter» afin de les envoyer au serveur de fichiers. Une barre de progression apparaît permettant de suivre le transfert des différentes images au serveur. Les images se nomment par défaut de la même manière que sur le disque et sont placées à la racine du répertoire de l utilisateur. Bien entendu, ces informations peuvent être modifiées par la suite comme indiqué ci-dessous

8 Fig 4. Sélection des images pour l'ajout Création de dossier Afin d améliorer la lecture et la classification des différentes images, il est possible à l utilisateur de créer des répertoires de manière hiérarchique, par exemple le répertoire «cheville» de la figure 3. Pour cela, il suffit d utiliser le bouton «Nouveau dossier». Ce bouton n est actif que si un répertoire est préalablement sélectionné. Bien entendu, l utilisateur n a le droit de créer des répertoires que dans son propre dossier, à l exception du professeur qui peut en ajouter dans ceux de ses élèves. Le click sur le bouton a pour effet d ouvrir une fenêtre simple permettant d ajouter un nom de répertoire. Une fois l action validée par le bouton «Ajouter», le nouveau dossier est alors disponible. Cette arborescence est stockée pour chacune des images dans la base de données. Elle est donc en quelque sorte «virtuelle». De ce fait, si un dossier ou sous dossier ne contient pas d image, il ne sera pas sauvegardé à la fermeture de l explorateur. Il est impossible de créer deux sous-répertoires avec le même nom dans un répertoire donné. Suppression Il est possible de sélectionner n importe quel élément de son répertoire personnel afin de le supprimer. Comme dans le cas précédent, un professeur peut également effectuer cette opération sur les éléments de ses élèves. Cela fonctionne aussi bien avec une image qu un répertoire en contenant. Pour effectuer une suppression, il faut utiliser le bouton «Supprimer». Lors d une suppression, un message de confirmation est affiché à l utilisateur afin qu il valide son choix. Ce message varie en fonction du ou des éléments supprimés. En effet, lorsqu une ou plusieurs images sont concernées par la suppression, l utilisateur est mis en garde que le fait d effectuer cette action entraînera l effacement définitif de ces dernières ainsi que de tous les calques associés.

9 Modification Cette action, comme la création et la suppression, est réservée à l auteur ou au professeur de la classe où se trouve l élément. La modification permet de changer le nom d une image ou d un répertoire. Elle est disponible via le bouton «Modifier» de l explorateur. Pour que le bouton soit activé, il faut préalablement sélectionner un élément valide, c'està-dire dont le nom peut être transformé. Il n est, par exemple, pas permis de changer le nom de la classe ou d un répertoire personnel. Une fenêtre s ouvre permettant d effectuer la conversion du nom. Selon le même principe que la création, il est impossible d avoir deux sous-répertoires avec le même nom dans un répertoire donné. Un message prévient l utilisateur en cas de conflit. Dans cette même fenêtre, nous pouvons changer l état de visibilité d une image à l aide d une case à cocher, mais cette manipulation n est activée que pour l auteur de l image. Déplacement Comme pour un explorateur de fichiers, il est possible d utiliser la fonction glisser-déposer. Comme pour les autres actions, le professeur peut l effectuer dans tous les répertoires de la classe alors que l élève ne peut le faire que dans le sien. Il est possible de déplacer autant un répertoire contenant des images qu une image seule. Par contre, il n est pas possible de déplacer une image d une personne dans le répertoire d une autre personne. En effet, les images appartiennent uniquement à l auteur de celles-ci. Sélection Le bouton «Sélectionner» n est activé que lorsqu une image est choisie. Il permet de quitter l explorateur afin d ouvrir le programme d annotation. Toutes les images visibles dans l explorateur peuvent être ouvertes, c'est-à-dire celles du professeur et des élèves de la classe ainsi que celles des professeurs de référence. Le programme s ouvre automatiquement en plein écran afin de garantir une bonne lisibilité de l image.

10 Annotation L'image sélectionnée auparavant dans le tableau est affichée en image de fond du programme (voir figure 12). Par défaut, sa taille est adaptée de telle sorte à pouvoir être observable dans son intégralité. Bien évidemment, la dimension peut être changée si besoin, comme nous le verrons après. Etant donné que les images des annotations sont grandes et qu'elles dépassent largement la taille de l'application, elles sont affichées dans un panneau avec des scrolls. Ainsi, il est possible de faire défiler l'image en long et en large. Sur la partie droite de l'application se situent les différents calques qui existent déjà pour cette image et dont la lisibilité est accordée à l utilisateur. En effet, un élève ne peut observer que ses propres annotations et celles de son professeur. Ce dernier, quant à lui, peut visionner celles de tous ses élèves ainsi que les siennes. Par contre, tout le monde a accès à celles des professeurs de référence. Chacun des calques est accompagné du nom et prénom de l auteur ainsi que de l'heure et de la date de création. Ils sont représentés avec une case à cocher qui donne à l'utilisateur le choix d'afficher ou non le calque par-dessus l image. La liste contient également une case à cocher qui permet de (dé)-sélectionner tous les calques d'un seul coup. Cette dernière se situe à la fin de la liste. Si aucun calque n'existe, un message est affiché pour informer l'utilisateur. Etant donné que le nombre de calques ne peut pas être déterminé à l'avance et que la taille de la fenêtre est fixe, les différents calques sont également affichés à l'aide d'un scroll vertical. Ainsi, il est possible de parcourir toute la liste. Les calques sont automatiquement affichés dans l'ordre chronologique de leur création, les plus anciens étant en début de liste. Il est possible, à partir de ce panneau latéral, de supprimer un calque. Ceci est possible à l aide de la petite croix rouge se situant à côté de la case à cocher. S il n existe aucune croix rouge, cela signifie que la personne n a pas le droit d effectuer cette opération, celle-ci n étant réservée qu à l auteur du calque. Une autre manipulation est accessible uniquement pour les auteurs. C est la permission de rendre «visible» ou «invisible» une annotation. Celle-ci s effectue à l aide de l icône en forme d œil. Si ce dernier est barré, cela signifie que le calque est invisible et inversement s il est en clair. Cette option est avant tout utile aux professeurs qui ne souhaitent divulguer le corrigé qu à la fin d un exercice. Pour ces deux dernières actions, une demande de confirmation est affichée préalablement. Sur la partie du haut se situe la barre d'outils contenant tous les boutons et menus déroulants de l'application. La barre d'outils est affichée sur deux étages. Ainsi, tous les outils sont affichés, même si la résolution de l'écran est basse. Sur l'étage du bas en partant de la gauche, nous avons le menu déroulant de la couleur (voir figure 5). Il permet à l'utilisateur de choisir la couleur qu'il souhaite pour les différents traits de son annotation. Bien entendu, il est possible à tout moment de changer cette couleur afin que les différents traits composant l'annotation soient de couleur différente.

11 Fig 5. Choix des couleurs Le deuxième menu déroulant permet de définir la taille de trait du dessin. Comme pour la couleur, l'utilisateur a le choix de définir la taille de trait qu'il souhaite et de la changer à tout moment pour chacun des traits. Le menu déroulant propose 3 tailles de traits différentes. Fig 6. Choix de la taille du trait Le troisième menu déroulant offre à l'utilisateur la possibilité de faire un zoom positif ou négatif sur l'image ainsi que sur les calques (voir figure 7). En effet, l'image est toujours affichée par défaut en entier sur l écran. Or, il est parfois souhaitable d'avoir une vue d'ensemble de l'image ainsi que de ses calques ou au contraire un agrandissement pour les petites images. Ce menu donne donc le choix de modifier la taille d affichage de l'image en sélectionnant par palier de 10% sa taille pour des paliers allant de 10% à 100%. Pour les images de petites tailles, il est possible de les agrandir entre 100% et 500% par échelon de 50%. Il est bien sûr possible d'annoter à une taille autre que la taille d origine. Malgré ceci, les calques seront enregistrés à taille réelle. Si l'image est plus petite que le panneau de dessin, un fond blanc sera dessiné afin qu'elle occupe toute la taille du panneau. Fig 7. Choix de la taille d'affichage Sur la partie du haut de la barre d'outils se trouvent tous les boutons de dessin. Les trois premiers servent à interagir avec les traits dessinés (voir figure 8). En effet, il se peut qu'un trait dessiné ne soit pas comme souhaité. Il est alors possible d'effacer un à un chacun des traits effectués. Dans la même optique, il est possible de restaurer un trait

12 effacé par mégarde. Ce sont les effets des deux premiers boutons. Si l'utilisateur décide par la suite de dessiner manuellement un nouveau trait, tous ceux effacés avant cette action seront définitivement perdus. Il est alors impossible de restaurer des traits après réécriture. Le dernier des 3 boutons permet d'effacer complètement le dessin. Il est alors impossible de restaurer les traits. Il faut remarquer que l'on ne peut effacer que l'annotation en cours. En effet, une personne ne peut supprimer un autre calque que par le menu de droite et ceci seulement s il en a l autorisation. Les différents boutons ne s'activent que si l'action demandée est possible. En effet, il est impossible d'effacer ou restaurer un ou plusieurs traits s'ils n'existent pas en réel. Il en va de même pour tout effacer. Chacun des boutons est représenté par une image qui permet de bien comprendre les utilités de ces derniers. Fig 8. Modifier le dessin Le panel de boutons du milieu donne accès aux différentes formes géométriques disponibles pour le dessin (voir figure 9). Ces dernières s effectuent à l aide du bouton gauche de la souris. Il suffit pour cela de cliquer à un endroit du dessin et de maintenir le bouton enfoncé. Ensuite, il faut déplacer la souris afin d observer et modifier la nouvelle forme. Lorsque le bouton de la souris est relâché, la forme est enregistrée. Fig 9. Boutons de dessin En allant de gauche à droite, le premier bouton permet d effectuer des traits à main levée. Il laisse à l utilisateur la possibilité de mettre en évidence ou d écrire du texte comme sur une feuille de papier. Le second sert à tirer une ligne droite reliant deux points du dessin. Le bouton suivant dessine un carré ou un rectangle selon le besoin. En effet, lorsque le bouton droit de la souris est également maintenu appuyé lors du déplacement, la forme obtenue est un carré. Le quatrième bouton fonctionne de la même manière que le précédent, c'est-à-dire qu il crée une ellipse ou un rond si le bouton droit est pressé. Le dernier confère le droit d écrire du texte. Pour cela, il suffit de cliquer à un endroit de l image afin de déterminer où le texte sera inscrit. Une nouvelle fenêtre s ouvre permettant de saisir le texte et de modifier la taille de la police à partir d un menu déroulant. Le bouton isolé et indiqué par un point d interrogation permet de lancer la fenêtre d information sur le programme. L icône à droite de ce dernier bouton indique à l utilisateur quelle forme est activée présentement. Les deux prochains boutons superposés et présents sur la figure ci-dessous servent à faire une sorte de sauvegarde de ce qui est présent à l écran.

13 Fig 9. Copie et exportation Il s agit donc de l'image de fond mais également toutes les annotations affichées à ce moment-là qu elles soient enregistrées ou non. Ainsi, il est possible d'imprimer ce qui nous intéresse ou de l'incorporer à un document externe. Celui du dessus copie dans le pressepapier du système le résultat de la sélection. Pour accomplir cette copie, il est nécessaire de cliquer en premier sur ce bouton puis, ensuite de déterminer la zone à copier de la même manière que le dessin d un rectangle. Un rectangle transparent rouge définit la zone qui va être reproduite. Il est alors possible de faire un coller de ce dernier n'importe où. Le second bouton exporte cette fois-ci l intégralité de l affichage sous en format JPEG. Une boîte de dialogue permet de définir le nom et l emplacement du fichier de sortie. Il est important de noter que dans les deux cas, l'exportation se fait en fonction de la taille d'affichage. Cela signifie que le pourcentage de zoom choisi est respecté. Le dernier composant tout à droite de la barre d'outils est un bouton ; il permet de lancer et d'enregistrer une annotation. Son label change en fonction de l'action qu'il effectue. Au départ de l'application, tous les composants de la barre d'outils, excepté ce bouton, le bouton d aide, les boutons d exportation et le menu déroulant du zoom, sont désactivés. Il en est de même pour le panel contenant l'image. Il est alors impossible de dessiner un trait. Par contre, il est tout à fait possible d'afficher les calques déjà existants en sélectionnant dans le panneau de droite. Il faut expressément appuyer sur ce bouton afin de démarrer un calque et d'activer les différents composants. Au départ, le bouton se présente comme dans la figure suivante: Comment [MJN2]: Ce qui ne correspond pas à la logique habiuelle, qui consiste en une sélection AVANT la copie dans le presse-papiers. On peut même se demander si il ne serait pas préférable de copier toute l image, et de laisser le soin à l utilisateur de l éditer ensuite à l aide d un utiolitaire gratuit comme XnView ou de son programme d édition favori comme Photoshop Comment [CGI3]: Voir avec M. Lecoultre si c est utile Fig 10. Démarrer une annotation Lorsque l'annotation a débuté, son label change pour devenir comme ci-dessous : Fig 11. Enregistrement de l'annotation Comme les autres boutons, il ne s'active que si l'action est possible. En effet, tant qu'aucun trait de l'annotation n'est dessiné sur l'image, le bouton reste désactivé. Lors du clic sur le bouton, le calque est alors enregistré sur le serveur de fichiers au format SVG et est inscrit comme nouveau calque de l'image en cours dans la base de données. Un message prévient alors l'utilisateur de l'enregistrement. Le nouveau calque est alors visible dans la partie de droite de l'application et peut être visualisé. En cas de problème d'enregistrement dans la base de données, le calque n'est pas enregistré sur le serveur de fichiers et un message d'erreur est affiché à l'utilisateur. Il est alors permis à l'utilisateur de réessayer l'enregistrement ultérieurement.

14 Fig 12. jhedu