index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta
      name="description"
      content="VayuVani by Chandra (@tckb) - a self managed LoRa Groundstation part of MoonAndBeyond.Blog"
  />
  <link rel="apple-touch-icon" href="logo.png" />
  <title>.:: VayuVani by @tckb - a self managed LoRa Groundstation ::.</title>
  <script type="module"
          src="https://unpkg.com/esp-web-tools@9.4.3/dist/web/install-button.js?module"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

    body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }

    .title-container {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      border-radius: 4px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      margin: 32px auto;
      width: 100%;
      max-width: 900px;
      box-sizing: border-box;
    }

    .logo-container {
      margin-right: 15px;
    }

    .logo {
      width: 60px;
      height: 60px;
    }

    .text-container {
      display: flex;
      flex-direction: column;
    }

    .main-title {
      font-size: 2rem;
      font-weight: 500;
      color: white;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      letter-spacing: 0.02em;
      line-height: 1.2;
      margin: 0;
    }

    .sub-title {
      font-size: 1rem;
      color: #bbd2f3;
      margin-top: 4px;
      font-weight: 400;
    }

    #content {
      text-align: center;
      padding: 20px;
      background-color: white;
      border-radius: 4px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
      width: 100%;
      max-width: 900px;
      box-sizing: border-box;
    }

    #content h2 {
      color: #1e3c72;
      margin-bottom: 20px;
    }

    #version-select {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    #instructions {
      text-align: left;
      margin-bottom: 20px;
    }

    #instructions ol {
      padding-left: 20px;
    }

    #instructions li {
      margin-bottom: 10px;
    }


    footer {
      margin-top: 20px;
      text-align: center;
      font-size: 0.9em;
      color: #666;
    }
  </style>
</head>
<body>
<div class="title-container">
  <div class="logo-container">
    <img src="logo.png" alt="VayuVani Logo" class="logo">
  </div>
  <div class="text-container">
    <h1 class="main-title">VayuVani</h1>
    <p class="sub-title">Groundstation Firmware Installer</p>
  </div>
</div>

<div id="content">
  <h2>Install Firmware</h2>

  <div id="instructions">
    <h3>Instructions:</h3>
    <ol>
      <li>Connect your ESP32 device to your computer using a USB cable.</li>
      <li>Select the firmware version you want to install from the dropdown menu below.</li>
      <li>Click the "Connect" button to begin the installation process.</li>
      <li>Follow the on-screen prompts to complete the installation.</li>
      <li>Once the installation is completed, watch for <code>VayuVani-Setup</code> Wifi.</li>
      <li>Connect to this WiFi with the default password is <code>vayuvani</code>.</li>
      <li>Once connected head on to <a href="http://192.168.4.1/config">192.168.4.1/config</a> for
        further configuration
      </li>
      <li>Congrats 🎉 VayuVani has been successfully configured.</li>
      <li>Nextup, <a href="#">download</a> the VayuVani App to start captuting your LoRa packets!
      </li>
    </ol>
  </div>

  <label for="version-select">Select firmware version:</label>
  <select id="version-select">
    <option value="">-- Loading Versions --</option>
  </select>

  <div id="install-button-container">
    <!-- ESP Web Installer button will be inserted here -->
  </div>
</div>

<footer>
  <p>VayuVani is created and maintained by <a href="https://x.com/this_is_tckb">Chandra
    Tungathurthi</a>, part of <a
      href="https://moonandbeyond.blog/?utm_source=vayuvani-installer&utm_medium=website&utm_campaign=apps">moonandbeyond.blog</a>
  </p>
  <p>Special thanks to the <a href="https://tinygs.com">TinyGS project</a> for their contributions,
    this installer is inspired from <a href="https://installer.tinygs.com/">TinyGS installer</a>.
  </p>
  <p>Web installer powered by <a href="https://esphome.github.io/esp-web-tools/" target="_blank">ESP
    Web Tools</a>.</p>
</footer>

<script>
  const versionSelect = document.getElementById('version-select');
  const installButtonContainer = document.getElementById('install-button-container');

  // Fetch versions.json and populate the dropdown
  fetch('versions.json')
  .then(response => response.json())
  .then(versions => {
    // Clear the loading message
    versionSelect.innerHTML = '<option value="">-- Select Version --</option>';

    // Optional: Sort versions, newest first
    versions.sort().reverse();

    // Populate the dropdown with versions
    versions.forEach(version => {
      const option = document.createElement('option');
      option.value = `manifest_v${version}.json`;
      option.textContent = `Version ${version}`;
      versionSelect.appendChild(option);
    });
  })
  .catch(error => {
    console.error('Error fetching versions:', error);
    versionSelect.innerHTML = '<option value="">-- Error Loading Versions --</option>';
  });

  // Update the install button when a version is selected
  versionSelect.addEventListener('change', () => {
    const selectedManifest = versionSelect.value;
    // Remove existing install button if any
    installButtonContainer.innerHTML = '';

    if (selectedManifest) {
      // Create a new install button with the selected manifest
      const installButton = document.createElement('esp-web-install-button');
      installButton.setAttribute('manifest', selectedManifest);

      // Optionally, add other attributes or event listeners
      // For example, you can listen to events like 'flashstart' and 'flashend'
      installButton.addEventListener('flashstart', () => {
        console.log('Flashing started');
      });
      installButton.addEventListener('flashend', () => {
        console.log('Flashing ended');
      });

      // Append the new install button to the container
      installButtonContainer.appendChild(installButton);
    }
  });
</script>
</body>
</html>