esp-link/html/home.html

  <div id="main">
    <div class="header">
      <div><img src="favicon.ico" height="64"><span class="jl">JEELABS</span></div>
      <h1 style="margin-top:0"><span class="esp">esp</span>-link</h1>
      <h2 id="version"></h2>
    </div>

    <div class="content">
      <div class="pure-g">
        <!-- LEFT COLUMN -->
        <div class="pure-u-1 pure-u-md-1-2">
          <div class="card">
            <h1>System overview</h1>
            <div id="wifi-spinner" class="spinner spinner-small"></div>
            <table id="wifi-table" class="pure-table pure-table-horizontal" hidden><tbody>
              <tr><td class="popup-target">Hostname</td><td>
                <div class="click-to-edit system-name">
                  <span class="edit-off"></span>
                  <input class="edit-on" maxlength=31 hidden></input>
                  <div class="popup">Click to edit!<br>Hostname displayed in menu bar
                    and used by DHCP and mDNS</div>
                </div>
              </td></tr>
              <tr><td>Network SSID</td><td id="wifi-ssid"></td></tr>
              <tr><td>WiFi status</td><td id="wifi-status"></td></tr>
              <tr><td>WiFi address</td><td id="wifi-ip"></td></tr>
              <tr><td>SLIP status</td><td class="system-slip"></td></tr>
              <tr><td>MQTT status</td><td class="system-mqtt"></td></tr>
              <tr><td>Serial baud</td><td class="system-baud"></td></tr>
            </tbody></table>
          </div>
          <div class="card">
            <h1>Info</h1>
            <p style="margin-bottom:0;">The JeeLabs esp-link firmware bridges the ESP8266
            serial port to WiFi and can
            program microcontrollers over the serial port, in particular Arduinos, AVRs, and
            NXP's LPC800 and other ARM processors. Typical avrdude command line to
            program an Arduino:</p>
            <div class="tt" style="font-size:100%;">
              /home/arduino/hardware/tools/avrdude&nbsp;\<br>
              &nbsp;&nbsp;-DV -patmega328p \<br>
              &nbsp;&nbsp;-Pnet:esp-link.local:23 \<br>
              &nbsp;&nbsp;-carduino -b115200 \<br>
              &nbsp;&nbsp;-U flash:w:my_sketch.hex:i\<br>
              &nbsp;&nbsp;-C /home/arduino/hardware/tools/avrdude.conf
            </div>
            <p>where <tt>-Pnet:esp-link.local:23</tt> tells avrdude to connect to port 23 of esp-link.
            You can substitute the IP address of your esp-link for esp-link.local if necessary.
            Please refer to
            <a href="https://github.com/jeelabs/esp-link/blob/master/README.md">the online README</a>
            for up-to-date help.</p>
          </div>
          <div class="card">
            <h1>Telnet Serial-Bridge</h1>
            <p style="margin-bottom:0;">There are two ports available for telnet to use by default: 23 &amp; 2323 <br>
            Note - this time, only port0 may be changed &amp; used sucessfully.</p>
            <div id="telnet-spinner" class="spinner spinner-small"></div>
            <table id="telnet-table" class="pure-table pure-table-horizontal" hidden><tbody>
            <tr><td>Current Telnet ports</td><td class="telnet-info"></td></tr>
            <tr><td colspan=2 class="popup-target">Telnet port 1:<br>
                <div class="click-to-edit telnet-port0">
                  <span class="edit-off" style="display:block; width:auto;"></span>
                  <input class="edit-on" maxlength=5 hidden> </input>
                  <div class="popup">Click to edit!<br>Default port: 23</div>
                </div>
            </td></tr>
            <tr><td colspan=2 class="popup-target">Telnet port 2:<br>
                <div class="click-to-edit telnet-port1">
                  <span class="edit-off" style="display:block; width:auto;"></span>
                  <input class="edit-on" maxlength=5 hidden> </input>
                  <div class="popup">Click to edit!<br>Default port: 2323</div>
                </div>
            </td></tr>
            </tbody></table>
          </div>
        </div>
        <!-- RIGHT COLUMN -->
        <div class="pure-u-1 pure-u-md-1-2">
          <div class="card">
            <h1>Pin assignment</h1>
            <div id="pin-spinner" class="spinner spinner-small"></div>
            <div id="pin-table" hidden>
              <form action="#" id="pinform" class="pure-form pure-form-aligned form-narrow">
                <div class="pure-control-group">
                  <label for="pin-preset">Presets</label>
                  <select id="pin-preset" class="pure-button">
                    <option value="" selected disabled></option>
                  </select>
                </div>
                <hr>
                <div class="pure-control-group">
                  <label for="pin-reset">Reset</label>
                  <select id="pin-reset"></select>
                  <div class="popup">Connect to &#xb5;C reset pin for programming and reset-&#xb5;C function</div>
                </div>
                <div class="pure-control-group">
                  <label for="pin-isp">ISP/Flash</label>
                  <select id="pin-isp"></select>
                  <div class="popup">Second signal to program &#xb5;C.
                    AVR:not used, esp8266:gpio2, ARM:ISP</div>
                </div>
                <div class="pure-control-group">
                  <label for="pin-conn">Conn LED</label>
                  <select id="pin-conn"></select>
                  <div class="popup">LED to show WiFi connectivity</div>
                </div>
                <div class="pure-control-group">
                  <label for="pin-ser">Serial LED</label>
                  <select id="pin-ser"></select>
                  <div class="popup">LED to show serial activity</div>
                </div>
                <div class="pure-control-group">
                  <label for="pin-swap">UART pins</label>
                  <select id="pin-swap" class="pure-button">
                    <option value="0">normal</option>
                    <option value="1">swapped</option>
                  </select>
                  <div class="popup">Swap UART0 pins to avoid ROM boot message.<br>Normal is
                    TX on gpio1/TX0 and RX on gpio3/RX0, swapped is TX on gpio15 and RX on gpio13.
                  </div>
                </div>
                <div class="pure-control-group">
                  <label for="pin-rxpup" class="pure-checkbox">RX pull-up</label>
                  <input id="pin-rxpup" type="checkbox">
                  <div class="popup">Enable internal 40K pull-up on RX</div>
                </div>
                <button id="set-pins" type="submit" class="pure-button button-primary">Change!</button>
              </form>
            </div>
          </div>
          <div class="card">
            <h1>System details</h1>
            <div id="system-spinner" class="spinner spinner-small"></div>
            <table id="system-table" class="pure-table pure-table-horizontal" hidden><tbody>
            <tr><td>WiFi mode</td><td id="wifi-mode"></td></tr>
            <tr><td>WiFi channel</td><td id="wifi-chan"></td></tr>
            <tr><td>Flash chip ID</td><td>
              <div>
                <span class="system-id"></span>
                <div class="popup pop-left">Common IDs: 4016=4MB, 4014=1MB, 4013=512KB</div>
              </div>
            </td></tr>
            <tr><td>Flash size</td><td>
              <div>
                <span class="system-size"></span>
                <div class="popup pop-left">Size configured into bootloader, must match chip size</div>
              </div>
            </td></tr>
            <tr><td>Webpage size</td><td>
              <div>
                <span class="system-upload-size"></span>
                <div class="popup pop-left">The maximal size of the custom web page a user can upload.</div>
              </div>
            </td></tr>
            <tr><td>Current partition</td><td class="system-partition"></td></tr>
            <tr><td colspan=2 class="popup-target">Description:<br>
                <div class="click-to-edit system-description">
                  <span class="edit-off" style="display:block; width:auto;"></span>
                  <textarea class="edit-on" rows=3 maxlength=127 hidden> </textarea>
                  <div class="popup">Click to edit!<br>A short description or memo for this esp-link
                    module, 128 chars max</div>
                </div>
            </td></tr>
            </tbody></table>
          </div>
        </div>
      </div>
      <div class="pure-g">
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
onLoad(function() {
  makeAjaxInput("system", "description");
  makeAjaxInput("system", "name");
  makeAjaxInput("telnet", "port0");
  makeAjaxInput("telnet", "port1");
  fetchPins();
  getWifiInfo();
  getSystemInfo();
  getTelnetInfo();
  bnd($("#pinform"), "submit", setPins);
});
</script>
</body></html>