Removed old testing pages
This commit is contained in:
@@ -1,81 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Python in Xterm.js</title>
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" />
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
|
|
||||||
<script src="http://skulpt.org/js/skulpt.min.js"></script>
|
|
||||||
<script src="http://skulpt.org/js/skulpt-stdlib.js"></script>
|
|
||||||
<style>
|
|
||||||
#terminal {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="terminal"></div>
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const term = new Terminal({ cursorBlink: true });
|
|
||||||
term.open(document.getElementById('terminal'));
|
|
||||||
|
|
||||||
let inputResolve;
|
|
||||||
let inputBuffer = '';
|
|
||||||
let acceptingInput = false;
|
|
||||||
|
|
||||||
function outf(text) {
|
|
||||||
term.write(text.replace(/\n/g, '\r\n'));
|
|
||||||
}
|
|
||||||
|
|
||||||
function inputf(promptText = '') {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
inputBuffer = '';
|
|
||||||
inputResolve = resolve;
|
|
||||||
acceptingInput = true;
|
|
||||||
term.write(promptText);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
term.onKey(e => {
|
|
||||||
if (!acceptingInput) return;
|
|
||||||
const key = e.key;
|
|
||||||
const ev = e.domEvent;
|
|
||||||
|
|
||||||
if (ev.key === 'Enter') {
|
|
||||||
term.write('\r\n');
|
|
||||||
if (inputResolve) {
|
|
||||||
inputResolve(inputBuffer);
|
|
||||||
inputResolve = null;
|
|
||||||
acceptingInput = false;
|
|
||||||
}
|
|
||||||
} else if (ev.key === 'Backspace') {
|
|
||||||
if (inputBuffer.length > 0) {
|
|
||||||
inputBuffer = inputBuffer.slice(0, -1);
|
|
||||||
term.write('\b \b');
|
|
||||||
}
|
|
||||||
} else if (key.length === 1) {
|
|
||||||
inputBuffer += key;
|
|
||||||
term.write(key);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function runCode(code) {
|
|
||||||
term.clear();
|
|
||||||
Sk.configure({
|
|
||||||
output: outf,
|
|
||||||
read: x => Sk.builtinFiles.files[x],
|
|
||||||
inputfun: inputf,
|
|
||||||
inputfunTakesPrompt: true
|
|
||||||
});
|
|
||||||
Sk.misceval.asyncToPromise(() => Sk.importMainWithBody('<stdin>', false, code, true))
|
|
||||||
.catch(err => outf(err.toString() + '\n'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Example code to run immediately
|
|
||||||
runCode('name = input("Name: ")\nprint("Hello, " + name)');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
52
skulpt.html
52
skulpt.html
@@ -1,52 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="http://skulpt.org/js/skulpt.min.js"></script>
|
|
||||||
<script src="http://skulpt.org/js/skulpt-stdlib.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script>
|
|
||||||
let cb;
|
|
||||||
|
|
||||||
function outf(t) {
|
|
||||||
document.getElementById("output").innerHTML += t;
|
|
||||||
}
|
|
||||||
|
|
||||||
function inputf(prompt) {
|
|
||||||
document.getElementById("promptLbl").textContent = prompt;
|
|
||||||
const box = document.getElementById("inpBox");
|
|
||||||
document.getElementById("inpC").style.display = "block";
|
|
||||||
box.value = "";
|
|
||||||
box.focus();
|
|
||||||
return new Promise(r => cb = r);
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitInput() {
|
|
||||||
const box = document.getElementById("inpBox");
|
|
||||||
document.getElementById("inpC").style.display = "none";
|
|
||||||
cb(box.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function runit() {
|
|
||||||
document.getElementById("output").innerHTML = "";
|
|
||||||
document.getElementById("inpC").style.display = "none";
|
|
||||||
Sk.configure({
|
|
||||||
output: outf,
|
|
||||||
read: x => Sk.builtinFiles.files[x],
|
|
||||||
inputfun: inputf,
|
|
||||||
inputfunTakesPrompt: true
|
|
||||||
});
|
|
||||||
Sk.misceval.asyncToPromise(() => Sk.importMainWithBody(" < stdin > ", false, document.getElementById("yourcode").value, true));
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<textarea id="yourcode" cols="40" rows="6">name = raw_input("Name: ")
|
|
||||||
print "Hello, " + name
|
|
||||||
</textarea>
|
|
||||||
<button onclick="runit()">Run</button>
|
|
||||||
<pre id="output"></pre>
|
|
||||||
<div id="inpC" style="display:none;">
|
|
||||||
<label id="promptLbl"></label>
|
|
||||||
<input id="inpBox" onkeypress="event.key==='Enter' && submitInput()">
|
|
||||||
<button onclick="submitInput()">OK</button>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,132 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="http://skulpt.org/js/skulpt.min.js" type="text/javascript"></script>
|
|
||||||
<script src="http://skulpt.org/js/skulpt-stdlib.js" type="text/javascript"></script>
|
|
||||||
<style>
|
|
||||||
/* Simple styling for better separation of input/output */
|
|
||||||
#input-container {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
#skulpt-input {
|
|
||||||
width: 80%;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
// output functions are configurable. This one just appends some text
|
|
||||||
// to a pre element.
|
|
||||||
function outf(text) {
|
|
||||||
var mypre = document.getElementById("output");
|
|
||||||
mypre.innerHTML = mypre.innerHTML + text;
|
|
||||||
}
|
|
||||||
|
|
||||||
function builtinRead(x) {
|
|
||||||
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
|
|
||||||
throw "File not found: '" + x + "'";
|
|
||||||
return Sk.builtinFiles["files"][x];
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Custom Inline Input Function ---
|
|
||||||
var inputCallback;
|
|
||||||
|
|
||||||
function inputf(prompt) {
|
|
||||||
// Display the prompt text to the user
|
|
||||||
document.getElementById("input-prompt").textContent = prompt;
|
|
||||||
|
|
||||||
// Show the input container
|
|
||||||
document.getElementById("input-container").style.display = 'block';
|
|
||||||
|
|
||||||
// Set focus on the input field
|
|
||||||
var inputField = document.getElementById("skulpt-input");
|
|
||||||
inputField.value = ''; // Clear previous input
|
|
||||||
inputField.focus();
|
|
||||||
|
|
||||||
// Return a promise that Skulpt will wait for
|
|
||||||
return new Promise(function(resolve, reject) {
|
|
||||||
inputCallback = resolve;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to handle the submission of inline input
|
|
||||||
function submitInput() {
|
|
||||||
var inputField = document.getElementById("skulpt-input");
|
|
||||||
var inputValue = inputField.value;
|
|
||||||
|
|
||||||
// Hide the input container again
|
|
||||||
document.getElementById("input-container").style.display = 'none';
|
|
||||||
|
|
||||||
// Fulfill the promise with the user's input value
|
|
||||||
if (inputCallback) {
|
|
||||||
inputCallback(inputValue);
|
|
||||||
inputCallback = null; // Clear the callback
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// ------------------------------------
|
|
||||||
|
|
||||||
// Here's everything you need to run a python program in skulpt
|
|
||||||
function runit() {
|
|
||||||
var prog = document.getElementById("yourcode").value;
|
|
||||||
var mypre = document.getElementById("output");
|
|
||||||
mypre.innerHTML = '';
|
|
||||||
|
|
||||||
// Hide the input container when a new run starts
|
|
||||||
document.getElementById("input-container").style.display = 'none';
|
|
||||||
|
|
||||||
Sk.pre = "output";
|
|
||||||
// Configure the custom input function: inputf
|
|
||||||
Sk.configure({output:outf, read:builtinRead, input:inputf});
|
|
||||||
|
|
||||||
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
|
|
||||||
var myPromise = Sk.misceval.asyncToPromise(function() {
|
|
||||||
return Sk.importMainWithBody("<stdin>", false, prog, true);
|
|
||||||
});
|
|
||||||
myPromise.then(function(mod) {
|
|
||||||
console.log('success');
|
|
||||||
},
|
|
||||||
function(err) {
|
|
||||||
// Display errors in the output area
|
|
||||||
outf(err.toString() + '\n');
|
|
||||||
console.log(err.toString());
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Allow pressing 'Enter' in the input field to submit
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
document.getElementById('skulpt-input').addEventListener('keypress', function(e) {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault(); // Prevent default form submission
|
|
||||||
submitInput();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h3>Try This</h3>
|
|
||||||
<form>
|
|
||||||
<textarea id="yourcode" cols="40" rows="10">
|
|
||||||
name = raw_input("What is your name? ")
|
|
||||||
print "Hello, " + name + "!"
|
|
||||||
print "This is a demonstration of inline input."
|
|
||||||
</textarea><br />
|
|
||||||
<button type="button" onclick="runit()">Run</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<pre id="output" ></pre>
|
|
||||||
|
|
||||||
<div id="input-container" style="display:none;">
|
|
||||||
<label id="input-prompt"></label>
|
|
||||||
<input type="text" id="skulpt-input" />
|
|
||||||
<button type="button" onclick="submitInput()">Submit Input</button>
|
|
||||||
</div>
|
|
||||||
<div id="mycanvas"></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
65
xtermjs.html
65
xtermjs.html
@@ -1,65 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Xterm.js Console</title>
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" />
|
|
||||||
<style>
|
|
||||||
body { margin: 0; height: 100vh; display: flex; flex-direction: column; }
|
|
||||||
#terminal { flex: 1; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="terminal"></div>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
|
|
||||||
<script>
|
|
||||||
const { Terminal } = window;
|
|
||||||
|
|
||||||
const term = new Terminal({ cursorBlink: true });
|
|
||||||
term.open(document.getElementById('terminal'));
|
|
||||||
|
|
||||||
let inputResolve;
|
|
||||||
let inputBuffer = '';
|
|
||||||
let acceptingInput = false;
|
|
||||||
|
|
||||||
function printTermLn(text) {
|
|
||||||
term.write(text.replace(/\n/g, '\r\n'));
|
|
||||||
}
|
|
||||||
|
|
||||||
function readTermLn(promptText = '') {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
inputBuffer = '';
|
|
||||||
inputResolve = resolve;
|
|
||||||
acceptingInput = true;
|
|
||||||
term.write(promptText);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
term.onKey(e => {
|
|
||||||
if (!acceptingInput) return;
|
|
||||||
|
|
||||||
const key = e.key;
|
|
||||||
const ev = e.domEvent;
|
|
||||||
|
|
||||||
if (ev.key === 'Enter') {
|
|
||||||
term.write('\r\n');
|
|
||||||
if (inputResolve) {
|
|
||||||
inputResolve(inputBuffer);
|
|
||||||
inputResolve = null;
|
|
||||||
acceptingInput = false;
|
|
||||||
}
|
|
||||||
} else if (ev.key === 'Backspace') {
|
|
||||||
if (inputBuffer.length > 0) {
|
|
||||||
inputBuffer = inputBuffer.slice(0, -1);
|
|
||||||
term.write('\b \b');
|
|
||||||
}
|
|
||||||
} else if (key.length === 1) {
|
|
||||||
inputBuffer += key;
|
|
||||||
term.write(key);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user