<html> <body> <!DOCTYPE html> <html> <head> <script src="hterm_all.js"></script> <style> body { position: absolute; padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; } </style> </head> <body> <div id="terminal" style="position:relative; width:100%; height:100%; background-color: black;"></div> <script> const worker = new Worker('worker.js'); const sharedBuffer = new SharedArrayBuffer(300); const sharedArray = new Uint8Array(sharedBuffer, 32); const sharedLock = new Int32Array(sharedBuffer, 0, 32); worker.postMessage(sharedBuffer) hterm.defaultStorage = new lib.Storage.Memory(); function queueKeystroke(str) { //b = new TextEncoder("utf-8").encode(str); let size = sharedArray.length; let n = 1; //str.length; let consumer = Atomics.load(sharedLock, 0); let producer = Atomics.load(sharedLock, 1); if (producer - consumer > size - n) { setTimeout( function() { queueKeystroke(str) }, 100); } //FIXME: handle strings longer than one byte sharedArray[producer % size] = str.charCodeAt(0); //console.log("keystoke="+str+" p="+producer+" c="+consumer+" code="+str.charCodeAt(0)+" sa[p]="+sharedArray[producer]); //memory coherence barrier needed here... Atomics.store(sharedLock, 1, producer + n); Atomics.wake(sharedLock, 1, 1); } function setupHterm() { var t = new hterm.Terminal('proFile'); t.onTerminalReady = function() { // Create a new terminal IO object and give it the foreground. // (The default IO object just prints warning messages about unhandled // things to the the JS console.) const io = t.io.push(); io.onVTKeystroke = (str) => { //if (str.charCodeAt(0) == 13) io.println() //t.io.print(str) queueKeystroke(str); }; io.sendString = (str) => { t.io.print(str); // Just like a keystroke, except str was generated by the terminal itself. // For example, when the user pastes a string. // Most likely you'll do the same thing as onVTKeystroke. }; io.onTerminalResize = (columns, rows) => { // React to size changes here. // Secure Shell pokes at NaCl, which eventually results in // some ioctls on the host. }; } t.decorate(document.querySelector('#terminal')); t.installKeyboard(); worker.onmessage = function(m) { //if (m.data) console.log('[MASTER] msg='+m.data+' cr='+m.data.charCodeAt(m.data.length-1)); if (m.data) t.io.print(m.data); } console.log('[MASTER] terminal ready'); } window.onload = function() { lib.init(setupHterm); }; </script> </body> </html> </body>
<html>
<body>
<!DOCTYPE html>
<html>
<head>
<script src="hterm_all.js"></script>
<style>
body { position: absolute; padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; }
</style>
</head>
<body>
<div id="terminal" style="position:relative; width:100%; height:100%; background-color: black;"></div>
<script>
const worker = new Worker('worker.js');
const sharedBuffer = new SharedArrayBuffer(300);
const sharedArray = new Uint8Array(sharedBuffer, 32);
const sharedLock = new Int32Array(sharedBuffer, 0, 32);
worker.postMessage(sharedBuffer)
hterm.defaultStorage = new lib.Storage.Memory();
function queueKeystroke(str) {
//b = new TextEncoder("utf-8").encode(str);
let size = sharedArray.length;
let n = 1; //str.length;
let consumer = Atomics.load(sharedLock, 0);
let producer = Atomics.load(sharedLock, 1);
if (producer - consumer > size - n) {
setTimeout( function() { queueKeystroke(str) }, 100);
}
//FIXME: handle strings longer than one byte
sharedArray[producer % size] = str.charCodeAt(0);
//console.log("keystoke="+str+" p="+producer+" c="+consumer+" code="+str.charCodeAt(0)+" sa[p]="+sharedArray[producer]);
//memory coherence barrier needed here...
Atomics.store(sharedLock, 1, producer + n);
Atomics.wake(sharedLock, 1, 1);
}
function setupHterm() {
var t = new hterm.Terminal('proFile');
t.onTerminalReady = function() {
// Create a new terminal IO object and give it the foreground.
// (The default IO object just prints warning messages about unhandled
// things to the the JS console.)
const io = t.io.push();
io.onVTKeystroke = (str) => {
//if (str.charCodeAt(0) == 13) io.println()
//t.io.print(str)
queueKeystroke(str);
};
io.sendString = (str) => {
t.io.print(str);
// Just like a keystroke, except str was generated by the terminal itself.
// For example, when the user pastes a string.
// Most likely you'll do the same thing as onVTKeystroke.
};
io.onTerminalResize = (columns, rows) => {
// React to size changes here.
// Secure Shell pokes at NaCl, which eventually results in
// some ioctls on the host.
};
}
t.decorate(document.querySelector('#terminal'));
t.installKeyboard();
worker.onmessage = function(m) {
//if (m.data) console.log('[MASTER] msg='+m.data+' cr='+m.data.charCodeAt(m.data.length-1));
if (m.data) t.io.print(m.data);
}
console.log('[MASTER] terminal ready');
}
window.onload = function() {
lib.init(setupHterm);
};
</script>
</body>
</html>
</body>