Eugenio Parodi
2 years ago
2 changed files with 185 additions and 184 deletions
@ -0,0 +1,184 @@
|
||||
<!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" 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){ |
||||
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> |
||||
@ -1,184 +0,0 @@
|
||||
<!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" 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){ |
||||
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> |
||||
Loading…
Reference in new issue