Utiliser MathGraph32 en ligne et interagir avec la figure : Exemple 1 d’utilisation de l’API

Avant de lire cet article, vous devez être familier avec le lancement d’une figure MathGraph32 avec son loader. Si vous ne l’êtes pas il est conseillé de consulter cet article.

Nous allons partir de la figure ci-dessous et agir sur cette figure avec le player MathGraph32 en utilisant l’API de MathGraph32.

L’API de MathGraph32 permet d’afficher une figure en ligne (player ou éditeur), de lui rajouter des objets et d’ajouter des écouteurs d’événements sur des objets de la figure.

Nous sommes partis d’une figure avec une longueur unité (celle du segment [UV]) nous avons créé trois points libres, O, M et A, le cercle de centre O et passant par M. En utilisant l’outil (protocole de la figure) nous avons affecté au cercle le tag circOM.

Voici ci-dessous le code Base64 de la figure :

Et voici ci-dessous le code HTML d’une page contenant la figure et le code qui va nous permettre d’agir sur cette page :

Le comportement de cette page est reconstitué ci-dessous (cliquez sur le bouton Créer les tangentes, puis capturez le point A) :

Expliquons brièvement le fonctionnement de cette page qui utilise l’API de MathGraph32 pour ajouter des éléments à la figure initiale.

On commence à ajouter à la figure un affichage de texte (Créer les tangentes) sur un fond jaune et on associe à cet affichage de texte (en fait l’élément svg qui le représente) un écouteur d’événement mouse down qui, quand on clique sur le texte, lance une fonction addTangentes.

Cette fonction addTangentes ajoute d’autres objets MathGraph32 à la figure pour visualiser les tangentes au cercle passant par le point A.

Expliquons en détail le fonctionnement de cet exemple.

Les lignes suivantes définissent l’objet svgOptions qui sera passé en deuxième paramètre à la fonction mtLoad :

idSvg donne l’id qui sera attribué au svg qui contiendra la figure.
width donne la largeur de ce svg
height donne la hauteur de ce svg.

Les lignes suivantes définissent l’objet mtgOptions qui sera passé en troisième paramètre à la fonction mtLoad :

La propriété fig contient le code Base64 de la figure qui sera initialement affichée.
La propriété isEditable à false indique au loader que l’application à fournir est le player MathGraph32 (on n’éditera pas la figure avec le logiciel au complet).
La propriété loadApi est à true, ce qui indique qu’on désire avoir accès à des outils supplémentaires de l’application MathGraph32 permettant de créer de nouveaux objets et d’interagir sur certains objets avec des écouteurs d’événements.

Les lignes suivantes appellent le loader de MathGraph32 :

Une fois la promesse résolue, les 3 lignes suivantes sont exécutées :

La ligne app = mtgApp permet de mettre dans la variable globale app (qui a été définie précédemment par let app) un pointeur sur l’application renvoyée.

On appelle ensuite la fonction addBouton.

Examinons le code de cette fonction addBouton :

On commence par informer l’API de la figure sur laquelle on travaille (indispensable pour le player)
On appelle ensuite la fonction addText de l’api :

• placé aux coordonnées (200 ; 5) du svg (ici coordonnées absolues)
• comme texte Créer les tangentes.
• effaçant ce qu’il recouvre avec sa couleur de fond (transparent est à false)
• avec comme couleur de fond le jaune (backgroundColor : ’yellow’)
• Avec un effet 3D pour la bordure (border : ’3D’)
• Et on affecte à cet objet le tag txt1 ce qui permettra ensuite de lui affecter un écouteur d’événement.

Les lignes suivantes :

affectent à l’objet graphique SVG représentant cet affichage de text (via son tag donné dans elt) un écouteur d’événement sur un click de souris.

La propriété callBack donne la fonction à exécuter quand on cliquera sur cet affichage de texte qui sera ici la fonction addTangentes.

Examinons le code de cette fonction :

