index.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <html>
  2. <head>
  3. <title>ESP Web Tools</title>
  4. <style>
  5. body {
  6. font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
  7. Roboto, Ubuntu, sans-serif;
  8. padding: 0;
  9. margin: 0;
  10. line-height: 1.4;
  11. }
  12. .content {
  13. max-width: 600px;
  14. margin: 0 auto;
  15. padding: 12px;
  16. }
  17. esp-web-flash-log {
  18. margin-top: 8px;
  19. }
  20. a {
  21. color: #03a9f4;
  22. }
  23. </style>
  24. <script module>
  25. import(
  26. // In development we import locally.
  27. window.location.hostname === "localhost"
  28. ? "/dist/web/install-button.js"
  29. : "https://unpkg.com/esp-web-tools@1.0.3/dist/web/install-button.js?module"
  30. );
  31. </script>
  32. </head>
  33. <body>
  34. <div class="content">
  35. <h1>ESP Web Tools</h1>
  36. <p>
  37. ESP Web Tools is a set of tools to allow working with ESP devices in the
  38. browser.
  39. </p>
  40. <p>
  41. To install the ESPHome firmware, connect an ESP to your computer and hit
  42. the button:
  43. </p>
  44. <esp-web-install-button
  45. manifest="firmware_build/manifest.json"
  46. ></esp-web-install-button>
  47. <p>
  48. <i
  49. >Note, this only works in desktop Chrome and Edge. Android support has
  50. not been implemented yet.</i
  51. >
  52. </p>
  53. <p>
  54. This works by combining Web Serial with a
  55. <a href="firmware_build/manifest.json">manifest</a> which describes the
  56. firmware. It will automatically detect the type of the connected ESP
  57. device and find the right firmware files in the manifest.
  58. </p>
  59. <p>
  60. To add this to your own website, create a manifest and add the button
  61. pointing at it to your website:
  62. </p>
  63. <pre>
  64. &lt;script
  65. type="module"
  66. src="https://unpkg.com/esp-web-tools@1.0.3/dist/web/install-button.js?module"
  67. >&lt;/script>
  68. &lt;esp-web-install-button
  69. manifest="firmware_build/manifest.json"
  70. >&lt;/esp-web-install-button></pre
  71. >
  72. <p>
  73. Add the attribute <code>erase-first</code> if you want to first fully
  74. erase the ESP prior to installation.
  75. </p>
  76. <p>
  77. Customize the button or unsupported message by using the
  78. <code>activate</code> and <code>unsupported</code> slots:
  79. </p>
  80. <pre>
  81. &lt;esp-web-install-button
  82. manifest="firmware_build/manifest.json"
  83. erase-first
  84. >
  85. &lt;button slot="activate">Custom install button&lt;/button>
  86. &lt;span slot="unsupported">Ah snap, your browser doesn't work!&lt;/span>
  87. &lt;/esp-web-install-button>
  88. </pre
  89. >
  90. </div>
  91. </body>
  92. </html>