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.
252 lines
9.4 KiB
252 lines
9.4 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> |
|
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js"></script> |
|
--> |
|
<link rel="stylesheet" type="text/css" href="www/w2ui/w2ui-2.0.min.css" /> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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%; } |
|
/* |
|
@font-face { |
|
font-family: "NerdFont"; |
|
src: url(www/fonts/nerdfonts/HurmitNerdFontMono-Regular.otf) format("opentype"); |
|
src: url(www/fonts/nerdfonts/DejaVuSansMNerdFont-Regular.ttf) format("truetype"); |
|
src: url(www/fonts/nerdfonts/DejaVuSansMNerdFont-Regular.ttf) format("truetype"); |
|
} |
|
*/ |
|
/* Custom style for the selected node */ |
|
.w2ui-sidebar .w2ui-selected { |
|
background-color: #0056b3 !important; /* Darker background */ |
|
color: #ffffff !important; /* Lighter text */ |
|
font-weight: bold !important; /* Bold text */ |
|
border: 1px solid #004085 !important; /* Add a border */ |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="layout" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px"></div> |
|
|
|
<input type="file" id="file-input" hidden /> |
|
|
|
<script type="module"> |
|
import { TTkProxy } from './js/ttkproxy.js' |
|
import { w2sidebar, w2utils, w2layout, w2field, query } from './www/w2ui/w2ui.es6.min.js' |
|
|
|
let pstyle = 'border: 1px solid #efefef; padding: 5px;'; |
|
let expand = 'position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px'; |
|
let run = function(){}; |
|
|
|
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 }) |
|
|
|
// Workaround from: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API |
|
const font = new FontFace("NerdFont", "url(www/fonts/nerdfonts/DejaVuSansMNerdFont-Regular.ttf)"); |
|
document.fonts.add(font); |
|
font.load(); |
|
document.fonts.ready.then(() => {main()}); |
|
|
|
/* 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 mainTTK(term){ |
|
let 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') |
|
|
|
await ttkProxy.loadLib("bin/tests.tgz"); |
|
term.write('Tests - Loaded\n\r') |
|
|
|
/* Sidebar |
|
Fetch all the files in the pyodide.FS |
|
And push them in the sidebar |
|
*/ |
|
let files = ttkProxy.getAllFiles(ttkProxy.currentPath()) |
|
let sidebar = new w2sidebar({ |
|
box: '#sidebar', |
|
name: 'sidebar', |
|
icon: { |
|
text : function(node){ |
|
if (node.nodes && node.nodes.length > 0) { |
|
if (node.expanded) { |
|
return '<i class="fa fa-folder-open-o"></i>' |
|
}else{ |
|
return '<i class="fa fa-folder-o"></i>' |
|
} |
|
}else{ |
|
return '<i class="fa fa-file-text-o"></i>' |
|
} |
|
return '' |
|
} |
|
}, |
|
nodes: files }) |
|
|
|
sidebar.on('click', function (event) { |
|
let path = event.target; |
|
console.log('Last Event: ' + event.type + ' Target: ' + path); |
|
let sidebar = this; |
|
let node = sidebar.get(path); |
|
// Toggle expand/collapse on single click |
|
if (node.nodes && node.nodes.length > 0) { |
|
if (node.expanded) { |
|
// node.icon = 'fa fa-folder-o'; |
|
sidebar.collapse(path); |
|
} else { |
|
// node.icon = 'fa fa-folder-open-o'; |
|
sidebar.expand(path); |
|
} |
|
}else{ |
|
loadFile(path) |
|
} |
|
}); |
|
|
|
var loadFile = function(f){ |
|
let path = ttkProxy.currentPath() + '/' + f |
|
//let targetNode = sidebar.get(path); |
|
sidebar.select(path); |
|
// sidebar.scrollIntoView(path); |
|
|
|
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); |
|
let fileUri = urlParams.get("fileUri") |
|
let 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") |
|
} |
|
|
|
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() |
|
} |
|
|
|
function main(){ |
|
/* xterm.js */ |
|
var term = new Terminal({ |
|
allowProposedApi: true, |
|
fontFamily: 'NerdFont'}); |
|
|
|
/* 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(); |
|
|
|
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') |
|
|
|
mainTTK(term) |
|
} |
|
</script> |
|
|
|
</body> |
|
</html> |