-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
folk-cnc.folk
454 lines (413 loc) · 17.8 KB
/
folk-cnc.folk
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
Wish the web server handles route {/cnc/$} with handler {
html {
<html>
<head>
<style>
li { list-style-position: inside; }
li input { background: rgba(255, 255, 255, 0.5); }
</style>
</head>
<body>
<script>
let ws;
let calibrationTagCameraCorners;
let calibrationTagProjectorCorners;
function redisplayCalibrationTag(x = 100, y = 100, size = 50) {
const bs = size / 10; // size of a single block in the AprilTag
// these are inner corners, not outer corners, to match the
// corners that the detector reports:
calibrationTagProjectorCorners = [
[x+2*bs, y+size-2*bs], // bottomleft
[x+size-2*bs, y+size-2*bs], // bottomright
[x+size-2*bs, y+2*bs], // topright
[x+2*bs, y+2*bs], // topleft
];
ws.send(`
Retract /anyone/ wishes to display CNC calibration tag with /...options/
Assert $chan wishes to display CNC calibration tag with \\
id 48600 x ${x} y ${y} size ${size}
`);
}
function destroyCalibrationTag() {
ws.send(`
Retract $chan wishes to start moving CNC calibration tag
Retract $chan wishes to display CNC calibration tag with /...options/
`);
}
function setCalibrationTagCameraCorners(corners) {
calibrationTagCameraCorners = corners;
moveCalibrationTagCameraCornersDiv.innerHTML =
`<ol>` +
corners.map(corner =>
`<li><code>[${corner[0].toFixed(2)}, ${corner[1].toFixed(2)}]</code></li>`
).join("\n") +
`</ol>`;
}
</script>
<ol>
<li id="displayCalibrationTagListItem">
Display calibration tag on projector:
<button id="displayCalibrationTagButton">Display Calibration Tag</button>
</li>
<script>
function stepDisplayCalibrationTag() {
displayCalibrationTagButton.addEventListener('click', (e) => {
ws = new WebSocket(window.location.origin.replace("http", "ws") + "/ws");
ws.onopen = () => { doneDisplayCalibrationTag(); };
ws.onclose = () => {
document.body.style.background = 'red';
};
ws.onerror = (err) => {
document.body.style.background = 'red';
console.error('Socket encountered error: ', err.message, 'Closing socket');
ws.close();
}
ws.onmessage = (msg) => { eval(msg.data); };
window.onbeforeunload = () => { destroyCalibrationTag(); };
});
}
function doneDisplayCalibrationTag() {
displayCalibrationTagListItem.style.textDecoration = 'line-through';
displayCalibrationTagButton.style.textDecoration = 'line-through';
ws.send(`Assert $chan wishes to start moving CNC calibration tag`);
}
</script>
<li id="moveCalibrationTagListItem" style="display: none">
Move the calibration tag so that it's on the surface of the
material that you want to cut:
<div id="moveCalibrationTagContainer" class="container"
style="background: #eee; width: 480px; height: 360px">
<div class="movable"
style="background: #444;
font-family: sans-serif;
text-align: center;
user-select: none;
position: relative;
cursor: move;
overflow: hidden;
color: #eee">
<b>Drag</b> me + <b>resize</b> from the resize corner
<div class="resize-handle"
style="position: absolute; right: 0; bottom: 0;
width: 12px; height: 12px;
background: #c44;
cursor: nwse-resize"></div>
</div>
</div>
<p>Calibration tag corners in camera-space: <div id="moveCalibrationTagCameraCornersDiv">(not detected yet)</div></p>
<button id="moveCalibrationTagDoneButton">Done (tag is on material)</button>
</li>
<script>
function stepMoveCalibrationTag(displayWidth, displayHeight) {
moveCalibrationTagListItem.style.display = "";
const [containerWidth, containerHeight] = [
moveCalibrationTagContainer.offsetWidth,
moveCalibrationTagContainer.offsetHeight
];
function makeDraggable(state, el) {
// from https://www.redblobgames.com/making-of/draggable/
function start(event) {
if (event.button !== 0) return; // left button only
event.stopPropagation(); // for nested draggables
let {x, y} = state.eventToCoordinates(event);
state.dragging = {dx: state.pos.x - x, dy: state.pos.y - y};
el.setPointerCapture(event.pointerId);
}
function end(_event) { state.dragging = null; }
function move(event) {
if (!state.dragging) return;
event.stopPropagation(); // for nested draggables
let {x, y} = state.eventToCoordinates(event);
state.pos = {x: x + state.dragging.dx, y: y + state.dragging.dy};
}
el.addEventListener('pointerdown', start);
el.addEventListener('pointerup', end);
el.addEventListener('pointercancel', end);
el.addEventListener('pointermove', move)
el.addEventListener('touchstart', (e) => e.preventDefault());
}
const el = document.querySelector(".movable");
let state = { x: 30, y: 10, size: 100 };
function resizeAndPosition() {
let {x, y, size} = state;
el.style.transform = `translate(${x}px,${y}px)`;
el.style.width = `${size}px`; el.style.height = `${size}px`;
// Rescale from container-space to display-space:
redisplayCalibrationTag(x * displayWidth / containerWidth,
y * displayHeight / containerHeight,
size * displayWidth / containerWidth);
}
let outerState = {
eventToCoordinates(event) { return {x: event.clientX, y: event.clientY}; },
dragging: false,
get pos() { return {x: state.x, y: state.y}; },
set pos(p) {
const container = el.parentNode.getBoundingClientRect();
const bounds = el.getBoundingClientRect();
state.x = p.x;
state.y = p.y;
resizeAndPosition();
},
}
let innerState = {
eventToCoordinates(event) { return {x: event.clientX, y: event.clientY}; },
dragging: false,
get pos() { return {x: state.x + state.size, y: state.y + state.size}; },
set pos(p) {
state.size = Math.min(Math.max(25, p.x - state.x), Math.max(25, p.y - state.y));
resizeAndPosition();
},
}
resizeAndPosition();
makeDraggable(outerState, el);
makeDraggable(innerState, document.querySelector(".resize-handle"));
moveCalibrationTagDoneButton.addEventListener("click", doneMoveCalibrationTag);
}
function doneMoveCalibrationTag() {
if (!calibrationTagProjectorCorners) {
alert("Error: Calibration tag not projected yet; can't continue with calibration.");
return;
}
if (!calibrationTagCameraCorners) {
alert("Error: Calibration tag not seen on camera yet; can't continue with calibration.");
return;
}
moveCalibrationTagListItem.style.textDecoration = "line-through";
// Locks in projector coordinates, since tag can't be moved after this:
moveCalibrationTagListItem.querySelector(".container").style.pointerEvents = "none";
moveCalibrationTagDoneButton.style.textDecoration = "line-through";
// Locks in camera coordinates by removing the tag from display:
destroyCalibrationTag();
stepMoveTool();
}
</script>
<li id="moveTool" style="display: none">
<p>The 4 inner corners of the tag should be circled on the
material now; you probably want to make pencil marks at
those points (for when the projection is occluded).</p>
<p>Set the CNC machine's zero point to the bottom-left corner
of your material (or wherever you want your zero point to
be).</p>
<p>Move the CNC machine to each of the 4 circled corner
points, and write down each point's (x, y) coordinates in
CNC-space (probably in millimeters):</p>
<ol id="moveToolList">
<li><input type="text"><input type="text"></li>
<li><input type="text"><input type="text"></li>
<li><input type="text"><input type="text"></li>
<li><input type="text"><input type="text"></li>
</ol>
<button id="moveToolDoneButton">Done (wrote all CNC points)</button>
</li>
<script>
function stepMoveTool() {
moveTool.style.display = "";
const colors = ["green", "yellow", "cyan", "magenta"];
const pointEls = document.querySelectorAll("#moveToolList > li");
colors.forEach((color, idx) => { pointEls[idx].style.background = color; });
const pointsTcl = calibrationTagProjectorCorners.map((corner, idx) =>
`{color ${colors[idx]} index ${idx+1} position {${corner.join(" ")}}}`
).join(" ");
ws.send(`Assert $chan wishes to start moving CNC tool point to projector points {${pointsTcl}}`);
moveToolDoneButton.addEventListener("click", doneMoveTool);
}
function getCalibrationTagCncCorners() {
return [...document.querySelectorAll("#moveToolList > li")].map(pointEl =>
[...pointEl.querySelectorAll("input")].map(input => parseFloat(input.value))
);
}
function doneMoveTool() {
moveTool.style.textDecoration = "line-through";
ws.send(`Retract $chan wishes to start moving CNC tool point to projector points /any/`);
stepPreviewGcode();
}
</script>
<li id="previewGcode" style="display: none">
Upload a G-code file to preview:
<input type="file" id="previewGcodeFileInput">
</li>
<script src="./vendor/peggy.min.js"></script>
<script type="module">
import { interpret } from "./gcode.js";
window.stepPreviewGcode = function stepPreviewGcode() {
previewGcode.style.display = "";
previewGcodeFileInput.addEventListener("change", () => {
if (previewGcodeFileInput.files.length !== 1) return;
const file = previewGcodeFileInput.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const content = e.target.result;
const { path: totalPath } = interpret(content);
// Separate paths based on Z
const paths = [];
let currentPath = [];
for (let i = 0; i < totalPath.length; i += 1) {
const [x, y, z] = totalPath[i];
if (z > 0) {
if (currentPath.length > 0) {
paths.push(currentPath);
currentPath = [];
}
} else {
currentPath.push([ x, y ]);
}
}
function tclizePoints(points) {
return points.map(([x, y]) => `{${x} ${y}}`).join(" ")
}
const pathsTcl = paths.map(path => "{" + tclizePoints(path) + "}").join(" ");
const calibrationTagCncCornersTcl = tclizePoints(getCalibrationTagCncCorners());
const calibrationTagProjectorCornersTcl = tclizePoints(calibrationTagProjectorCorners);
ws.send(`Assert $chan wishes to preview CNC gcode paths {${pathsTcl}} with \\
cnc-corners {${calibrationTagCncCornersTcl}} \\
projector-corners {${calibrationTagProjectorCornersTcl}}`);
};
reader.readAsText(file);
});
}
</script>
</ol>
<script>
stepDisplayCalibrationTag();
</script>
</body>
</html>
}
}
Wish the web server handles route {/cnc/(.+)$} with handler [list apply {{this} {
upvar path path; regexp {/cnc/(.+)$} $path -> filename
set fd [open [file dirname $this]/$filename r]
fconfigure $fd -encoding binary -translation binary
set body [read $fd]; close $fd
return [dict create \
statusAndHeaders "HTTP/1.1 200 OK
Connection: close
Content-Type: text/javascript; charset=utf-8\n\n" \
body $body]
}} $this]
When display /disp/ has width /displayWidth/ height /displayHeight/ &\
/someone/ wishes to display CNC calibration tag with /...options/ {
set id [dict get $options id]
set tx [dict get $options x]; set ty [dict get $options y]
set size [dict get $options size]
set tagImage [::tagImageForId $id]
set tagBits [list]
# 10x10 AprilTag -> 100 bits
for {set y 0} {$y < 10} {incr y} {
for {set x 0} {$x < 10} {incr x} {
set j [expr {$y * [image_t bytesPerRow $tagImage] + $x}]
set bit [== [image_t data $tagImage $j] 255]
lappend tagBits $bit
}
}
# -> 4 32-bit integers
set tagBitsVec [list 0b[join [lreverse [lrange $tagBits 0 31]] ""] \
0b[join [lreverse [lrange $tagBits 32 63]] ""] \
0b[join [lreverse [lrange $tagBits 64 95]] ""] \
0b[join [lreverse [lrange $tagBits 96 127]] ""]]
set topLeft [list $tx $ty]
set topRight [list [+ $tx $size] $ty]
set bottomRight [list [+ $tx $size] [+ $ty $size]]
set bottomLeft [list $tx [+ $ty $size]]
Wish the GPU draws pipeline "apriltag" with arguments \
[list $tagBitsVec $topLeft $topRight $bottomRight $bottomLeft] \
layer 100
# Blanket the whole projector area with white, except the tag, so
# that we're more likely to detect the tag in contrast.
Wish to draw a quad with \
p0 [list 0 0] p1 [list $displayWidth 0] \
p2 [list $displayWidth $displayHeight] p3 [list 0 $displayHeight] \
color white layer 99
}
Wish the GPU compiles pipeline "apriltag" {
{uvec4 tagBitsVec vec2 a vec2 b vec2 c vec2 d} {
vec2 vertices[4] = vec2[4](a, b, d, c);
return vertices[gl_VertexIndex];
} {fn invBilinear} {
vec2 p = gl_FragCoord.xy;
vec2 uv = invBilinear(p, a, b, c, d);
int x = int(uv.x * 10); int y = int(uv.y * 10);
int bitIdx = y * 10 + x;
uint bit = (tagBitsVec[bitIdx / 32] >> (bitIdx % 32)) & 0x1;
return bit == 1 ? vec4(1, 1, 1, 1) : vec4(0, 0, 0, 1);
}
}
When display /disp/ has width /displayWidth/ height /displayHeight/ &\
/chan/ wishes to start moving CNC calibration tag {
::websocket::send $chan text "stepMoveCalibrationTag($displayWidth, $displayHeight);"
}
if {$::tcl_platform(os) eq "Darwin"} {
# HACK: for laptop testing:
Claim tag 48600 has corners {{0 0} {100 100} {200 200} {300 300}}
}
When /chan/ wishes to display CNC calibration tag with /...options/ {
When the clock time is /t/ {
# Only report a new tag location to the web frontend every 100ms.
Claim the CNC calibration tag time is [floor [* $t 10]]
}
set id [dict get $options id]
When the CNC calibration tag time is /t/ &\
tag $id has detection /det/ on /camera/ at /timestamp/ {
set corners [dict get $det p]
set cornersJs [concat {[} [join [lmap corner $corners {
concat {[} [join $corner ","] {]}
}] ", "] {]}]
::websocket::send $chan text "setCalibrationTagCameraCorners($cornersJs);"
}
}
When /chan/ wishes to start moving CNC tool point to projector points /points/ {
foreach point $points {
dict with point {
Wish to draw text with position $position text " $index " \
color $color \
anchor [expr {($index == 1 || $index == 4) ? "right" : "left"}] \
scale 1.0 layer 101
Wish to draw a circle with center $position color $color \
radius 5 thickness 2 layer 102
}
}
}
When /chan/ wishes to preview CNC gcode paths /paths/ with /...options/ {
set cncCorners [dict get $options cnc-corners]
set projectorCorners [dict get $options projector-corners]
for {set i 0} {$i < 4} {incr i} {
lassign [lindex $cncCorners $i] x$i y$i
lassign [lindex $projectorCorners $i] u$i v$i
}
set A [subst {
{$x0 $y0 1 0 0 0 [expr -$x0*$u0] [expr -$y0*$u0]}
{$x1 $y1 1 0 0 0 [expr -$x1*$u1] [expr -$y1*$u1]}
{$x2 $y2 1 0 0 0 [expr -$x2*$u2] [expr -$y2*$u2]}
{$x3 $y3 1 0 0 0 [expr -$x3*$u3] [expr -$y3*$u3]}
{0 0 0 $x0 $y0 1 [expr -$x0*$v0] [expr -$y0*$v0]}
{0 0 0 $x1 $y1 1 [expr -$x1*$v1] [expr -$y1*$v1]}
{0 0 0 $x2 $y2 1 [expr -$x2*$v2] [expr -$y2*$v2]}
{0 0 0 $x3 $y3 1 [expr -$x3*$v3] [expr -$y3*$v3]}
}]
set b [list $u0 $u1 $u2 $u3 $v0 $v1 $v2 $v3]
lassign [solvePGauss $A $b] a0 a1 a2 b0 b1 b2 c0 c1
# CNC->projector homography:
set H [subst {
{$a0 $a1 $a2}
{$b0 $b1 $b2}
{$c0 $c1 1}
}]
set project [list apply {{a0 a1 a2 b0 b1 b2 c0 c1 x y} {
set Hx [expr {$a0*$x + $a1*$y + $a2}]
set Hy [expr {$b0*$x + $b1*$y + $b2}]
set Hz [expr {$c0*$x + $c1*$y + 1.0}]
return [list [/ $Hx $Hz] [/ $Hy $Hz]]
}} $a0 $a1 $a2 $b0 $b1 $b2 $c0 $c1]
set instances [list]
foreach path $paths {
set prevProjPoint none
foreach point $path {
set projPoint [{*}$project {*}$point]
if {$prevProjPoint ne "none"} {
lappend instances [list $prevProjPoint $projPoint 2 [getColor green]]
}
set prevProjPoint $projPoint
}
}
Wish the GPU draws pipeline "line" with instances $instances
}