CINXE.COM
MicroPython on Unicorn
<!DOCTYPE html> <html> <head> <title>MicroPython on Unicorn</title> <link rel="stylesheet" href="xterm.css" /> <link rel="stylesheet" href="codemirror.css" /> <link rel="stylesheet" href="bootstrap.min.css"/ > <link rel="stylesheet" href="mp_unicorn.css" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet"> </head> <body> <div class="navbar-container"> <nav class="navbar navbar-dark bg-inverse"> <a class="navbar-brand" href='http://micropython.org'> <span> <img src ="images/Mlogo_138wh.png" width="50px"> </span> <span> MicroPython </span> </a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="/">HOME</a> </li> <li class="nav-item"> <a class="nav-link" href="http://forum.micropython.org">FORUM</a> </li> <li class="nav-item"> <a class="nav-link" href="http://docs.micropython.org">DOCS</a> </li> <li class="nav-item"> <a class="nav-link" href="http://docs.micropython.org/en/latest/pyboard/quickref.html"> QUICK-REF </a> </li> <li class="nav-item"> <a class="nav-link" href="/download">DOWNLOAD</a> </li> <li class="nav-item"> <a class="nav-link" href="/store">STORE</a> </li> <li class="nav-item"> <a class="nav-link" href="/contact">CONTACT</a> </li> </ul> </nav> </div> <div id="wrap"> <div id="col1"> <div id="terminal"></div> <p> BINARY : <select id="binary" class="blue-element"> <option value="minimal">MINIMAL</option> <option value="features">FEATURES</option> <option value="pyboard" selected>PYBOARD</option> <select> RAM : <select id="ram_size" class="blue-element"> <option value=32768>32KB</option> <option value=65536 selected>64KB</option> <option value=131072>128KB</option> <option value=262144>256KB</option> </select> STACK : <select id="stack_size" class="blue-element"> <option value=4096>4KB</option> <option value=8192 selected>8KB</option> <option value=16384>16KB</option> </select> <button type="button" id="reset_button" class="red-element">RESET</button> </p> <br /> <p>CLOCK SPEED <ins id="clock_speed"></ins> MHz</p> <br /> <br /> <p>PERIPHERALS : </p> <br /> <div id="checkboxes"> <table id="checkbox_table"> <tr> <td><input type="checkbox" value="pin_led" class="components">LED</br></td> <td><input type="checkbox" value="i2c_lcd" class="components">I2C LCD</br></td> </tr> <tr> <td><input type="checkbox" value="pin_servo" class="components">SERVO</br></td> </tr> <tr> <td><input type="checkbox" value="pin_adc" class="components">ADC</br></td> </tr> </table> </div> </div> <div id="col2"> <div id="editor_wrap"> <div id="editor_div"> <textarea id="editor"></textarea> </div> </div> <p> <button type="button" id="run_button" class="green-element">RUN SCRIPT</button> <select id="demos" class="green-element"></select> </p> <div id="PYB"> <img id="base" src="images/PYB_base.png" class="PYB"/> <img id="red_led" src="images/PYB_red_LED.png" class="PYB LED"/> <img id="green_led" src="images/PYB_green_LED.png" class="PYB LED" /> <img id="yellow_led" src="images/PYB_yellow_LED.png" class="PYB LED" /> <img id="blue_led" src="images/PYB_blue_LED.png" class="PYB LED" /> <div id="pin_led" class="component"> <img id="pin_led_base" src="images/PYB_PIN_LED_BASE.png" class="PYB" /> <img id="pin_led_on" src="images/PYB_PIN_LED_ON.png" class="PYB LED" /> </div> <div id="pin_servo" class="component"> <img id="pin_servo_base" src="images/PYB_PIN_SERVO_BASE.png" class="PYB" /> <img id="pin_servo_blade" src="images/PYB_PIN_SERVO_BLADE.png" class="PYB" /> </div> <div id="pin_adc" class="component"> <img id="pin_adc" src="images/PYB_PIN_ADC.png" class="PYB" /> <input type="range" id="adc_slider"> </div> <div id="i2c_lcd" class="component"> <img id="lcd_unicorn_wires" src="images/PYB_I2C_LCD.png" class="PYB" /> <canvas id="lcd_unicorn" width=256 height=128></canvas> </div> <!-- BUTTONS BREAK ON RESIZE --> <img id="button_layer" src="images/PYB_button_layer.png" usemap="#PYB_map" class="PYB"/> <map name="PYB_map"> <area id="PYB_reset_button" shape="poly" coords="869,138,876,138,887,144,887,154,876,162,868,162,858,155,858,146" href="#" /> <area id="PYB_user_button" shape="poly" coords="742,138,751,138,761,145,761,155,751,162,742,162,733,155,732,153,732,145" href="#" /> </map> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script src="jquery.imagemapster.min.js"></script> <script src="xterm.js"></script> <script src="fit.js"></script> <script src="codemirror.js"></script> <script> var term = new Terminal(); term.open(document.getElementById('terminal'), true); term.fit(); var editor = CodeMirror.fromTextArea(document.getElementById('editor'), { indentUnit: 4, lineNumbers: true, mode: "python", extraKeys: { Tab: function(cm) { var spaces = Array(cm.getOption("indentUnit") + 1).join(" "); cm.replaceSelection(spaces); } } }); $('#button_layer').mapster({ fillColor: 'ff0000', fillOpacity: 0.5, staticState: false, }); </script> <script src="unicorn-arm.min.js"></script> <script src="demo_scripts.js"></script> <script src="mp_unicorn.js"></script> </div> </body> </html>