Différences

Ci-dessous, les différences entre deux révisions de la page.

--- lang:python:wasm [2021/01/01 19:07] – Création root
+++ lang:python:wasm [2021/01/02 09:19] (Version actuelle) – [Exemple d'application] : mise à jour du code html/javascript root
@@ Ligne 48: / Ligne 48: @@
 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>
@@ Ligne 57: / Ligne 102: @@
       window.languagePluginUrl = '/pyodide/';
     </script>
+    <script type="text/javascript" src="load_python.js"></script>
     <script src="/pyodide/pyodide.js"></script>
   </head>
-  <body>
+<body>
-  <p id="demo"></p>
-  <script>
-    document.getElementById("demo").innerHTML = "Loading!";
-    // Charge le runtime python
-    languagePluginLoader.then(() => {
-      // Charge les dépendences externes
-      pyodide.loadPackage('numpy').then(() => {
-        // Récupère le module angle.py
-        xmlHttp = new XMLHttpRequest();
-        xmlHttp.open( 'GET', '/angle.py', true );
-        xmlHttp.overrideMimeType("text/plain");
-        // Enregistre le module dans le système local de fichier du navigateur
+<p id="demo"></p>
-        xmlHttp.onreadystatechange = function() {
-          if (this.readyState == 4 && this.status == 200) {
-            // On enregistre le contenu du fichier angle.py dans une variable JavaScript
-            document.source = this.responseText
-            // L'enregistrement du fichier se fait via l'exécution d'un script python
-            pyodide.runPython(`
-import js
-import sys
+<script>
-sys.path.insert(0, '.')
-with open("angle.py", "w") as fd:
+progressBar = document.getElementById("demo")
-    fd.write(js.document.source)
+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())
 `);
-            // On peut alors importer le module angle
+    document.getElementById("demo").innerHTML = "Success.";
-            pyodide.runPython(`import angle`)
+  });
-            document.getElementById("demo").innerHTML = "import terminé"
+  });
-          }
+  });
-        }
+});
-        xmlHttp.send('');
+</script>
-      })
-    });
+</body>
-  </script>
-  </body>
 </html>
 </file>