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

Accueil Tutoriels Export html et LateX

How to display MathGraph32 figures online with HTML tags

modification samedi 16 janvier 2023.

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



Since 7.3.5 version, MathGraph32 allows you to display MathGraph32 figures online using special HTML tags.

It is the most simple way to display MathGraph32 figures online.

First let us remind that the Base64 code of a MathGraph32 figure is a string you can get using the sowware with icon of the upper toolbar by choosing item Get Base64 code of the figure.

Two special tags are available :

The tag <mathgraph-player></mathgraph-player> :

This tag allows you to display a dynamic Mathgraph32 figure, with the possibility to interact withh the figure (for instance capturing a mobile point), but the figure will not be modifiable online.

Somewhere in your JavaScript code you must have the following lines :

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

Here is an example of code to be used in an HTML page
Voici ci-dessous un exemple de code à utiliser dans une page html avec deux figures :

with two figures (the Base64 codes are to be replaced by real ones) :

<p>A first figure</p>
<mathgraph-player width="800" height="600" fig="Here paste the Base64 code of your choice"></mathgraph-player>

<p>and a second one</p>
<mathgraph-player fig="Here paste the Base64 code of another figure"></mathgraph-player>

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

To be noted :

The tag <mathgraph-editor></mathgraph-editor> :

It allows you to display a MathGraph32 figure online, with the possibility to modify this figure online with the software.

Here is an example of HTML coode to use with two editable figures :

<!--Loading of the editor, with mid-level , without open icon nor Figure options button -->
<mathgraph-editor width="800" height="600" fig="Here paste the Base64 code of your choice" level="2" open="false" options="false"></mathgraph-editor>

<!-- Loading of the editor with all default options activates -->
<mathgraph-editor fig="Here paste the Base64 code of your choice"></mathgraph-editor>

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

To be noted :