Utiliser MathGraph32 en ligne et interagir avec la figure : Notions de base

La façon la plus simple de mettre une figure MathGraph32 en ligne est d’utiliser des balises HTML : voir cet article

Mais les utilisateurs les plus avertis en JavaScript peuvent vouloir utiliser MathGraph32 dans leur propre application en ligne.

Nous allons expliquer dans ce premier article comment appeler le loader de MathGraph32 de façon à pouvoir interagir avec la figure.

Voici ci-dessous le code HTML d’une page lançant une figure MathGraph32 :

Pour pouvoir utiliser MathGraph32 en ligne la présence de la ligne suivante est indispensable :

Le chargement de l’application MathGraph32 se fait grâce à l’appel de la fonction mtgLoad("mtg32div", svgOptions, mtgOptions) qui renvoie une promesse qui, quand elle est résolue, lance la fonction suivante de la variable mtgApp : (mtgApp) => {}.
C’est dans cette fonction que vous devez utiliser l’application mtgApp pour interagir avec la figure.

Suivant la valeur du paramètre isEditable (booléen) l’application mtgApp fournie sera soit un player MathGraph32 (la figure est affichée, on peut interagir avec elle, bouger des points mobiles) soit un éditeur MathGraph32 (la figure est affichée dans une fenêtre contenant les outils du logiciel, on peut modifier la figure).

Examinons les trois paramètres passés à la fonction mtgLoad :

• Le premier paramètre est ici l’id du div qui doit contenir l’application MathGraph32 (vous pouvez aussi passer le div lui-même en paramètre. Le conteneur de l’application MathGraph32 doit être un div vide.
• Le second paramètre est un objet svgOptions qui fournit des informations sur le SVG qui contiendra la figure :
  • idSvg : chaîne de caractères contenant l’id qui sera affecté au svg qui contiendra l’application. Si vous omettez ce paramètre un id sera créé mais il est préférable de l’affecter vous même.
  • width : nombre fournissant la largeur du svg qui contiendra la figure.
  • height : nombre fournissant la hauteur du svg qui contiendra la figure.
• Le troisième paramètre est un objet fournissant des informations sur la figure elle-même et de nombreuses options.
  • fig : chaîne de caractères contenant le code Base64 de la figure à afficher (ou objet dans le cas de l’éditeur, voir en bas de cette page).
  • isEditable : booléen. Ici false ici car on veut afficher la figure (player MathGraph32) mais pas lancer l’application complète qui permet de la modifier (éditeur MathGraph32), true pour lancer l’application complète.

Voici ci-dessous ce que donne ce premier affichage de figure MathGraph32 :

Reprenons le même code que ci-dessus mais cette fois en modifiant la paramètre mtgOptions avec isEditable à true.

Voici ci-dessous ce qu’on obtient (il a fallu ici créer un autre div pour contenir cett application MathGraph32 puisqu’elle est dans la même page que la figure ci-dessus :

Les utilisateurs avertis remarqueront que, pour la deuxième figure, toutes les icônes de la barre d’outils horizontale ne sont pas visibles.

Nous avons la possibilité de rajouter un paramètre supplémentaire à l’objet mtgOptions, paramètre nommé zoomFactor. Il sera utilisé pour réduire la taille des icônes du logiciel s’il est compris entre 0 et 1 et les agrandir s’il est supérieur à 1.

Voici ce que donne alors la figure ci-dessus en remplaçant les lignes définissant le paramètre mtgOptions par les lignes suivantes :

En diminuant nos icônes de 5% (zoomFactor à 0,95) nous avons maintenant toutes nos icônes visibles.

Pour la version éditeur de l’application, la seule icône qui puisse avoir un fonctionnement personnalisable est l’icône d’enregistrement.

Vous pouvez affecter à cette icône une fonction qui sera exécutée quand on cliquera dessus.

Cela se fait via l’objet mtgOptions qui possède deux options à cet effet :

• functionOnSave : votre fonction qui sera appelée lorsqu’on clique sur l’icône d’enregistrement
• avertOnSave : Si ce paramètre est à false, il n’y aura pas de boîte de dialogue d’avertissement quand on cliquera sur l’icône d’enregistrement. Il est à true par défaut.

Voici ci-dessous le code d’une page HTML qui va permettre d’éditer une figure et qui, si on clique sur l’icône d’enregistrement, affichera le code Base64 de la figure au moment où on a cliqué sur ce bouton.

Un comportement analogue a été prévu dans la figure ci-dessus.

Vous remarquerez que si mtgApp est une application MathGraph32 (lecteur ou éditeur), la fonction getBase64Code() renvoie le code Base64 de la figure.

Voici ci-dessous les paramètres disponibles pour l’objet svgOptions passé en deuxième paramètre de la fonction mtgLoad :

Voici ci-dessous les paramètres disponibles pour l’objet mtgOptions passé en troisième paramètre de la fonction mtgLoad :

Compléments pour le paramètre fig dans le cas éditeur :

Dans le cas éditeur, la paramètre fig peut être une string (code Base64 d’une figure valide) ou un objet.

Dans le cas d’un objet, celui-ci est défini par trois propriétés du type string :

• type : chaîne de carcatères
  • simple pour obtenir une figure vide sans longueur unité
  • unity pour obtenir une figure vide avec un segment définissant la longueur unité de la figure
  • orthonormal pour obtenir une figure munie d’un repère orthonormal
  • orthogonal pour obtenir une figure munie d’un repère orthogonal

• unity : unité d’angle de la figure. Si unity est la chaîne rad ce sera le radian sinon ce sera le degré.

• datarep : Objet qui fournit des informations dans le cas où on demande une figure munie d’un repère :
  • datarep.quadhor : booléen, true si on veut que le repère soit quadrillé horizontalement
  • datarep.quadver : booléen, true si on veut que le repère soit quadrillé verticalement
  • datarep.grid : booléen, true si on veut des pointillés aux points de coordonnées entières
  • datarep.grad : booléen, true si on veut des graduations sur les axes du repère
  • datarep.vect : booléen, true si on veut des vecteurs représentés sur les deux axes.

Pour en faire plus, il nous reste maintenant à apprendre comment interagir avec les figures ou lui rajouter des objets par programmation JavaScript.

Pour cela il faut utiliser l’api de MathGraph32 en mettant la propriété addApi du paramètre mtgOptions à true.

Nous allons expliquer cela dans les articles suivants.

Une remarque : si vous ne souhaitez pas utiliser l’api de MathGrap32, ne mettez pas le paramètre addApi à true car cela fait grossir inutilement le code JavaScript de l’application.