Add more minimal webR examples to src/examples dir

r-wasm · Jul 25, 2023 · dba470f · dba470f
1 parent 4fe8725
commit dba470f
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@
 /tools/flang/*llvm-project
 /R/download
 /R/build
+/src/examples/serve.R
 /src/coverage
 /src/webR/config.[jt]s
 /src/dist

diff --git a/src/examples/eval/eval.js b/src/examples/eval/eval.js
@@ -0,0 +1,30 @@
+import { WebR } from 'https://webr.r-wasm.org/latest/webr.mjs';
+const webR = new WebR();
+
+// Remove the loading message once webR is ready
+await webR.init();
+document.getElementById('loading').remove();
+
+// Evaluate some R code using evalR
+let result = await webR.evalR('rnorm(10,5,1)');
+
+// Display the results
+try {
+  let output = await result.toArray();
+  let text = output.join('\n');
+  document.getElementById('out').innerText += `Result of evaluating with evalR():\n${text}\n\n`;
+} finally {
+  webR.destroy(result);
+}
+
+// Capture some R output using a Shelter and captureR
+let shelter = await new webR.Shelter();
+try {
+  let capture = await shelter.captureR('print(rnorm(100,5,1))');
+
+  // Display the results
+  let text = capture.output.map((val) => val.data).join('\n');
+  document.getElementById('out').innerText += `Result of capturing with captureR():\n${text}\n\n`;
+} finally {
+  shelter.purge();
+}
diff --git a/src/examples/eval/index.html b/src/examples/eval/index.html
@@ -0,0 +1,13 @@
+<html>
+  <head>
+    <title>WebR Evaluation Example</title>
+  </head>
+  <body>
+    <div>
+      <h1>WebR Evaluation Example</h1>
+      <p id="loading">Loading webR, please wait...</p>
+      <pre><code id="out"></code></pre>
+    </div>
+    <script type="module" src="./eval.js"></script>
+  </body>
+</html>
diff --git a/src/examples/plot-multiple/index.html b/src/examples/plot-multiple/index.html
@@ -0,0 +1,13 @@
+<html>
+  <head>
+      <title>WebR Multiple Plots Example</title>
+  </head>
+  <body>
+    <h1>WebR Multiple Plots Example</h1>
+    <p id="loading">Please wait, webR is loading...</p>
+    <button id="plot-button" disabled="true">Run graphics demo</button>
+    <p>See the JavaScript console for additional output messages.</p>
+    <div id="plot-container"></div>
+    <script type="module" src="./plots.js"></script>
+  </body>
+</html>
diff --git a/src/examples/plot-multiple/plots.js b/src/examples/plot-multiple/plots.js
@@ -0,0 +1,47 @@
+import { WebR } from 'https://webr.r-wasm.org/latest/webr.mjs';
+const webR = new WebR();
+let canvas = null;
+let loading = document.getElementById('loading');
+let container = document.getElementById('plot-container');
+let button = document.getElementById('plot-button');
+
+button.onclick = () => {
+  container.replaceChildren();
+  webR.evalRVoid(`
+    webr::canvas()
+    demo(graphics)
+    demo(persp)
+    dev.off()
+  `);
+};
+
+(async () => {
+  // Remove the loading message once webR is ready
+  await webR.init();
+  loading.remove();
+  button.removeAttribute('disabled');
+
+  // Handle webR output messages in an async loop
+  for (;;) {
+    const output = await webR.read();
+    switch (output.type) {
+      case 'canvas':
+        if (output.data.event === 'canvasImage') {
+          // Add plot image data to the current canvas element
+          canvas.getContext('2d').drawImage(output.data.image, 0, 0);
+        } else if (output.data.event === 'canvasNewPage') {
+          // Create a new canvas element
+          canvas = document.createElement('canvas');
+          canvas.setAttribute('width', '1008');
+          canvas.setAttribute('height', '1008');
+          canvas.style.width = "450px";
+          canvas.style.height = "450px";
+          canvas.style.display = "inline-block";
+          container.appendChild(canvas);
+        }
+        break;
+      default:
+        console.log(output);
+    }
+  }
+})();
diff --git a/src/examples/plot-vfs/index.html b/src/examples/plot-vfs/index.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <title>WebR PDF Download Example</title>
+  </head>
+  <body>
+    <h1>WebR PDF Download Example</h1>
+    <p id="loading">Please wait, webR is working on producing a file to download...</div>
+    <p id="link-container"></p>
+    <script type="module" src="./vfs.js"></script>
+  </body>
+</html>
diff --git a/src/examples/plot-vfs/vfs.js b/src/examples/plot-vfs/vfs.js
@@ -0,0 +1,24 @@
+import { WebR } from 'https://webr.r-wasm.org/latest/webr.mjs';
+const webR = new WebR();
+await webR.init();
+
+// Create a PDF file containing a plot
+await webR.evalRVoid(`
+  pdf()
+  hist(rnorm(10000))
+  dev.off()
+`);
+
+// Obtain the contents of the file from the VFS
+const plotData = await webR.FS.readFile('/home/web_user/Rplots.pdf');
+
+// Create a link for the user to download the file contents
+const blob = new Blob([plotData], { type: 'application/octet-stream' });
+const link = document.createElement('a');
+link.download = 'Rplots.pdf';
+link.href = URL.createObjectURL(blob);
+link.textContent = 'Click to download PDF';
+document.getElementById('link-container').appendChild(link);
+
+// Everything is ready, remove the loading message
+document.getElementById('loading').remove();
diff --git a/src/examples/plot/index.html b/src/examples/plot/index.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <title>WebR Plotting Example</title>
+  </head>
+  <body>
+    <p id="loading">Loading webR, please wait...</p>
+    <p>See the JavaScript console for additional output messages.</p>
+    <canvas id="plot-canvas" width="1008" height="1008"></canvas>
+    <script type="module" src="./plot.js"></script>
+  </body>
+</html>
diff --git a/src/examples/plot/plot.js b/src/examples/plot/plot.js
@@ -0,0 +1,25 @@
+import { WebR } from 'https://webr.r-wasm.org/latest/webr.mjs';
+const webR = new WebR();
+
+
+// Remove the loading message once webR is ready
+await webR.init();
+document.getElementById('loading').remove();
+
+// Execute R plotting code
+await webR.evalRVoid(`
+  webr::canvas()
+  plot(rnorm(1000), rnorm(1000), xlab="x axis label", ylab="y axis label", main="An rnorm plot")
+  dev.off()
+`);
+
+// Flush the output queue and handle the output messages from webR
+const msgs = await webR.flush();
+msgs.forEach(msg => {
+    if (msg.type === 'canvas' && msg.data.event === 'canvasImage') {
+      const canvas = document.getElementById('plot-canvas');
+      canvas.getContext('2d').drawImage(msg.data.image, 0, 0);
+    } else {
+      console.log(msg);
+    }
+});