Skip to content

Instantly share code, notes, and snippets.

@gangadhars

gangadhars/termpage.html

Last active March 6, 2022 07:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gangadhars/ca38cd9a44951314f9ed0143c1b13873 to your computer and use it in GitHub Desktop.
Save gangadhars/ca38cd9a44951314f9ed0143c1b13873 to your computer and use it in GitHub Desktop.
Download ZIP
Terminado for xtermjs 3.5.1
Raw
termpage.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Certetrminal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@3.5.1/dist/xterm.css" />
<script src="https://cdn.jsdelivr.net/npm/xterm@3.5.1/dist/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm@3.5.1/dist/addons/terminado/terminado.js"></script>
<script src="{{ static('terminado.js') }}"></script>
<script>
window.onload = function () {
// Test size: 25x80
var termRowHeight = 0.0 + 1.00 * document.getElementById("dummy-screen").offsetHeight / 25;
var termColWidth = 0.0 + (1.02 * document.getElementById("dummy-screen-rows").offsetWidth / 80);
document.getElementById("dummy-screen").setAttribute("style", "display: none");
document.body.style.backgroundColor = '#000';
var protocol = (window.location.protocol.indexOf("https") === 0) ? "wss" : "ws";
var ws_url = protocol + "://" + window.location.host + "{{ws_url_path}}/1";
function calculate_size(element) {
var rows = Math.max(2, Math.floor(element.innerHeight / termRowHeight) - 1);
var cols = Math.max(3, Math.floor(element.innerWidth / termColWidth) - 1);
rows = Math.floor(rows * 0.7678);
cols = Math.floor(cols * 0.70);
alert("resize:" + " " + termRowHeight+ " "+ termColWidth+ " "+ element.innerHeight+" "+
element.innerWidth+" "+ rows+" "+cols);
return { rows: rows, cols: cols };
}
size = calculate_size(window);
var terminal = make_terminal(document.body, size, ws_url);
window.onresize = function () {
console.log("Test")
var geom = calculate_size(window);
terminal.term.resize(geom.cols, geom.rows);
terminal.socket.send(JSON.stringify(["set_size", geom.rows, geom.cols,
window.innerHeight, window.innerWidth]));
alert(window.innerHeight + " " +window.innerWidth);
};
};
</script>
</head>
<body>
<!-- test size: 25x80 -->
<pre id="dummy-screen" style="visibility:hidden; border: white solid 5px; font-family: &quot;DejaVu Sans Mono&quot;, &quot;Liberation Mono&quot;, monospace; font-size: 11px;">0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
<span id="dummy-screen-rows" style="visibility:hidden;">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
<div id="snackbar"></div>
</pre>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment