Logiciel libre de géométrie, d'analyse et de simulation multiplateforme par Yves Biton

Accueil Tutoriels Export html et LateX

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

modification lundi 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 :

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 :