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 :
"TWF0aEdyYXBoSmF2YTEuMAAAABM+TMzNAAJmcv###wEA#wEAAAAAAAAAAAUeAAACygAAAQEAAAAAAAAAAQAAAAz#####AAAAAQAKQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0Nv####8AAAABAApDQ29uc3RhbnRlQAkh+1RELRj#####AAAAAQAKQ1BvaW50QmFzZQD#####AAAAAAAOAAFVAMAkAAAAAAAAQBAAAAAAAAAAAAUAAEAx3vnbItDmQDHe+dsi0Ob#####AAAAAQAUQ0Ryb2l0ZURpcmVjdGlvbkZpeGUA#####wEAAAAAEAAAAQAAAAEAAAABAT#wAAAAAAAA#####wAAAAEAD0NQb2ludExpZURyb2l0ZQD#####AAAAAAAOAAFWAMAAAAAAAAAAQBAAAAAAAAAAAAUAAUBB3vnbItDmAAAAAv####8AAAABAAhDU2VnbWVudAD#####AAAAAAAQAAABAAAAAQAAAAEAAAAD#####wAAAAEAB0NNaWxpZXUA#####wEAAAAAEAAAAAAAAAAAAAAAQAgAAAAAAAAAAAUAAAAAAQAAAAP#####AAAAAgAMQ0NvbW1lbnRhaXJlAP####8AAAAAAAAAAAAAAAAAQBgAAAAAAAAAAAAAAAUMAAAAAAABAAAAAAAAAAEAAAAAAAAAAAABMf####8AAAABAAlDTG9uZ3VldXIA#####wAAAAEAAAADAAAAAgD#####AAAAAAAQAAFPAAAAAAAAAAAAQAgAAAAAAAAAAAUAAUBl4AAAAAAAQGz64UeuFHsAAAACAP####8AAAAAABAAAU0AQAgAAAAAAADAOQAAAAAAAAAABQABQHJwAAAAAABAX3XCj1wo9gAAAAIA#####wAAAAAAEAABQQDAAAAAAAAAAEAQAAAAAAAAAAAFAAFAgOAAAAAAAEBsuuFHrhR7#####wAAAAEACUNDZXJjbGVPQQD#####AAAA#wAGY2lyY09NAAIAAAAIAAAACQAAAAf##########w==
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 :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="generator" content="MathGraph32" /> <title>Feuille de travail dynamique MathGraph32</title>
<style type="text/css">
#errors {color: red;}
svg {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-webkit-tap-highlight-color: transparent; /*Nécessaire sur ipad pour ne pas avoir de rectangle gris sélectionné lors des touch events */
}
</style>
</head>
<body>
<div id = "mtg32div">
</div>
<script type="text/javascript" src="https://www.mathgraph32.org/js/mtgLoad/mtgLoad.min.js"></script>
<script type="application/javascript">
(function autostart() {
let app
const svgOptions = {
idSvg: "mtg32svg", width : "900", height : "500"
}
const mtgOptions = {
fig: "TWF0aEdyYXBoSmF2YTEuMAAAABM+TMzNAAJmcv###wEA#wEAAAAAAAAAAAUeAAACygAAAQEAAAAAAAAAAQAAAAz#####AAAAAQAKQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0Nv####8AAAABAApDQ29uc3RhbnRlQAkh+1RELRj#####AAAAAQAKQ1BvaW50QmFzZQD#####AAAAAAAOAAFVAMAkAAAAAAAAQBAAAAAAAAAAAAUAAEAx3vnbItDmQDHe+dsi0Ob#####AAAAAQAUQ0Ryb2l0ZURpcmVjdGlvbkZpeGUA#####wEAAAAAEAAAAQAAAAEAAAABAT#wAAAAAAAA#####wAAAAEAD0NQb2ludExpZURyb2l0ZQD#####AAAAAAAOAAFWAMAAAAAAAAAAQBAAAAAAAAAAAAUAAUBB3vnbItDmAAAAAv####8AAAABAAhDU2VnbWVudAD#####AAAAAAAQAAABAAAAAQAAAAEAAAAD#####wAAAAEAB0NNaWxpZXUA#####wEAAAAAEAAAAAAAAAAAAAAAQAgAAAAAAAAAAAUAAAAAAQAAAAP#####AAAAAgAMQ0NvbW1lbnRhaXJlAP####8AAAAAAAAAAAAAAAAAQBgAAAAAAAAAAAAAAAUMAAAAAAABAAAAAAAAAAEAAAAAAAAAAAABMf####8AAAABAAlDTG9uZ3VldXIA#####wAAAAEAAAADAAAAAgD#####AAAAAAAQAAFPAAAAAAAAAAAAQAgAAAAAAAAAAAUAAUBl4AAAAAAAQGz64UeuFHsAAAACAP####8AAAAAABAAAU0AQAgAAAAAAADAOQAAAAAAAAAABQABQHJwAAAAAABAX3XCj1wo9gAAAAIA#####wAAAAAAEAABQQDAAAAAAAAAAEAQAAAAAAAAAAAFAAFAgOAAAAAAAEBsuuFHrhR7#####wAAAAEACUNDZXJjbGVPQQD#####AAAA#wAGY2lyY09NAAIAAAAIAAAACQAAAAf##########w==",
isEditable: false,
loadApi: true
}
mtgLoad("mtg32div", svgOptions, mtgOptions).then(
(mtgApp) => {
console.log("mtg32 App loaded", mtgApp)
app = mtgApp
addBouton()
}
).catch(
(error) => {if (error) console.error(error)}
)
function addBouton() {
app.setApiDoc('mtg32svg') // Il faut informer l'API de la figure sr laquelle on travaille
app.addText({
text: 'Créer les tangentes',
x: 200,
y: 5,
transparent: false,
backgroundColor: 'yellow',
tag: 'txt1',
border: '3D'
})
app.addEltListener({
elt: 'txt1',
eventName: 'mousedown',
callBack: addTangentes
})
}
function addTangentes() {
app.setApiDoc('mtg32svg') // Il faut informer l'API de la figure sr laquelle on travaille
app.removeEltListener({ elt: 'txt1', eventName: 'mousedown'})
app.addMidpoint({ a: 'O', b: 'A', name: 'I'})
app.addCircleOA({ o: 'I', a: 'O', lineStyle: '.', thickness: 2, color: 'red', tag: 'circIO' })
app.addIntCircleCircle({ c: 'circOM', c2: 'circIO', color: 'green', name: 'C', name2: 'D', pointStyle: 'bigmult'})
app.addLineAB({ a: 'A', b: 'C', color : '#578823'})
app.addLineAB({ a: 'A', b: 'D', color : '#578823'})
app.addLengthMeasure({ a: 'A', b: 'C' })
app.addCalc({ nameCalc: 'length', formula: 'AC'})
app.addImPointDilation( {o: 'O', a: 'A', x: '1/(AC>0)', name: 'E', hidden: true})
app.addLinkedLatex({ latex: 'AC=AD=\\Val{length}', a: 'E', fontSize: 16, color: 'maroon', hAlign: 'right', vAlign: 'middle', offsetX: 20 })
}
})()
</script>
</body>
</html>
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 :
const svgOptions = {
idSvg: "mtg32svg", width : "900", height : "500"
}
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 :
const mtgOptions = {
fig: "TWF0aEdyYXBoSmF2YTEuMAAAABM+TMzNAAJmcv###wEA#wEAAAAAAAAAAAUeAAACygAAAQEAAAAAAAAAAQAAAAz#####AAAAAQAKQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0Nv####8AAAABAApDQ29uc3RhbnRlQAkh+1RELRj#####AAAAAQAKQ1BvaW50QmFzZQD#####AAAAAAAOAAFVAMAkAAAAAAAAQBAAAAAAAAAAAAUAAEAx3vnbItDmQDHe+dsi0Ob#####AAAAAQAUQ0Ryb2l0ZURpcmVjdGlvbkZpeGUA#####wEAAAAAEAAAAQAAAAEAAAABAT#wAAAAAAAA#####wAAAAEAD0NQb2ludExpZURyb2l0ZQD#####AAAAAAAOAAFWAMAAAAAAAAAAQBAAAAAAAAAAAAUAAUBB3vnbItDmAAAAAv####8AAAABAAhDU2VnbWVudAD#####AAAAAAAQAAABAAAAAQAAAAEAAAAD#####wAAAAEAB0NNaWxpZXUA#####wEAAAAAEAAAAAAAAAAAAAAAQAgAAAAAAAAAAAUAAAAAAQAAAAP#####AAAAAgAMQ0NvbW1lbnRhaXJlAP####8AAAAAAAAAAAAAAAAAQBgAAAAAAAAAAAAAAAUMAAAAAAABAAAAAAAAAAEAAAAAAAAAAAABMf####8AAAABAAlDTG9uZ3VldXIA#####wAAAAEAAAADAAAAAgD#####AAAAAAAQAAFPAAAAAAAAAAAAQAgAAAAAAAAAAAUAAUBl4AAAAAAAQGz64UeuFHsAAAACAP####8AAAAAABAAAU0AQAgAAAAAAADAOQAAAAAAAAAABQABQHJwAAAAAABAX3XCj1wo9gAAAAIA#####wAAAAAAEAABQQDAAAAAAAAAAEAQAAAAAAAAAAAFAAFAgOAAAAAAAEBsuuFHrhR7#####wAAAAEACUNDZXJjbGVPQQD#####AAAA#wAGY2lyY09NAAIAAAAIAAAACQAAAAf##########w==",
isEditable: false,
loadApi: true
}
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 :
mtgLoad("mtg32div", svgOptions, mtgOptions).then(
(mtgApp) => {
console.log("mtg32 App loaded", mtgApp)
app = mtgApp
addBouton()
}
).catch(
(error) => {if (error) console.error(error)}
)
Une fois la promesse résolue, les 3 lignes suivantes sont exécutées :
console.log("mtg32 App loaded", mtgApp)
app = mtgApp
addBouton()
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 :
function addBouton() {
app.setApiDoc('mtg32svg') // Il faut informer l'API de la figure sr laquelle on travaille
app.addText({
text: 'Créer les tangentes',
x: 200,
y: 5,
transparent: false,
backgroundColor: 'yellow',
tag: 'txt1',
border: '3D'
})
app.addEltListener({
elt: 'txt1',
eventName: 'mousedown',
callBack: addTangentes
})
}
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 :
Les lignes suivantes :
app.addEltListener({
elt: 'txt1',
eventName: 'mousedown',
callBack: addTangentes
})
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 :
function addTangentes() {
app.setApiDoc('mtg32svg') // On informe l'API de la figure sur laquelle on travaille
app.removeEltListener({ elt: 'txt1', eventName: 'mousedown'})
app.addMidpoint({ a: 'O', b: 'A', name: 'I'})
app.addCircleOA({ o: 'I', a: 'O', lineStyle: '.', thickness: 2, color: 'red', tag: 'circIO' })
app.addIntCircleCircle({ c: 'circOM', c2: 'circIO', color: 'green', name: 'C', name2: 'D', pointStyle: 'bigmult'})
app.addLineAB({ a: 'A', b: 'C', color : '#578823'})
app.addLineAB({ a: 'A', b: 'D', color : '#578823'})
app.addLengthMeasure({ a: 'A', b: 'C' })
app.addCalc({ nameCalc: 'length', formula: 'AC'})
app.addImPointDilation( {o: 'O', a: 'A', x: 'AC>0', name: 'E', hidden: true})
app.addLinkedLatex({ latex: 'AC=AD=\\Val{length}', a: 'E', fontSize: 16, color: 'maroon', hAlign: 'right', vAlign: 'middle', offsetX: 20 })
}
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 :
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 :
Vous trouverez une documentation complète sur l’API de MathGraph32 (en Anglais) sur cette page.