Switch to faustwasm, reorganize

.github/workflows/main.yml

@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['master']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
-
+node_modules/
+dist/

Documentation/ToDoList.tex

@@ -101,11 +101,7 @@ \section{Les choses sombres et dures}
 \begin{itemize}
 \item index.html
 \item pedagogie/index.html
-\item js/Pedagogie/Library.js
-\item js/Scenes/Finish.js
+\item src/Pedagogie/Library.js
+\item src/Scenes/Finish.js
 \end{itemize}
 \end{document}
-
-
-
-

README.md

@@ -2,37 +2,43 @@
 
 Faust playground is a Web platform designed to enable children to learn basic audio programming in a simple and graphic way. In particular, it allows them to develop musical instruments for Android smartphones.
 
+## Useful links
 
-## To test it:
-
-To test the Faust playground, start a python server :
-
-	cd faustplayground
-	cd ..
-	python -m http.server 8000 (with Python 3)
-	python -m SimpleHTTPServer (with Python 2)
-
-Then open:
-
-	http://127.0.0.1:8000/faustplayground/
-
-## To regenerate examples (in json/ folder)
-
+- [https://faustplayground.grame.fr](https://faustplayground.grame.fr): official FaustPlayground website
+- [https://github.com/grame-cncm/faustplayground](https://github.com/grame-cncm/faustplayground): GitHub repository
+
+## Development
+
+### Notes
+This project uses [Vite](https://vitejs.dev/) for development mode and builds and [FaustWasm](https://github.com/grame-cncm/faustwasm) for compiling Faust in the browser.
+
+### Setup
+Clone and enter the repository, then run:
+```bash
+npm install
+```
+
+### Run in development mode (automatic reloading)
+```bash
+npm run dev
+```
+Then press <kbd>o</kbd> to open in a browser.
+
+### Build
+``` shell
+npm run build
+```
+Generates output in `dist/`. To view locally, run
+``` shell
+cd dist
+python -m http.server
+```
+
+### To create examples (in `public/json/`)
 - create a patch in the platform
 - possibly rename it using the the "Edit" button
 - save it (regular or precompiled version) using the "Save" button
-- rename it with a .json file ending
-
-## To add new Faust modules
-
-In the `faust-modules` folder, add your .dsp files to the `effects` or `generators` folder. Then update `faust-modules/index.json` by hand.
-
-## To rebuild the JavaScript
-
-- install `tsc`: `npm i -g typescript`
-- run `make compile`
-
-## Useful links
+- rename it with a `.json` file extension
 
-- [https://faustplayground.grame.fr](https://faustplayground.grame.fr): the official link on the FaustPlayground website.
-- [https://github.com/grame-cncm/faustplayground](https://github.com/grame-cncm/faustplayground): the github repository
+### To add new Faust modules
+In `public/faust-modules/`, add your .dsp files to `effects/` or `generators/`. Then update `index.json` to include the paths to your new modules.

index.html

@@ -1,6 +1,4 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
+<!doctype html>
 <html class="no-js" lang="en">
 <head>
     <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -10,7 +8,6 @@
 
 	<link rel="shortcut icon" href="favicon.ico" />
 
-<!-- CSS DESCRIPTIONS -->
 	<link rel="stylesheet" href="css/Reset.css" />
 	<link rel="stylesheet" href="css/Main.css" />
 	<link rel="stylesheet" href="css/FaustInterface.css" />
@@ -21,7 +18,6 @@
     <link rel="stylesheet" href="css/Menu.css" />
 	<link rel="stylesheet" href="css/AccelerometerEdit.css" />
     <link rel="stylesheet" href="css/perfect-scrollbar.min.css" />
-<!-- JAVASCRIPT FUNCTIONS -->
 
 	<script>
 	if (window != window.top)
@@ -34,26 +30,16 @@
     </div>
 </body>
 
-<!-- JAVASCRIPT LIBRARIES USED -->
-<script src="js/Lib/AudioContextMonkeyPatch.js"></script>
-<script src="js/Lib/qrcode.js"></script>
-<script src="js/Lib/perfectScrollBar/js/perfect-scrollbar.min.js"></script>
-<script src="js/Lib/libfaust-wasm.js"></script>
-<script src="js/Lib/webaudio-wasm-wrapper.js"></script>
-<script src="js/Lib/FileSaver.min.js"></script>
 <script src="https://apis.google.com/js/client.js?onload=checkAuth"></script>
-<script src="js/faustplayground.js"></script>
 
- <!-- 'init' is defined in faustplayground.js -->
-<script>
-        var isWasm = (typeof (WebAssembly) !== "undefined");
-        if (!isWasm) {
-            alert("WebAssembly is not supported in this browser, the page will not work !")
-        }
-        // 'faust_module' global is defined in webaudio-wasm-wrapper.js file, 'onRuntimeInitialized' will be called when code is ready
-        // (see https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html)
-
-        faust_module['onRuntimeInitialized'] = init;
-    </script>
+<script type="module">
+	import "./src/Lib/AudioContextMonkeyPatch.js"
+    import { init } from "./src/Main.ts";
+    var isWasm = (typeof (WebAssembly) !== "undefined");
+    if (!isWasm) {
+        alert("WebAssembly is not supported in this browser, the page will not work !")
+    }
+    init();
+</script>
 
 </html>