<div id="main" class="flex-fill flex-vbox" style="max-height:100%"> <div class="header"> <h1>Microcontroller Console</h1> </div> <div class="content flex-fill flex-vbox"> <p> <a id="reset-button" class="pure-button button-primary" href="#">Reset µC</a> <a id="clear-button" class="pure-button button-primary" href="#">Clear Log</a> Baud: <select id="baud-sel" class="pure-button" href="#"> <option value="460800">460800</option> <option value="250000">250000</option> <option value="230400">230400</option> <option value="115200">115200</option> <option value="57600">57600</option> <option value="38400">38400</option> <option value="19200">19200</option> <option value="9600">9600</option> </select> Fmt: 8N1 </p> <div class="pure-g"> <div class="pure-u-1-4"><legend><b>Console</b></legend></div> <div class="pure-u-3-4"></div> </div> <pre class="console flex-fill" id="console">--- No Content ---</pre> <div> <div class="pure-g"> <div class="pure-u-1-4"><legend><b>Console entry</b></legend></div> <div class="pure-u-2-4"> <legend>(ENTER to submit, ESC to clear)</legend> </div> <div class="pure-u-1-4"> <legend>Add: <input type="checkbox" id="input-add-cr" checked class="inline"><label>CR(\r)</label> <input type="checkbox" id="input-add-lf" checked class="inline"><label>LF(\n)</label> </legend> </div> </div> <div class="pure-g"> <div class="pure-u-1-1"> <span style="float:right; width:10px;"></span> <input type="text" class="console-in" id="input-text" value=""> </div> </div> <div class="pure-g"> <div class="pure-u-1-4"><legend><b>History buffer</b></legend></div> <div class="pure-u-2-4"><legend>(UP/DOWN arrows to select)</legend></div> <div class="pure-u-1-4"></div> </div> <div class="pure-g"> <div class="pure-u-1-1"><select class="console-in" id="send-history" size="5"></select></div> </div> </div> </div> </div> </div> <script type="text/javascript">console_url = "/console/text"</script> <script src="console.js"></script> <script type="text/javascript"> onLoad(function() { fetchText(100, true); $("#reset-button").addEventListener("click", function(e) { e.preventDefault(); var co = $("#console"); co.innerHTML = ""; ajaxSpin('POST', "/console/reset", function(resp) { showNotification("uC reset"); co.textEnd = 0; }, function(s, st) { showWarning("Error resetting uC"); } ); }); $("#clear-button").addEventListener("click", function(e) { e.preventDefault(); var co = $("#console"); co.innerHTML = ""; }); ajaxJson('GET', "/console/baud", function(data) { $("#baud-sel").value = data.rate; }, function(s, st) { showNotification(st); } ); bnd($("#baud-sel"), "change", function(ev) { ev.preventDefault(); var baud = $("#baud-sel").value; ajaxSpin('POST', "/console/baud?rate="+baud, function(resp) { showNotification("" + baud + " baud set"); }, function(s, st) { showWarning("Error setting baud rate: " + st); } ); }); consoleSendInit(); addClass($('html')[0], "height100"); addClass($('body')[0], "height100"); addClass($('#layout'), "height100"); addClass($('#layout'), "flex-vbox"); }); </script> </body></html>