The title more or less tells it all. Ideally, I would like the html as self-sufficient as possible and definitely run the code in the browser. In addition, I would like be able to:
- use files, including uploading files and viewing text files, in addition of course to being able to run files.
- writing at least short text files.
- type and run code directly in the interpreter/terminal.
- use most modules in the Python standard library, but especially random, os, datetime, time and pickle.
I was experimenting with brython-runner obviously based on Brython. However, I would be perfectly happy using some other tool, e.g. PyScript or combination of them.
What I succeeded was in making a basic interpreter that runs the code from the "editor" pane in another pane, but this involved practically just copying the code from brython-runner or more precisely index.html from there and running a locally a handler from https://github.com/pythonpad/brython-runner-stdin-hanger for input to work (pythonpad handler does not work at the time of writing).
What I would like is at least to also use files (see above), if tying in the "interpreter" would be allowed, this would be even better. I noticed that brython-runner also mentions runCodeWithFiles, but I was not able to get this to work. Bellow is my miserable attempt.
Any help would be greatly appreciated.
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/theme/ayu-mirage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/mode/python/python.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/addon/comment/comment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/keymap/sublime.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="./brython-runner.bundle.js"></script>
</head>
<body>
<div class="dev-box">
<div class="toolbar-row">
<button class="toolbar-button" onclick="run()">
Run
</button>
</div>
<div class="workspace-row">
<div class="editor-column">
<div class="editor" id="editor"></div>
</div>
<div class="run-column">
<div class="output-box" id="output">
</div>
</div>
</div>
</div>
<script>
// Initialize the code editor.
const CODEMIRROR_OPTIONS = {
lineNumbers: true,
lineSeparator: '\n',
mode: undefined,
theme: 'ayu-mirage',
fontSize: 14,
indentUnit: 4,
tabSize: 4,
indentWithTabs: false,
lineWrapping: true,
readOnly: false,
smartIndent: true,
matchBrackets: true,
autoCloseBrackets: true,
showTrailingSpace: true,
keyMap: 'sublime',
extraKeys: null,
showInvisibles: true,
viewportMargin: Infinity,
}
const codeStoreKey = 'brython-runner-dev-code'
const loadedCode = localStorage.getItem(codeStoreKey)
const code = loadedCode || 'print("hello world")'
const editor = CodeMirror(document.getElementById('editor'), {
...CODEMIRROR_OPTIONS,
mode: 'python',
value: code,
})
editor.on('change', (editor, change) => {
localStorage.setItem(codeStoreKey, editor.getDoc().getValue())
})
const files = {
'data/': {
'type': 'dir',
'body': '',
},
'data/rac.txt': {
'type': 'text',
'body': '''izdelek cena kolicina
Jajca 0.20 6
Kruh 1.80 1
Salama 5.75 0.40
''',
},
'main.py': {
'type': 'text',
'body': '',
}
};
const runner = new BrythonRunner({
onFileUpdate(filename, data) {
files[filename].type = data.type;
files[filename].body = data.body;
},
hangerUrl: 'http://localhost:9095/hanger',
stdout: {
write(content) {
var el = document.createElement('code')
var text = document.createTextNode(content)
el.appendChild(text)
document.getElementById('output').appendChild(el)
},
flush() { }
},
stderr: {
write(content) {
var el = document.createElement('code')
var text = document.createTextNode(content)
el.appendChild(text)
el.setAttribute('class', 'error')
document.getElementById('output').appendChild(el)
},
flush() { }
},
stdin: {
async readline() {
var data = prompt()
var el = document.createElement('code')
var text = document.createTextNode(data + '\n')
el.appendChild(text)
document.getElementById('output').appendChild(el)
return data
},
}
})
function clearOutput() {
document.getElementById('output').innerHTML = ''
}
function getCode() {
return editor.getDoc().getValue()
}
function run() {
clearOutput()
runner.runCodeWithFiles(files['main.py'].body, files);
}
</script>
</body>
</html>