-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
234 lines (230 loc) · 6.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Matter Example Apps</title>
<meta
name="description"
content="Easily allow users to install Matter example apps from the web."
/>
<meta name="viewport" content="width=device-width" />
<meta name="color-scheme" content="dark light" />
<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;
}
h2 {
margin-top: 2em;
}
h3 {
margin-top: 1.5em;
}
a {
color: #03a9f4;
}
.invisible {
visibility: hidden;
}
.hidden {
display: none;
}
esp-web-install-button[install-unsupported] {
visibility: inherit;
}
.content pre {
max-width: 100%;
overflow-y: scroll;
}
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;
}
table {
border-spacing: 0;
}
td {
padding: 8px;
border-bottom: 1px solid #ccc;
}
.radios li {
list-style: none;
line-height: 2em;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #fff;
}
a {
color: #58a6ff;
}
}
</style>
<script
type="module"
src="https://unpkg.com/esp-web-tools@9.0.3/dist/web/install-button.js?module"
></script>
</head>
<body>
<div class="content">
<h1>Matter Example installer</h1>
<p>
Install these example applications on one of the supported ESP32 boards
to be able to test Matter locally.
</p>
<p>Select an app to install the example and access the Matter REPL.</p>
<ul class="radios">
<li>
<label>
<input
type="radio"
name="type"
value="lighting-app-example/esp32-c3"
/>
Lighting App for
<a href="https://www.mouser.com/ProductDetail/356-ESP32-C3DEVKITM1"
>ESP32-C3-DevKitM-1</a
>
(<a
href="https://github.com/project-chip/connectedhomeip/tree/master/examples/lighting-app/esp32"
>source</a
>)
</label>
</li>
<li>
<label>
<input
type="radio"
name="type"
value="lighting-app-example/esp32-c3-m5stamp"
/>
Lighting App for
<a href="https://shop.m5stack.com/products/m5stamp-c3-mate-with-pin-headers?ref=NabuCasa"
>M5STAMP-C3</a
>
(<a
href="https://github.com/project-chip/connectedhomeip/tree/master/examples/lighting-app/esp32"
>source</a
>)
</label>
</li>
<li>
<label>
<input
type="radio"
name="type"
value="lighting-app-example/esp32-atom-lite"
/>
Lighting App for
<a href="https://shop.m5stack.com/products/atom-lite-esp32-development-kit?ref=NabuCasa"
>ATOM Lite ESP32</a
>
(<a
href="https://github.com/project-chip/connectedhomeip/tree/master/examples/lighting-app/esp32"
>source</a
>)
</label>
</li>
<li>
<label>
<input
type="radio"
name="type"
value="light-switch-app-example/esp32-c3"
/>
Light Switch App for
<a href="https://www.mouser.com/ProductDetail/356-ESP32-C3DEVKITM1"
>ESP32-C3-DevKitM-1</a
>
(<a
href="https://github.com/project-chip/connectedhomeip/tree/master/examples/light-switch-app/esp32"
>source</a
>)
</label>
</li>
<li>
<label>
<input
type="radio"
name="type"
value="all-clusters-app-example/esp32-m5-basic-core"
/>
All Clusters App for
<a href="https://shop.m5stack.com/products/basic-core-iot-development-kit?ref=NabuCasa"
>M5Stack ESP32 Basic Core</a
>
(<a
href="https://github.com/project-chip/connectedhomeip/tree/master/examples/all-clusters-app/esp32"
>source</a
>)
</label>
</li>
</ul>
<p class="button-row" align="center">
<esp-web-install-button class="invisible"></esp-web-install-button>
</p>
<p>Use the following Matter REPL commands:</p>
<ul>
<li>
<code>matter help</code><br />
list all available commands.
</li>
<li>
<code>matter onboardingcodes ble</code><br />
print pairing QR code.
</li>
<li>
<code>matter wifi connect "network" "password"</code><br />
Configure Wi-Fi on the device
</li>
<li>
<code>matter device factoryreset</code><br />
factory reset device
</li>
</ul>
<p>
To add a device with this firmware to Google Home the device needs to be
registered in the Google Home Developer Console. Currently Test Vendor ID
0xFFF1 and Product ID 0x8000 (0x8001 for All Cluster App) are used. See
<a href="https://developers.home.google.com/matter/get-started#vendor_id">
Vendor ID section of the Get started with Matter</a> guide. After adding
the device to the list of Matter integrations on-boarding should work.
</p>
<div class="footer">
<a href="https://github.com/project-chip/connectedhomeip"
>Project Connected Home Over IP</a
>
— Installer powered by
<a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a>.<br>
Some product links are affiliate links.
</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`;
button.classList.remove("invisible");
})
);
</script>
</body>
</html>