229 lines
6.3 KiB
HTML
229 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>ESPHome RATGDO</title>
|
|
<meta
|
|
name="description"
|
|
content="Install RATGTO on your ESPHome devices."
|
|
/>
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta name="color-scheme" content="dark light" />
|
|
<meta property="og:title" content="ESPHome RATGDO" />
|
|
<meta property="og:site_name" content="ESPHome RATGDO" />
|
|
<meta
|
|
property="og:url"
|
|
content="https://esphome-ratgdo.github.io/esphome-ratgdo/"
|
|
/>
|
|
<meta property="og:type" content="website" />
|
|
<meta
|
|
property="og:description"
|
|
content="Install RATGTO on your ESPHome devices."
|
|
/>
|
|
<meta
|
|
property="og:image"
|
|
content="https://esphome-ratgdo.github.io/esphome-ratgdo/header.png"
|
|
/>
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:site" content="@esphome_" />
|
|
<meta name="twitter:title" content="ESPHome RATGDO" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Install RATGTO on your ESPHome devices."
|
|
/>
|
|
<meta
|
|
name="twitter:image"
|
|
content="https://esphome-ratgdo.github.io/esphome-ratgdo/header.png"
|
|
/>
|
|
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, Ubuntu, sans-serif;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
.content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 12px;
|
|
}
|
|
.header {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 1200 / 675;
|
|
border-radius: 12px;
|
|
}
|
|
h3 {
|
|
margin-top: 1.5em;
|
|
}
|
|
a {
|
|
color: #03a9f4;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
li {
|
|
padding: 4px 0;
|
|
}
|
|
.footer {
|
|
margin-top: 24px;
|
|
border-top: 1px solid #ccc;
|
|
padding-top: 24px;
|
|
text-align: center;
|
|
}
|
|
.footer .initiative {
|
|
font-style: italic;
|
|
margin-top: 16px;
|
|
}
|
|
.radios {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.radios label {
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
width: calc(33.3% - 16px);
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
.radios input {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
}
|
|
.radios img {
|
|
display: block;
|
|
width: calc(100% - 8px);
|
|
border: 4px solid rgba(0, 0, 0, 0);
|
|
aspect-ratio: 1;
|
|
}
|
|
input:checked + img {
|
|
border-color: #58a6ff;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #333;
|
|
color: #fff;
|
|
}
|
|
a {
|
|
color: #58a6ff;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 450px) {
|
|
.radios label {
|
|
width: calc(50% - 16px);
|
|
max-width: initial;
|
|
}
|
|
}
|
|
.diy::after {
|
|
content: "DIY";
|
|
background-color: #f44336;
|
|
color: #fff;
|
|
padding: 2px 4px;
|
|
border-radius: 4px;
|
|
font-size: 0.8em;
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 12px;
|
|
}
|
|
body .diy {
|
|
display: none;
|
|
}
|
|
body.show-diy .diy {
|
|
display: initial;
|
|
}
|
|
</style>
|
|
<script
|
|
type="module"
|
|
src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js?module"
|
|
></script>
|
|
</head>
|
|
<body>
|
|
<div class="content">
|
|
<img
|
|
class="header"
|
|
src="./header.png"
|
|
alt="ESPHOME RATGDO."
|
|
/>
|
|
<h1>ESPHome RATGDO</h1>
|
|
<p></p>
|
|
<p>
|
|
Pick your board to flash your RATGDO board ESPhome for <a href="https://github.com/PaulWieland/ratgdo">RATGDO</a>.
|
|
No programming or other software required.
|
|
|
|
<b>Be sure to save the value of the rolling code counter and set it again or the board will not be able to control the garage door opener. If you forget to do this, you may be able to restore control by pressing the learn button, or factory resetting the garage door opener by pressing and holding the learn button 3 times for 10 seconds.</b>
|
|
</p>
|
|
|
|
<div class="radios">
|
|
<label>
|
|
<input type="radio" name="type" value="v2board" checked />
|
|
<img src="./v2board.png" alt="RATGDO v2 board" />
|
|
</label>
|
|
</div>
|
|
|
|
<p class="button-row" align="center">
|
|
<esp-web-install-button></esp-web-install-button>
|
|
</p>
|
|
|
|
<div class="hidden info v2board">
|
|
<h3>RATGDO Shield v2</h3>
|
|
<p>
|
|
Replace the official RATGDO v2 board firmware with
|
|
ESPHome.
|
|
</p>
|
|
<p>
|
|
This project is not affiliated with RATGDO or Paul Wieland.
|
|
|
|
Please support his excellent work by buying his boards.
|
|
<a
|
|
href="https://paulwieland.github.io/ratgdo/"
|
|
>Buy boards from Paul</a>
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Advanced Users</h3>
|
|
<ul>
|
|
<li>
|
|
The device is adoptable in
|
|
<a
|
|
href="https://my.home-assistant.io/redirect/supervisor_addon/?addon=5c53de3b_esphome&repository_url=https%3A%2F%2Fgithub.com%2Fesphome%2Fhome-assistant-addon"
|
|
>the ESPHome dashboard</a
|
|
>
|
|
</li>
|
|
<li>
|
|
The YAML configuration is on
|
|
<a href="https://github.com/esphome-ratgdo/esphome-ratgdo/docs/">GitHub</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="footer">
|
|
<a href="https://esphome.io">ESPHome</a>
|
|
— Installer powered by
|
|
<a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a>.
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.querySelectorAll('input[name="type"]').forEach((radio) =>
|
|
radio.addEventListener("change", () => {
|
|
const button = document.querySelector("esp-web-install-button");
|
|
button.manifest = `./${radio.value}-manifest.json`;
|
|
|
|
document.querySelectorAll(".info").forEach((info) => {
|
|
info.classList.add("hidden");
|
|
});
|
|
document
|
|
.querySelector(`.info.${radio.value}`)
|
|
.classList.remove("hidden");
|
|
})
|
|
);
|
|
document
|
|
.querySelector('input[name="type"]:checked')
|
|
.dispatchEvent(new Event("change"));
|
|
</script>
|
|
</body>
|
|
</html>
|