TwinXeon by Renaudet
/Accueil/Tous les articles
Connaissez-vous le DrawingPad ?
Le DrawingPad, c'est l'un des outils standards de mon VirtualDesktop. Petit utilitaire de dessin vectoriel en ligne, il peut servir, comme nous allons le voir, à créer des dessins en ligne et réserve quelques fonctions tout à fait intéressantes pour nous y aider.

Une surprise du chef aux courageux qui liront le tutoriel jusqu'au bout !

Création de notre premier dessin vectoriel


Nous allons, pour commencer ce tutoriel, utiliser le mode bac-à-sable du VirtualDesktop. Pour ce faire, lancez une session publique sur le VirtualDesktop en cliquant sur ce lien. Cliquez ensuite sur Accès publique (Public access) :




Le bureau virtuel s'ouvre alors. A l'aide du menu principal, lancez un DrawingPad :



Une instance du DrawingPad s'ouvre alors. Toute ressemblance avec un outil de dessin bitmap existant ou ayant existé est purement intentionnelle et a demandé même un certain travail .



Premiers pas avec le DrawingPad

Le DrawingPad est un outil assez simpliste conçu à l'origine pour permettre le dessin à main levée. C'est d'ailleurs pour cela que l'outil de dessin par défaut est le crayon. Allez-y, essayez de dessiner avec la souris ou le doigt (le DrawingPad marchotte sur les écran tactiles) :



La palette d'outils est relativement simple : choix des couleurs (la couleur courante est représentée par le grand carré situé à droite de la palette), épaisseur du trait pour les opération de dessin au trait, outils de dessin et indications des coordonnées de la souris ou des données géométriques en fonction de l'outil sélectionné :



Le menu d'édition propose également les actions suivantes : undo / redo, cut / copy / paste, Deselect All, Clear All. Certaines de ces actions ne sont effectives que sur une sélections de primitives graphiques, comme nous allons le voir.


Les outils de dessin

Il existe 11 outils de dessins pour la version 1.2.0 du DrawingPad. Ces outils utilisent la couleur de tracé courante, et pour les outils de dessin au trait, l'épaisseur de tracé courante :
  • Outil dessin à main levée

  • Outil forme pleine à main levée

  • Outil ligne droite

  • Outil polygone fermé

  • Outil polygone fermé plein

  • Outil rectangle

  • Outil rectangle plein

  • Outil cercle

  • Outil cercle plein

  • Outil ellipse

  • Outil ellipse pleine

Notons que certains outils sont sensibles à l'utilisation de la touche Shift. C'est le cas par exemple de l'outil Ligne droite. Si vous enfoncez la touche Shift lorsque vous dessinez une ligne droite, la ligne sera soit horizontale, soit verticale en fonction du rapport de distance entre les extrémités.

Undo / Redo illimité

Une erreur dans le choix d'une couleur, d'une épaisseur de trait voire même d'outil ? Pas de panique ! Le DrawingPad offre la possibilité de supprimer les actions sur la pile graphique à concurrence de la dernière action non "undoable". Vous avez cliqué une fois de trop sur Undo ? Pas de panique là non plus : le Redo est également illimité, à concurrence de ce qui a été supprimé (par utilisation de la fonction Undo).

Les actions sur les sélections

Parce qu'il est difficile de faire bien du premier coup, le DrawingPad offre également un outil de sélection et un outil de déplacement de sélection. De plus, des actions spécifiques du menu d'édition s'appliquent à ces sélections.

Sélectionner une entité graphique

Cliquez sur l'outil sélection puis sur une arrête de la primitive que vous souhaitez sélectionner. Le DrawingPad la recherche par sa distance minimum au point cliqué. En cas de proximité plus forte d'une autre entité, c'est celle-là qui peut donc se retrouver sélectionnée. L'entité sélectionnée apparaît encadrée d'un rectangle gris clair :



Sélectionner deux fois la même entité la dé-sélectionne.

Sélection de plusieurs entités

Pour sélectionner plusieurs entités, appuyez sur la touche Shift et maintenez-la enfoncée tout en sélectionnant les entités désirées :


