Démonstration

Le tableau ci-dessous, Nature morte au pot blanc, est connu comme une œuvre cubiste ; pouvez-vous vérifier si son auteur Pierre HODÉ a bel et bien peint des angles droits ici et là ? Pour bouger l’outil (l’équerre) on peut, avec la souris, déplacer son origine (près du zéro), ou en agissant ailleurs sur l’équerre, tourner l’outil autour de son origine.

Une trousse d’écolier à l’écran : SchoolKit

Dans une trousse d’écolier, il y a des crayons, des stylos… Mais aussi une règle, un rapporteur, une équerre. Quand on travaille sur un écran, c’est bien de pouvoir poser ces instruments de mesure et de traçage, dans l’image elle-même, et de les bouger à l’aide de la souris.

SchoolKit est implémenté comme une bibliothèque Javascript, sous licence GPL v3+. Vous pouvez donc intégrer un instrument comme un double-décimètre, ou autre outil, par-dessus n’importe quelle partie d’une page web. Comme cette trousse d’écolier est virtuellement dans une page web, l’usage est bien sûr multi-plateforme.

Comment ça marche ?

La démonstration ci-dessus a été bâtie à l’aide de code HTML ordinaire, comme il est possible d’en produire à l’aide d’outils de publication, ou sur des blogs.

L’outil équerre est ajouté à l’endroit opportun, à l’aide de scripts en langage Javascript.

Un premier script, toujours nécessaire, télécharge la bibliothèque SchoolKit, depuis le même serveur que celui qui sert la présente page web. Voici sa source :

    <script src="https://www.freeduc.science/javascript/schoolkit/schoolkit.js">
    </script>

Pour mettre en place l’équerre, on a pris soin de donner un identifiant id=“demo1” à l’élément de la page HTML où celle-ci pourra être manœuvrée, puis on ajoute un deuxième script, dont voici la source :

    <script>
      let p = new GeomPaper("demo1", 900, 740);
      let equ = new GeomToolFromFile(
        p, /* désigne le fond, de type GeomPaper */
        "equerre01", /* identifiant */
        "https://www.freeduc.science/javascript/schoolkit/equerre01.svg", /* fichier SVG */
        new DOMPoint(50,150), /* origine */
        1 /* échelle */
      );
    </script>

Le paquet SchoolKit en version 0-2 propose trois outils pré-dessinés et utilisables : une équerre, un rapporteur, un double-décimètre. Il s’agit de fichiers SVG, créés à l’aide du logiciel Inkscape, où on a identifié pour chacun une zone où on peut déplacer (en translation) l’outil avec sa souris, et une zone où la souris aura pour action faire tourner l’objet autour de son origine.

Voilà, ci-dessous, les trois outils prédéfinis (à une petite échelle), chacun dans sa case :

Installation

Ce logiciel est disponible dans le dépôt Git public salsa.debian.org, sous georgesk/schoolkit .

La page d’accueil du projet fournit plusieurs indication quant à l’installation et à l’utilisation.

Comment contribuer, si vous avez une nouvelle idée

Si vous avez l’habitude, vous pouvez fourcher le projet, tout de suite dans le dépôt Salsa, et travailler dans la fourche que vous avez créée.

Autrement, après téléchargement des sources, vous bricolez et reprenez contact avec l’auteur de Schoolkit si vous souhaitez partager votre amélioration.

Ajout d’une nouvelle forme déplaçable, par exemple un « pistolet de dessinateur »

Un pistolet, ou perroquet de dessinateur, ce n’est ni une arme à feu ni un oiseau : voyez par exemple dans le blog de Kuru sur mangacoaching.com, à quoi cela ressemble en vrai.

La méthode, expliquée sur le site web de Salsa, consiste à éditer une nouvelle forme dans un fichier SVG, par exemple avec le logiciel Inkscape.

L’arbre SVG doit contenir au moins un groupe (élément <g>) avec l’attribut id="layer1". Ce groupe contiendra au moins les trois éléments suivants :

1. un cercle (élément <circle>) avec des attributs cx et cy définissant la position de son centre, plus l’attribut id="centre" qui l’identifie comme centre des rotations ;
2. un élément graphique quelconque, avec l’attribut id="rotation_handle" qui l’identifie comme « poignée pour la rotation » ; cet élément peut très bien occuper toute l’étendue visible de la forme déplaçable.
3. un élément graphique quelconque, avec l’attribut id="translation_handle" qui l’identifie comme « poignée pour la translation » ; pour les formes qui existent déjà dans Schoolkit, cette poignée est un cercle translucide, de même centre que le centre de rotation (très petit et encore plus transparent).

Tous les éléments dans le sous-arbre du groupe id="layer1" se déplaceront alors sous le contrôle des poignées de translation et de rotation.

Autres projets, pour l’avenir ?

L’auteur souhaiterait doucement enrichir la trousse de l’élève avec des « stylos de couleur », capables de laisser à l’écran une trace quand on en bouge la pointe en contact avec un outil de dessin (double décimètres, équerre, etc.)

De même un compas serait fort utile : ce compas serait porteur d’un « stylo_» capable de laisser des traces, il faut pouvoir déplacer sa pointe à la souris, et régler son écartement … en plus de l’action de tracer.