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

Export of a figure in html and JavaScript

publication samedi 28 septembre 2013.


Since release version 4.7.7, MathGraph32 allows the visualize a figure in a html page using only JavaScript and so without using an applet.

This export has been improved in release 4.7.8.

Click on this link to se an html page containing several dynamic figures animated by the JavaScript motor of Mathgraph32.

How to export a figure in html5 withJavaScript

How is written the html page html generated

How to modify such a html page to get it contain one or several other figures

How to interact with a Mathgraph32 figure contained in the html page

How to rebuild a figure from the code contained in a html page


How to export a figure in html5 withJavaScript :

When the figure to be exported is opened in MathGraph32, use menu File - Export to - dynamic html page (html5)

a dialog box pops up as below :

Click on button Export then choose a name for the html page and save it to the desired directory.

You will the get a html file that can be set online, containig the MathGraph32 figure.

On this on-line figure, you can :

- Capture a moveable point.

- Launch the execution of a macro.

- Modify a calculus in a formula editor directly on the figure.

- Modify a variable value by clicking on the + or - buttons associated to the variable.

How is wrtitten the html page html generated :

At the bottom of the html file generated you will see the following lines inside the tag > :

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

These lines create a SVG with dimensions 550 on 400 pixels that will contain the figure.

This SVG must be contained in a DIV section.

At the beginning of the html file, inside the

tag :

- The following line

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

declares where to find the MathGraph32 JavaScript library that will display the figure.

- The following line declares a variable mtg32App that will manage with the figures displayed

          var mtg32App = new mtg32.mtg32App();

- The following function :

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

will be called when the library MathJax will be loaded and ready to load the figures et display them.

- The following function :

     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
     }

defines a figure and adds it to the figures managed by the application mtg32App.

The first parameter is the ID of the SVG that will contain the figure.

The second parameter is a string that entirely describes the figure and may be very long for a compex figure.

The third paraeter is true if the figure must be displayed as soon as the page is loaded and false otherwise (for example if the figure is in a hidden DIV).

- The following lines :

   <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>

configure the external MathJax library used by MathGraph32 to display the LaTeX formulas.

- And finally the following lines :

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

prepare MathJax then launch function mtg32Start that will load and display the figures.

These lines must be the last lines declared in JavaScript.

How to modify such a html page to get it contain one or several other figures :

For instance we want to display under our first figure another one that is opened in MathGraph32.

We must therefore add another DIV in the Body that will contain a second SVG for the display of the new figure.

Under these lines :

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

we will add these :

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

In order to know the width et height dimensions of the SVG, you may use menu Help - html code for Applet, for instance here 600 pixels width and 450 pixels height.

We will the add to the function mtg32loadFigures the two following lines :

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

string is a big string you can pastefrom the clipboard once it has been copied in MathGraph32 with menu Edition - Copyle figure (for html)

Thats’it and your html page now contains two MathGraph32 dynamic figures.

How to interact with a Mathgraph32 figure contained in the html page :

You can use the following functions :


- mtg32App.calculate(idDoc, brandom) :

This function recomputes the figure assiated with the SVG of ID idDoc. If brandom is true, the random calculations are updated sont réactualisés. If brandom is false, the random calculations are not updated and return the value previously calculated.


- mtg32App.calculateAndDisplayAll(brandom) :

This function recomputes the figures managed by the application. Si brandom vaut true, les calculs aléatoires sont réactualisés. If brandom is false, the random calculations are not updated et give the value previously calculated.


- mtg32App.display(idDoc) :

Entirely redisplays the figure contained in the SVG of ID idDoc.


- mtg32App.giveFormula2(idDoc, name, formula) :

This function gives to the calculation or function named name the formula contained in parameter formula (string). This affectation is done in the figure associated with DIV of ID idDoc. In the preceeding example, if the first figure contains a calculation named a, the code mtg32App.giveFormula2("mtg32svg", "a", "pi + 1") will give to the calculation named a of the first figure value pi + 1.


- mtg32App.executeMacro(idDoc, nameMacro) :

Executes the macro with name nameMacro in the figure associated with the SVG with ID idDoc.


- mtg32App.setActive(idDoc, ba) :

The first parameter is the ID of the SVG associated with the figure to be modified.

If the parameter ba is false, the figure will nolonger respond to actions applied on it aux actions qu’on fait sur elle (for instance moveable points will no longer be captured .if theparameter ist true the figure will react again to actions applied on it.


- mtg32App.valueOf(idDoc, nomCalcul) :

The first parameter is the ID of the SVG associated with the figure to be interrogated.

The second parameter is the name of the calculation or variable the value is to be asked for. This function returns the current value of the calculation or the variable.


- mtg32App.fieldsValidation(idDoc) :

This function may be asked when the figure contains editors for formulas.

The first parameter is the ID of the SVG associated with the figure to be interrogated.

The value returned is true if all the editors contain a valid formula or are empty.


- mtg32App.fieldValidation(idDoc, name) :

The first parameter is the ID of the SVG associated with the figure to be interrogated.
This function returns true if the first editor field associated with the calculation named name contains a valid formula. It returns false if the editor is empty or contains an invalid formula.


- mtg32App.setEditorsEmpty(idDoc) :

The first parameter is the ID of the SVG associated with the figure we want to act on.

This function empties all the field editors of the figure.


- mtg32App.prototype.activateFirstInvalidField = function(idDoc) :

This function gives the keybord focus to the first formula editor that contain an invalid formula or is empty.


- mtg32App.prototype.activateField = function(idDoc, name) :

The first parameter is the ID of the SVG associated with the figure wewant to act on.

This function gives the keybord focus to the first formula editor associated with calculation or function named name.

How to rebuild a figure from the code contained in a html page :

When a html page containing MathGraph32 figures has been created, it is possible to get the long string describing the figure : this string is the parameter given to function addDoc. All you have to do is paste it in the clipboard.

Then you have to start MathGraph32 and use menu item File- New figure bycode. A dialog box pops up. Just paste the string in the editor field and a new MathGraph32 figure will appear and you will be able to modify it inside MathGraph32 software.