You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
12 KiB
339 lines
12 KiB
<!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/addon-fit.js"></script> |
|
<script src="www/xterm/addon-unicode11/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> |
|
|
|
<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')); |
|
|
|
term.write('xterm.js - Loaded\n\r') |
|
|
|
fitAddon.fit() |
|
|
|
w2ui.layout_pyTermTk_sandbox.on('resize', (event) => { |
|
setTimeout(()=>{fitAddon.fit()},0.5) |
|
}); |
|
|
|
/* 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 */ |
|
var pyodide = null |
|
var run = null |
|
var namespace = null |
|
async function main(){ |
|
pyodide = await loadPyodide(); |
|
|
|
let pyodideProxy = { |
|
consoleLog: function(m){ |
|
console.log("TTk:",m) |
|
}, |
|
termPush: function (s) { |
|
term.write(s); |
|
}, |
|
termSize: function () { |
|
return [term.cols, term.rows] |
|
}, |
|
setTimeout: function(t, i) { |
|
// console.log("TIME (Start)",i,t) |
|
return setTimeout(() => ttk_timer(i), t) |
|
}, |
|
stopTimeout: function(t) { |
|
// console.log("TIME (Stop)",t) |
|
clearTimeout(t) |
|
}, |
|
clearTimeout: function(){ |
|
let highestTimeoutId = setTimeout(";"); |
|
for (let i = 0 ; i < highestTimeoutId ; i++) { |
|
clearTimeout(i); |
|
} |
|
}, |
|
setInterval: function(t, i) { |
|
setTinterval(() => console.log('WIP -> Interval' + i), t) |
|
} |
|
}; |
|
|
|
term.write('Pyodide ('+pyodide.version+') - Loaded\n\r') |
|
|
|
pyodide.registerJsModule("pyodideProxy", pyodideProxy); |
|
|
|
term.write('Pyodide Proxy - Loaded\n\r') |
|
|
|
let zipResponse = await fetch("bin/TermTk.tgz"); |
|
let zipBinary = await zipResponse.arrayBuffer(); |
|
pyodide.unpackArchive(zipBinary, ".tar.gz"); |
|
|
|
term.write('TermTk - Loaded\n\r') |
|
|
|
zipResponse = await fetch("bin/demo.tgz"); |
|
zipBinary = await zipResponse.arrayBuffer(); |
|
pyodide.unpackArchive(zipBinary, ".tar.gz"); |
|
|
|
term.write('Demos - Loaded\n\r') |
|
|
|
zipResponse = await fetch("bin/tutorial.tgz"); |
|
zipBinary = await zipResponse.arrayBuffer(); |
|
pyodide.unpackArchive(zipBinary, ".tar.gz"); |
|
|
|
term.write('Tutorials - Loaded\n\r') |
|
|
|
/* Sidebar |
|
Fetch all the files in the pyodide.FS |
|
And push them in the sidebar |
|
*/ |
|
let getAllFiles = function(p){ |
|
let ls = pyodide.FS.readdir(p) |
|
let ret = [] |
|
for(let i=0 ; i<ls.length; i++){ |
|
let n = p+"/"+ls[i] |
|
if(ls[i]=='.' || ls[i]=='..' || n==(pyodide.FS.currentPath+"/TermTk")) continue; |
|
if( pyodide.FS.isDir(pyodide.FS.lstat(n).mode)){ |
|
ret.push({id:n, text:ls[i], expanded: true, nodes:getAllFiles(n)}) |
|
}else{ |
|
if(n.endsWith('.py')){ |
|
ret.push({id:n, text:ls[i]}) |
|
} |
|
} |
|
} |
|
return ret |
|
} |
|
let files = getAllFiles(pyodide.FS.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 = pyodide.FS.readFile(f, {encoding:'utf8'}) |
|
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){ |
|
pyodide.FS.writeFile(pyodide.FS.currentPath+"/test_file.py", await (await fetch(fileUri)).text()); |
|
loadFile(pyodide.FS.currentPath+"/test_file.py") |
|
}else if (filePath != null){ |
|
loadFile(pyodide.FS.currentPath+"/"+filePath) |
|
}else{ |
|
loadFile(pyodide.FS.currentPath+"/demo/demo.py") |
|
} |
|
//loadFile("/home/pyodide/tutorial/calculator/calculator.005.py") |
|
w2ui.sidebar.select(pyodide.FS.currentPath+"/demo/demo.py") |
|
|
|
term.write('Starting Demo...\n\r') |
|
|
|
namespace = pyodide.globals.get("dict")(); |
|
pyodide.runPython(` |
|
import sys |
|
import TermTk as ttk |
|
from TermTk.TTkCore.TTkTerm.input import TTkInput |
|
import pyodideProxy |
|
|
|
def ttk_input(val): |
|
kevt,mevt,paste = TTkInput.key_process(val) |
|
if kevt or mevt: |
|
TTkInput.inputEvent.emit(kevt, mevt) |
|
if paste: |
|
TTkInput.pasteEvent.emit(paste) |
|
|
|
def ttk_resize(w,h): |
|
ttk.TTkLog.debug(f"Resize: {w=} {h=}") |
|
if ttk.TTkHelper._rootWidget: |
|
ttk.TTkHelper._rootWidget._win_resize_cb(w,h) |
|
ttk.TTkHelper.rePaintAll() |
|
ttk.TTkTerm.cont() |
|
|
|
def ttk_timer(tid): |
|
ttk.TTkTimer.triggerTimerId(tid) |
|
|
|
def ttk_log(val): |
|
# hex = [f"0x{ord(x):02x}" for x in val] |
|
ttk.TTkLog.debug("---> "+val.replace("\\033","<ESC>") + " - ") |
|
ttk.TTkHelper.paintAll() |
|
|
|
def ttk_clean(): |
|
if ttk.TTkHelper._rootWidget: |
|
ttk.TTkTimer.pyodideQuit() |
|
ttk.TTkHelper._rootWidget.quit() |
|
ttk.TTkHelper._focusWidget = None |
|
ttk.TTkHelper._rootCanvas = None |
|
ttk.TTkHelper._rootWidget = None |
|
ttk.TTkHelper._updateBuffer = set() |
|
ttk.TTkHelper._updateWidget = set() |
|
ttk.TTkHelper._overlay = [] |
|
ttk.TTkHelper._shortcut = [] |
|
ttk.TTkLog._messageHandler = [message_handler] |
|
|
|
def ttk_init(): |
|
ttk.TTkToolTip.toolTipTimer = ttk.TTkTimer() |
|
ttk.TTkToolTip.toolTipTimer.timeout.connect(ttk.TTkToolTip._toolTipShow) |
|
|
|
def message_handler(mode, context, message): |
|
msgType = "DEBUG" |
|
if mode == ttk.TTkLog.InfoMsg: msgType = "[INFO]" |
|
elif mode == ttk.TTkLog.WarningMsg: msgType = "[WARNING]" |
|
elif mode == ttk.TTkLog.CriticalMsg: msgType = "[CRITICAL]" |
|
elif mode == ttk.TTkLog.FatalMsg: msgType = "[FATAL]" |
|
elif mode == ttk.TTkLog.ErrorMsg: msgType = "[ERROR]" |
|
pyodideProxy.consoleLog(f"{msgType} {context.file} {message}") |
|
# Register the callback to the message handler |
|
ttk.TTkLog.installMessageHandler(message_handler) |
|
`,{ globals: namespace } |
|
); |
|
|
|
let ttk_log = namespace.get("ttk_log"); |
|
let ttk_input = namespace.get("ttk_input"); |
|
let ttk_timer = namespace.get("ttk_timer"); |
|
let ttk_resize = namespace.get("ttk_resize"); |
|
let ttk_clean = namespace.get("ttk_clean"); |
|
let ttk_init = namespace.get("ttk_init"); |
|
|
|
term.onResize( (obj) => { |
|
term.reset() |
|
ttk_resize(obj.cols, obj.rows) |
|
}); |
|
term.onData((d, evt) => { ttk_input(d) }) |
|
|
|
pyodide.runPython(` |
|
import sys,os |
|
sys.path.append(os.path.join(sys.path[0],'demo')) |
|
__name__ = "__main__" |
|
`,{ globals: namespace } |
|
); |
|
|
|
run = function(){ |
|
ttk_clean() |
|
console.log("Run App") |
|
|
|
let filename = document.getElementById("codeUri").value |
|
let fps = document.getElementById("fpsCap").value |
|
let pwd = pyodide.PATH.dirname(filename) |
|
|
|
pyodide.runPython(` |
|
__file__='`+filename+`' |
|
os.chdir('`+pwd+`') |
|
ttk.TTkCfg.maxFps = `+fps,{ globals: namespace }) |
|
|
|
ttk_init() |
|
|
|
let content = getCode() |
|
pyodide.runPython(content,{ globals: namespace }); |
|
|
|
ttk_log(filename + " - LOADED") |
|
}; |
|
run() |
|
} |
|
main() |
|
</script> |
|
|
|
</body> |
|
</html> |