home.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <div id="main">
  2. <div class="header">
  3. <div><img src="favicon.ico" height="64"><span class="jl">JEELABS</span></div>
  4. <h1 style="margin-top:0"><span class="esp">esp</span>-link</h1>
  5. <h2 id="version"></h2>
  6. </div>
  7. <div class="content">
  8. <div class="pure-g">
  9. <!-- LEFT COLUMN -->
  10. <div class="pure-u-1 pure-u-md-1-2">
  11. <div class="card">
  12. <h1>System overview</h1>
  13. <div id="wifi-spinner" class="spinner spinner-small"></div>
  14. <table id="wifi-table" class="pure-table pure-table-horizontal" hidden><tbody>
  15. <tr><td class="popup-target">Hostname</td><td>
  16. <div class="click-to-edit system-name">
  17. <span class="edit-off"></span>
  18. <input class="edit-on" maxlength=31 hidden></input>
  19. <div class="popup">Click to edit!<br>Hostname displayed in menu bar
  20. and used by DHCP and mDNS</div>
  21. </div>
  22. </td></tr>
  23. <tr><td>Network SSID</td><td id="wifi-ssid"></td></tr>
  24. <tr><td>WiFi status</td><td id="wifi-status"></td></tr>
  25. <tr><td>WiFi address</td><td id="wifi-ip"></td></tr>
  26. <tr><td>SLIP status</td><td class="system-slip"></td></tr>
  27. <tr><td>MQTT status</td><td class="system-mqtt"></td></tr>
  28. <tr><td>Serial baud</td><td class="system-baud"></td></tr>
  29. </tbody></table>
  30. </div>
  31. <div class="card">
  32. <h1>Info</h1>
  33. <p style="margin-bottom:0;">The JeeLabs meta-id firmware bridges the ESP8266
  34. serial port to WiFi and can
  35. program microcontrollers over the serial port, in particular Arduinos, AVRs, and
  36. NXP's LPC800 and other ARM processors. Typical avrdude command line to
  37. program an Arduino:</p>
  38. <div class="tt" style="font-size:100%;">
  39. /home/arduino/hardware/tools/avrdude&nbsp;\<br>
  40. &nbsp;&nbsp;-DV -patmega328p \<br>
  41. &nbsp;&nbsp;-Pnet:meta-id.local:23 \<br>
  42. &nbsp;&nbsp;-carduino -b115200 \<br>
  43. &nbsp;&nbsp;-U flash:w:my_sketch.hex:i\<br>
  44. &nbsp;&nbsp;-C /home/arduino/hardware/tools/avrdude.conf
  45. </div>
  46. <p>where <tt>-Pnet:meta-id.local:23</tt> tells avrdude to connect to port 23 of meta-id.
  47. You can substitute the IP address of your meta-id for meta-id.local if necessary.
  48. Please refer to
  49. <a href="https://github.com/jeelabs/meta-id/blob/master/README.md">the online README</a>
  50. for up-to-date help.</p>
  51. </div>
  52. </div>
  53. <!-- RIGHT COLUMN -->
  54. <div class="pure-u-1 pure-u-md-1-2">
  55. <div class="card">
  56. <h1>Pin assignment</h1>
  57. <div id="pin-spinner" class="spinner spinner-small"></div>
  58. <div id="pin-table" hidden>
  59. <form action="#" id="pinform" class="pure-form pure-form-aligned form-narrow">
  60. <div class="pure-control-group">
  61. <label for="pin-preset">Presets</label>
  62. <select id="pin-preset" class="pure-button">
  63. <option value="" selected disabled></option>
  64. </select>
  65. </div>
  66. <hr>
  67. <div class="pure-control-group">
  68. <label for="pin-reset">Reset</label>
  69. <select id="pin-reset"></select>
  70. <div class="popup">Connect to &#xb5;C reset pin for programming and reset-&#xb5;C function</div>
  71. </div>
  72. <div class="pure-control-group">
  73. <label for="pin-isp">ISP/Flash</label>
  74. <select id="pin-isp"></select>
  75. <div class="popup">Second signal to program &#xb5;C.
  76. AVR:not used, esp8266:gpio2, ARM:ISP</div>
  77. </div>
  78. <div class="pure-control-group">
  79. <label for="pin-conn">Conn LED</label>
  80. <select id="pin-conn"></select>
  81. <div class="popup">LED to show WiFi connectivity</div>
  82. </div>
  83. <div class="pure-control-group">
  84. <label for="pin-ser">Serial LED</label>
  85. <select id="pin-ser"></select>
  86. <div class="popup">LED to show serial activity</div>
  87. </div>
  88. <div class="pure-control-group">
  89. <label for="pin-swap">UART pins</label>
  90. <select id="pin-swap" class="pure-button">
  91. <option value="0">normal</option>
  92. <option value="1">swapped</option>
  93. </select>
  94. <div class="popup">Swap UART0 pins to avoid ROM boot message.<br>Normal is
  95. TX on gpio1/TX0 and RX on gpio3/RX0, swapped is TX on gpio15 and RX on gpio13.
  96. </div>
  97. </div>
  98. <div class="pure-control-group">
  99. <label for="pin-rxpup" class="pure-checkbox">RX pull-up</label>
  100. <input id="pin-rxpup" type="checkbox">
  101. <div class="popup">Enable internal 40K pull-up on RX</div>
  102. </div>
  103. <button id="set-pins" type="submit" class="pure-button button-primary">Change!</button>
  104. </form>
  105. </div>
  106. </div>
  107. <div class="card">
  108. <h1>System details</h1>
  109. <div id="system-spinner" class="spinner spinner-small"></div>
  110. <table id="system-table" class="pure-table pure-table-horizontal" hidden><tbody>
  111. <tr><td>WiFi mode</td><td id="wifi-mode"></td></tr>
  112. <tr><td>WiFi channel</td><td id="wifi-chan"></td></tr>
  113. <tr><td>Flash chip ID</td><td>
  114. <div>
  115. <span class="system-id"></span>
  116. <div class="popup pop-left">Common IDs: 4016=4MB, 4014=1MB, 4013=512KB</div>
  117. </div>
  118. </td></tr>
  119. <tr><td>Flash size</td><td>
  120. <div>
  121. <span class="system-size"></span>
  122. <div class="popup pop-left">Size configured into bootloader, must match chip size</div>
  123. </div>
  124. </td></tr>
  125. <tr><td>Webpage size</td><td>
  126. <div>
  127. <span class="system-upload-size"></span>
  128. <div class="popup pop-left">The maximal size of the custom web page a user can upload.</div>
  129. </div>
  130. </td></tr>
  131. <tr><td>Current partition</td><td class="system-partition"></td></tr>
  132. <tr><td colspan=2 class="popup-target">Description:<br>
  133. <div class="click-to-edit system-description">
  134. <span class="edit-off" style="display:block; width:auto;"></span>
  135. <textarea class="edit-on" rows=3 maxlength=127 hidden> </textarea>
  136. <div class="popup">Click to edit!<br>A short description or memo for this meta-id
  137. module, 128 chars max</div>
  138. </div>
  139. </td></tr>
  140. </tbody></table>
  141. </div>
  142. </div>
  143. </div>
  144. <div class="pure-g">
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <script type="text/javascript">
  150. onLoad(function() {
  151. makeAjaxInput("system", "description");
  152. makeAjaxInput("system", "name");
  153. fetchPins();
  154. getWifiInfo();
  155. getSystemInfo();
  156. bnd($("#pinform"), "submit", setPins);
  157. });
  158. </script>
  159. </body></html>