hugo/PyCanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Added python stuff

Browse Source
This commit is contained in:
Hugo H
2025-11-29 20:11:05 +00:00
parent 02dadd613d
commit c3685ad1d5
5 changed files with 414 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
editor.html
View File

@@ -4,13 +4,17 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Editor</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>
</head>
<body>
<style>
body {
display: flex;
height: calc(100vh-1.5vw);
background-color: #363636;
background-color: #131212;
margin: 1.5vw;
padding: 0px;
overflow: hidden;
@@ -41,6 +45,11 @@
overflow: hidden;
margin-bottom: 1vw;
}
#canvas{
height: 100%;
width:100%;
background: white;
}
.terminal{
width: 58vw;
height: auto;
@@ -48,18 +57,10 @@
border-radius: 10px;
overflow: hidden;
}
#terminalBlock{
resize: none;
#terminal{
width: 100%;
height: 100%;
background-color: #2f3129;
height: 100%;
}
/*.left{
float: left;
}
.right{
float: right;
}*/
.left {
display: flex;
@@ -72,26 +73,32 @@
flex-direction: column;
}
</style>
<div class="left">
<div class="canvas">
<canvas id="canvas" style="height: 100%;width:100%;background: white;"></canvas>
</div>
<div class="terminal">
<textarea id="terminalBlock"></textarea>
<div id="terminal"></div>
</div>
</div>
<div class="right">
<div class="codeEditor">
<div style="overflow: hidden; height: 4vw;width: 100%;background: #2f3129;">
<div style="overflow: hidden; height: 3vw;width: 100%;background: #181a15;">
<p style="float: left;">main.py</p>
<button style="height: 100%; aspect-ratio: 1/1; float: right; border-radius: 0px; border: none;padding: 1.2vw; background: #282923;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#aaa" d="M91.2 36.9c-12.4-6.8-27.4-6.5-39.6 .7S32 57.9 32 72l0 368c0 14.1 7.5 27.2 19.6 34.4s27.2 7.5 39.6 .7l336-184c12.8-7 20.8-20.5 20.8-35.1s-8-28.1-20.8-35.1l-336-184z"/></svg></button>
<button style="height: 100%; aspect-ratio: 1/1; float: right; border-radius: 0px; border: none;padding: 0.75vw; background: #282923;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#aaa" d="M91.2 36.9c-12.4-6.8-27.4-6.5-39.6 .7S32 57.9 32 72l0 368c0 14.1 7.5 27.2 19.6 34.4s27.2 7.5 39.6 .7l336-184c12.8-7 20.8-20.5 20.8-35.1s-8-28.1-20.8-35.1l-336-184z"/></svg></button>
</div>
<div id='editor' style="height: calc(100% - 4vw);width:100%;"></div>
<div id='editor' style="height: calc(100% - 3vw);width:100%;"></div>
</div>
<div class="documentationLookup">
<input type="text" placeholder="Documentation" style="height: 100%;width: 100%;background: #2f3129;border: 0px;color: white;padding-left: 1vw;"></input>
<input type="text" placeholder="Documentation" style="height: 100%;width: 100%;background: #181a15;border: 0px;color: white;padding-left: 1vw;"></input>
</div>
</div>
<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js" crossorigin="anonymous"></script>
<script>
ace.edit("editor", {
@@ -99,6 +106,67 @@
mode: "ace/mode/python",
value: "print('Hello world!')"
});
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'));
}
runCode('name = input("Name: ")\nprint("Hello, " + name)');
});
</script>
</body>
</html>