|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Mr. pyTermTk Sandbox</title>
|
|
|
|
|
<link rel="icon" type="image/x-icon" href="www/favicon.ico">
|
|
|
|
|
|
|
|
|
|
<script src="www/pyodide/pyodide.js"></script>
|
|
|
|
|
|
|
|
|
|
<link href="www/xterm/xterm.css" rel="stylesheet" />
|
|
|
|
|
<script src="www/xterm/xterm.js"></script>
|
|
|
|
|
<script src="www/xterm-addon-fit/xterm-addon-fit.js"></script>
|
|
|
|
|
<script src="www/xterm-addon-unicode11/xterm-addon-unicode11.js"></script>
|
|
|
|
|
|
|
|
|
|
<link href="www/fontawesome/fontawesome.min.css" rel="stylesheet">
|
|
|
|
|
<link href="www/fontawesome/regular.min.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="www/w2ui/w2ui-2.0.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="www/w2ui/w2ui-2.0.min.css" />
|
|
|
|
|
|
|
|
|
|
<link href="www/codemirror/theme/mbo.css" rel="stylesheet" >
|
|
|
|
|
<link href="www/codemirror/codemirror.css" rel="stylesheet" />
|
|
|
|
|
<script src="www/codemirror/codemirror.js"></script>
|
|
|
|
|
<script src="www/codemirror/modes/python.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="js/ttkproxy.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
.CodeMirror { height: 100%; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="layout" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px"></div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
let pstyle = 'border: 1px solid #efefef; padding: 5px;';
|
|
|
|
|
let expand = 'position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px';
|
|
|
|
|
new w2layout({
|
|
|
|
|
box: '#layout',
|
|
|
|
|
name: 'layout_pyTermTk_sandbox',
|
|
|
|
|
padding: 4,
|
|
|
|
|
panels: [
|
|
|
|
|
//{ type: 'top', size: 50, resizable: true, style: pstyle, html: 'top' },
|
|
|
|
|
{ type: 'left', size: 200, resizable: true, style: pstyle,
|
|
|
|
|
html: '<div id="sidebar" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px"></div>' },
|
|
|
|
|
{ type: 'main', style: pstyle,
|
|
|
|
|
toolbar: {
|
|
|
|
|
items: [
|
|
|
|
|
{ type: 'button', id: 'run_button', text: 'Run', icon: 'far fa-play-circle' },
|
|
|
|
|
{ type: 'html', id: 'uri',
|
|
|
|
|
html(item) {
|
|
|
|
|
let html =
|
|
|
|
|
'<div style="padding: 0px 10px; margin-top: -2px;" >'+
|
|
|
|
|
' URI: <input id="codeUri" size="50"/>'+
|
|
|
|
|
' FPS Cap: <input id="fpsCap" value="30" size="1">'+
|
|
|
|
|
'</div>';
|
|
|
|
|
return html;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
onClick(event) { run(); }
|
|
|
|
|
},
|
|
|
|
|
html: '<div id="codeArea" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 25px"></div>'+
|
|
|
|
|
`<div id="codeArea" style="position: absolute; left: 15px; right: 0px; bottom: 0px">
|
|
|
|
|
<a href="https://github.com/ceccopierangiolieugenio/pyTermTk">pyTermTk</a> sandbox,
|
|
|
|
|
Powered by <a href="https://pyodide.org/">Pyodide</a>
|
|
|
|
|
and <a href="https://xtermjs.org">xterm.js</a>
|
|
|
|
|
and <a href="https://codemirror.net/5/">CodeMirror5</a>
|
|
|
|
|
and <a href="https://w2ui.com/">w2ui</a>
|
|
|
|
|
</div>`},
|
|
|
|
|
{ type: 'right', size: 1000, resizable: true, style: pstyle,
|
|
|
|
|
html: '<div id="terminal" oncontextmenu="return false;" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px"></div>' }
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
new w2field({ el: query('#fpsCap')[0], type: 'int', autoFormat: false })
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
/* xterm.js demo */
|
|
|
|
|
/* https://www.npmjs.com/package/xterm-addon-fit */
|
|
|
|
|
const fitAddon = new FitAddon.FitAddon();
|
|
|
|
|
/* https://www.npmjs.com/package/xterm-addon-unicode11 */
|
|
|
|
|
const unicode11Addon = new Unicode11Addon.Unicode11Addon();
|
|
|
|
|
|
|
|
|
|
var term = new Terminal({allowProposedApi: true});
|
|
|
|
|
term.loadAddon(fitAddon);
|
|
|
|
|
term.loadAddon(unicode11Addon);
|
|
|
|
|
|
|
|
|
|
term.unicode.activeVersion = '11';
|
|
|
|
|
|
|
|
|
|
term.open(document.getElementById('terminal'));
|
|
|
|
|
|
|
|
|
|
fitAddon.fit()
|
|
|
|
|
|
|
|
|
|
// start observing the terminal for resize
|
|
|
|
|
const resize_ob = new ResizeObserver(function(entries) {fitAddon.fit();});
|
|
|
|
|
resize_ob.observe(document.querySelector("#terminal"));
|
|
|
|
|
|
|
|
|
|
term.write('xterm.js - Loaded\n\r')
|
|
|
|
|
|
|
|
|
|
/* Code Mirror */
|
|
|
|
|
let myCodeMirror = CodeMirror(document.getElementById('codeArea'), {
|
|
|
|
|
mode: "python",
|
|
|
|
|
lineNumbers: true,
|
|
|
|
|
styleActiveLine: true,
|
|
|
|
|
matchBrackets: true
|
|
|
|
|
});
|
|
|
|
|
myCodeMirror.setOption("theme", "mbo");
|
|
|
|
|
let getCode = function(){
|
|
|
|
|
return myCodeMirror.getValue()
|
|
|
|
|
}
|
|
|
|
|
let setCode = function(txt){
|
|
|
|
|
myCodeMirror.setValue(txt)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* pyodide demo */
|
|
|
|
|
async function main(){
|
|
|
|
|
ttkProxy = new TTkProxy(term)
|
|
|
|
|
await ttkProxy.init()
|
|
|
|
|
|
|
|
|
|
await ttkProxy.loadLib("bin/TermTk.tgz");
|
|
|
|
|
term.write('TermTk - Loaded\n\r')
|
|
|
|
|
|
|
|
|
|
await ttkProxy.loadLib("bin/demo.tgz");
|
|
|
|
|
term.write('Demos - Loaded\n\r')
|
|
|
|
|
|
|
|
|
|
await ttkProxy.loadLib("bin/tutorial.tgz");
|
|
|
|
|
term.write('Tutorials - Loaded\n\r')
|
|
|
|
|
|
|
|
|
|
/* Sidebar
|
|
|
|
|
Fetch all the files in the pyodide.FS
|
|
|
|
|
And push them in the sidebar
|
|
|
|
|
*/
|
|
|
|
|
let files = ttkProxy.getAllFiles(ttkProxy.currentPath())
|
|
|
|
|
new w2sidebar({
|
|
|
|
|
box: '#sidebar',
|
|
|
|
|
name: 'sidebar',
|
|
|
|
|
nodes: files })
|
|
|
|
|
|
|
|
|
|
w2ui.sidebar.on('click', function (event) {
|
|
|
|
|
console.log('Last Event: ' + event.type + ' Target: ' + event.target);
|
|
|
|
|
loadFile(event.target)
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var loadFile = function(f){
|
|
|
|
|
let content = ttkProxy.readFile(f)
|
|
|
|
|
setCode(content)
|
|
|
|
|
document.getElementById("codeUri").value = f
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* check the "fileUri" field in the address
|
|
|
|
|
and load it if defined */
|
|
|
|
|
const queryString = window.location.search;
|
|
|
|
|
console.log(queryString);
|
|
|
|
|
const urlParams = new URLSearchParams(queryString);
|
|
|
|
|
fileUri = urlParams.get("fileUri")
|
|
|
|
|
filePath = urlParams.get("filePath")
|
|
|
|
|
if (fileUri != null){
|
|
|
|
|
await ttkProxy.loadFile(fileUri, "test_file.py");
|
|
|
|
|
loadFile("test_file.py")
|
|
|
|
|
}else if (filePath != null){
|
|
|
|
|
loadFile(filePath)
|
|
|
|
|
}else{
|
|
|
|
|
loadFile("demo/demo.py")
|
|
|
|
|
}
|
|
|
|
|
w2ui.sidebar.select("demo/demo.py")
|
|
|
|
|
|
|
|
|
|
term.write('Starting Demo...\n\r')
|
|
|
|
|
|
|
|
|
|
ttkProxy.preRun()
|
|
|
|
|
|
|
|
|
|
run = function(){
|
|
|
|
|
let filename = document.getElementById("codeUri").value
|
|
|
|
|
let fps = document.getElementById("fpsCap").value
|
|
|
|
|
ttkProxy.run(getCode(), filename,fps)
|
|
|
|
|
};
|
|
|
|
|
run()
|
|
|
|
|
}
|
|
|
|
|
main()
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
