example.html 1.0 KB

1234567891011121314151617181920212223242526272829
  1. <html>
  2. <head>
  3. <title>ESPHome Web</title>
  4. <style>
  5. body {
  6. max-width: 600px;
  7. }
  8. esphome-web-flash-button {
  9. display: inline-block;
  10. margin-bottom: 8px;
  11. }
  12. a {
  13. color: #03a9f4;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <p>ESPHome Web is a set of tools to allow working with ESP devices in the browser.</p>
  19. <p>To flash the XX firmware, connect an ESP to your computer and hit the button:</p>
  20. <esphome-web-flash-button
  21. manifest="firmware_build/manifest.json"
  22. ></esphome-web-flash-button>
  23. <p><i>Note, this only works in desktop Chrome and Edge. Android support has not been implemented yet.</i></div>
  24. <p>
  25. This works by combining Web Serial with a <a href="firmware_build/manifest.json">manifest</a> which describes the firmware. It will automatically detect the type of the connected ESP device and find the right firmware files in the manifest.
  26. </p>
  27. <script src="./dist/web/flash-button.js" type="module"></script>
  28. </body>
  29. </html>