esp-link/html/console.html

  <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 &#xb5;C</a>
        &nbsp; <a id="clear-button" class="pure-button button-primary" href="#">Clear Log</a>
        &nbsp; 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>
          <option value="4800">4800</option>
          <option value="2400">2400</option>
          <option value="1200">1200</option>
          <option value="600">600</option>
          <option value="300">300</option>
        </select>
        &nbsp; Fmt:
        <select id="fmt-sel" class="pure-button" href="#">
          <option value="8N1">8N1</option>
          <option value="8E1">8E1</option>
          <option value="8N2">8N2</option>
          <option value="8E2">8E2</option>
          <option value="7N1">7N1</option>
          <option value="7E1">7E1</option>
          <option value="7N2">7N2</option>
          <option value="7E2">7E2</option>
        </select>
      </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");
        ajaxSpin('POST', "/console/clear",
          function(resp) { showNotification("uC buffer cleared"); co.innerHTML = ""; co.textEnd = 0;},
          function(s, st) { showWarning("Error clearing buffer in uC"); }
        );
    });

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

    ajaxJson('GET', "/console/fmt",
      function(data) { $("#fmt-sel").value = data.fmt; },
      function(s, st) { showNotification(st); }
    );

    bnd($("#fmt-sel"), "change", function(ev) {
      ev.preventDefault();
      var fmt = $("#fmt-sel").value;
      ajaxSpin('POST', "/console/fmt?fmt="+fmt,
        function(resp) { showNotification("" + fmt + " format set"); },
        function(s, st) { showWarning("Error setting format: " + st); }
      );
    });

    consoleSendInit();

    addClass($('html')[0], "height100");
    addClass($('body')[0], "height100");
    addClass($('#layout'), "height100");
    addClass($('#layout'), "flex-vbox");
  });
</script>
</body></html>