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 :

Le closing tag </mathgraph-player> est mandatory, the syntax <mathgraph-player fig="…" /> will not work (like all customElements)
You can use the attributes width and height (without unities, it will be the size in pixels of the displayed svg)
An attribute svgId is available to force an id on the svg containing the figure (usefull if you want to act on this figure later using javaScript code)
If you want to display a figure inline, you can give it the style display : inline-block (inline will not work), with a css specification, a style attribute on <mathgraph-player> or using javascript.
You can use in the page HTML tags <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 :

The closing tag </mathgraph-editor> is mandatory, the syntax <mathgraph-editor fig="…" /> will not work (like all customElements)
You can use the attributes width and height (without unities, it will be the size in pixels of the displayed svg)
An attribute svgId is available to force an id on the svg containing the figure (usefull if you want to act on this figure later using javaScript code)
If you want to display a figure inline, you can give it the style display : inline-block (inline will not work), with a css specification, a style attribute on <mathgraph-player> or using javascript.
You can use in the page HTML tags <mathgraph-editor> and <mathgraph-player>.
The tag </mathgraph-editor> allows to use more attributes :
- The attribute open = "false" will make the icon not available (this icon is to browse and load a new file). This attribute is true by default.
- The attribute options = "false" will make the icon not available (this icon is to acces the figure options, for instance the angle unity). This attribute is true by default.
- The attribute level specifies the level of use of the software : "1" for elementary level, "2" for mid-level use, "3" for advanced level without complex numbers calculations (defautl level if the level attribute is missing) et "4" for advanced level with complex numbers calculation.
- The attribute displayMeasures : if set to true (default value), when measurint a length or an angle, the measure is displayed on the figure.
- The attribute stylePointCroix : If set to true, the default point style will be athe little cross. By default this attribute is false and the default point style is the little filled circle.
- The attributenewFig : If this attribute is false the icon allowing to create a new figure wille not be available. This attribute is set to true bu default.
- The attributeonlyPoints : If set to true true, the geometrical transformations will apply only on points. This attribute is false bu default and the geometrical transformations apply to points, lines, rays, segments, circles and circle arcs.
- The attribute dys : If this attribute is set to true, the software will start in dys mode, the default point style will be the big cross, the defautlt line width will be 2 pixels, and the default size of names (points and lines) will be bigger. This attribute is false by default.
- The attribute language : "fr" for french (valeur par défaut), "en" for english, "es" for spanish.

The tag </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.