pxt-core-own
Version:
Microsoft MakeCode, also known as Programming Experience Toolkit (PXT), provides Blocks / JavaScript tools and editors
181 lines (169 loc) • 7.05 kB
HTML
<html lang="en" data-manifest="" data-framework="typescript">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
<style>
@import "/blb/semantic.css";
#logs {
position: absolute;
left: 0;
top: 2rem;
width: 100%;
height: 10rem;
border: 0;
font-size: 0.6rem;
}
#logs img {
max-width:18rem;
}
#iframe {
position: absolute;
left: 0;
top: 12.5rem;
width: 100%;
height: calc(100% - 12.5rem);
border: 0;
}
</style>
<script>
var projects = [
{
"text": {
"main.blocks": "<xml xmlns=\"http://www.w3.org/1999/xhtml\">\n <block type=\"pxt-on-start\" id=\",{,HjW]u:lVGcDRS_Cu|\" x=\"-247\" y=\"113\"></block>\n</xml>",
"main.ts": "\n",
"README.md": " ",
"pxt.json": "{\n \"name\": \"Untitled\",\n \"dependencies\": {\n \"core\": \"*\"\n },\n \"description\": \"\",\n \"files\": [\n \"main.blocks\",\n \"main.ts\",\n \"README.md\"\n ]\n}"
}
}];
var filters = {
"namespaces": {
"events": 0,
"math": 2
},
"blocks": {
"dash_move_forward": 0,
"dash_turn": 2
},
"fns": {
"move": 0,
"turn": 2
}
}
var lastSaved;
var filter = false;
function toggleFilters() {
filter = !filter;
var logs = document.getElementById("logs");
logs.innerText += "filter: " + filter + "\n";
}
var pendingMsgs = {};
function sendMessage(action) {
console.log('send ' + action)
var logs = document.getElementById("logs");
logs.innerText += "> " + action + "\n";
var editor = document.getElementById("iframe").contentWindow;
var msg = {
type: "pxteditor",
id: Math.random().toString(),
action: action
};
if(action == 'importproject') {
var prj = JSON.parse(JSON.stringify(projects[0]));
msg.project = prj;
msg.filters = filter ? JSON.parse(JSON.stringify(filters)) : {};
msg.response = true;
} else if (action == 'renderblocks') {
msg.response = true;
msg.ts = 'while(true){ }'
} else if (action == 'toggletrace') {
msg.intervalSpeed = 1000;
}
else if (action == 'settracestate') {
msg.enabled = true;
}
if (msg.response)
pendingMsgs[msg.id] = msg;
editor.postMessage(msg, "*")
}
function receiveMessage(ev) {
var editor = document.getElementById("iframe").contentWindow;
var msg = ev.data;
console.log('received...')
console.log(msg)
var logs = document.getElementById("logs");
if (msg.action === "simevent") {
logs.innerText += "< " + msg.type + " " + msg.action + " (" + msg.subtype + ")\n";
}
else {
logs.innerText += "< " + msg.type +(msg.action ? " " + msg.action : "" ) + "\n";
}
if(msg.resp)
console.log(JSON.stringify(msg.resp, null, 2))
if (msg.type == "pxthost") {
if (msg.action == "workspacesync") {
// no project
msg.projects = projects;
if (filter) msg.editor = {
"filters": JSON.parse(JSON.stringify(filters)),
"searchBar": false
}
editor.postMessage(msg, "*")
return;
} else if (msg.action == "workspacesave") {
console.log(JSON.stringify(msg.project, null, 2))
lastSaved = msg.project;
}
}
if (msg.type == "pxteditor") {
var req = pendingMsgs[msg.id];
if (req.action == "renderblocks") {
var img = document.createElement("img");
img.src = msg.resp;
logs.appendChild(img)
}
}
delete pendingMsgs[msg.id];
}
window.addEventListener("message", receiveMessage, false);
function importHexFile() {
var f = document.getElementById("hexfile").files[0];
var reader = new FileReader();
reader.onload = (ev) => {
var editor = document.getElementById("iframe").contentWindow;
var s = reader.result;
editor.postMessage({
type: "importfile",
filename: f.name,
parts: [s]
}, "*")
}
reader.readAsText(f);
}
</script>
</head>
<body>
<div id="buttons" class="ui buttons">
<button class="ui button" onclick="sendMessage('switchblocks')">switch to blocks</button>
<button class="ui button" onclick="sendMessage('switchjavascript')">switch to javascript</button>
<button class="ui button" onclick="sendMessage('startsimulator')">start sim</button>
<button class="ui button" onclick="sendMessage('restartsimulator')">reset sim</button>
<button class="ui button" onclick="sendMessage('stopsimulator')">stop sim</button>
<button class="ui button" onclick="sendMessage('newproject')">newproject</button>
<button class="ui button" onclick="sendMessage('importproject')">importproject</button>
<button class="ui button" onclick="toggleFilters()">filter</button>
<button class="ui button" onclick="sendMessage('toggletrace')">toggle trace</button>
<button class="ui button" onclick="sendMessage('settracestate')">trace on</button>
<button class="ui button" onclick="sendMessage('undo')">undo</button>
<button class="ui button" onclick="sendMessage('redo')">redo</button>
<button class="ui button" onclick="sendMessage('renderblocks')">renderblocks</button>
<button class="ui button" onclick="sendMessage('closeflyout')">close flyout</button>
<br/>
<input id="hexfile" class="ui input" type="file" />
<button class="ui button" onclick="importHexFile()">import hex</button>
</div>
<pre id="logs" class="ui"></pre>
<iframe id="iframe" src="index.html?dbg=1&controller=1"></iframe>
</body>
</html>