-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (101 loc) · 3.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ESP</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
/>
</head>
<body class="bg-gray-100">
<main class="w-screen h-screen flex flex-col md:flex-row">
<div class="md:w-1/2 h-1/2 md:h-auto p-2 flex flex-col">
<div class="text-right mb-4">
<button id="sendProgram" class="p-2">run</button>
</div>
<div class="w-full rounded font-mono border flex-grow bg-white overflow-hidden" id="editorArea"></div>
</div>
<div class="md:w-1/2 p-3 flex flex-col">
<div class="flex items-center mb-4 justify-between text-sm">
<button id="readBuffer" class="p-2">read buffer</button>
<button id="readSerial" class="p-2">read serial</button>
<button id="streamSerial" class="p-2">stream serial</button>
<button id="prepare" class="p-2">erase fw</button>
<button id="flash" class="p-2">flash</button>
<button id="connect" class="p-2">connect</button>
<button id="reset" class="p-2">reset</button>
<button id="iotest" class="p-2">io test</button>
<button id="clear" class="p-2">clear</button>
</div>
<pre
id="buffer"
class="font-mono overflow-auto whitespace-nowrap p-4 rounded border bg-white flex-grow"
></pre>
</div>
</main>
<script type="module">
import { compile } from "https://esp.jsfn.run/index.mjs";
import * as cm from "https://codemirror.jsfn.run/index.mjs";
const action = (button, name) => {
const c = 'bg-gray-200'
button.onclick = async () => {
button.classList.add(c)
await fetch("/" + name, { method: "POST" });
button.classList.remove(c)
};
};
const readAction = (action) => async () => {
const res = await fetch("/" + action);
if (!res.ok) {
buffer.innerText += 'Failed';
return;
}
readStream(res);
};
const readStream = async (stream) => {
const reader = stream.body.getReader();
let next;
while (next = reader.read()) {
const { value, done } = await next;
if (done) {
const sep = document.createElement('hr');
sep.classList.add('border-b');
buffer.append(sep);
break;
}
buffer.innerText += [...value].map(i => String.fromCharCode(i)).join('');
}
};
window.addEventListener("DOMContentLoaded", async () => {
readBuffer.onclick = readAction('buffer');
readSerial.onclick = readAction('cat-once');
streamSerial.onclick = readAction('cat');
action(prepare, "prepare");
action(flash, "flash");
action(connect, "connect");
action(reset, "reset");
action(iotest, "io-test");
sendProgram.onclick = async () => {
const text = window.editor.getValue().trim();
if (!text) return;
const program = await compile(text, {buffer:true});
if (!program.ok) {
buffer.innerText += await program.text();
return;
}
const run = await fetch("/run", { method: "POST", body: await program.arrayBuffer() });
if (!run.ok) {
buffer.innerText += 'Failed to run: ' + await run.text();
return;
}
readStream(run);
};
clear.onclick = () => buffer.innerText = '';
await cm.load();
await cm.install('', { target: '#editorArea', name: 'editor', lineNumbers: true });
});
</script>
</body>
</html>