index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MeshCore flasher</title>
  <link href="/css/beer.css" rel="stylesheet">
  <link href="/css/flasher.css" rel="stylesheet">
  <script type="module" src="/flasher.js"></script>
</head>

<body class="dark">
  <div id="app" v-cloak>
    <div class="snackbar" :class="snackbar.class" popover>
      <i v-if="snackbar.icon">{{ snackbar.icon }}</i>
      <span v-html="snackbar.text"></span>
    </div>
    <div class="flash-container">
      <div v-if="flashing.active">
        <header>
          <nav>
            <i>developer_board</i>
            <span class="small">{{ selected.device.name }}</span>
            <i>chevron_right</i>
            <i>{{ fwValue(selected.firmware, 'icon') }}</i>
            <span class="small strong">{{ fwValue(selected.firmware, 'title') }}</span>
          </nav>
        </header>
        <article v-if="flashing.error">
          <div class="row">
            <div class="max">
              <h6>Flashing failed!</h6>
              <p><span>{{ flashing.error }}</span></p>
            </div>
          </div>
          <nav class="small-margin wrap">
            <button @click="retry">
              <i>bolt</i>
              <span>Retry</span>
            </button>
            <button @click="close">
              <i>arrow_back</i>
              <span>Close</span>
            </button>
          </nav>
        </article>
        <article v-else>
          <div class="row">
            <div class="max" v-if="flashing.percent < 100">
              <h6><progress class="circle small"></progress> Flashing...</h6>
              <p>Please do not disconnect the device</p>
            </div>
            <div class="max" v-else>
              <h6>Flashing complete!</h6>
              <nav class="small-margin wrap">
                <button @click="openSerialGUI()" v-if="selected.firmware.role === 'roomServer' || selected.firmware.role === 'repeater'">
                  <i>manufacturing</i>
                  <span>Configure via USB</span>
                  <div class="tooltip bottom start max">Open GUI to configure Repeaters and Room servers via USB serial</div>
                </button>
                <button @click="close">
                  <i>arrow_back</i>
                  <span>Close</span>
                </button>
                <button @click="retry">
                  <i>bolt</i>
                  <span>Flash Again</span>
                </button>
              </nav>
            </div>
          </div>
          <div class="autoscroller">
            <pre class="term" v-if="flashing.log">{{ flashing.log }}</pre>
          </div>
          <nav>
            <progress :value="flashing.percent" max="100"></progress>
          </nav>
        </article>
      </div>
      <div v-else-if="selected.firmware">
        <header>
          <nav>
            <button class="circle transparent" @click="stepBack"><i>arrow_back</i></button>
            <i>developer_board</i>
            <a class="small" href="javascript:;" @click="stepBack">{{ selected.device.name }}</a>
            <i>chevron_right</i>
          </nav>
          <article class="no-margin">
            <ul class="list">
              <li>
                <i>{{ fwValue(selected.firmware, 'icon') }}</i>&nbsp;
                <div class="max">
                  <h6 class="small strong">{{ fwValue(selected.firmware, 'title') }} {{ fwValue(selected.firmware, 'subTitle') }}</h6>
                  <span class="text-wrap">{{ fwValue(selected.firmware, 'tooltip') }}</span>
                </div>
              </li>
            </ul>
          </article>
          <div v-if="notice" v-html="notice"></div>
          <nav class="version">
            <div class="field label suffix border small">
              <select v-model="selected.version">
                <template v-for="(version, versionName) in selected.firmware.version">
                  <option v-if="version.files.length > 0">{{ versionName }}</option>
                </template>
              </select>
              <label>Version</label>
              <i>arrow_drop_down</i>
            </div>
            <div class="max pre" v-if="currentVersion?.notes">
              <b>Changelog:</b><br>
              <read-more max-height="300px">
                <span v-html="formatChangeLog(currentVersion.notes)"></span>
              </read-more>
            </div>
          </nav>
        </header>
        <ul class="list border" v-if="selected.device.type === 'esp32'">
          <li>
            <label class="checkbox">
              <input type="checkbox" v-model="selected.wipe">
              <span>Erase device</span>
              <div class="tooltip right max">
                DO NOT carry out a full erase if you are simply updating your MeshCore device,
                otherwise it will erase your MeshCore identity for that device.
              </div>
            </label>
          </li>
        </ul>
        <template v-if="selected.device.type === 'nrf52'">
          <div class="small-space"></div>
          <nav class="small-margin wrap">
            <button @click="dfuMode" :disabled="eraser.active || !flashing.supported">
              <i>{{ flashing.dfuComplete ? 'check' : 'code' }}</i>
              <span>{{ flashing.dfuComplete ? 'DFU mode active' : 'Enter DFU mode' }}</span>
              <div class="tooltip start max" v-if="flashing.supported">
                Enter DFU mode - this mode enables you to flash your firmware.
                If you did not trigger the DFU mode manually, please click this button.
              </div>
              <div class="tooltip start max" v-else>{{ WEB_SERIAL_UNSUPPORTED }}</div>
            </button>
            <button @click="nrfErase" :disabled="!flashing.supported || eraser.active || eraser.percent > 0">
              <i v-if="eraser.percent === 100">check</i>
              <progress v-else-if="eraser.active" class="circle small"></progress>
              <i v-else>delete_forever</i>

              <span v-if="eraser.percent === 100">Flash Erased!</span>
              <span v-else-if="eraser.percent > 0">Flashing erase firmware: {{ eraser.percent }}%</span>
              <span v-else-if="eraser.active">Connecting...</span>
              <span v-else>Erase Flash</span>

              <div class="tooltip start max" v-if="flashing.supported">
                Flash special firmware that will format your flash and erase all user data.<br>
                Click <b>Enter DFU mode</b> before erasing, if you did not trigger the DFU mode manually
              </div>
              <div class="tooltip start max" v-else>{{ WEB_SERIAL_UNSUPPORTED }}</div>
            </button>
          </nav>
        </template>
        <div class="medium-space"></div>
        <nav class="small-margin wrap">
        <template v-if="selected.device.type !== 'noflash'">
          <button @click="flashDevice" :disabled="eraser.active || !flashing.supported">
            <i>bolt</i>
            <span>Flash!</span>
            <div class="tooltip right max" v-if="flashing.supported">
              Upload the firmware into your device. Existing firmware will get overwritten.
              <span v-if="selected.device.type === 'nrf52'">
                If you did not trigger DFU mode manually, use the <b>Enter DFU mode</b> before flashing
              </span>
            </div>
            <div class="tooltip right max" v-else>{{ WEB_SERIAL_UNSUPPORTED }}</div>
          </button>
          <div class="max"></div>
        </template>
        <button data-ui="#down" class="active" v-if="downloads.length">
          <i>download</i>
          <span>Download</span><i>arrow_drop_down</i>
          <menu class="left no-wrap" id="down" data-ui="#down">
            <li v-for="file in downloads">
              <a data-ui="menu-selector" :href="file.href" download>{{ file.title }}</a>
            </li>
          </menu>
          <div class="tooltip left max">Download a copy of the firmware files for use with other flashers</div>
        </button>
        </nav>
      </div>
      <div v-else-if="selected.device">
        <header>
          <nav>
            <button class="circle transparent" @click="stepBack"><i>arrow_back</i></button>
            <i>developer_board</i>
            <span class="small strong">{{ selected.device.name }}</span>
          </nav>
          <nav class="no-margin">
            <h6 class="small max">Choose role</h6>
          </nav>
        </header>
        <template v-for="(fwGroup, fwClass) in deviceFirmwareByClass">
          <ul class="list border">
            <li class="firmware-class" v-if="firmwareClasses[fwClass]">
              <label>
                {{ firmwareClasses[fwClass].title }}
                <div class="tooltip right max" v-html="firmwareClasses[fwClass].tooltip"></div>
              </label>
            </li>
            <li v-for="firmware in fwGroup" :class="fwClass">
              <button class="transparent" @click="selectFirmware(firmware)">
                <i>{{ fwValue(firmware, 'icon') }}</i>
                <span>{{ fwValue(firmware, 'title') }} {{ fwValue(firmware, 'subTitle') }}</span>
                <div class="tooltip right max" v-if="fwValue(firmware, 'tooltip')" v-html="fwValue(firmware, 'tooltip')"></div>
              </button>
            </li>
          </ul>
        </template>
      </div>
      <div v-else>
      <article class="welcome-banner" v-if="displayWelcomeBanner">
        <span>New to Meshcore? You can <a target="_blank" href="https://www.youtube.com/watch?v=ems9_XvdPX8">watch tutorial on how to flash your device</a></span>
        <button class="circle small transparent no-margin" @click="dismissWelcomeBanner"><i>close</i></button>
      </article>
      <header>
          <nav class="top-nav">
            <i>bolt</i>
            <h5 class="small max logo-top">
              <img :src="`/img/${logoFile}`" v-if="!isIframe"> <span>flasher</span>
            </h5>
            <button class="transparent" title="Custom Firmware">
              <i>unknown_document</i>
              <span class="hide-mobile">Custom Firmware</span>
              <div class="tooltip bottom end max hide-mobile">Flash custom firmware file from your computer: <b>.bin</b> for esp32, OTA <b>.zip</b> for nRF52</div>
              <input type="file" accept=".zip,.bin" @change="customFirmwareLoad">
            </button>
            <button class="transparent" @click="openSerialGUI()" title="Repeater Setup">
              <i>manufacturing</i>
              <span class="hide-mobile">Repeater Setup</span>
              <div class="tooltip bottom end max hide-mobile">Open GUI to configure Repeaters and Room servers via USB serial</div>
            </button>
            <button class="transparent" @click="openSerialCon()" title="USB Serial Console">
              <i>terminal</i>
              <span class="hide-mobile">Console</span>
              <div class="tooltip bottom end max hide-mobile">Open serial console to manage Routers and Room servers</div>
            </button>
          </nav>
          <nav class="no-margin">
            <h6 class="small max">Choose device</h6>
            <button class="border round error" data-ui="#donatemenu" title="Show some love to the developer">
              <i>volunteer_activism</i>
              <span>Donate</span>
              <menu class="left no-wrap" id="donatemenu" data-ui="#donatemenu">
                <li><a data-ui="menu-selector" target="_blank" href="https://github.com/sponsors/recrof?frequency=one-time">Github Sponsor</a></li>
                <li><a data-ui="menu-selector" target="_blank" href="https://revolut.me/recrof">Revolut</a></li>
              </menu>
            </button>
          </nav>
        </header>
        <div class="field label prefix suffix border w-100 no-margin">
          <i>search</i>
          <input type="text" placeholder=" " v-model="deviceFilterText" autofocus>
          <label>Filter</label>
        </div>
        <ul class="list border">
          <li v-for="device in devices">
            <button class="device-select transparent" @click="selected.device = device"
                    @mouseenter="hoveredDevice = device" @focus="hoveredDevice = device">
              <img class="icon" :title="device.type" :src="`/img/${device.type}.svg`" v-if="device.type !== 'noflash'">
              <i v-else>developer_board</i>
              <span>{{ device.name }}</span>
              <div class="tooltip right max" v-if="device.tooltip && hoveredDevice === device" v-html="device.tooltip"></div>
              <div class="max"></div>
            </button>
            <div class="max hide-mobile"></div>
            <img class="icon hide-mobile" :src="device.icon" v-if="device.icon" >
          </li>
          <li>
            <label>
              <i>unknown_document</i>&nbsp;
              <strong style="font-size: small;">Custom Firmware</strong>
              <div class="tooltip right max">
                Flash custom firmware file from your computer.
                Flasher supports <b>.bin</b> files for esp32 devices and OTA <b>.zip</b> files for nRF52 devices.
              </div>
              <input type="file" accept=".zip,.bin" @change="customFirmwareLoad">
            </label>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="serialCon.opened" class="overlay active">
      <datalist id="command-db">
        <option v-for="(desc, command) in commandReference" :value="command">{{ desc }}</option>
      </datalist>
      <header>
        <nav>
          <button class="circle transparent" @click="closeSerialCon()"><i>arrow_back</i></button>
          <h6 class="small max">Serial Console</h6>
        </nav>
      </header>
      <pre class="console" ref="consoleWindow" tabindex="0" @mouseup="consoleMouseUp">
        <code>{{ serialCon.content }}</code>
        <div class="holder">
          <span>&gt;</span>
          <input ref="consoleEditBox" class="console-input" type="text" v-model="serialCon.edit" @keydown.enter.prevent="sendCommand(serialCon.edit)" list="command-db">
        </div>
      </pre>
    </div>
  </div>
</body>
</html>