Logiciel libre de géométrie, d'analyse et de simulation multiplateforme par Yves Biton
 
Home - L’applet MathGraph32 et l’export html

L’exportation d’une figure en html et JavaScript

publication sabato 14 settembre 2013.


Depuis la version 4.7.7, MathGraph32 permet de visualiser une figure dans une page html uniquement en JavaScript et donc sans avoir recours à une applet.

Cette exportation a été améliorée dans la version 4.7.8.

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

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 le menu Fichier - Exporter dans - Page web dynamique (html5)

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

Cliquez ensuite sur le bouton Exporter 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.

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

Tout en bas du fichier html généré vous verrez les lignes suivantes à l’intérieur de la balise :

   <div>
      <svg id ="mtg32svg" width=550 height=400 xmlns="http://www.w3.org/2000/svg">
      </svg>
   </div>

Ces lignes créent un SVG de dimension 550 sur 400 pixels destiné à recevoir la figure.
Il est impératif que ce SVG soit contenu dans un DIV.

En début du fichier html, à l’intérieur de la balise Head :
- La ligne suivante

   <script type="text/javascript" src="/js/4.7.8/mtg32jsmin.js"></script>

déclare où trouver la librairie JavaScript destinée à afficher les figures.

- La ligne suivante déclare une variable mtg32App qui va gérer les figures affichées

          var mtg32App = new mtg32.mtg32App();

- La fonction suivante :

      function mtg32start() {
       mtg32loadFigures();
        mtg32App.calculateAndDisplayAll();
     }

sera appelée une fois la librairie MathJax chargée, configurée et prête pour charger les figures et les afficher.

- La fonction suivante :

     function mtg32loadFigures() {
   var st = "TWF0aEdyYXBoSmF2YTEuMAAAAAs+TMzNAANmcmH###8BAP8BAAAAAAAAAAAAAAAAAAAAAiYAAAGQAAAAAAAAAAAAAAABAAAAC#####8AAAABABFvYmpldHMuQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0Nv####8AAAABABFvYmpldHMuQ0NvbnN0YW50ZUAJIftURC0Y#####wAAAAEAEW9iamV0cy5DUG9pbnRCYXNlAP####8AAAAAAAEAAVUAwAgAAAAAAABAEAAAAAAAAAUAAEA3nz58+fPoQDefPnz58+j#####AAAAAQAbb2JqZXRzLkNEcm9pdGVEaXJlY3Rpb25GaXhlAP####8BAAAAAAEAAAEAAAAAAQE#8AAAAAAAAP####8AAAABABZvYmpldHMuQ1BvaW50TGllRHJvaXRlAP####8AAAAAAAEAAVYAwAgAAAAAAABAEAAAAAAAAAUAAUBHnz58+fPoAAAAAv####8AAAABAA9vYmpldHMuQ1NlZ21lbnQA#####wAAAAAAAAAAAQAAAAABAAAAA#####8AAAABAA5vYmpldHMuQ01pbGlldQD#####AQAAAAABAAABBQAAAAABAAAAA#####8AAAACABNvYmpldHMuQ0NvbW1lbnRhaXJlAP####8AAAAAAAIAAAAAAAAAAAAAAEAYAAAAAAAAAAAABQEAAAAAAAEAAAAAAAEx#####wAAAAEAEG9iamV0cy5DTG9uZ3VldXIA#####wAAAAEAAAADAAAAAgD#####AAAAAAACAAABBQABQG7AAAAAAABAacAAAAAAAAAAAAIA#####wAAAAAAAgAAAQUAAUBi4AAAAAAAQFgAAAAAAAD#####AAAAAQAQb2JqZXRzLkNDZXJjbGVPQQD#####AAAAAAAAAAABAAAAAAgAAAAJAAAAB#####8=";
   mtg32App.addDoc("mtg32svg", st, true); // Figure affichée dès le chargement de la figure
     }

définit une figure et l’ajoute aux figures que devra gérer l’application mtg32App.

Le premier paramètre est l’id du SVG qui contiendra la figure.
Le second paramètre est une chaîne de caractères qui décrit entièrement la figure affichée et peut être très longue pour une figure complexe.
Le troisième paramètre est true si la figure doit être affichée dès le chargement de la page et false sinon (par exemple si la figure est dans un DIV caché).

- Les lignes suivantes :

   <script type="text/x-mathjax-config">
     MathJax.Hub.Config({
       tex2jax: {
         inlineMath: [["$","$"],["\\(","\\)"]]
       },
       jax: ["input/TeX","output/SVG"],
       TeX: {extensions: ["color.js"]},
                messageStyle:'none'
     });         
   </script>
   <script type="text/javascript" src="/js/MathJax/MathJax.js?config=TeX-AMS-MML_SVG-full.js"></script>

servent à configurer la librarie externe MathJax utilisée par MathGraph32 pour afficher les formules en LaTeX.

- Enfin les lignes suivantes :

        <script>
                MathJax.Hub.Queue(function() {mtg32start()});
        </script>

servent à préparer MathJax puis lancer la fonction mtg32Start qui chargera la ou les figures et les affichera.

Ces lignes doivent être les dernières déclarées en JavaScript.

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 qui est ouverte dans MathGraph32.

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 des lignes déja présentes :

   <div>
       <svg id ="mtg32svg" width=550 height=400 xmlns="http://www.w3.org/2000/svg">
       </svg>
   </div>

nous allons rajouter celles-ci :

   <div>
       <svg id ="mtg32svg2" width=600 height=450 xmlns="http://www.w3.org/2000/svg">
       </svg>
   </div>

Pour connaître les dimensions width et height du SVG, vous pouvez utiliser le menu Aide - Code html pour Applet, ici par exemple, une largeur de 600 et une hauteur de 450 pixels.

Il suffira ensuite d’ajouter à la fonction mtg32loadFigures les deux lignes suivantes :

   st="chaine";
   mtg32App.addDoc("mtg32svg2", st, true);

chaine est une grande chaîne de caractères que vous vous pouvez coller une fois que vous l’avez copiée dans le presse-papier avec le menu Edition - Copier le code de la figure (pour html)

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

Comment interagir avec une figure Mathgraph32 contenue dans la page html

Vous pouvez 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.prototype.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.prototype.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.

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 addDoc. Il suffit de la coller dans le presse-papier.

Il ne reste plus qu’à démarrer MathGraph32 et utiliser le menu Fichier - Nouvelle figure par code. 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.