Déplacer une entité ou un groupe d'entité

Lorsqu'une entité est sélectionnée ou qu'un groupe d'entité sont sélectionnées, cliquez sur l'outil déplacement (en forme de main) et déplacez l'entité ou le groupe d'entité en cliquant / glissant dans la zone de travail :

Note : l'outil déplacement peut également être utilisé sur l'ensemble de la zone de travail, lorsque aucune entité n'est sélectionnée. Dans ce cas, c'est l'ensemble des entités du dessin qui est déplacé. Ceci est très pratique pour réaliser des dessins de grande taille, puisque la zone de travail du DrawingPad est limitée (1024x768 pixels).

Déplacement précis

Pour des déplacement précis, vous pouvez utiliser les flèches du clavier. Le déplacement s'effectue alors par incrément de 1 pixel dans la direction de la flèche du clavier utilisée.

Opérations de copier / coller

Les opérations de copier / coller s'effectuent sur des sélections. Le principe est simple et connu et n'a pas besoin d'être explicité ici.
Notez que l'utilisation de la fonction couper recopie la ou les entités sélectionnées dans le presse-papier local du DrawingPad.
Lors de l'utilisation de la fonction coller, les entités collées sont automatiquement sélectionnées et l'outil courant est l'outil déplacer. Ceci permet de positionner un même motif plusieurs fois par exemple.


Sauvegarde et import

