UNPKG

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
<!doctype 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&amp;controller=1"></iframe> </body> </html>