La ligne de code app.removeEltListener({ elt: 'txt1', eventName: 'mousedown'}) retire l’écouteur d’événement sur l’affichage de texte. En effet, si cette ligne n’était pas là, un deuxième clic sur le texte provoquerait une erreur (par exemple en récréant le milieu du segment [OA] en lui affectant le même tag, ce qui est interdit et provoque une erreur.

La ligne app.addMidpoint({ a: 'O', b: 'A', name: 'I'}) ajoute à la figure le milieu du segment [OA] auquel on attribue le nom I.

Toutes les créations d’objets via l’API de MathgRaph32 se font en appelant une fonction de l’application (ic addMidPoint) et en lui passant en paramètre un objet dont les propriétés fournissent les caractéristiques de l’objet à créer. Ici :

• La propriété a doit fournir le nom de la première extrémité du segment dont on veut créer le milieu.
• La propriété b doit fournir le nom de la deuxième extrémité du segment dont on veut créer le milieu.
• La propriété name doit fournir le nom du point créé.

D’autres paramètres sont possibles mais pas utilisés ici. Le point prendra donc la couleur par défaut (le noir), le style de point par défaut (un rond de taille moyenne).

La ligne app.addCircleOA({ o: 'I', a: 'O', lineStyle: '.', thickness: 2, color: 'red', tag: 'circIO' }) ajoute à la figure le cercle de centre I (propriété o de l’objet passé en paramètre), passant par O (propriété a), avec un style de trait pointillé (propriété lineStyle), une épaisseur de 2 pixels (propriété thickness), une couleur rouge (propriété color) et affecte à ce cercle le tag circIO (propriété tag).

La ligne app.addIntCircleCircle({ c: 'circOM', c2: 'circIO', color: 'green', name: 'C', name2: 'D', pointStyle: 'bigmult'}) crée l’intersection du cercle de tag circOM (propriété c) avec le cercle de tag ’circIO’ (propriété c2), en lui donnant la couleur verte, en affectant au premier point d’intersection le nom C et au deuxième le nom D, et en utilisant le style de point en forme de X de grande taille.

A noter : Lorsqu’on crée l’intersection de deux cercles (ou d’un cercle et une droite), si un des points d’intersection est déjà existant et reconnu par MathGraph32, un seul point d’intersection sera créé.

La ligne app.addLineAB({ a: 'A', b: 'C', color : '#578823'}) ajoute à la figure la droite passant par les points nommés A et C (point d’intersection précédent) avec une couleur ici donnée en format rvb. Comme aucun style de trait ni épaisseur n’est précisé, la droite aura un trait continu et une épaisseur de 1 pixel.

La ligne app.addLineAB({ a: 'A', b: 'D', color : '#578823'}) ajoute à la figure la droite passant par les points nommés A et D ( deuxième point d’intersection précédent).

La ligne app.addLengthMeasure({ a: 'A', b: 'C' }) ajoute à la figure une mesure de la longueur entre les points nommés A et C.

La ligne app.addCalc({ nameCalc: 'length', formula: 'AC'}) ajoute à la figure un calcul nommé length et contenant comme formule AC. Ce calcul renverra donc la valeur de la longueur AC.

Pour quoi définir ce calcul ? Nous allons créer une affichage LaTeX dynamique qui devra afficher la valeur de la longueur AC mesurée. Dans un affichage LaTeX dynamique on ne peut afficher avec le code LaTeX \Val (code LaTeX spécifique à MathGraph32) que des valeurs de calculs ou mesures nommées (ce qui n’est pas le cas d’une mesure de longueur qui n’a pas de nom).

La ligne app.addImPointDilation( {o: 'O', a: 'A', x: 'AC>0', name: 'E', hidden: true}) ajoute à la figure l’image du point A par l’homothétie de centre O et de rapport 1/(AC>0) e donnant à ce point le nom E et en le masquant (propriété hidden à true).

Expliquons le fonctionnement de ce nouveau point.

AC>0 est pour MathGraph32 un test qui envoie 1 s’il est vrai et 0 sinon. Quand le point C n’existe pas (c’est-à-dire quand le point A est intérieur au cercle de centre O), la longueur n’existe pas et donc le point E n’existe pas non plus. Quand le point C existe, le test AC>0 est réalisé et renvoie comme valeur 1. Le rapport de l’homothétie est alors égal à 1 et le point E est confondu avec le point A.

La ligne app.addLinkedLatex({ latex: 'AC=AD=\\Val{length}', a: 'E', fontSize: 16, color: 'maroon', hAlign: 'right', vAlign: 'middle', offsetX: 20 }) crée un affichage LaTeX lié au point E.

Examinons les propriétés de l’objet passé en paramètre :

• La propriété latex (string) de valeur AC=AD=\Val{length} fournit le code LaTeX à utiliser. Le code LaTeX \Vallength utilise un code LaTeX spécial MathGraph32 qui affichera la valeur du calcul nommé length avec 2 décimales par défaut. Pour trouver ce code LaTeX vous pouvez utiliser MathGraph32 avec l’icône .
• La propriété a fournit le nom du point auquel l’affichage LaTeX doit être lié.
• La propriété fontSize (nombre) de valeur 16 fournit la taille de la police à utiliser pour l’affichage LaTeX.
• La propriété color de valeur maroon demmande une couleur marron pour cet affichage LaTeX.
• La propriété hAlign de valeur right demande que l’affichage LaTeX soit aligné à droite du point auquel il est lié.
• La propriété vAlign de valeur middle demande que k’affichage LaTeX soit aligné de façon horizontale centrée du point auquel il est lié.
• La propriété offsetX (nombre) de valeur 20 demande que l’affichage soit décalé de 20 pixels à droite par rapport à ce que serait sa position normale.

Vous trouverez une documentation complète sur l’API de MathGraph32 (en Anglais) sur cette page.