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 :
</mathgraph-player>
est mandatory, the syntax <mathgraph-player fig="…" />
will not work (like all customElements)<mathgraph-player>
or using javascript.<mathgraph-editor>
and <mathgraph-player>
.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 :
</mathgraph-editor>
is mandatory, the syntax <mathgraph-editor fig="…" />
will not work (like all customElements)<mathgraph-player>
or using javascript.<mathgraph-editor>
and <mathgraph-player>
.</mathgraph-editor>
allows to use more attributes :
</mathgraph-editor>
allows you to start MathGraph32 application with a figure based on a Base64 code and, when you edit this figure with MathGraph32, you can use icon then check the checkbox Personalize available tools, then ckick on button ToolsChoice that will allow you to choose the tools you want to get available or not available. Once the tools choice validated, you can get the Base64 code of the figure and use it in the fig attribute of the tag. MathGraph32 will start online in the tag and only the chosen tools will be available.