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

Accueil Tutoriels Export html et LateX

L’exportation d’une figure en html et JavaScript

modification vendredi 6 janvier 2020.

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



Les explications ci-dessous se réfèrent à la version JavaScript de MathGraph32, version 6.4 et ultérieures pour lesquels des changements important ont été apportés.

Cliquez sur ce lien pour voir une page html contenant plusieurs figures dynamiques animées par la version JavaScript de Mathgraph32.

Vous pouvez depuis la version 7.3.5 utiliser des balises spéciales pour mettre facilement en ligne des figures MathGraph32. Pour cela lisez cet article.

Comment exporter une figure en html5 avec JavaScript

Comment est structurée la page html générée

Comment modifier une telle page html pour qu’elle contienne une ou plusieurs autres figures

Comment interagir avec une figure Mathgraph32 contenue dans la page html

Comment recréer une figure à partir du code contenu dans une page html


Comment exporter une figure en html5 avec JavaScript

Lorsque la figure à exporter est ouverte dans MathGraph32, utilisez l’icône d’exportation et cliquez sur Exporter en html

Une boîte de dialogue s’ouvre comme ci-dessous :

Cliquez ensuite sur le bouton OK puis choisissez un nom pour le fichier html et enregistrez-le à l’emplacement de votre choix.

Vous obtenez alors un fichier html qui peut être mis en ligne et dans lequel vous aurez une figure MathGraph32.

Sur cette figure en ligne, vous pourrez :

 Capturer un point mobile.

 Lancer l’exécution d’une macro.

 Modifier un calcul dans un champ d’édition de formule

 Modifier la valeur d’une variable si vous lui avez associé un dialogue en bas et à droite de la figure.

Il faut noter que vous pouvez n’exporter qu’une partie de la figure (commençant toujours en haut et à gauche).

Pour cela utilisez l’icône .

Cochez la case Utiliser un cadre de dimensions données comme ci-dessous.

Vous pouvez alors soit entrer les dimensions de votre choix soit valider par OK puis utiliser l’outil de capture pour redimensionner le cadre grisé dont le contenu est ce qui sera exporté.

Comment est structurée la page html générée :

Voici ci-dessous le code d’une page html exportée par MathGraph32. Elle contient seulement deux points libres et un cercle.

<!DOCTYPE html>
<html>
 <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="generator" content="MathGraph32" /> <title>Feuille de travail dynamique MathGraph32</title>
</head>
<body>
        <h2 align="center" class="Style1">Test</h2>
        <p></p>
        <div id = "mtg32">
        </div>
        <p></p>
        <p><span style="font-size:small">, Cr&#233&#233 avec <a href="https://www.mathgraph32.org/" target="_blank" >MathGraph32</a></span></p>
        <script type="text/javascript" src="https://www.mathgraph32.org/js/mtgLoad/mtgLoad.min.js"></script>
        <script type="application/javascript">
         (function autostart() {
         var svgOptions = {
                 idSvg: "mtg32svg", width : "700", height : "550"
         }

         var mtgOptions = {
                 fig: "TWF0aEdyYXBoSmF2YTEuMAAAABI+TMzNAAJmcv###wEA#wEAAAAAAAAAAASVAAAClgAAAQEAAAAAAAAAAQAAAAT#####AAAAAQAKQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0Nv####8AAAABAApDQ29uc3RhbnRlQAkh+1RELRj#####AAAAAQAKQ1BvaW50QmFzZQD#####AAAAAAAQAAAAAAAAAAAAAABACAAAAAAAAAUAAUBwyAAAAAAAQGzrhR64UewAAAACAP####8AAAAAABAAAAAAAAAAAAAAAEAIAAAAAAAABQABQGZQAAAAAABAUNcKPXCj1#####8AAAABAAlDQ2VyY2xlT0EA#####wAAAAAAAQAAAAEAAAAC################",
                 isEditable: false
         }

         mtgLoad("mtg32", svgOptions, mtgOptions, function (error, mtgAppPlayer) {
                 if (error) return console.error(error)
                 console.log("mtg32 player loaded", mtgAppPlayer)
         })
         })()
        </script>
 </body>
</html>

