esp-link/html/console.html

  <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>
      <legend>Console entry</legend>
      <input type="text" id="input-text" value="">
      <label>History buffer</label>
      <select id="send-history" size="5" style="width:100%"></select>
      <p>Type the command and press <b>ENTER</b>.
         Press <b>ESC</b> to clear the entry.
         The <b>UP</b>/<b>DOWN</b> arrow keys can be used to get previously sent commands from history.
      <div class="pure-g">
        <div class="form-horizontal pure-u-1-2">
          <input type="checkbox" id="input-add-cr" checked>
          <label>Append CR (\r)</label>
        </div>
        <div class="form-horizontal pure-u-1-2">
          <input type="checkbox" id="input-add-lf" checked>
          <label>Append LF (\n)</label>
        </div>
      </div>
    </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); }
    );

    var sendHistory = $("#send-history");
    var inputText = $("#input-text");
    var inputAddCr = $("#input-add-cr");
    var inputAddLf = $("#input-add-lf");

    function findHistory(text) {
      for (var i = 0; i < sendHistory.children.length; i++) {
        if (text == sendHistory.children[i].value) {
          return i;
        }
      }
      return null;
    }
    
    function loadHistory(idx) {
      sendHistory.value = sendHistory.children[idx].value;
      inputText.value = sendHistory.children[idx].value;
    }

    function navHistory(rel) {
      var idx = findHistory(sendHistory.value) + rel;
      if (idx < 0) {
        idx = sendHistory.children.length - 1;
      }
      if (idx >= sendHistory.children.length) {
        idx = 0;
      }
      loadHistory(idx);
    }
    
    sendHistory.addEventListener("change", function(e) {
      inputText.value = sendHistory.value;
    });
  
    function pushHistory(text) {
      var idx = findHistory(text);
      if (idx !== null) {
        loadHistory(idx);
        return false;
      }
      var newOption = m('<option>'+
                        (text
                         .replace(/&/g, '&amp;')
                         .replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(/"/g, '&quot;'))
                        +'</option>');
      newOption.value = text;
      sendHistory.appendChild(newOption);
      sendHistory.value = text;
      for (; sendHistory.children.length > 15; ) {
        sendHistory.removeChild(sendHistory.children[0]);
      }
      return true;
    }
    
    inputText.addEventListener("keydown", function(e) {
      switch (e.keyCode) {
      case 38: /* the up arrow key pressed */
        e.preventDefault();
        navHistory(-1);
        break;
      case 40: /* the down arrow key pressed */
        e.preventDefault();
        navHistory(+1);
        break;
      case 27: /* the escape key pressed */
        e.preventDefault();
        inputText.value = "";
        sendHistory.value = "";
        break;
      case 13: /* the enter key pressed */
        e.preventDefault();
        var text = inputText.value;
        if (inputAddCr.checked) text += '\r';
        if (inputAddLf.checked) text += '\n';
        ajaxSpin('POST', "/console/send?text=" + encodeURIComponent(text),
                 function(resp) { showNotification("uC sent"); pushHistory(inputText.value); },
                 function(s, st) { showWarning("Error sending text to uC"); }
        );
        break;
      }
    });
  });
</script>
</body></html>