Replies: 2 comments 3 replies
-
|
What do you mean by "a terminal on the browser" and "canvas/webgl"? Like you want to use the underlying terminal session for data transport, and render the images outside of the terminal yourself? Thats possible by doing these steps:
You can also have a look at https://github.com/jerch/xterm-addon-image, which supports sixel images for terminal inline printing. Other formats are not supported currently, but could be added by other format handlers. In https://github.com/jerch/xterm-addon-image/blob/a53916f327902bd2a0f77fcdef2756a3cdd2124c/src/SixelHandler.ts#L101 you see how to construct a canvas object, that you can pass over to your output system (skipping the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @jerch , I realize that I may be asking really rookie JS questions - I'd appreciate your patience :) The output I am going for is something like this - prompt> command 1 What I am struggling with is the ability to "import ImageAddon" After trying some, I figured that I would have to try the HTML with a server to get rid of some of the CORS issues. Even so, I cant seem to figure out how to use the image addon. My JS is in "main.js" that I src in from the HTML with the "type=module" and then I have the following import statement in main.js import { ImageAddon } from './node_modules/xterm-addon-image/lib/xterm-addon-image.js' I get the "ambiguous indirect export: ImageAddon". I also note that I did not have to do any of this to use "Terminal" - I simply scripit src'ed xterm.js and did a new Terminal. Perhaps the working sample for the screenshot at /node_modules/xterm-addon-image/lib/xterm-addon-image.js may help. |
Beta Was this translation helpful? Give feedback.
-
xterm.js and its addons dont support ESM yet, thus module import will not work. xterm.js exports the terminal ctor directly as
Without a proper http server in between most advanced webpage stuff will not work anymore in browsers these days. Below is a quick stub, which still works from direct file invocation. <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>terminal test</title>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css">
<script src="node_modules/xterm/lib/xterm.js"></script>
<script src="node_modules/xterm-addon-image/lib/xterm-addon-image.js"></script>
</head>
<body>
<div id="terminal"></div>
<button id="image-demo1">example 1</button>
<button id="image-demo2">example 2</button>
<script>
const term = new Terminal();
const imageAddon = new ImageAddon.ImageAddon();
term.loadAddon(imageAddon);
term.open(document.getElementById('terminal'));
// tiny in-browser image url REPL
// This is normally done by the PTY backend with a shell.
term.write('fetch> ');
let buf = [];
const repl = async data => {
for (let i = 0; i < data.length; ++i) {
const c = data[i];
if (c === '\r') {
term.write('\r\n');
if (buf.length) {
const url = buf.join('');
buf.length = 0;
try {
const resp = await fetch(url);
const buffer = await resp.arrayBuffer();
term.write(new Uint8Array(buffer));
} catch (e) {
const msg = !e ? 'Unknown Error...' : e.message || e;
term.write(`\x1b[31m${msg.replace('\n', '\r\n')}\x1b[m`);
}
term.write('\r\n');
}
term.write('fetch> ');
} else {
buf.push(c);
term.write(c);
}
}
};
term.onData(repl);
// 2 sixel examples
document.getElementById('image-demo1').addEventListener('click',
() => repl('https://raw.githubusercontent.com/saitoha/libsixel/master/images/snake.six\r'));
document.getElementById('image-demo2').addEventListener('click',
() => repl('https://raw.githubusercontent.com/jerch/node-sixel/master/testfiles/test2.sixel\r'));
</script>
</body>
</html>Note that the example short circuits things as in-browser REPL. Normally xterm.js is meant to run behind a real system PTY, but thats more involved to set up and out of scope for this tiny example. |
Beta Was this translation helpful? Give feedback.
-
|
AWESOME!!!! .. Just what I was looking for. About your comment about "real system PTY" - I am planning to implement term.onkey() - would that be incorrect usage? |
Beta Was this translation helpful? Give feedback.
-
|
Most integrations dont need
|
Beta Was this translation helpful? Give feedback.
-
I am looking to build a demo that would be a terminal on the browser that will allow people to write commands that can output images (canvas/webgl). I looked for them but I could not really find it.
What would be awesome would be a standalone HTML sample that uses the published xterm.js and other addons. I'd really appreciate any pointers here.
Beta Was this translation helpful? Give feedback.
All reactions