La ligne

<script type="text/javascript" src="https://www.mathgraph32.org/js/mtgLoad/mtgLoad.min.js"></script>

sert à appeler le loader de MathGraph32. Elle est indispensable.

Cette page contient un div d’id mtg32. C’est ce div qui contiendra la figure dynamique. En fait le loader rajoutera dans ce div un svg qui contiendra la figure.

Attention : Ce div doit précéder les appels à mtgLoad. Ces appels doivent donc figurer dans le body, après le div.

La ligne :

var svgOptions = {
                 idSvg: "mtg32svg", width : "700", height : "550"
         }

déclare le second paramètre qui sera passé à la fonction mtgLoad.

Il indique les dimensions de la figure en pixels. Si ce paramètre est absent des dimensions de 900 sur 650 seront utilisées.

idSvg contient l’id à utiliser pour le SVG qui sera rajouté dans le div. Ce paramètre est optionnel. S’il est absent, le loader donnera lui-même une id au svg qu’il aura créé.

Les lignes

var mtgOptions = {
                 fig: "TWF0aEdyYXBoSmF2YTEuMAAAABI+TMzNAAJmcv###wEA#wEAAAAAAAAAAASVAAAClgAAAQEAAAAAAAAAAQAAAAT#####AAAAAQAKQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0Nv####8AAAABAApDQ29uc3RhbnRlQAkh+1RELRj#####AAAAAQAKQ1BvaW50QmFzZQD#####AAAAAAAQAAAAAAAAAAAAAABACAAAAAAAAAUAAUBwyAAAAAAAQGzrhR64UewAAAACAP####8AAAAAABAAAAAAAAAAAAAAAEAIAAAAAAAABQABQGZQAAAAAABAUNcKPXCj1#####8AAAABAAlDQ2VyY2xlT0EA#####wAAAAAAAQAAAAEAAAAC################",
                 isEditable: false
         }

définissent le troisième paramètre qui sera passé à la fonction mtgLoad.

fig contient le code Base 64 de la figure (qu’on obtient dans MathGraph32 avec l’icône d’exportation et en choisissant "Obtenir le code Base 64 de la figure")

isEditable ici contient false car on veut que la figure soit affichée mais pas modifiable (sauf capturer un point mobile ou exécuter une macro).

Si vous voulez lancer l’application complète de MathGraph32 vous permettant de modifier la figure, remplacer la ligne isEditable : false par isEditable : true.

Enfin les lignes

mtgLoad("mtg32", svgOptions, mtgOptions, function (error, mtgAppPlayer) {
                 if (error) return console.error(error)
                 console.log("mtg32 player loaded")
         })

appellent le loader de MathGraph32.

Le premier paramètre est l’id du div qui doit contenir la figure.

Le quatrième paramètre est optionnel et contient une fonction de callBack qui sera appelée quand MathGraph32 en ligne sera chargé.

Si vous omettez le dernier paramètre vous pouvez aussi utiliser la syntaxe suivante, qui nécessite un navigateur pas trop ancien :

   mtgLoad("mtg32", svgOptions, mtgOptions).then(
     (mtgAppPlayer) => {
       console.log("mtg32 player loaded", mtgAppPlayer)
     }
   ).catch(
     (error) => {if (error) console.error(error)}
   )

En effet l’appel de mtgLoad renvoie une promesse qui est résolu une fois que l’application (éditeur ou player) est prête.

)

Comment modifier une telle page html pour qu’elle contienne une ou plusieurs autres figures

Nous voulons par exemple afficher au-dessous de notre première figure une autre figure.

Nous devons donc rajouter un autre DIV dans le Body qui contiendra un deuxième SVG dans lequel se fera l’affichage de la figure.

Au-dessous de ces lignes déja présentes :

        <div id = "mtg32">
        </div>

nous allons rajouter celles-ci :

        <div id = "div2">
        </div>

