-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (77 loc) · 2.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>axidraw.js</title>
<script src="src/axidraw.js"></script>
</head>
<body>
<button id="butConnect">Connect</button>
<br>
<button id="butDraw" disabled>Draw</button>
<br>
<script>
let axidraw = new AxiDraw();
const butConnect = document.getElementById('butConnect');
const butDraw = document.getElementById('butDraw');
document.addEventListener('DOMContentLoaded', () => {
if ('serial' in navigator) {
butConnect.addEventListener('click', clickConnect);
butDraw.addEventListener('click', clickDraw);
} else {
console.log('Browser not supported - please try again in chrome');
butConnect.innerText = 'Browser not supported';
butConnect.disabled = true;
}
});
async function clickConnect() {
if (axidraw.port) {
await axidraw.disconnect();
butConnect.innerText = 'Disconnected';
butConnect.disabled = true;
butDraw.disabled = true;
return;
}
await axidraw.connect();
butConnect.innerText = 'Disconnect';
butDraw.disabled = false;
}
function circle(cx, cy, r, n) {
let points = [];
for (let i = 0; i < n + 1; i++) {
let a = 2 * Math.PI * i / n;
let x = cx + Math.cos(a) * r;
let y = cy + Math.sin(a) * r;
points.push([x / 100, y / 100]);
}
return points;
}
async function clickDraw() {
let w = 600;
let h = 400;
let p = 50;
let r = 50;
let paths = [];
for (let x = p + r; x < w - p - r; x += r) {
for (let y = p + r; y < h - p - r; y += r) {
paths.push(circle(x, y, r, 20));
}
}
axidraw.draw(paths);
let ns = 'http://www.w3.org/2000/svg';
let svg = document.createElementNS(ns, 'svg');
svg.setAttribute('width', '6in');
svg.setAttribute('height', '4in');
svg.setAttribute('viewBox', '0 0 ' + 600 + ' ' + 400);
for (let i = 0; i < paths.length; i++) {
let shape = 'M ' + 100 * paths[i][0][0] + ' ' + 100 * paths[i][0][1];
for (let j = 1; j < paths[i].length; j++) shape += ' L ' + 100 * paths[i][j][0] + ' ' + 100 * paths[i][j][1];
let path = document.createElementNS(ns, 'path');
path.setAttribute('d', shape);
path.setAttribute('style', 'fill:none;stroke-width:1;stroke:rgb(0%,0%,0%);');
svg.appendChild(path);
}
document.body.appendChild(svg);
}
</script>
</body>
</html>