Une fois votre oeuvre terminée, vous pouvez l'enregistrer sur le FileSystem virtuel, pour la modifier plus tard à votre convenance par exemple.
Vous pouvez également ouvrir un dessin existant (fichier d'extension *.dp) et l'enregistrer sous un autre nom, ce qui permet de commencer par exemple une nouvelle partie du dessin sans risquer de dénaturer définitivement le dessin de base.
Enfin, vous pouvez vous créer des bibliothèques de dessins réutilisables, grâce à la fonction import qui permet comme son nom l'indique d'importer un dessin existant dans le dessin courant. Les entités nouvellement importées sont toutes pré-sélectionnées pour permettre leur déplacement en un bloc.

Pour aller plus loin

L'utilisation du bac-à-sable, c'est bien gentil, mais n'importe qui voit et peut modifier votre dessin.

Pour être certain de conserver vos créations, et pour pouvoir utiliser la fonction d'édition (une surprise que je vous réserve), il va falloir vous créer un compte sur le VirtualDesktop.

Ce n'est pas compliqué du tout, et c'est entièrement anonyme et gratuit (mais l'administrateur veille...).

Quittez la session courante du VirtualDesktop si vous êtes dans le bac-à-sable (en utilisant le menu Start / Exit) et ouvrez une session nommée en inscrivant votre pseudo dans la case prévue à cet effet (la mention your pseudo disparaît dès que vous cliquez dans le champs d'édition). A l'aide du clavier virtuel, composez un code secret qui vous est propre. Le pseudo doit avoir au minimum 4 caractères, et le code secret 4 chiffres. Si un message d'erreur invalid secret code apparaît, c'est très certainement parce que ce pseudo a déjà été utilisé. Ré-essayez en utilisant un pseudo différent, ou en ajoutant un chiffre après votre pseudo.

Cliquez maintenant sur OK. Une nouvelle session du VirtualDesktop s'ouvre, mais maintenant sur un espace privé que vous seul pouvez modifier. Vérifiez en cliquant sur le menu principal que votre pseudo apparaît bien en haut du menu :



Notez que dans cet espace privé virtuel, vous avez toujours accès à la zone publique. Ouvrez le FileManager et cliquez sur public. Vous retrouvez le FileSystem virtuel du bac-à-sable !



Vous pouvez donc importer vos création de ce début de tutoriel, ou les enregistrer sous un nouveau nom dans votre espace privé.

La fonction d'édition

C'est la surprise du chef pour ceux qui auront lu le tutoriel jusqu'au bout !

Pour cela, respectez une règle simple : pas d'espace et pas d'accents ou de caractères non alphanumériques dans les noms de fichier ou de répertoire. Ceci étant dit, faite l'essai suivant :

Je me créé un répertoire racine pour mes oeuvres. Ce n'est pas nécessaire, mais c'est une bonne pratique. J'ai choisi d'appeler le mien htdocs. Je créé un dessin à l'aide de mon outil préféré, je veux bien évidemment parler du DrawingPad. J'enregistre mon dessin dans le répertoire htdocs. Son chemin virtuel de mon point de vue est donc :

/htdocs/monDessin.dp

En fait, le véritable chemin virtuel de mon dessin serait plutôt : /<mon pseudo>/htdocs/monDessin.dp

Et c'est là que la fonction d'édition automatique de TwinXeon prend tout son sens...
Dans un nouvel onglet de votre navigateur, tapez l'adresse :

http://twinxeon.no-ip.org/moebius/virtualDesktop/browse/<votre pseudo>/<path>/<nom du dessin>.dp

Et là ? miracle ! Vous recevez le flux brut du contenu de votre dessin ! (essayez en cliquant sur la pseudo-url ci-dessus, et vous verrez)

J'entends d'ici les grincheux me dire : bof, à quoi ça sert, et pis en plus c'est propriétaire comme format, et pourquoi c'est pas du SVG, et puis ci, et puis ça...

D'abord, tous les navigateurs ne sont pas nativement compatibles avec SVG. Ensuite, l'article n'est pas fini. Et pour finir, je vous réserve une petite surprise...

Le plugin de lecture JavaScript

La voilà ma surprise !

Dans cet article, j'explique avoir créé un plugin me permettant d'inclure, via un composant JavaScript très léger, mes dessins dans les articles, documents et autre blogs de TwinXeon.

Eh bien, ce plugin, vous pouvez vous-aussi en profiter de la manière suivante :

Commencez par envoyer un mail à l'administrateur pour qu'il vous ajoute HTML Studio à votre espace de travail privé.
Ensuite, à l'aide du Virtual Notepad, créez un document richtext dans votre répertoire d'édition. Appelez-le par exemple MonDessin.richtext.

Ceci étant fait, ajoutez un commentaire, des émoticones, des images ou ce que vous voudrez, et enfin, cliquez sur l'outil Insérer un dessin.

Dans la boîte de dialogue qui s'ouvre, saisissez l'url relative de votre dessin, c'est à dire :

/<path>/<nomDessin>.dp
(Le Notepad ajoute automatiquement votre pseudo)

Un rectangle noir apparaît dans l'éditeur :



Enregistrez votre document et quittez le Notepad.

Ouvrez ensuite HTML Sudio et naviguez jusqu'à votre répertoire d'édition. Là, cliquez sur le document richtext précédemment créé. Le bouton convert est activé, cliquez dessus. Un document HTML simpliste (pour le moment) est créé dans le même répertoire, avec le même nom, mais l'extension .html



Rouvrez le FileManager pour vérifier que la conversion s'est bien passée. Naviguez jusqu'à votre répertoire d'édition, puis, en utilisant le menu popup, lancez l'action Edit sur le fichier HTML créé par HTML Studio :



Votre navigateur vous demandera peut-être d'accepter l'ouverture d'une fenêtre popup. Faites-le. Et là vous me dites...

Tada !



Eh oui, c'est pas beau ça ? Votre dessin est maintenant accessible sur le Web en mode graphique, sur n'importe quel navigateur récent, sans plugin SVG. En particulier, il est accessible sur les tablettes et autres smatphones disposant d'un navigateur compatible HTML 5. Merci qui ?

Vous pouvez essayez en suivant ce lien.

Voilà, c'est tout pour aujourd'hui. Merci d'avoir suivi ce tutoriel jusqu'au bout, et amusez-vous bien avec le DrawingPad !
Ajoutez votre commentaire :
  Votre pseudo :
  Votre adresse mail (obligatoire):
  Votre commentaire :
 
Site optimisé pour un affichage en 800x600 sous Firefox 8.x - ©Copyright 2011-2012 by Nicolas Renaudet