<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BTClock Web Tools</title>
<meta name="description" content="Easily allow users to flash new firmware for the BTClock." />
<meta name="viewport" content="width=device-width" />
<meta name="color-scheme" content="dark light" />
<style>
/* antonio-latin-400-normal */
@font-face {
font-family: 'Antonio';
font-style: normal;
font-display: swap;
font-weight: 600;
src:
url(fonts/antonio/webfonts/antonio-latin-600-normal.woff2) format('woff2'),
url(fonts/antonio/webfonts/antonio-latin-600-normal.woff2) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-display: auto;
font-weight: 400;
src: url(fonts/ubuntu/webfonts/ubuntu-latin-400-normal.woff2) format('woff2'),
url(fonts/ubuntu/webfonts/ubuntu-latin-400-normal.woff2) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-display: auto;
font-weight: 700;
src: url(fonts/ubuntu/webfonts/ubuntu-latin-700-normal.woff2) format('woff2'),
url(fonts/ubuntu/webfonts/ubuntu-latin-700-normal.woff2) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
font-family: 'Ubuntu', sans-serif;
padding: 0;
margin: 0;
line-height: 1.4;
}
.content {
max-width: 600px;
margin: 0 auto;
padding: 12px;
}
h1 {
font-family: 'Antonio';
}
h2 {
margin-top: 2em;
}
h3 {
margin-top: 1.5em;
}
.projects a {
color: initial;
text-decoration: none;
}
.project .logo img {
height: 50px;
}
.project .name {
margin-top: 8px;
}
a {
color: #03a9f4;
}
.screenshot img {
max-width: 100%;
box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
border-radius: 4px;
}
.screenshot i {
margin-top: 4px;
display: block;
}
.hidden {
display: none;
}
.footer {
margin-top: 24px;
border-top: 1px solid #ccc;
padding-top: 24px;
text-align: center;
}
.footer .initiative {
font-style: italic;
margin-top: 16px;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #fff;
}
a {
color: #58a6ff;
}
}
</style>
<script module>
import(
"https://unpkg.com/esp-web-tools/dist/web/install-button.js?module"
);
</script>
</head>
<body>
<div class="content">
<h1>BTClock Web Installer</h1>
<!-- V3 start -->
<h2>Version 3</h2>
<h3>2.13 inch displays (rev. A)</h3>
<p><small>In most cases you have this version. All versions before block #841273 (2024-04-28) are rev. A.</small></p>
<esp-web-install-button manifest="manifest_btclock_v3_213.json">
<i slot="unsupported">
The flasher is not available because your browser does not support Web
Serial. Open this page in Google Chrome or Microsoft Edge instead<span class="not-supported-i hidden">
(but not on your iOS device)</span>.
</i>
<slot name="activate">Install using multiple parts</slot>
</esp-web-install-button>
<h3>2.13 inch displays (rev. B)</h3>
<p><small>First released on block #841273 (2024-04-28). If on the back it shows rev. B below the block hash, and you have a BOOT button next to the RESET button you have rev. B.</small></p>
<esp-web-install-button manifest="manifest_btclock_v3_213_revb.json">
<i slot="unsupported">
The flasher is not available because your browser does not support Web
Serial. Open this page in Google Chrome or Microsoft Edge instead<span class="not-supported-i hidden">
(but not on your iOS device)</span>.
</i>
<button slot="activate">I'm 100% sure I have the rev. B version, install it</button>
<slot name="activate">Install using multiple parts</slot>
</esp-web-install-button>
<h4>2.9 inch displays (custom, experimental)</h4>
<p><small>Offered as a courtesy, if you have the kit or bought it pre-built, you need the 2.13 inch version.</small></p>
<esp-web-install-button manifest="manifest_btclock_v3_29.json">
<i slot="unsupported">
The flasher is not available because your browser does not support Web
Serial. Open this page in Google Chrome or Microsoft Edge instead<span class="not-supported-i hidden">
(but not on your iOS device)</span>.
</i>
<slot name="activate">Install using multiple parts</slot>
<button slot="activate">I know what I'm doing. Install 2.9 inch version</button>
</esp-web-install-button>
<ul>
<li><a href="https://git.rof.tools/mirrors/btclock_v3/src/branch/main/.github/workflows/tagging.yml">GitHub action compiling the
V3
firmware</a></li>
<li><a href="https://git.rof.tools/mirrors/btclock_v3/releases">Release to be flashed</a><br>
<code id="commitHashV3"></code> / <code id="buildDateV3"></code>
</li>
<li><a href="https://git.rof.tools/mirrors/btclock_v3">V3 Source</a></li>
</ul>
<!-- V3 end -->
<hr>
<h3>Verify, don't trust</h2>
<ul>
<li><a href="https://git.rof.tools/mirrors/btclock-web-flasher">Source code of this website</a></li>
</ul>
<hr>
<p>When you are building it yourself, the first time you have to put the S3 mini in to boot mode: Press both side buttons at the same time
(RST/BOOT),
then first release the RST button and then the boot button.</p>
<p>
If this website does not work, you can download <code>full-firmware.bin</code> from the releases page and use <a
href="https://web.esphome.io/">ESPHome Web Flasher</a> to flash it instead.
</p>
<h2>How it works</h2>
<p>
ESP Web Tools works by using
<a href="https://developer.mozilla.org/docs/Web/API/Web_Serial_API">Web Serial</a> and a manifest which
describes
the firmware. ESP Web Tools detects the
chipset of the connected ESP device and automatically selects the right
firmware variant from the manifest.
</p>
<p>
Web Serial is available in Google Chrome and Microsoft Edge
browsers<span class="not-supported-i hidden">
(but not on your iOS device)</span>. Android support should be possible but has not been implemented yet.
</p>
<div class="footer">
<div class="initiative">
ESP Web Tools is a project by
<a href="https://esphome.io">ESPHome</a>.<br />
Development is funded by
<a href="https://www.nabucasa.com">Nabu Casa</a>.
</div>
<div>
ESP Web Tools is
<a href="https://github.com/esphome/esp-web-tools">open source</a>.
</div>
</div>
</div>
<script>
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
document.querySelector(".not-supported-i").classList.remove("hidden");
}
fetch("firmware/commit.txt")
.then(response => response.text())
.then((response) => {
document.getElementById('commitHash').innerHTML = response;
})
.catch(err => console.log(err))
fetch("firmware/date.txt")
.then(response => response.text())
.then((response) => {
document.getElementById('buildDate').innerHTML = new Date(response.trim()).toLocaleString();
})
.catch(err => console.log(err))
fetch("firmware_v3/commit.txt")
.then(response => response.text())
.then((response) => {
document.getElementById('commitHashV3').innerHTML = response;
})
.catch(err => console.log(err))
fetch("firmware_v3/date.txt")
.then(response => response.text())
.then((response) => {
document.getElementById('buildDateV3').innerHTML = new Date(response.trim()).toLocaleString();
})
.catch(err => console.log(err))
</script>
</body>
</html>