2021-03-21 22:54:39 +01:00
|
|
|
<!DOCTYPE html> <html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>FTXUI examples WebAssembly</title>
|
2022-03-13 18:51:46 +01:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@4.18.0/lib/xterm.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-webgl@0.11.4/lib/xterm-addon-webgl.min.js"></script>
|
2022-08-21 23:04:32 +02:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>
|
2021-03-21 22:54:39 +01:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.11.0/css/xterm.css"></link>
|
2022-07-09 18:39:01 +02:00
|
|
|
<!--Add COOP/COEP via a ServiceWorker to use SharedArrayBuffer-->
|
|
|
|
|
<script>
|
|
|
|
|
if ("serviceWorker" in navigator && !window.crossOriginIsolated) {
|
|
|
|
|
navigator.serviceWorker.register(new URL("./sw.js", location.href)).then(
|
|
|
|
|
registration => {
|
|
|
|
|
if (registration.active && !navigator.serviceWorker.controller) {
|
|
|
|
|
window.location.reload();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2021-03-21 22:54:39 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script id="example_script"></script>
|
|
|
|
|
<div class="page">
|
|
|
|
|
<h1>FTXUI WebAssembly Example </h1>
|
|
|
|
|
<p>
|
2024-05-06 06:54:17 -04:00
|
|
|
<a href="https://github.com/ArthurSonzogni/FTXUI">FTXUI</a> is a simple
|
|
|
|
|
functional C++ library for terminal user interface. <br/>
|
|
|
|
|
This showcases the: <a href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a> folder. <br/>
|
2021-03-21 22:54:39 +01:00
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
On this page, you can try all the examples contained in: <a
|
|
|
|
|
href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a>
|
|
|
|
|
Those are compiled using WebAssembly.
|
|
|
|
|
</p>
|
|
|
|
|
<select id="selectExample"></select>
|
|
|
|
|
<div id="terminal"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
2021-07-31 22:02:48 +05:30
|
|
|
const example_list = "@EXAMPLES@".split(";");
|
2021-03-21 22:54:39 +01:00
|
|
|
|
|
|
|
|
const url_search_params = new URLSearchParams(window.location.search);
|
2021-07-31 22:02:48 +05:30
|
|
|
const example = url_search_params.get("file") || "dom/color_gallery";
|
2021-04-25 16:58:16 +02:00
|
|
|
const select = document.getElementById("selectExample");
|
2021-03-21 22:54:39 +01:00
|
|
|
|
|
|
|
|
for(var i = 0; i < example_list.length; i++) {
|
|
|
|
|
var opt = example_list[i];
|
|
|
|
|
var el = document.createElement("option");
|
|
|
|
|
el.textContent = opt;
|
|
|
|
|
el.value = opt;
|
|
|
|
|
select.appendChild(el);
|
|
|
|
|
}
|
2021-04-25 16:58:16 +02:00
|
|
|
select.selectedIndex = example_list.findIndex(path => path == example) || 0;
|
2021-03-21 22:54:39 +01:00
|
|
|
select.addEventListener("change", () => {
|
2021-04-25 16:58:16 +02:00
|
|
|
location.href = (location.href).split('?')[0] + "?file=" +
|
|
|
|
|
example_list[select.selectedIndex];
|
2021-03-21 22:54:39 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let stdin_buffer = [];
|
2022-03-31 02:17:43 +02:00
|
|
|
const stdin = () => {
|
2021-03-21 22:54:39 +01:00
|
|
|
return stdin_buffer.shift() || 0;
|
|
|
|
|
}
|
|
|
|
|
|
2022-03-31 02:17:43 +02:00
|
|
|
let stdout_buffer = [];
|
|
|
|
|
const stdout = code => {
|
2021-03-21 22:54:39 +01:00
|
|
|
if (code == 0) {
|
|
|
|
|
term.write(new Uint8Array(stdout_buffer));
|
|
|
|
|
stdout_buffer = [];
|
|
|
|
|
} else {
|
|
|
|
|
stdout_buffer.push(code)
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-31 02:17:43 +02:00
|
|
|
let stderrbuffer = [];
|
|
|
|
|
const stderr = code => {
|
|
|
|
|
if (code == 0 || code == 10) {
|
|
|
|
|
console.error(String.fromCodePoint(...stderrbuffer));
|
|
|
|
|
stderrbuffer = [];
|
|
|
|
|
} else {
|
|
|
|
|
stderrbuffer.push(code)
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-03-13 18:51:46 +01:00
|
|
|
const term = new Terminal();
|
2022-08-21 23:04:32 +02:00
|
|
|
const term_element = document.querySelector('#terminal');
|
|
|
|
|
term.open(term_element);
|
|
|
|
|
|
|
|
|
|
const webgl_addon = new (WebglAddon.WebglAddon)();
|
|
|
|
|
term.loadAddon(webgl_addon);
|
|
|
|
|
|
2021-03-21 22:54:39 +01:00
|
|
|
const onBinary = e => {
|
|
|
|
|
for(c of e)
|
|
|
|
|
stdin_buffer.push(c.charCodeAt(0));
|
|
|
|
|
}
|
|
|
|
|
term.onBinary(onBinary);
|
|
|
|
|
term.onData(onBinary)
|
2022-11-11 14:07:27 +01:00
|
|
|
term.resize(140,43);
|
2021-03-21 22:54:39 +01:00
|
|
|
window.Module = {
|
2022-03-31 02:17:43 +02:00
|
|
|
preRun: () => {
|
|
|
|
|
FS.init(stdin, stdout, stderr);
|
|
|
|
|
},
|
2021-03-21 22:54:39 +01:00
|
|
|
postRun: [],
|
2022-08-21 23:04:32 +02:00
|
|
|
onRuntimeInitialized: () => {
|
2022-11-11 14:07:27 +01:00
|
|
|
if (window.Module._ftxui_on_resize == undefined)
|
|
|
|
|
return;
|
|
|
|
|
|
2022-08-21 23:04:32 +02:00
|
|
|
const fit_addon = new (FitAddon.FitAddon)();
|
|
|
|
|
term.loadAddon(fit_addon);
|
|
|
|
|
fit_addon.fit();
|
|
|
|
|
const resize_handler = () => {
|
|
|
|
|
const {cols, rows} = fit_addon.proposeDimensions();
|
|
|
|
|
term.resize(cols, rows);
|
|
|
|
|
window.Module._ftxui_on_resize(cols, rows);
|
|
|
|
|
};
|
|
|
|
|
const resize_observer = new ResizeObserver(resize_handler);
|
|
|
|
|
resize_observer.observe(term_element);
|
|
|
|
|
resize_handler();
|
|
|
|
|
|
|
|
|
|
// Disable scrollbar
|
|
|
|
|
term.write('\x1b[?47h')
|
|
|
|
|
},
|
2021-03-21 22:54:39 +01:00
|
|
|
};
|
2021-12-23 14:17:33 +01:00
|
|
|
|
|
|
|
|
const words = example.split('/')
|
|
|
|
|
words[1] = "ftxui_example_" + words[1] + ".js"
|
|
|
|
|
document.querySelector("#example_script").src = words.join('/');
|
2021-03-21 22:54:39 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
2022-03-13 18:51:46 +01:00
|
|
|
|
2021-03-21 22:54:39 +01:00
|
|
|
body {
|
|
|
|
|
background-color:#EEE;
|
|
|
|
|
padding:20px;
|
|
|
|
|
font-family: Helvetica, sans-serif;
|
|
|
|
|
font-size: 130%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page {
|
|
|
|
|
max-width:1300px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
select {
|
|
|
|
|
display:block;
|
|
|
|
|
padding: .6em 1.4em .5em .8em;
|
|
|
|
|
border-radius: 20px 20px 0px 0px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
|
|
|
|
color: #444;
|
|
|
|
|
line-height: 1.3;
|
|
|
|
|
background-color:black;
|
|
|
|
|
border:0px;
|
|
|
|
|
color:white;
|
|
|
|
|
transition: color 0.2s linear;
|
|
|
|
|
transition: background-color 0.2s linear;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#terminal {
|
2022-08-21 23:04:32 +02:00
|
|
|
width:100%;
|
|
|
|
|
height: 500px;
|
|
|
|
|
height: calc(clamp(200px, 100vh - 300px, 900px));
|
|
|
|
|
overflow: hidden;
|
2021-03-21 22:54:39 +01:00
|
|
|
border:none;
|
|
|
|
|
padding:auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</html>
|
