├── OTAWebPages.iml
├── README.md
├── minified
├── index_black_white.html
├── index_black_white.html.gz
├── index_black_white_ita.html
├── index_black_white_ita.html.gz
├── index_color.html
├── index_color.html.gz
├── index_color_ita.html
└── index_color_ita.html.gz
├── package-lock.json
├── package.json
├── script
├── delete.js
├── gzip.js
└── zip.js
├── sketchs
├── ArduinoOTAesp8266_web_custom_page
│ └── ArduinoOTAesp8266_web_custom_page.ino
└── ArduinoOTAesp8266_web_custom_page_file
│ ├── ArduinoOTAesp8266_web_custom_page_file.ino
│ └── data
│ ├── index_black_white.html
│ ├── index_black_white.html.gz
│ ├── index_black_white_ita.html
│ ├── index_black_white_ita.html.gz
│ ├── index_color.html
│ ├── index_color.html.gz
│ ├── index_color_ita.html
│ └── index_color_ita.html.gz
└── src
├── firmware-icon.jpg
├── firmware-icon.png
├── index_black_white.html
├── index_black_white_ita.html
├── index_color.html
└── index_color_ita.html
/OTAWebPages.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ##Example pages for ArduinoOTA
2 |
3 | Full article and more information on https://www.mischianti.org/category/tutorial/esp8266-tutorial/esp8266-firmware-management-tutorial/
4 |
5 | I create this page in VanillaJS and CSS standard to understand how to change default page with a better and more beautiful one.
6 |
7 | 
8 |
9 | First install node.js > 12
10 | Then launch 'npm i' command
11 |
12 | You can find the original source code on ./src directory
13 |
14 | After launch 'npm run dist' you can find minified and gzipped file to minified directory.
15 |
16 |
--------------------------------------------------------------------------------
/minified/index_black_white.html.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/minified/index_black_white.html.gz
--------------------------------------------------------------------------------
/minified/index_black_white_ita.html.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/minified/index_black_white_ita.html.gz
--------------------------------------------------------------------------------
/minified/index_color.html:
--------------------------------------------------------------------------------
1 | Upload OTA data
--------------------------------------------------------------------------------
/minified/index_color.html.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/minified/index_color.html.gz
--------------------------------------------------------------------------------
/minified/index_color_ita.html:
--------------------------------------------------------------------------------
1 | Caricamento dati Over The Air
--------------------------------------------------------------------------------
/minified/index_color_ita.html.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/minified/index_color_ita.html.gz
--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "otawebpages",
3 | "version": "1.0.0",
4 | "lockfileVersion": 2,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "otawebpages",
9 | "version": "1.0.0",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "html-minifier": "^4.0.0",
13 | "tar": "^6.1.11"
14 | }
15 | },
16 | "node_modules/camel-case": {
17 | "version": "3.0.0",
18 | "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
19 | "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
20 | "dev": true,
21 | "dependencies": {
22 | "no-case": "^2.2.0",
23 | "upper-case": "^1.1.1"
24 | }
25 | },
26 | "node_modules/chownr": {
27 | "version": "2.0.0",
28 | "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
29 | "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
30 | "dev": true,
31 | "engines": {
32 | "node": ">=10"
33 | }
34 | },
35 | "node_modules/clean-css": {
36 | "version": "4.2.3",
37 | "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
38 | "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
39 | "dev": true,
40 | "dependencies": {
41 | "source-map": "~0.6.0"
42 | },
43 | "engines": {
44 | "node": ">= 4.0"
45 | }
46 | },
47 | "node_modules/commander": {
48 | "version": "2.20.3",
49 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
50 | "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
51 | "dev": true
52 | },
53 | "node_modules/fs-minipass": {
54 | "version": "2.1.0",
55 | "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
56 | "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
57 | "dev": true,
58 | "dependencies": {
59 | "minipass": "^3.0.0"
60 | },
61 | "engines": {
62 | "node": ">= 8"
63 | }
64 | },
65 | "node_modules/he": {
66 | "version": "1.2.0",
67 | "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
68 | "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
69 | "dev": true,
70 | "bin": {
71 | "he": "bin/he"
72 | }
73 | },
74 | "node_modules/html-minifier": {
75 | "version": "4.0.0",
76 | "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",
77 | "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==",
78 | "dev": true,
79 | "dependencies": {
80 | "camel-case": "^3.0.0",
81 | "clean-css": "^4.2.1",
82 | "commander": "^2.19.0",
83 | "he": "^1.2.0",
84 | "param-case": "^2.1.1",
85 | "relateurl": "^0.2.7",
86 | "uglify-js": "^3.5.1"
87 | },
88 | "bin": {
89 | "html-minifier": "cli.js"
90 | },
91 | "engines": {
92 | "node": ">=6"
93 | }
94 | },
95 | "node_modules/lower-case": {
96 | "version": "1.1.4",
97 | "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
98 | "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
99 | "dev": true
100 | },
101 | "node_modules/minipass": {
102 | "version": "3.1.3",
103 | "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
104 | "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
105 | "dev": true,
106 | "dependencies": {
107 | "yallist": "^4.0.0"
108 | },
109 | "engines": {
110 | "node": ">=8"
111 | }
112 | },
113 | "node_modules/minizlib": {
114 | "version": "2.1.2",
115 | "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
116 | "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
117 | "dev": true,
118 | "dependencies": {
119 | "minipass": "^3.0.0",
120 | "yallist": "^4.0.0"
121 | },
122 | "engines": {
123 | "node": ">= 8"
124 | }
125 | },
126 | "node_modules/mkdirp": {
127 | "version": "1.0.4",
128 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
129 | "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
130 | "dev": true,
131 | "bin": {
132 | "mkdirp": "bin/cmd.js"
133 | },
134 | "engines": {
135 | "node": ">=10"
136 | }
137 | },
138 | "node_modules/no-case": {
139 | "version": "2.3.2",
140 | "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
141 | "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
142 | "dev": true,
143 | "dependencies": {
144 | "lower-case": "^1.1.1"
145 | }
146 | },
147 | "node_modules/param-case": {
148 | "version": "2.1.1",
149 | "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
150 | "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
151 | "dev": true,
152 | "dependencies": {
153 | "no-case": "^2.2.0"
154 | }
155 | },
156 | "node_modules/relateurl": {
157 | "version": "0.2.7",
158 | "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
159 | "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
160 | "dev": true,
161 | "engines": {
162 | "node": ">= 0.10"
163 | }
164 | },
165 | "node_modules/source-map": {
166 | "version": "0.6.1",
167 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
168 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
169 | "dev": true,
170 | "engines": {
171 | "node": ">=0.10.0"
172 | }
173 | },
174 | "node_modules/tar": {
175 | "version": "6.1.11",
176 | "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
177 | "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
178 | "dev": true,
179 | "dependencies": {
180 | "chownr": "^2.0.0",
181 | "fs-minipass": "^2.0.0",
182 | "minipass": "^3.0.0",
183 | "minizlib": "^2.1.1",
184 | "mkdirp": "^1.0.3",
185 | "yallist": "^4.0.0"
186 | },
187 | "engines": {
188 | "node": ">= 10"
189 | }
190 | },
191 | "node_modules/uglify-js": {
192 | "version": "3.14.1",
193 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.1.tgz",
194 | "integrity": "sha512-JhS3hmcVaXlp/xSo3PKY5R0JqKs5M3IV+exdLHW99qKvKivPO4Z8qbej6mte17SOPqAOVMjt/XGgWacnFSzM3g==",
195 | "dev": true,
196 | "bin": {
197 | "uglifyjs": "bin/uglifyjs"
198 | },
199 | "engines": {
200 | "node": ">=0.8.0"
201 | }
202 | },
203 | "node_modules/upper-case": {
204 | "version": "1.1.3",
205 | "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
206 | "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
207 | "dev": true
208 | },
209 | "node_modules/yallist": {
210 | "version": "4.0.0",
211 | "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
212 | "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
213 | "dev": true
214 | }
215 | },
216 | "dependencies": {
217 | "camel-case": {
218 | "version": "3.0.0",
219 | "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
220 | "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
221 | "dev": true,
222 | "requires": {
223 | "no-case": "^2.2.0",
224 | "upper-case": "^1.1.1"
225 | }
226 | },
227 | "chownr": {
228 | "version": "2.0.0",
229 | "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
230 | "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
231 | "dev": true
232 | },
233 | "clean-css": {
234 | "version": "4.2.3",
235 | "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
236 | "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
237 | "dev": true,
238 | "requires": {
239 | "source-map": "~0.6.0"
240 | }
241 | },
242 | "commander": {
243 | "version": "2.20.3",
244 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
245 | "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
246 | "dev": true
247 | },
248 | "fs-minipass": {
249 | "version": "2.1.0",
250 | "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
251 | "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
252 | "dev": true,
253 | "requires": {
254 | "minipass": "^3.0.0"
255 | }
256 | },
257 | "he": {
258 | "version": "1.2.0",
259 | "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
260 | "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
261 | "dev": true
262 | },
263 | "html-minifier": {
264 | "version": "4.0.0",
265 | "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",
266 | "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==",
267 | "dev": true,
268 | "requires": {
269 | "camel-case": "^3.0.0",
270 | "clean-css": "^4.2.1",
271 | "commander": "^2.19.0",
272 | "he": "^1.2.0",
273 | "param-case": "^2.1.1",
274 | "relateurl": "^0.2.7",
275 | "uglify-js": "^3.5.1"
276 | }
277 | },
278 | "lower-case": {
279 | "version": "1.1.4",
280 | "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
281 | "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
282 | "dev": true
283 | },
284 | "minipass": {
285 | "version": "3.1.3",
286 | "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
287 | "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
288 | "dev": true,
289 | "requires": {
290 | "yallist": "^4.0.0"
291 | }
292 | },
293 | "minizlib": {
294 | "version": "2.1.2",
295 | "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
296 | "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
297 | "dev": true,
298 | "requires": {
299 | "minipass": "^3.0.0",
300 | "yallist": "^4.0.0"
301 | }
302 | },
303 | "mkdirp": {
304 | "version": "1.0.4",
305 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
306 | "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
307 | "dev": true
308 | },
309 | "no-case": {
310 | "version": "2.3.2",
311 | "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
312 | "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
313 | "dev": true,
314 | "requires": {
315 | "lower-case": "^1.1.1"
316 | }
317 | },
318 | "param-case": {
319 | "version": "2.1.1",
320 | "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
321 | "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
322 | "dev": true,
323 | "requires": {
324 | "no-case": "^2.2.0"
325 | }
326 | },
327 | "relateurl": {
328 | "version": "0.2.7",
329 | "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
330 | "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
331 | "dev": true
332 | },
333 | "source-map": {
334 | "version": "0.6.1",
335 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
336 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
337 | "dev": true
338 | },
339 | "tar": {
340 | "version": "6.1.11",
341 | "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
342 | "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
343 | "dev": true,
344 | "requires": {
345 | "chownr": "^2.0.0",
346 | "fs-minipass": "^2.0.0",
347 | "minipass": "^3.0.0",
348 | "minizlib": "^2.1.1",
349 | "mkdirp": "^1.0.3",
350 | "yallist": "^4.0.0"
351 | }
352 | },
353 | "uglify-js": {
354 | "version": "3.14.1",
355 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.1.tgz",
356 | "integrity": "sha512-JhS3hmcVaXlp/xSo3PKY5R0JqKs5M3IV+exdLHW99qKvKivPO4Z8qbej6mte17SOPqAOVMjt/XGgWacnFSzM3g==",
357 | "dev": true
358 | },
359 | "upper-case": {
360 | "version": "1.1.3",
361 | "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
362 | "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
363 | "dev": true
364 | },
365 | "yallist": {
366 | "version": "4.0.0",
367 | "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
368 | "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
369 | "dev": true
370 | }
371 | }
372 | }
373 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "otawebpages",
3 | "version": "1.0.0",
4 | "description": "Some custom ArduinoOTA pages",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "delete_dist": "node ./script/delete.js",
9 | "minify": "html-minifier --input-dir ./src --output-dir ./minified --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css true --minify-js true --file-ext html\n",
10 | "zip_file": "node ./script/zip.js",
11 | "dist": "npm run delete_dist && npm run minify && npm run zip_file"
12 | },
13 | "author": "Renzo Mischianti",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "html-minifier": "^4.0.0",
17 | "tar": "^6.1.11"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/script/delete.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | fs.rmdirSync('./minified', { recursive: true })
3 | console.log('done');
4 |
--------------------------------------------------------------------------------
/script/gzip.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 |
3 | const { createGzip } = require('zlib');
4 | const { pipeline } = require('stream');
5 | const {
6 | createReadStream,
7 | createWriteStream
8 | } = require('fs');
9 |
10 | // const gzip = createGzip();
11 | // const source = createReadStream('input.txt');
12 | // const destination = createWriteStream('input.txt.gz');
13 | //
14 | // pipeline(source, gzip, destination, (err) => {
15 | // if (err) {
16 | // console.error('An error occurred:', err);
17 | // process.exitCode = 1;
18 | // }
19 | // });
20 |
21 | // Or, Promisified
22 |
23 | const { promisify } = require('util');
24 | const pipe = promisify(pipeline);
25 |
26 | async function do_gzip(input, output) {
27 | const gzip = createGzip();
28 | const source = createReadStream(input);
29 | const destination = createWriteStream(output);
30 | await pipe(source, gzip, destination);
31 | }
32 |
33 | const directoryFiles = fs.readdirSync('./minified');
34 |
35 | Promise.all(directoryFiles.map(filename => {
36 | if (filename.endsWith('.html')>=0) {
37 | return new Promise((resolve, reject) => {
38 | do_gzip(`./minified/${filename}`, `./minified/${filename}.gz`)
39 | .catch((err) => {
40 | console.error('An error occurred:', err);
41 | });
42 | })
43 | }
44 | }))
45 | .then(console.log('done'));
46 |
47 |
--------------------------------------------------------------------------------
/script/zip.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const zlib = require('zlib');
3 |
4 | const directoryFiles = fs.readdirSync('./minified');
5 |
6 | Promise.all(directoryFiles.map(filename => {
7 | if (filename.indexOf('.html')>=0) {
8 | return new Promise((resolve, reject) => {
9 | const fileContents = fs.createReadStream(`./minified/${filename}`);
10 | const writeStream = fs.createWriteStream(`./minified/${filename}.gz`);
11 | const gzip = zlib.createGzip();
12 | // const deflate = zlib.createDeflate();
13 | fileContents.pipe(gzip)/*.pipe(deflate)*/.pipe(writeStream).on('finish', (err) => {
14 | if (err) return reject(err);
15 | else resolve();
16 | })
17 | })
18 | }
19 | }))
20 | .then(console.log('done'));
21 |
--------------------------------------------------------------------------------
/sketchs/ArduinoOTAesp8266_web_custom_page_file/ArduinoOTAesp8266_web_custom_page_file.ino:
--------------------------------------------------------------------------------
1 | /*
2 | * Custom OTA page from LittleFS file system
3 | *
4 | * Renzo Mischianti
5 | *
6 | * https://www.mischianti.org/category/tutorial/esp8266-tutorial/esp8266-firmware-management-tutorial/
7 | */
8 |
9 | #include
10 | #include
11 | #include
12 | #include
13 | #include
14 | #include
15 |
16 | #ifndef STASSID
17 | #define STASSID ""
18 | #define STAPSK ""
19 | #endif
20 |
21 | const char* host = "esp8266-webupdate";
22 | const char* ssid = STASSID;
23 | const char* password = STAPSK;
24 |
25 | ESP8266WebServer httpServer(80);
26 | ESP8266HTTPUpdateServer httpUpdater;
27 |
28 | void handleNotFound() {
29 | String message = "File Not Found\n\n";
30 | message += "URI: ";
31 | message += httpServer.uri();
32 | message += "\nMethod: ";
33 | message += (httpServer.method() == HTTP_GET) ? "GET" : "POST";
34 | message += "\nArguments: ";
35 | message += httpServer.args();
36 | message += "\n";
37 |
38 | for (uint8_t i = 0; i < httpServer.args(); i++) {
39 | message += " " + httpServer.argName(i) + ": " + httpServer.arg(i) + "\n";
40 | }
41 |
42 | httpServer.send(404, "text/plain", message);
43 | }
44 |
45 | bool loadFromFS(String path, String dataType) {
46 | Serial.print("Requested page -> ");
47 | Serial.println(path);
48 | if (LittleFS.exists(path)){
49 | File dataFile = LittleFS.open(path, "r");
50 | if (!dataFile) {
51 | handleNotFound();
52 | return false;
53 | }
54 |
55 | if (httpServer.streamFile(dataFile, dataType) != dataFile.size()) {
56 | Serial.println("Sent less data than expected!");
57 | }else{
58 | Serial.println("Page served!");
59 | }
60 |
61 | dataFile.close();
62 | }else{
63 | handleNotFound();
64 | return false;
65 | }
66 | return true;
67 | }
68 |
69 | void handleRoot() {
70 | // loadFromFS("/index_color.html.gz", "text/html");
71 | loadFromFS("/index_black_white.html.gz", "text/html");
72 | }
73 |
74 | void setup(void) {
75 |
76 | Serial.begin(115200);
77 | Serial.println();
78 | Serial.println("Booting Sketch...");
79 | WiFi.mode(WIFI_AP_STA);
80 | WiFi.begin(ssid, password);
81 |
82 | while (WiFi.waitForConnectResult() != WL_CONNECTED) {
83 | WiFi.begin(ssid, password);
84 | Serial.println("WiFi failed, retrying.");
85 | }
86 |
87 | Serial.print(F("Inizializing FS..."));
88 | if (LittleFS.begin()){
89 | Serial.println(F("done."));
90 | }else{
91 | Serial.println(F("fail."));
92 | }
93 |
94 | MDNS.begin(host);
95 |
96 | // handler for the /update form page
97 | httpServer.on("/update", HTTP_GET, handleRoot);
98 |
99 | httpUpdater.setup(&httpServer);
100 |
101 | httpServer.begin();
102 |
103 | MDNS.addService("http", "tcp", 80);
104 | Serial.printf("HTTPUpdateServer modified ready! Open http://%s.local/update in your browser\n", host);
105 | }
106 |
107 | void loop(void) {
108 | httpServer.handleClient();
109 | MDNS.update();
110 | }
111 |
--------------------------------------------------------------------------------
/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_black_white.html.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_black_white.html.gz
--------------------------------------------------------------------------------
/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_black_white_ita.html.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_black_white_ita.html.gz
--------------------------------------------------------------------------------
/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_color.html:
--------------------------------------------------------------------------------
1 | Upload OTA data
--------------------------------------------------------------------------------
/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_color.html.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_color.html.gz
--------------------------------------------------------------------------------
/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_color_ita.html:
--------------------------------------------------------------------------------
1 | Caricamento dati Over The Air
--------------------------------------------------------------------------------
/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_color_ita.html.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/sketchs/ArduinoOTAesp8266_web_custom_page_file/data/index_color_ita.html.gz
--------------------------------------------------------------------------------
/src/firmware-icon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/src/firmware-icon.jpg
--------------------------------------------------------------------------------
/src/firmware-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xreef/ArduinoOTA_reusable_custom_web_page/fe5c39e21ac99a9b2cace1a2b88ebcd71c3806de/src/firmware-icon.png
--------------------------------------------------------------------------------
www.mischianti.org