200 lines
33 KiB
HTML
200 lines
33 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en" data-framework="typescript">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Arduino Instructions</title>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
svg {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blocklyText, .ace_editor {
|
||
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blocklyText, .ace_editor {
|
||
|
|
font-size: 1rem !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blocklyTreeLabel {
|
||
|
|
font-size: 1.25rem !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blocklyCheckbox {
|
||
|
|
fill: #ff3030 !important;
|
||
|
|
text-shadow: 0px 0px 6px #f00;
|
||
|
|
font-size: 17pt !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.card .blocklyPreview {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: calc(100% - 1em);
|
||
|
|
max-height: calc(100% - 1em);
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
code.lang-config, code.lang-package { display:none; }
|
||
|
|
|
||
|
|
code.lang-blocks::before,
|
||
|
|
code.lang-sig::before,
|
||
|
|
code.lang-block::before,
|
||
|
|
code.lang-shuffle::before,
|
||
|
|
code.lang-sim::before,
|
||
|
|
code.lang-cards::before,
|
||
|
|
code.lang-namespaces::before,
|
||
|
|
code.lang-codecard::before {
|
||
|
|
content: "...";
|
||
|
|
position: absolute;
|
||
|
|
top: calc(50% - 0.5em);
|
||
|
|
left: calc(50% - 5em);
|
||
|
|
}
|
||
|
|
|
||
|
|
code.lang-blocks,
|
||
|
|
code.lang-sig,
|
||
|
|
code.lang-block,
|
||
|
|
code.lang-shuffle,
|
||
|
|
code.lang-sim,
|
||
|
|
code.lang-cards,
|
||
|
|
code.lang-namespaces,
|
||
|
|
code.lang-codecard {
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style type="text/css">
|
||
|
|
@import "/cdn/semantic.css";
|
||
|
|
@import "/cdn/icons.css";
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
html {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
font-family: "Lucida Console", Monaco, monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
div {
|
||
|
|
/*undo semantic UI*/
|
||
|
|
box-sizing: content-box;
|
||
|
|
line-height: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
/*TODO: Share CSS with main webpage*/
|
||
|
|
|
||
|
|
.organization {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 1rem;
|
||
|
|
right: 1rem;
|
||
|
|
height: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 2em;
|
||
|
|
font-weight: normal;
|
||
|
|
color: rgba(0, 0, 0, 0.87);
|
||
|
|
font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||
|
|
display: block;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#front-panel .board-svg {
|
||
|
|
position: absolute;
|
||
|
|
left: 1rem;
|
||
|
|
width: 140px;
|
||
|
|
top: 8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#proj-title {
|
||
|
|
top: 20px;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#proj-code {
|
||
|
|
width: 140px;
|
||
|
|
height: 200px;
|
||
|
|
position: absolute;
|
||
|
|
right: 1rem;
|
||
|
|
top: 8rem;
|
||
|
|
}
|
||
|
|
#proj-code-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#proj-code-spinner {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-panel svg {
|
||
|
|
position: relative;
|
||
|
|
margin: 0 auto;
|
||
|
|
left: inherit;
|
||
|
|
bottom: -7px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id='loading' class="ui active inverted dimmer">
|
||
|
|
<div class="ui large loader"></div>
|
||
|
|
</div>
|
||
|
|
<!-- start Mixpanel --><script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
|
||
|
|
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);
|
||
|
|
mixpanel.init("762fef19c053a0ea4cec43d2fecae76e");</script><!-- end Mixpanel -->
|
||
|
|
<script>
|
||
|
|
// This line gets patched up by the cloud
|
||
|
|
var pxtConfig = null;
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="/cdn/lzma/lzma_worker-min.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/marked/marked.min.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/typescript.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/blockly/blockly_compressed.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/blockly/blocks_compressed.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/blockly/msg/js/en.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/pxtlib.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/pxtblocks.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/pxtsim.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/pxtrunner.js"></script>
|
||
|
|
<script type="text/javascript" src="/cdn/semantic.js"></script>
|
||
|
|
<script type="text/javascript" src="/embed.js"></script>
|
||
|
|
<script type="text/javascript" src="/sim/sim.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
(function () {
|
||
|
|
ksRunnerReady(function() {
|
||
|
|
let loading = document.getElementById('loading');
|
||
|
|
pxsim.instructions.drawInstructions();
|
||
|
|
$(loading).hide();
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div id="front-panel" class="instr-panel">
|
||
|
|
<h1 id="proj-title"></h1>
|
||
|
|
|
||
|
|
<!--TODO: extract real code snapshot from PXT -->
|
||
|
|
<div id="proj-code">
|
||
|
|
<i id="proj-code-spinner" class="spinner loading icon"></i>
|
||
|
|
<div id="proj-code-container">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<img class="organization" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABYAAAAEtCAYAAACxnMQNAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiIAAC4iAari3ZIAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAE7kSURBVHhe7d3RseQ2su77MWFMUFwL2oQxoU2QCYqQAXtMaBP0cA3Q691PMkEmyIOjOA7ofqlZHJWys3otFoDMBPl/+MU5e9SLTKDAAusjSP7j/37+f/4p/wJe8OmPP/74xyv+53//8Un+BZwVjScAAAAAAADELAC2IO8P4AW/RIPqI/7nf//xi/wBnOXHEgAAAAAAAJ4jAMYIAmCk82MJAAAAAAAAzxEAYwQBMNL5sQQAAAAAAIDnCIAxggAY6fxYAgAAAAAAwHMEwBhBAIx0fiwBAAAAAADgOQJgjCAARjo/lgAAAAAAAPAcATBGEAAjnR9LAAAAAAAAeI4AGCMIgJHOjyUAAAAAAAA8RwCMEQTASOfHEgAAAAAAAJ4jAMYIAmCk82MJAAAAAAAAzxEAYwQBMNL5sQQAAAAAAIDnCIAxggAY6fxYAgAAAAAAwHMEwBhBAIx0fiwBAAAAAADgOQJgjCAARjo/lgAAAAAAAPAcATBGEAAjnR9LAAAAAAAAeI4AGCMIgJHOjyUAAAAAAAA8RwCMEQTASOfHEgAAAAAAAJ4jAMYIAmCk82MJAAAAAAAAzxEAYwQBMNL5sQQAAAAAAIDnCIAxggAY6fxYAgAAAAAAwHMEwBhBAIx0fiwBAAAAAADgOQJgjCAARjo/lgAAAAAAAPAcATBGEAAjnR9LAAAAAAAAeI4AGCMIgJHOjyUAAAAAAAA8RwCMEQTASOfHEgAAAAAAAJ4jAMYIAmCk82MJAAAAAAAAzxEAYwQBMNL5sQQAAAAAAIDnCIAxggAY6fxYAgAAAAAAwHMEwBhBAIx0fiwBAAAAAADgOQJgjCAARjo/lgAAAAAAAPAcATBGEAAjnR9LAAAAAAAAeI4AGCMIgJHOjyUAAAAAAAA8RwCMEQTASOfHEgAAAAAAAJ4jAMYIAmCk82MJAAAAAAAAzxEAYwQBMNL5sQQAAAAAAIDnCIAxggAY6fxYAgAAAAAAwHMEwBhBAIx0fiwBAAAAAADgOQJgjCAARjo/lgAAAAAAAPAcATBGEAAjnR9LAAAAAAAAeI4AGCMIgJHOjyUAAAAAAAA8RwCMEQTASOfHEgAAAAAAAJ4jAMYIAmCk82MJAAAAAAAAzxEAYwQBMNL5sQQAAAAAAIDnCIAxggAY6fxYAgAAAAAAwHMEwBhBAIx0fiwBAAAAAADgOQJgjCAARjo/lgAAAAAAAPAcATBGEAAjnR9LAAAAAACgrx9//PGT/OvN9/Lvbzj+nfkUbQ/nEQBjBAEw0vmxBAAAAAAA6llgKz/IF/lFfpc/JrDt2PZ+Etv+v6L94zkCYIwgAEY6P5YAAAAAAEC+H3/88bu3QPZniYLb1SwUtv3/M6oPfyEAxggCYKTzYwkAAAAAAOT48a/Q91eJQtkKrAh+BwEwRhAAI50fSwAAAAAAYC0LWaVqpe97CIDfQQCMEQTASOfHEgAAAAAAWMPCVbFHLUTBaxcEwO8gAMYIAmCk82MJAAAAAADM9eN/XujWPfg9EAC/gwAYIwiAkc6PJQAAAAAAMMePP/74T/nyEK7ugAD4HQTAGEEAjHR+LAEAAAAAgHEWpMpvD8HqLgiA30EAjBEEwEjnxxIA4L8rNeyE/U/RvwEAAACe0Tnkbqt+H3H++w4CYIwgAEY6P5YA4G50gmth7/fyk/wq0Unwwf67/bvP8s9oewAAALgvO0d8O2eMziV3QQD8DgJgjCAARjo/lgDgLnRi+51YmPv724nuWfZ39vffRdsHAADAvei80F709uq5ZScEwO8gAMYIAmCk82MJAK5OJ7S2KuPfDye4M9gtfqwIBgAAuCmdC14l/DUEwO8gAMYIAmCk82MJ82ny/NuzRHcRtQX96LPaanxFbcikGuzEfNWLOOxWv0/RfgEAAHBdOge0c92rhL+G34PvIADGCAJgpPNjCfPZ5Okm011wW/sG9Dlt9XIJX38m7d+e87v6xNy2zwkzAADATejc70orfw+cz76DABgjCICRzo8lzGeTp5tMd/Elag960ee01cmmrz+L9m3hb1jTIpw0AwAAXJzO+a4Y/hrOZd9BAIwRBMBI58cS5rPJ002mu/g9ag/60GeUHWoO823IoP1WHIP2Q4DHQQAAAFyUzvXshcJXDH8NAfA7CIAxggAY6fxYwnw2ebrJdCefozahB30+v7jPqz3fhtW0z8oTc3vWMC+GAwAAuBg7xxN7/0N0DngFBMDvIADGCAJgpPNjCfPZ5Okm0538HLUJ9fTZ2O1m0WfWmm/HatpndUjOo1QAAAAuRud4P7lzvqshAH4HATBGEAAjnR9LmM8mTzeZ7oaXwTWkz2XLk07fjpW0vy7HHscQAADARejcbrvHsL2AAPgdBMAYQQCMdH4sYT6bPN1kupt/R+1CHX0mdsvZls8b821ZSfvr8oiMn6L6AAAAsBed1135ub+PCIDfQQCMEQTASOfHEuazydNNprv5LWoX6ugz2XbVgW/LKtpXt0dk8CxgAACAzemcbrt3cLyIAPgdBMAYQQCMdH4sYT6bPN1kuiNOABrR57HtCyd8W1bRvv7t913s+6hOAAAA7EHnc5/d+d2V8fvvHQTAGEEAjHR+LGE+mzzdZLojbmFvQp/F1uPJt2cV7avb6gyOIQAAgI3pfO43d353ZQTA7yAAxggCYKTzYwnz2eTpJtNdcQt7A/octn7jsG/PKtG+i/0a1QkAAID+dC7X7e6y1QiA30EAjBEEwEjnxxLms8nTTaa74hb2YvoM7OVv0WezDd+mFbSflv3k6wQAAEB/Oo/b9gXMAwiA30EAjBEEwEjnxxLms8nTTaa7YgVjMX0GP7jPZDu+TStoPy2POV8nAAAA+tN5XPcXMNv7Qb6IPaP4U9SGg/67nSfbv7N//633irQOgFWfhfLWju+i/56BABgjCICRzo8lzGeTp0ST6o6+eUKBtdT/2z93zLdpBe2HABgAAABT6Dyu4zm4rUi2EHcoANXfW5BqAbcPg9sFwKrpO7EFMT+/1VhaJwEwRhAAI50fS5jPJqWHCWp3vMiqiPr+EuPIt2sF7YcAGAAAAMN0DtfxvNKC3+nvZ9E2LWC1bVu43CIAVh2fxJ6//Gy1MgEwtkQAjHR+LGE+m5TcJLWz36M2Yj31/eOV7m35dq2g/djJa7j/Sr5OAAAA9KZzuE4vYE4JZrUPWxVc9gJw7dse7WD9/pGV1wTA2BIBMNL5sYT5bFJyk9TueBlcMvV5y0DzFb5tq0T7LvZbVCcAAAD60jlcl5e/2QrYslB2JWuX2GMobMHL2f4mAMaWCICRzo8lzGeTkpukdvfydxVeoz63256iz2I7vm2raF/feqlFhZ+jOgEAANCTzt9sJWp0XpftcuGv2nM8z3f0nJ0AGFsiAEY6P5Ywn01KbpK6grK3rd6R+nv7l78dfNtW0b7s+WVhDUV+iOoEAABATzp/6/D4B1sRe4kXcasd9rvYztFn/rYhAMaWCICRzo8lzGeTkpukruBL1FbMp77usvJgCt++VbSvbv3GRRMAAICN6PytwyKMbRcRqHZ7tMPxPN9Vj9IgAMaWCICRzo8lzGeTkpukroDnmSZRX//i+n5rvn0raX9dVk7z2BQAAICN6Pytwzs4tjuHVM3Hox2yXmBNAIwtEQAjnR9LmM8mJTdJXcXnqL2YR318mZe/HXwbV9L+7GUSYR3Jyk5MAQAAcJ7O3zqcR25xDqk67TeLvbOk4h0cBMDYEgEw0vmxhPlsUnKT1FXwUqvF1MfdnmM7zLdxNe2z+mVwrP4FAADYjM7hqs/DtzmHVK2VL6wmAMaWCICRzo8lzGeTkpukruRSb6PtRv276llZZXwbV9M+P/kaEtnnx7N/AQAANqNzuOrHsH0f1d
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|