Add new script editor
This commit is contained in:
Themba Dube
parent
9ad5366c6c
commit
4cbae1ab6b
@ -33,7 +33,7 @@ mergeInto(LibraryManager.library, {
|
||||
process.stdout.write(b);
|
||||
} else {
|
||||
var c = String.fromCharCode(getValue(ptr + i, 'i8'));
|
||||
var mp_js_stdout = document.getElementById('mp_js_stdout');
|
||||
var mp_js_stdout = window.top.document.getElementById('mp_js_stdout');
|
||||
var print = new Event('print');
|
||||
print.data = c;
|
||||
mp_js_stdout.dispatchEvent(print);
|
||||
|
||||
@ -10,57 +10,22 @@
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
a { white-space: nowrap; }
|
||||
table {
|
||||
display: inline-block;
|
||||
}
|
||||
#mp_js_stdout {
|
||||
display: inline-block;
|
||||
max-width: 90%;
|
||||
height: 20%;
|
||||
max-height: 600px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#canvas {
|
||||
border: 4px black solid;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
};
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.13.2/xterm.min.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.13.2/xterm.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.13.2/addons/fit/fit.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>LittlevGL+MicroPython simulator</h1>
|
||||
<p>
|
||||
This is the JavaScript version of MicroPython, plus the LittlevGL bindings available at
|
||||
<a href="https://github.com/littlevgl/lv_binding_micropython">https://github.com/littlevgl/lv_binding_micropython</a>.
|
||||
<br>
|
||||
You can type your own Python code into the prompt in the usual way.
|
||||
<br>
|
||||
For examples, see the README for the MicroPython binding.
|
||||
|
||||
<div id="mp_js_stdout"></div>
|
||||
|
||||
<canvas id="canvas" width="480" height="320" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
|
||||
|
||||
<p>
|
||||
<input id="script-url" placeholder="Script URL" value=""/><button onclick="reloadScript(document.getElementById('script-url').value);">Run a script</button>
|
||||
<p>
|
||||
<button onclick="mp_js_process_char(4);">Paste (Ctrl+D)</button>
|
||||
<p>
|
||||
<button onclick="for(var i = 0;i < lines.length;i++) { mp_js_do_str(lines[i]); }">Run basic demo</button>
|
||||
<p>
|
||||
<i>Simulator revision v1.1</i>
|
||||
<!-- scripts -->
|
||||
<script src="lvgl_mp.js"></script>
|
||||
<script>
|
||||
|
||||
var mp_js_stdout;
|
||||
/*Write text to the terminal */
|
||||
function sendText(text) {
|
||||
var print = new Event('print');
|
||||
print.data = text;
|
||||
if(mp_js_stdout === null) {
|
||||
console.log("Stdout is null???");
|
||||
}
|
||||
mp_js_stdout.dispatchEvent(print);
|
||||
}
|
||||
function reloadScript(target_script) {
|
||||
@ -85,8 +50,24 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
function decompressScript(compressed) {
|
||||
var script = LZString.decompressFromEncodedURIComponent(compressed);
|
||||
mp_js_do_str(script);
|
||||
}
|
||||
|
||||
function getSearchArg(argname) {
|
||||
/* Run custom script if passed */
|
||||
var custom = undefined;
|
||||
try {
|
||||
custom = new URL(window.location.href).searchParams.get(argname);
|
||||
} catch (e) {
|
||||
console.log(e + ": URL seems to be unsupported");
|
||||
}
|
||||
return custom;
|
||||
}
|
||||
|
||||
Module.canvas = (function() {
|
||||
var canvas = document.getElementById('canvas');
|
||||
var canvas = window.top.document.getElementById('canvas');
|
||||
return canvas;
|
||||
})();
|
||||
var lines = [
|
||||
@ -121,44 +102,27 @@
|
||||
/* Load the screen */
|
||||
"lv.scr_load(scr)"
|
||||
];
|
||||
|
||||
|
||||
/*Initialization function*/
|
||||
window.onload = function() {
|
||||
|
||||
Terminal.applyAddon(fit);
|
||||
term = new Terminal();
|
||||
mp_js_stdout = document.getElementById('mp_js_stdout');
|
||||
mp_js_stdout.value = "";
|
||||
term.open(mp_js_stdout);
|
||||
term.fit();
|
||||
function startRunning() {
|
||||
/*Setup printing event handler*/
|
||||
mp_js_stdout = window.parent.document.getElementById("mp_js_stdout");
|
||||
if(mp_js_stdout === undefined || mp_js_stdout === null) {
|
||||
throw "Could not retrieve parent element";
|
||||
}
|
||||
/*Initialize MicroPython itself*/
|
||||
mp_js_init(1 * 1024 * 1024);
|
||||
/*Setup printing event handler*/
|
||||
mp_js_stdout.addEventListener('print', function(e) {
|
||||
text = e.data;
|
||||
term.write(text);
|
||||
}, false);
|
||||
/*Setup key input handler */
|
||||
term.on('data', function(key, e) {
|
||||
console.log(key);
|
||||
for(var i = 0; i < key.length; i++) {
|
||||
console.log(key.charCodeAt(i));
|
||||
mp_js_process_char(key.charCodeAt(i));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Run custom script if passed */
|
||||
var custom = undefined;
|
||||
try {
|
||||
custom = new URL(window.location.href).searchParams.get("script");
|
||||
} catch (e) {
|
||||
console.log(e + ": URL seems to be unsupported");
|
||||
}
|
||||
var custom = getSearchArg("script");
|
||||
console.log("Custom script: " + custom);
|
||||
if(custom !== undefined && custom !== null)
|
||||
processScriptArg(custom);
|
||||
|
||||
var compressedScript = getSearchArg("script_direct");
|
||||
if(compressedScript !== undefined && compressedScript !== null)
|
||||
decompressScript(compressedScript);
|
||||
|
||||
/*Setup lv_task_handler loop*/
|
||||
var the_mp_handle_pending = Module.cwrap('mp_handle_pending', null);
|
||||
function handle_pending() {
|
||||
|
||||
190
ports/javascript/lvgl_editor.html
Normal file
190
ports/javascript/lvgl_editor.html
Normal file
@ -0,0 +1,190 @@
|
||||
<!doctype html>
|
||||
<!-- Updated for 6.0 -->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#mp_js_stdout {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
#editor {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
iframe {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
}
|
||||
#canvas {
|
||||
border: 4px black solid;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
flex: none;
|
||||
width: 480px;
|
||||
height: 320px;
|
||||
min-width: 0;
|
||||
};
|
||||
a { white-space: nowrap; }
|
||||
.flex-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-container> div {
|
||||
flex: none;
|
||||
}
|
||||
#editor {
|
||||
flex: auto;
|
||||
}
|
||||
.display-objects {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#mp_js_stdout {
|
||||
flex: 1 0 auto;
|
||||
height: 328px;
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.13.2/xterm.min.css" />
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/mode-python.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.13.2/xterm.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.13.2/addons/fit/fit.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-container">
|
||||
<div style="display: inline-block; padding: 10px;" class="no-iframe">
|
||||
<h1>LittlevGL+MicroPython simulator</h1>
|
||||
<p>
|
||||
This is the JavaScript version of MicroPython, plus the LittlevGL bindings available at
|
||||
<a href="https://github.com/littlevgl/lv_binding_micropython">https://github.com/littlevgl/lv_binding_micropython</a>.
|
||||
<br>
|
||||
You can type your own Python code into the prompt in the usual way.
|
||||
<br>
|
||||
For examples, see the README for the MicroPython binding.
|
||||
|
||||
<p>
|
||||
<button onclick="runScript();">Run</button>
|
||||
</div>
|
||||
<div id="editor">print("Hello world")</div>
|
||||
<div class="display-objects">
|
||||
|
||||
<canvas id="canvas" width="480" height="320" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
|
||||
<div id="mp_js_stdout"></div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe onload="reloaded();" id="emscripten-iframe"></iframe>
|
||||
<script>
|
||||
var editor, iframe;
|
||||
function reloaded() {
|
||||
console.log("Loaded iframe");
|
||||
}
|
||||
function forward_event(event) {
|
||||
if(iframe !== undefined && iframe !== null) {
|
||||
if(iframe.contentWindow !== null)
|
||||
iframe.contentWindow.document.dispatchEvent(new MouseEvent('mouseup'));
|
||||
}
|
||||
}
|
||||
document.onmouseup = forward_event;
|
||||
function runScript() {
|
||||
/* Assemble the URL */
|
||||
var newPathname = "";
|
||||
var pathArray = window.location.pathname.split('/');
|
||||
for (i = 0; i < pathArray.length - 1; i++) {
|
||||
newPathname += "/";
|
||||
newPathname += pathArray[i];
|
||||
}
|
||||
newPathname += "/lvgl.html?env=dev&script_direct=";
|
||||
newPathname += LZString.compressToEncodedURIComponent(editor.getValue());
|
||||
|
||||
iframe.src = window.location.protocol + "//" + window.location.host + "/" + newPathname;
|
||||
iframe.onload = function() {
|
||||
iframe.contentWindow.startRunning();
|
||||
};
|
||||
}
|
||||
function processScriptArg(url){
|
||||
// read text from URL location
|
||||
var request = new XMLHttpRequest();
|
||||
console.log("GET " + url);
|
||||
request.open('GET', url, true);
|
||||
request.send(null);
|
||||
request.onreadystatechange = function () {
|
||||
if (request.readyState === 4 && request.status === 200) {
|
||||
var type = request.getResponseHeader('Content-Type');
|
||||
if (type.indexOf("text") !== 1) {
|
||||
console.log(request.reponseText);
|
||||
if(request.responseText === undefined)
|
||||
return;
|
||||
editor.session.getUndoManager().reset();
|
||||
editor.setValue(request.responseText, -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function getSearchArg(argname) {
|
||||
/* Run custom script if passed */
|
||||
var custom = undefined;
|
||||
try {
|
||||
custom = new URL(window.location.href).searchParams.get(argname);
|
||||
} catch (e) {
|
||||
console.log(e + ": URL seems to be unsupported");
|
||||
}
|
||||
return custom;
|
||||
}
|
||||
function clear_iframe(iframe) {
|
||||
iframe.contentWindow.document.open();
|
||||
iframe.contentWindow.document.write("");
|
||||
iframe.contentWindow.document.close();
|
||||
}
|
||||
window.onload = function() {
|
||||
editor = ace.edit("editor");
|
||||
editor.setAutoScrollEditorIntoView(true);
|
||||
var PythonMode = ace.require("ace/mode/python").Mode;
|
||||
editor.session.setMode(new PythonMode());
|
||||
iframe = document.getElementById("emscripten-iframe");
|
||||
iframe.src = "about:blank";
|
||||
clear_iframe(iframe);
|
||||
var script = getSearchArg("script");
|
||||
if(script !== undefined && script !== null) {
|
||||
processScriptArg(script);
|
||||
} else
|
||||
processScriptArg("https://raw.githubusercontent.com/littlevgl/lv_binding_micropython/dev-6.0/examples/advanced_demo.py");
|
||||
Terminal.applyAddon(fit);
|
||||
term = new Terminal();
|
||||
mp_js_stdout = document.getElementById('mp_js_stdout');
|
||||
mp_js_stdout.value = "";
|
||||
term.open(mp_js_stdout);
|
||||
term.fit();
|
||||
term.on('data', function(key, e) {
|
||||
for(var i = 0; i < key.length; i++) {
|
||||
if(iframe.contentWindow !== null)
|
||||
iframe.contentWindow.mp_js_process_char(key.charCodeAt(i));
|
||||
}
|
||||
});
|
||||
|
||||
mp_js_stdout.addEventListener('print', function(e) {
|
||||
text = e.data;
|
||||
term.write(text);
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user