Après le premier appel à mtgLoad ajoutez les lignes suivantes :

         var svgOptions2 = {
                 width : "800", height : "600"
         }

         var mtgOptions2 = {
                 fig: "TWF0aEdyYXBoSmF2YTEuMAAAABI+TMzNAAJmcv###wEA#wEAAAAAAAAAAASVAAAClgAAAQEAAAAAAAAAAQAAAAT#####AAAAAQAKQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0Nv####8AAAABAApDQ29uc3RhbnRlQAkh+1RELRj#####AAAAAQAKQ1BvaW50QmFzZQD#####AAAAAAAQAAAAAAAAAAAAAABACAAAAAAAAAUAAUBgMAAAAAAAQG3rhR64UewAAAACAP####8AAAAAABAAAAAAAAAAAAAAAEAIAAAAAAAABQABQHVIAAAAAABAYKuFHrhR7P####8AAAABAAlDRHJvaXRlQUIA#####wAAAP8AEAAAAQABAAAAAQAAAAL###############8=",
                 isEditable: false
         }
         mtgLoad("div2", svgOptions2, mtgOptions2, function (error, mtgAppPlayer) {
                 if (error) return console.error(error)
         })

Vous devrez bien sûr remplacer la valeur de fig par le code Base 64 de la figure de votre choix et aussi modifier les dimensions allouées à la figure.

C’est tout : Votre page html contient maintenant deux figures dynamiques MathGraph32.

Si, maintenant, vous changer le paramètre isEditable de mtgOptions2 pour le mettre à true, vous obtiendrez alors une figure avec les outils de MathGraph32.

Comment interagir avec une figure Mathgraph32 contenue dans la page html

Vous pouvez par exemple procéder comme dans l’exemple ci-dessous :

<!DOCTYPE html>
<html>
<head>
       <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <meta name="generator" content="MathGraph32" /> <title>Feuille de travail dynamique MathGraph32</title>
</head>
<body>
       <h2 align="center" class="Style1">Test</h2>
       <p></p>
       <div id = "mtg32">
       </div>
       <p></p>
       <p><span style="font-size:small">, Cr&#233&#233 avec <a href="https://www.mathgraph32.org/" target="_blank" >MathGraph32</a></span></p>
       <script type="text/javascript" src="https://www.mathgraph32.org/js/mtgLoad/mtgLoad.min.js"></script>
       <script type="application/javascript">
       var mtg32App
       
        (function autostart() {
        var svgOptions = {
                idSvg: "mtg32svg", width : "700", height : "550"
        }

        var mtgOptions = {
                fig: "TWF0aEdyYXBoSmF2YTEuMAAAABI+TMzNAAJmcv###wEA#wEAAAAAAAAAAASVAAAClgAAAQEAAAAAAAAAAQAAAAP#####AAAAAQAKQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0Nv####8AAAABAApDQ29uc3RhbnRlQAkh+1RELRj#####AAAAAQAHQ0NhbGN1bAD#####AAFhAAExAAAAAT#wAAAAAAAA#####wAAAAEAD0NWYWxldXJBZmZpY2hlZQD#####AAAAAAH#####EEBQYAAAAAAAQEmuFHrhR64AAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAJhPQAAAgAAAAH###############8=",
                isEditable: false
        }

        mtgLoad("mtg32", svgOptions, mtgOptions, function (error, mtgAppPlayer) {
                if (error) return console.error(error)
                start(mtgAppPlayer)
        })
        })()
                function start (mtg32App) {
                        mtg32App.giveFormula2("mtg32svg", "a", "2")
                        mtg32App.calculate("mtg32svg", false)
                        mtg32App.display("mtg32svg")
                }
       </script>
</body>
</html>

C’est dans la fonction start que vous mettez tout ce qui concerne le traitement de vos figures.

A noter que si vous rajoutez plusieurs figures dans une même page html via la fonction mtgLoad, la valeur de mtgAppPlayer renvoyée par la fonction de callBack est la même lors des derniers appels que lors du premier. Il s’agit de la même instance d’objet.

Ici, par exemple, la figure contient initialement un calcul contenant comme valeur 1 et on lui affecte la valeur 2 avant de réafficher la figure.

Vous pouvez ensuite utiliser les fonctions suivantes :


 mtg32App.calculate(idDoc, brandom) :

