<div id="main">
    <div class="header">
      <h1>Microcontroller Console</h1>
    </div>

    <div class="content">
      <p>The Microcontroller console shows the last 1024 characters
         received from UART0, to which a microcontroller is typically attached.
         The UART is configured for 8 bits, no parity, 1 stop bit (8N1).</p>
      <p>
        <a id="reset-button" class="pure-button button-primary" href="#">Reset µC</a>
        &nbsp;Baud:
        <span id="baud-btns"></span>
      </p>
      <pre class="console" id="console"></pre>
    </div>
  </div>
</div>

<script type="text/javascript">console_url = "/console/text"</script>
<script src="console.js"></script>
<script type="text/javascript">
  var rates = [9600, 57600, 115200, 250000];

  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"); }
      );
    });

    rates.forEach(function(r) { baudButton(r); });

    ajaxJson('GET', "/console/baud",
      function(data) { showRate(data.rate); },
      function(s, st) { showNotification(st); }
    );
  });
</script>
</body></html>