Skip to content

Commit b48153b

Browse files
mathertelmathertel
committed
update embedded web files
1 parent 8a6c025 commit b48153b

File tree

5 files changed

+117
-111
lines changed

5 files changed

+117
-111
lines changed

‎publishWebFiles.bat

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ echo copied: Minimal WebUI
2929
echo.
3030
echo *** Updating data folders in examples
3131

32-
set tar=%USERPROFILE%\Projects\Arduino\Sketches\Libraries\HomeDing
32+
set tar=%USERPROFILE%\Documents\Arduino\libraries\HomeDing
3333

3434
robocopy dist %tar%\examples\standard\data /S /PURGE %rcflags% /XF list.txt
3535
echo copied: standard example

‎server/HomeDingServer.ts

+8
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,14 @@ export class HomeDingServer {
269269

270270
this._app.get(/^\/api\/elements/, this.expressNoCache, handleElements);
271271

272+
const handleScan = async (_req: express.Request, res: express.Response) => {
273+
const elems = [{"id": "net01"}, {"id": "net02"}, {"id": "net03"}];
274+
res.json(elems);
275+
}; // handleScan
276+
277+
this._app.get(/^\/api\/scan/, this.expressNoCache, handleScan);
278+
279+
272280
const handleState = async (req: express.Request, res: express.Response) => {
273281
if (!this._boardState) {
274282
this._boardState = {};

‎setup.htm

+43-37
Original file line numberDiff line numberDiff line change
@@ -10,54 +10,49 @@
1010
<body style="width:300px">
1111
<h1>Setup WiFi</h1>
1212
<div style="display:grid;grid-template-columns: 10ch auto;grid-gap:1ch;">
13-
<label>Devicename:</label><span id="d">xyz</span>
13+
<label>Devicename:</label><span id="d">.</span>
1414
<label>Network:</label><span><select id="n" style="width:12em">
1515
<option selected disabled>scanning...</option>
1616
</select></span>
1717
<label>Passphrase:</label><input id="pass" type="password" style="width:12em"></input>
18+
<label>format:</label><span><input id="fmt" type="checkbox"></input></span>
1819
</div>
1920
<div style="text-align: right;"><button id="b">Connect</button></div>
20-
<hr>
21-
<p style="text-align: right;"><a id="nextLink" title="next step" href="/$update.htm" style="text-decoration: none;">&gt;&gt;&gt;</a></p>
2221

2322
<script>
2423
var d = document;
25-
var state = 0; // 0: start, 1: get sysinfo, 2: sysinfo-done, 3: scan, 4, scan-done
24+
var s = 0; // state = 0: start, 1: get sysinfo, 2: sysinfo-done, 3: scan, 4: scan-done, 5: connect issued
2625
var timer;
2726
var oSel = d.getElementById('n');
27+
var oBtn = d.getElementById('b');
28+
var dn;
2829

29-
function check() {
30-
if (state == 0) {
30+
async function check() {
31+
let r, t;
32+
if (s == 0) {
3133
// start sysinfo
32-
state = 1;
33-
fetch('/api/sysinfo')
34-
.then(function (result) {
35-
return (result.text());
36-
}).then(function (t) {
37-
if (t.length > 0) {
38-
var dn = JSON.parse(t).devicename;
39-
d.getElementById('d').textContent = dn;
40-
var a = d.getElementById('nextLink');
41-
a.href = a.href.replace(/\/\/[^\/]+\//, '//' + dn + '/');
42-
state = 2;
43-
} // if
44-
});
34+
s = 1;
35+
r = await fetch('/api/sysinfo');
36+
t = await r.text();
37+
if (t.length > 0) {
38+
dn = JSON.parse(t).devicename;
39+
d.getElementById('d').textContent = dn;
40+
s = 2;
41+
} // if
4542

46-
} else if (state == 2) {
43+
} else if (s == 2) {
4744
// start scan
48-
state = 3;
49-
fetch('/api/scan')
50-
.then(function (result) {
51-
return (result.text());
52-
}).then(function (t) {
53-
if (t.length == 0) {
54-
state = 2;
55-
} else {
56-
state = 4;
57-
scanned(JSON.parse(t));
58-
}
59-
});
60-
} else if (state == 4) {
45+
s = 3;
46+
r = await fetch('/api/scan');
47+
t = await r.text();
48+
if (t.length == 0) {
49+
s = 2;
50+
} else {
51+
scanned(JSON.parse(t));
52+
s = 4;
53+
}
54+
55+
} else if (s == 4) {
6156
window.clearInterval(timer);
6257
timer = 0;
6358
} // if
@@ -72,17 +67,28 @@ <h1>Setup WiFi</h1>
7267
o.disabled = true;
7368
oSel.options.add(o);
7469

75-
netList.forEach(function (n) {
70+
netList.forEach(function(n) {
7671
var o = d.createElement('option');
7772
o.value = o.text = n.id;
7873
oSel.options.add(o);
7974
});
8075
} // scanned()
8176

8277
// connect using network name and password
83-
d.getElementById('b').addEventListener('click', function () {
84-
fetch('/api/connect?n=' + oSel.value + '&p=' + d.getElementById('pass').value);
78+
oBtn.addEventListener('click', async () => {
79+
if (s == 4) {
80+
let url = `/api/connect?n=${oSel.value}&p=${d.getElementById('pass').value}`;
81+
if (d.getElementById('fmt').checked) {
82+
url += 'f=1';
83+
}
84+
try { await fetch(url); } catch (e) { }
85+
s = 5;
86+
oBtn.textContent = ">>>";
87+
88+
} else if (s == 5) {
89+
location.href = `//${dn}/$update.htm`;
90+
}
8591
});
86-
timer = window.setInterval(check, 800);
92+
timer = window.setInterval(check, 300);
8793
</script>
8894
</body>

‎update.htm

+63-71
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,11 @@
1616
<h1>Web Update</h1>
1717
<div style="display:grid">
1818
<progress value=0 max=20></progress>
19-
<span id='l'></span>
19+
<span id='l' style="height:2rem"></span>
2020
</div>
2121
<div style="text-align: right;"><button>Start</button></div>
22-
23-
<hr>
24-
<p style="text-align: right;"><a href="/updateicons.htm" title="next step"
25-
style="text-decoration: none;">&gt;&gt;&gt;</a></p>
2622
<script>
23+
var d = document;
2724
var s = 0;
2825
// s == 0 => fetching list
2926
// s == 1 => fetching sysinfo
@@ -32,13 +29,14 @@ <h1>Web Update</h1>
3229
// s == 4 => wait for file finished
3330

3431
var repo = 'https://homeding.github.io/';
35-
var d = document;
3632
var eBar = d.querySelector('progress');
33+
var oBtn = d.querySelector('button');
3734
var x = 0; // done
3835
var a = 0; // active
3936
var w; ///< working list
4037
var si; // sysinfo
4138
var t = 0; // timer
39+
var r; // for fetch
4240
var seed = "?" + new Date().valueOf();
4341

4442
function log(t) {
@@ -54,84 +52,78 @@ <h1>Web Update</h1>
5452

5553

5654
// grab next file
57-
function doF() {
55+
async function doF() {
5856
var theItem = w.shift();
5957

6058
// set progress
61-
eBar.value = ++x;
6259
log(theItem);
6360

64-
if (theItem[0] === '-') {
65-
a = 0;
66-
67-
} else {
68-
fetch(repo + theItem + seed)
69-
.then(result => result.arrayBuffer())
70-
.then(function(buf) {
71-
var formData = new FormData();
72-
formData.append('file', new Blob([buf]), '/' + theItem);
73-
fetch('/', { method: 'POST', body: formData })
74-
.then(() => { a = 0; });
75-
});
61+
if (theItem[0] !== '-') {
62+
r = await fetch(repo + theItem + seed);
63+
r = await r.arrayBuffer();
64+
var formData = new FormData();
65+
formData.append('file', new Blob([r]), '/' + theItem);
66+
await fetch('/', { method: 'POST', body: formData });
7667
}
7768
} // doF()
7869

7970

80-
d.querySelector('button').addEventListener('click', function() {
81-
t = window.setInterval(function() {
82-
if (a) {
83-
// wait
84-
} else {
85-
a = 1;
86-
if (s == 0) { // not yet started
87-
// fetch file list;
88-
log('sysinfo...');
89-
fetch('/api/sysinfo' + seed)
90-
.then(result => result.text())
91-
.then(t => {
92-
si = t;
93-
eBar.value = ++x;
94-
a = 0;
95-
});
96-
s++;
97-
98-
} else if (s == 1) {
99-
log('list...');
100-
si = JSON.parse(si);
101-
if (si.fsTotalBytes < 200000) {
102-
repo = repo.replace(/(v\d+)\/$/, "$1m/");
103-
}
104-
105-
fetch(repo + 'list.txt' + seed)
106-
.then(result => result.text())
107-
.then(t => {
108-
w = t.replace(/\r?\n/g, ';').replace(/;$/, '').split(';');
109-
eBar.max = w.length + 3;
110-
a = 0;
111-
});
112-
s++;
113-
114-
} else if (s == 2) {
115-
// clean files in filesystem first
116-
log('clean...');
117-
fetch('/api/cleanweb')
118-
.then(() => {
119-
eBar.value = ++x;
120-
s++;
121-
a = 0;
122-
});
123-
124-
} else if (s == 3) {
125-
if (w.length > 0) {
126-
doF();
127-
} else {
71+
d.querySelector('button').addEventListener('click', () => {
72+
if (s === 0) {
73+
oBtn.textContent = '-';
74+
t = window.setInterval(async function() {
75+
if (a) {
76+
// wait
77+
78+
} else {
79+
a = 1;
80+
if (s == 0) { // not yet started
81+
// fetch file list;
82+
log('sysinfo...');
83+
r = await fetch('/api/sysinfo' + seed);
84+
si = await r.text();
85+
86+
} else if (s == 1) {
87+
log('list...');
88+
si = JSON.parse(si);
89+
if (si.fsTotalBytes < 200000) {
90+
repo = repo.replace(/(v\d+)\/$/, "$1m/");
91+
}
92+
93+
r = await fetch(repo + 'list.txt' + seed);
94+
r = await r.text();
95+
96+
w = r.replace(/\r?\n/g, ';').replace(/;$/, '').split(';');
97+
eBar.max = w.length + 3;
98+
99+
} else if (s == 2) {
100+
// clean files in filesystem first
101+
log('clean...');
102+
await fetch('/api/cleanweb');
103+
104+
} else if (s == 3) {
105+
if (w.length > 0) {
106+
await doF();
107+
s--;
108+
}
109+
110+
} else if (s == 4) {
128111
window.clearInterval(t);
129-
eBar.value = ++x;
130112
log('done');
113+
oBtn.textContent = ">>>";
114+
131115
}
116+
eBar.value = ++x;
117+
s++;
118+
a = 0;
132119
}
133-
}
134-
}, 100);
120+
}, 100);
121+
122+
} else if (s === 5) {
123+
location.href = '/updateicons.htm';
124+
125+
}
126+
135127
});
136128
</script>
137129
</body>

‎upload.h

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33

44
// minimized from setup.htm: configure the network
55
static const char setupContent[] PROGMEM =
6-
R"==(<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>Setup WiFi</title></head><body style="width:300px"><h1>Setup WiFi</h1><div style="display:grid;grid-template-columns:10ch auto;grid-gap:1ch"><label>Devicename:</label><span id="d">xyz</span> <label>Network:</label><span><select id="n"style="width:12em"><option selected="selected"disabled="disabled">scanning...</option></select></span><label>Passphrase:</label><input id="pass"type="password"style="width:12em"></div><div style="text-align:right"><button id="b">Connect</button></div><hr><p style="text-align:right"><a id="nextLink"title="next step"href="/$update.htm"style="text-decoration:none">&gt;&gt;&gt;</a></p><script>var timer,d=document,state=0,oSel=d.getElementById("n");function check(){0==state?(state=1,fetch("/api/sysinfo").then((function(e){return e.text()})).then((function(e){if(e.length>0){var t=JSON.parse(e).devicename;d.getElementById("d").textContent=t;var n=d.getElementById("nextLink");n.href=n.href.replace(/\/\/[^\/]+\//,"//"+t+"/"),state=2}}))):2==state?(state=3,fetch("/api/scan").then((function(e){return e.text()})).then((function(e){0==e.length?state=2:(state=4,scanned(JSON.parse(e)))}))):4==state&&(window.clearInterval(timer),timer=0)}function scanned(e){oSel.innerHTML="";var t=d.createElement("option");t.value=0,t.text="select...",t.disabled=!0,oSel.options.add(t),e.forEach((function(e){var t=d.createElement("option");t.value=t.text=e.id,oSel.options.add(t)}))}d.getElementById("b").addEventListener("click",(function(){fetch("/api/connect?n="+oSel.value+"&p="+d.getElementById("pass").value)})),timer=window.setInterval(check,800)</script></body></html>)==";
6+
R"==(<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>Setup WiFi</title></head><body style="width:300px"><h1>Setup WiFi</h1><div style="display:grid;grid-template-columns:10ch auto;grid-gap:1ch"><label>Devicename:</label><span id="d">.</span> <label>Network:</label><span><select id="n"style="width:12em"><option selected="selected"disabled="disabled">scanning...</option></select></span><label>Passphrase:</label><input id="pass"type="password"style="width:12em"><label>format:</label><span><input id="fmt"type="checkbox"></span></div><div style="text-align:right"><button id="b">Connect</button></div><script>var timer,dn,d=document,s=0,oSel=d.getElementById("n"),oBtn=d.getElementById("b");async function check(){let e,t;0==s?(s=1,e=await fetch("/api/sysinfo"),t=await e.text(),t.length>0&&(dn=JSON.parse(t).devicename,d.getElementById("d").textContent=dn,s=2)):2==s?(s=3,e=await fetch("/api/scan"),t=await e.text(),0==t.length?s=2:(scanned(JSON.parse(t)),s=4)):4==s&&(window.clearInterval(timer),timer=0)}function scanned(e){oSel.innerHTML="";var t=d.createElement("option");t.value=0,t.text="select...",t.disabled=!0,oSel.options.add(t),e.forEach((function(e){var t=d.createElement("option");t.value=t.text=e.id,oSel.options.add(t)}))}oBtn.addEventListener("click",(async()=>{if(4==s){let e=`/api/connect?n=${oSel.value}&p=${d.getElementById("pass").value}`;d.getElementById("fmt").checked&&(e+="f=1");try{await fetch(e)}catch(e){}s=5,oBtn.textContent=">>>"}else 5==s&&(location.href=`//${dn}/$update.htm`)})),timer=window.setInterval(check,300)</script></body></html>)==";
77

88
// minimized from upload.htm
99
static const char uploadContent[] PROGMEM =
1010
R"==(<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>Upload</title></head><body style="width:300px"><h1>Upload</h1><div id="zone"style="width:260px;height:5em;padding:20px;background-color:#ddd">Drop here</div><a href="#i">I-Upload</a><hr><p style="text-align:right"><a href="/microide.htm">&gt;&gt;&gt;</a></p><script>function dragHelper(e){e.stopPropagation(),e.preventDefault()}function dropped(e){dragHelper(e);for(var n=e.dataTransfer.files,r=new FormData,t="/"+(location.hash?location.hash.substring(1)+"/":""),a=0;a<n.length;a++)r.append("file",n[a],t+n[a].name);fetch("/",{method:"POST",body:r}).then((function(){window.alert("done.")}))}var zoneObj=document.getElementById("zone");zoneObj.addEventListener("dragenter",dragHelper,!1),zoneObj.addEventListener("dragover",dragHelper,!1),zoneObj.addEventListener("drop",dropped,!1)</script></body></html>)==";
1111

1212
// minimized from boot.htm
1313
static const char updateContent[] PROGMEM =
14-
R"==(<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>Web Update</title></head><body style="width:300px"><h1>Web Update</h1><div style="display:grid"><progress value="0"max="20"></progress><span id="l"></span></div><div style="text-align:right"><button>Start</button></div><hr><p style="text-align:right"><a href="/updateicons.htm"title="next step"style="text-decoration:none">&gt;&gt;&gt;</a></p><script>var w,si,s=0,repo="https://homeding.github.io/",d=document,eBar=d.querySelector("progress"),x=0,a=0,t=0,seed="?"+(new Date).valueOf();function log(e){d.querySelector("#l").innerText=e}function doF(){var e=w.shift();eBar.value=++x,log(e),"-"===e[0]?a=0:fetch(repo+e+seed).then((e=>e.arrayBuffer())).then((function(t){var n=new FormData;n.append("file",new Blob([t]),"/"+e),fetch("/",{method:"POST",body:n}).then((()=>{a=0}))}))}location.hash?repo+=location.hash.substring(1)+"/":repo+="v09/",log("loading from:\n"+repo),d.querySelector("button").addEventListener("click",(function(){t=window.setInterval((function(){a||(a=1,0==s?(log("sysinfo..."),fetch("/api/sysinfo"+seed).then((e=>e.text())).then((e=>{si=e,eBar.value=++x,a=0})),s++):1==s?(log("list..."),(si=JSON.parse(si)).fsTotalBytes<2e5&&(repo=repo.replace(/(v\d+)\/$/,"$1m/")),fetch(repo+"list.txt"+seed).then((e=>e.text())).then((e=>{w=e.replace(/\r?\n/g,";").replace(/;$/,"").split(";"),eBar.max=w.length+3,a=0})),s++):2==s?(log("clean..."),fetch("/api/cleanweb").then((()=>{eBar.value=++x,s++,a=0}))):3==s&&(w.length>0?doF():(window.clearInterval(t),eBar.value=++x,log("done"))))}),100)}))</script></body></html>)==";
14+
R"==(<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>Web Update</title></head><body style="width:300px"><h1>Web Update</h1><div style="display:grid"><progress value="0"max="20"></progress><span id="l"style="height:2rem"></span></div><div style="text-align:right"><button>Start</button></div><script>var w,si,r,d=document,s=0,repo="https://homeding.github.io/",eBar=d.querySelector("progress"),oBtn=d.querySelector("button"),x=0,a=0,t=0,seed="?"+(new Date).valueOf();function log(e){d.querySelector("#l").innerText=e}async function doF(){var e=w.shift();if(log(e),"-"!==e[0]){r=await fetch(repo+e+seed),r=await r.arrayBuffer();var t=new FormData;t.append("file",new Blob([r]),"/"+e),await fetch("/",{method:"POST",body:t})}}location.hash?repo+=location.hash.substring(1)+"/":repo+="v09/",log("loading from:\n"+repo),d.querySelector("button").addEventListener("click",(()=>{0===s?(oBtn.textContent="-",t=window.setInterval((async function(){a||(a=1,0==s?(log("sysinfo..."),r=await fetch("/api/sysinfo"+seed),si=await r.text()):1==s?(log("list..."),(si=JSON.parse(si)).fsTotalBytes<2e5&&(repo=repo.replace(/(v\d+)\/$/,"$1m/")),r=await fetch(repo+"list.txt"+seed),r=await r.text(),w=r.replace(/\r?\n/g,";").replace(/;$/,"").split(";"),eBar.max=w.length+3):2==s?(log("clean..."),await fetch("/api/cleanweb")):3==s?w.length>0&&(await doF(),s--):4==s&&(window.clearInterval(t),log("done"),oBtn.textContent=">>>"),eBar.value=++x,s++,a=0)}),100)):5===s&&(location.href="/updateicons.htm")}))</script></body></html>)==";

0 commit comments

Comments
 (0)