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

Merged code editor with skulpt and xterm.js

Browse Source
This commit is contained in:
Hugo H
2025-11-29 21:34:00 +00:00
parent c3685ad1d5
commit 60e02da1e7
1 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
editor.html
View File

@@ -17,7 +17,7 @@
background-color: #131212;
margin: 1.5vw;
padding: 0px;
overflow: hidden;
/*overflow: hidden;*/
}
p{
color: white;
@@ -52,8 +52,7 @@
}
.terminal{
width: 58vw;
height: auto;
flex-grow: 1;
height: 8vw;
border-radius: 10px;
overflow: hidden;
}
@@ -61,7 +60,11 @@
width: 100%;
height: 100%;
}
.xterm-screen{
padding: 0.75vw;
background: #2F3129;
overflow: scroll;
}
.left {
display: flex;
margin-right: 1vw;
@@ -86,35 +89,37 @@
<div class="right">
<div class="codeEditor">
<div style="overflow: hidden; height: 3vw;width: 100%;background: #181a15;">
<div style="overflow: hidden; height: 3vw;width: 100%;background: #2F3129;">
<p style="float: left;">main.py</p>
<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>
<button onclick="stopCurrentCode()" 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="M64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32z"/></svg></button>
<button onclick="runCurrentCode()" 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% - 3vw);width:100%;"></div>
</div>
<div class="documentationLookup">
<input type="text" placeholder="Documentation" style="height: 100%;width: 100%;background: #181a15;border: 0px;color: white;padding-left: 1vw;"></input>
<input type="text" placeholder="Documentation" style="height: 100%;width: 100%;background: #2F3129;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", {
codeEditor = ace.edit("editor", {
theme: "ace/theme/monokai",
mode: "ace/mode/python",
value: "print('Hello world!')"
});
document.addEventListener('DOMContentLoaded', () => {
const term = new Terminal({ cursorBlink: true });
term.open(document.getElementById('terminal'));
let StopExecution;
let term;
let inputResolve;
let inputBuffer = '';
let acceptingInput = false;
term = new Terminal({ cursorBlink: true });
term.open(document.getElementById('terminal'));
function outf(text) {
term.write(text.replace(/\n/g, '\r\n'));
}
@@ -149,7 +154,6 @@
inputBuffer += key;
term.write(key);
}
});
function runCode(code) {
term.clear();
@@ -163,10 +167,29 @@
.catch(err => outf(err.toString() + '\n'));
}
runCode('name = input("Name: ")\nprint("Hello, " + name)');
});
function stopCurrentCode() {
StopExecution = true;
}
function runCurrentCode() {
StopExecution = false;
code = codeEditor.getValue();
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), {
"*": () => {
if (StopExecution) throw "Execution interrupted"
}
})
.catch(err => outf(err.toString() + '\n'));
}
</script>
</body>
</html>