From dba470f58f123074a44f7f03d9c01c0843674d01 Mon Sep 17 00:00:00 2001 From: George Stagg Date: Tue, 25 Jul 2023 10:32:18 +0100 Subject: [PATCH] Add more minimal webR examples to src/examples dir --- .gitignore | 1 + src/examples/eval/eval.js | 30 +++++++++++++++++ src/examples/eval/index.html | 13 ++++++++ src/examples/plot-multiple/index.html | 13 ++++++++ src/examples/plot-multiple/plots.js | 47 +++++++++++++++++++++++++++ src/examples/plot-vfs/index.html | 11 +++++++ src/examples/plot-vfs/vfs.js | 24 ++++++++++++++ src/examples/plot/index.html | 11 +++++++ src/examples/plot/plot.js | 25 ++++++++++++++ 9 files changed, 175 insertions(+) create mode 100644 src/examples/eval/eval.js create mode 100644 src/examples/eval/index.html create mode 100644 src/examples/plot-multiple/index.html create mode 100644 src/examples/plot-multiple/plots.js create mode 100644 src/examples/plot-vfs/index.html create mode 100644 src/examples/plot-vfs/vfs.js create mode 100644 src/examples/plot/index.html create mode 100644 src/examples/plot/plot.js diff --git a/.gitignore b/.gitignore index b5ea0e4b..755dd19c 100644 --- 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 new file mode 100644 index 00000000..5c675a25 --- /dev/null +++ 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 new file mode 100644 index 00000000..f1723c26 --- /dev/null +++ b/src/examples/eval/index.html @@ -0,0 +1,13 @@ + + + WebR Evaluation Example + + +
+

WebR Evaluation Example

+

Loading webR, please wait...

+
+
+ + + diff --git a/src/examples/plot-multiple/index.html b/src/examples/plot-multiple/index.html new file mode 100644 index 00000000..49a4d7ec --- /dev/null +++ b/src/examples/plot-multiple/index.html @@ -0,0 +1,13 @@ + + + WebR Multiple Plots Example + + +

WebR Multiple Plots Example

+

Please wait, webR is loading...

+ +

See the JavaScript console for additional output messages.

+
+ + + diff --git a/src/examples/plot-multiple/plots.js b/src/examples/plot-multiple/plots.js new file mode 100644 index 00000000..dab179e4 --- /dev/null +++ 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 new file mode 100644 index 00000000..38da924d --- /dev/null +++ b/src/examples/plot-vfs/index.html @@ -0,0 +1,11 @@ + + + WebR PDF Download Example + + +

WebR PDF Download Example

+

Please wait, webR is working on producing a file to download... +

+ + + diff --git a/src/examples/plot-vfs/vfs.js b/src/examples/plot-vfs/vfs.js new file mode 100644 index 00000000..40fbb313 --- /dev/null +++ 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 new file mode 100644 index 00000000..4cbf1724 --- /dev/null +++ b/src/examples/plot/index.html @@ -0,0 +1,11 @@ + + + WebR Plotting Example + + +

Loading webR, please wait...

+

See the JavaScript console for additional output messages.

+ + + + diff --git a/src/examples/plot/plot.js b/src/examples/plot/plot.js new file mode 100644 index 00000000..2e3b451b --- /dev/null +++ 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); + } +});