LG

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
=====pyodide=====

====Présentation====

C'est tout le code javascript généré depuis le runtime python.

[[https://github.com/iodide-project/pyodide|Site github]] {{ :lang:python:wasm:pyodide-build-0.16.1.tar.bz2 |Archive v0.16.1}} [[https://pyodide.readthedocs.io|Documentation]]

Attention, c'est encore un projet dont la viabilité n'est pas encore sûre.

====Exemple d'application====

L'archive pyodide contient tous les fichiers javascript (''*.js'') et webassembly (''*.data''). On voit que certaines dépendances sont énormes (''scipy'' : 170 Mo) et peuvent clairement être rédhibitoires pour une utilisation en ligne.

Les fichiers javascript de pyodide doivent être chargés via le protocole ''%%http://%%'' et non pas via ''%%file://%%''. Il faut donc charger le fichier index.html via une adresse de type ''%%localhost://.../index.html%%'' plutôt que ''%%file:///C:/.../index.html%%''. Sous Windows, l'utilisation de [[prog:wamp|WampServer]] est parfaite pour installer rapidement un serveur apache.

Le principe est simple :
  * On copie le contenu de l'archive pyodide afin d'elle soit accessible via l'URL : [[http://localhost/pyodide/pyodide.js]]. Il faut bien mettre toute l'archive, y compris les fichiers ''.data''.
  * On initialise le chargement de la librairie :
<code xml>
  <head>
      <script type="text/javascript">
          // set the pyodide files URL (packages.json, pyodide.asm.data etc)
          window.languagePluginUrl = '/pyodide/';
      </script>
      <script src="/pyodide/pyodide.js"></script>
  </head>
  <body>
    <script>
      languagePluginLoader;
    </script>
  </body>
</code>

  * Puis, on charge les paquets systèmes (compilés en webassembly) dont on a besoin, soit juste avec le nom, soit avec son URL complet :

<code xml>
<script>
document.getElementById("demo").innerHTML = "Loading!";
languagePluginLoader.then(() => {
    pyodide.loadPackage(['numpy', 'https://localhost/pyodide/matplotlib.js']);
});
</script> 

</code>

  * Enfin, on charge dans le système de fichiers interne au navigateur les modules python. Pour cela, on exécute un programme python qui va créer un fichier contenant le module python (ici : ''angle.py'').

Exemple complet :

<file javascript load_python.js>
function loadPyModule(module, callback) {
  xmlHttp = new XMLHttpRequest();
  xmlHttp.open( 'GET', '/' + module + '.py', true );
  xmlHttp.overrideMimeType("text/plain; charset=x-user-defined"); 

  xmlHttp.onload = function() {
    document.source = this.responseText
    document.module = module
    // Enregistre le fichier dans le système de fichier du runtime Python.
    pyodide.runPython(`
import js

import sys
sys.path.insert(0, '/')

print ("python" + js.document.module + ".py")

with open(js.document.module + ".py", "w") as fd:
  fd.write(js.document.source)
`);

    // Nécessaire pour le moment.
    // Je n'arrive pas à importer un module ultérieurement.
    pyodide.runPython(`
import ` + module + `
`);
    callback();
  }

  xmlHttp.send('');
}

function loadPyModules(modules, callback, finalCallback, i = 0) {
  if (Object.is(modules.length - 1, i)) {
    loadPyModule(modules[i], finalCallback)
  } else {
    loadPyModule(modules[i], () => {
      callback(modules[i])
      loadPyModules(modules, callback, finalCallback, i + 1);
    })
  }
}
</file>

<file html5 index.html>
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      // set the pyodide files URL (packages.json, pyodide.asm.data etc)
      window.languagePluginUrl = '/pyodide/';
    </script>
    <script type="text/javascript" src="load_python.js"></script>
    <script src="/pyodide/pyodide.js"></script>
  </head>
<body>

<p id="demo"></p>

<script>

progressBar = document.getElementById("demo")
progressBar.innerHTML = "Start loading python.";
languagePluginLoader.then(() => {
  progressBar.innerHTML = "Python loaded. Loading numpy package.";
  pyodide.loadPackage(['numpy']).then(() => {
  progressBar.innerHTML = "numpy loaded. Loading scipy package.";
  pyodide.loadPackage(['scipy']).then(() => {
  progressBar.innerHTML = "scipy loaded. Loading python modules.";
  loadPyModules(['angle', 'compute'], module => { progressBar.innerHTML = module + " loaded." }, () => {
    progressBar.innerHTML = "All python modules loaded. Run example.";

    pyodide.runPython(`
print (angle.Angle(3.14, angle.Angle.Unite.RADIAN).get_deg())

print (compute.get_timestamp_ns())
`);

    document.getElementById("demo").innerHTML = "Success.";
  });
  });
  });
});
</script> 

</body>
</html>
</file>