Cette fonction recalcule la figure associée au SVG d’id idDoc. Si brandom vaut true, les calculs aléatoires sont réactualisés. S’il contient false, les calculs aléatoires ne sont pas réactualisés et renvoient la même valeur que précédemment.


 mtg32App.calculateAndDisplayAll(brandom) :

Cette fonction recalcule les figures gérées par l’application. Si brandom vaut true, les calculs aléatoires sont réactualisés. S’il contient false, les calculs aléatoires ne sont pas réactualisés et renvoient la même valeur que précédemment..


 mtg32App.display(idDoc) :

Réaffiche entièrement la figure contenue dans le SVG d’id idDoc.


 mtg32App.giveFormula2(idDoc, nomCalcul, formule) :

Cette fonction donne au calcul ou à la fonction nommée nomCalcul la formule contenue dans le paramètre formule. Cette affectation est faite dans la figure associée au SVG d’id la paramètre idDoc. Dans notre exemple précédent, si la première figure contient un calcul nommé a, le code mtg32App.giveFormula2("mtg32svg", "a", "pi + 1") donnera au calcul nommé a de la première figure la valeur pi + 1.


 mtg32App.executeMacro(idDoc, nameMacro) :

Execute la macro de nom nameMacro dans la figure associée au SVG d’id idDoc.


 mtg32App.setActive(idDoc, ba) :

Le premier paramètre est l’id du SVG associé à la figure qu’on modifie.

Si le paramètre ba est false, la figure ne réagira plus aux actions qu’on fait sur elle (par exemple on ne pourra plus capturer les points mobiles ou modifier des formules dans des champs d’édition). S’il est true la figure redeviendra réactive.


 mtg32App.valueOf(idDoc, nomCalcul) :

Le premier paramètre est l’id du SVG associé à la figure qu’on interroge.
Le deuxième paramètre est le nom du calcul ou de la variable dont on souhaite connaître la valeur.
Cette fonction renvoie la valeur actuelle du calcul ou de la variable.


 mtg32App.fieldsValidation(idDoc) :

Cette fonction est à appeler lorsqu’une figure contient des champs d’édition de formule.

Le premier paramètre est l’id du SVG associé à la figure qu’on interroge.

Elle renvoie comme valeur true si tous les champs d’édition de la figure contiennent une formule valide ou sont vides et false sinon.


 mtg32App.fieldValidation(idDoc, nomCalcul) :

Cette fonction renvoie true si le premier champ de calcul associé au calcul nomCalcul
contient une formule non valide ou vide et false sinon. Renvoie false s’il n’y a pas de champ d’édition du calcul nomCalcul.


 mtg32App.setEditorsEmpty(idDoc) :

Le premier paramètre est l’id du SVG associé à la figure sur laquelle on veut agir.
Cette fonction vide tous les champs d’édition de la figure..


 mtg32App.activateFirstInvalidField = function(idDoc) :

Cette fonction redonne le focus clavier au premier champ d’édition de la figure qui contient une formule vide ou non valide.


 mtg32App.activateField = function(idDoc, nomCalcul) :

Le premier paramètre est l’id du SVG associé à la figure sur laquelle on agit.
Cette fonction redonne le focus clavier au premier champ d’édition de la figure associé au calcul ou à la fonction nomCalcul.


 Mtg32App.rename = function (idDoc, oldName, newName) :

Cette fonction renomme un point ou une droite dans la figure d’id idDoc.

Elle donne au point (ou à la droite) ayant pour nom oldName le nom newName, à condition qu’aucun point ou droite n’ait pour nom newName.

Comment recréer une figure à partir du code contenu dans une page html

Lorsque vous avez créé une page html contenant une figure MathGraph32 animée en JavaScript, vous pouvez récupérer la longue chaîne de caractères servant à la décrire : c’est la chaîne de caractères passé en paramètre à la fonction mtgLoad via mtgOptions.fig. Il suffit de la coller dans le presse-papier.

Il ne reste plus qu’à démarrer MathGraph32 et utiliser l’icône (création d’une nouvelle figure) et cliquer sur Figure par code Base 64. Une boîte de dialogue apparaît. Il suffit de coller dans le champ code la chaîne de caractères issue de la page html et vous verrez apparaître la figure que vous pourrez modifier à votre convenance.