FTXUI/examples/index.html

149 lines
4.1 KiB
HTML
Raw Normal View History

2021-03-22 05:54:39 +08:00
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8">
<title>FTXUI examples WebAssembly</title>
2022-03-14 01:51:46 +08: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>
2021-03-22 05:54:39 +08:00
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.11.0/css/xterm.css"></link>
<!--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-22 05:54:39 +08:00
</head>
<body>
<script id="example_script"></script>
<div class="page">
<h1>FTXUI WebAssembly Example </h1>
<p>
2021-03-22 07:26:52 +08:00
<a href="https://github.com/ArthurSonzogni/FTXUI">FTXUI</a> is a single
2021-03-22 05:54:39 +08:00
C++ library for terminal user interface.
</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>
const example_list = "@EXAMPLES@".split(";");
2021-03-22 05:54:39 +08:00
const url_search_params = new URLSearchParams(window.location.search);
const example = url_search_params.get("file") || "dom/color_gallery";
const select = document.getElementById("selectExample");
2021-03-22 05:54:39 +08: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);
}
select.selectedIndex = example_list.findIndex(path => path == example) || 0;
2021-03-22 05:54:39 +08:00
select.addEventListener("change", () => {
location.href = (location.href).split('?')[0] + "?file=" +
example_list[select.selectedIndex];
2021-03-22 05:54:39 +08:00
});
let stdin_buffer = [];
2022-03-31 08:17:43 +08:00
const stdin = () => {
2021-03-22 05:54:39 +08:00
return stdin_buffer.shift() || 0;
}
2022-03-31 08:17:43 +08:00
let stdout_buffer = [];
const stdout = code => {
2021-03-22 05:54:39 +08:00
if (code == 0) {
term.write(new Uint8Array(stdout_buffer));
stdout_buffer = [];
} else {
stdout_buffer.push(code)
}
}
2022-03-31 08:17:43 +08:00
let stderrbuffer = [];
const stderr = code => {
if (code == 0 || code == 10) {
console.error(String.fromCodePoint(...stderrbuffer));
stderrbuffer = [];
} else {
stderrbuffer.push(code)
}
}
2022-03-14 01:51:46 +08:00
const term = new Terminal();
2021-03-22 05:54:39 +08:00
term.open(document.querySelector('#terminal'));
term.resize(140,43);
2022-03-14 01:51:46 +08:00
term.loadAddon(new (WebglAddon.WebglAddon)());
2021-03-22 05:54:39 +08:00
const onBinary = e => {
for(c of e)
stdin_buffer.push(c.charCodeAt(0));
}
term.onBinary(onBinary);
term.onData(onBinary)
window.Module = {
2022-03-31 08:17:43 +08:00
preRun: () => {
FS.init(stdin, stdout, stderr);
},
2021-03-22 05:54:39 +08:00
postRun: [],
onRuntimeInitialized: () => {},
};
const words = example.split('/')
words[1] = "ftxui_example_" + words[1] + ".js"
document.querySelector("#example_script").src = words.join('/');
2021-03-22 05:54:39 +08:00
</script>
<style>
2022-03-14 01:51:46 +08:00
2021-03-22 05:54:39 +08: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 {
padding:10px;
border:none;
background-color:black;
padding:auto;
}
</style>
</html>