Home - maxng07/ted-gui GitHub Wiki
This page provides information on the integration of TED Wasm used in TED-GUI App. Hopefully this will provide enough information to build your own html and javascript to interact with TED Wasm.
A good place to start with the basic of WebAssembly/Wasm will be WebAssembly Website and Mozilla Site on using WebAssembly on browser. TED-GUI wasm was an extension of TED app, both written using GO. It has the same application logic but with slight modification and compiled for wasm. GOlang has since version 1.11 supported WASM/JS as a beta port. Some of the works are still in development. Wasm interacts with the browser front-end using js, and it is possible to build a html web app with wasm interacting with front-end user interface using js. Go WebAssembly provides the documentation and Syscall/js provides the documentation on the supplied js API available for js to interact with GO function within wasm.
However, TED-GUI wasm uses a much simplier approach. Using the same concept as TED, it exposes the CLI through go/flags and allows js to interact with the wasm by passing the necessary CLI arguments. This Wiki documents the needed CLI arguments and shows how js can interact with the GO/flag using argv.js. With this information, you can build a html or WebApp using JS with TED-GUI wasm.
This is taken from a Firefox browser with developer console. TED-GUI wasm is triggered without any arguments and the following error is output to console. The binary expects the following argument to be supplied to it
-e Encryption set to true by default, to decrypt set -e=false or -e=0
-p passphrase to be used for encryption or decryption. Please remember the passphrase.
-t text to be encipher/decipher
From the same console, you will also notice an array with [ "ted-wb.wasm", "-p", "", "", "-t", "" ] This is javascript using argv.js to pass the arguments in array to wasm. The name of the wasm must come first as the js api expects it, but the rest of the arguments need not be in the right sequence, however all 3 arguments are needed.
An error free execution would look like this
Notice the array [ "ted-wb.wasm", "-p", "123", "-e", "-t", "hello%20world!" ] which correlates to the input and selection on the html form.
You can design your html or webapp and provides the 3 necessary inputs to TED-GUI wasm for computing.
Since Go version 1.11, Golang supply wasm_exec.js and wasm_exec.html as part of the package. The html and js provides a sample on loading your wasm file in web browser. Go WebAssembly describe this and Mozilla Site for WebAssembly gives the detail description on how WebAssembly is loaded.
TED-GUI html and js modified from the supplied GO package wasm_exec.html and wasm_exec.js to pass the CLI arguments from the html form front-end using javascript.
On TED-GUI html, it loads wasm_exec.js and loads the wasm binary using WebAssembly instantiateStreaming method as describe in Mozilla Documentation .
<html>
<head>
<meta charset="utf-8"/>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("ted-wb.wasm"), go.importObject).then((result) => {
mod = result.module;
inst = result.instance;
});
</script>
</head>
<body></body>
</html>
And insert the CLI argument for TED after obtaining it from User's input via FORM or other mechanism by
go.argv = ['ted-wb.wasm', '-p', pw, ed, '-t', text];
finally launching function to trigger "go.run" by run();
async function run() {
await go.run(inst);
inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
}
To obtain the results from ted-wb.wasm, we will have to edit wasm_exec.js, otherwise the results is only send to debug console via console.log. In TED-GUI, the compute results from ted-wb.wasm is contain within a variable "outtext", which is used in textarea form display.
global.fs = {
constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused
writeSync(fd, buf) {
outputBuf += decoder.decode(buf);
const nl = outputBuf.lastIndexOf("\n");
if (nl != -1) {
outtext.value += outputBuf.substr(0,nl) +"\n"; //result output to outtext
console.log(outputBuf.substr(0, nl));
outputBuf = outputBuf.substr(nl + 1);
TED-GUI uses a simplified approach to provide Graphical interface for TED, by modifying the supplied wasm_exec.js and adding the necessary javascript to the html with Form inputs. With the documentation, you can create your own html or WebApp using TED wasm. I can't wait to see what you have create.
See also the possible Use-Case on TED-GUI