Accueil – Tutoriels – Export html et LateX

Comment insérer en ligne des figures MathGraph32 à l’aide de balises HTML

modification samedi 15 janvier 2023.

Toutes les versions de cet article : [English] [Español] [français]

Depuis la version 7.3.5, MathGraph32 vous permet d’insérer des figures dynamiques à l’aide de balises HTML spécifiques.

C’est la manière la plus simple de mettre des figures mathgraph dans une page html.

Rappelons d’abord que le codeBase64 de la figure est une chaîne de caractères que vous pouvez récupérer en utilisant le logiciel avec l’icône d’exportation de la barre supérieure et en choisissant l’item Obtenir le code Base64 de la figure.

Deux types de balises sont disponibles :

`La balise <mathgraph-player></mathgraph-player> :`

Elle permet de mettre en ligne une figure dynamique, avec possibilité d’agir sur la figure (par exemple capturer un point mobile), mais sans pouvoir la modifier en ligne.

Quelque part dans votre code html vous devez avoir le code suivant :

<script async src="https://www.mathgraph32.org/js/mtgLoad/mathgraphElements.js"></script>

Voici ci-dessous un exemple de code à utiliser dans une page html avec deux figures :

<p>Une première figure</p>

<mathgraph-player width="800" height="600" fig="le code base64 de la figure"></mathgraph-player>



<p>et une deuxième</p>

<mathgraph-player fig="le code base64 d’une autre figure"></mathgraph-player>



<script async src="https://www.mathgraph32.org/js/mtgLoad/mathgraphElements.js"></script>

Remarques :

Le tag de fermeture </mathgraph-player> est obligatoire, la syntaxe <mathgraph-player fig="…" /> ne fonctionnera pas (comme pour tous les customElements)
Vous pouvez utiliser les attributs width et height (mettre des nombres sans unité, cela sera la taille en pixels du svg affiché)
L’attribut svgId est possible pour imposer l’id qui sera mis sur le svg de la figure créée (utile si vous voulez manipuler cette figure ensuite avec du code javascript)
Si vous voulez afficher une figure inline, vous pouvez lui donner le style display : inline-block (lui mettre inline ne fonctionnera pas), avec une directive css, un attribut style mis sur <mathgraph-player> ou en js.
Vous pouvez mettre dans la même page des tags <mathgraph-editor> et <mathgraph-player>.

`La balise <mathgraph-editor></mathgraph-editor> :`

Elle permet de mettre en ligne une figure dynamique, avec possibilité de modifier cette figure en ligne avec le logiciel.

Voici ci-dessous un exemple de code à utiliser dans une page html avec deux figures :

<!-- chargement de l'éditeur, avec les boutons niveau collège, sans bouton ouvrir ni le bouton pour changer les options -->

<mathgraph-editor width="800" height="600" fig="le code base64 de la figure" level="2" open="false" options="false"></mathgraph-editor>



<!-- chargement de l'éditeur, avec toutes ses options par défaut -->

<mathgraph-editor fig="le code base64 de la figure"></mathgraph-editor>



<script async src="https://www.mathgraph32.org/js/mtgLoad/mathgraphElements.js"></script>

Remarques :

Le tag de fermeture </mathgraph-editor> est obligatoire, la syntaxe <mathgraph-editor fig="…" /> ne fonctionnera pas (comme pour tous les customElements)
Vous pouvez utiliser les attributs width et height (mettre des nombres sans unité, cela sera la taille en pixels du svg affiché)
L’attribut svgId est possible pour imposer l’id qui sera mis sur le svg de la figure créée (utile si vous voulez manipuler cette figure ensuite avec du code javascript)
Si vous voulez afficher une figure inline, vous pouvez lui donner le style display : inline-block (lui mettre inline ne fonctionnera pas), avec une directive css, un attribut style mis sur <mathgraph-player> ou en js.
Vous pouvez mettre dans la même page des tags <mathgraph-editor> et <mathgraph-player>.
La balise </mathgraph-editor> permet d’utiliser des attributs supplémentaires
- L’attribut open = "false" enlèvera l’icône permettant d’ouvir un fichier cet attribut est à true s’il n’est pas présent)
- L’attribut options = "false" enlèvera l’icône qui permet de modifier les options de fonctionnement de la figure (par exemple l’unité d’angle de la figure).
- L’attribut level permet de spécifier le niveau de fonctionnement du logiciel : "1" pour fonctionner en mode élémentaire, "2" pour le mode collège, "3" pour le mode avancé sans prise en charge des nombres complexes (niveau par défaut si l’attribut est absent) et "4" pour le niveau avancé avec prise en charge des nombres complexes.
- L’attribut displayMeasures : s’il est à true (valeur par défaut), quand on mesure une longueur ou un angle, la mesure est affichée sur la figure.
- L’attribut stylePointCroix : s’il est à true le style de point par défaut au démarrage est la croix. Par défaut cet attribut est false et le style de point actif est le petit rond.
- L’attribut newFig : si cet attribut est à false l’icône permettant de créer une nouvelle figure sera absente. Cet attribut est à true par défaut.
- L’attribut onlyPoints : Si cet attribut est à true, les outils de transformations géométriques ne s’appliqueront qu’aux points. Cet attribut est à false par défaut et les transformations géométriques s’appliquent aux points, droites, segments, cercles et arcs de cercle.
- L’attribut dys : Si cet attribut est à true, l’application démarrera en mode "dys" avec le style de point par défaut étant une grande croix, une épaisseur de trait de 2, la taille des noms de points ou droites plus grande. Cet attribut est false par défaut.
- L’attribut language : "fr" pour un fonctionnement en Français (valeur par défaut), "en" pour un fonctionnement en anglais, "es" pour un fonctionnement en espagnol.

La balise </mathgraph-editor> permet de démarrer le logiciel avec une figure dont le code Base64 est précisé et, lorsque vous éditez cette figure avec MathGraph32, vous pouvez utiliser l’icône puis cocher la case Personnaliser les outils disponibles puis cliquer sur le bouton Choix des outils qui vous permettra de choisir les outils que désirez permettre ou ceux que vous désirez interdire. Une fois ces changements validés, vous pourrez récupérer le code Base64 de la figure et l’utiliser dans l’attribut fig. Le logiciel démarrera avec votre figure et seulement les outils choisis.