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
|
When the collected matches for [list laser blob /t/ has center /c/ size /s/] are /matches/ {
Wish the web server handles route "/laser-web-debug" with handler [list apply {{matches} {
upvar ^html ^html
set blobsHtml "<ol>"
set blobsJson ""
foreach match $matches {
append blobsHtml "<li><strong>[dict get $match t]</strong>: [dict get $match c]</li>"
append blobsJson "{\"id\": [dict get $match t], \"x\": [lindex [dict get $match c] 0], \"y\": [lindex [dict get $match c] 1]},"
}
append blobsHtml "</ol>"
append blobsJson ""
html [string map [list MY_BLOBS_HTML $blobsHtml MY_BLOBS_JSON $blobsJson] {
<html>
<head>
<style>
body { overflow: hidden; }
</style>
</head>
<body>
<canvas id="canvas" width="1280" height="720"></canvas>
MY_BLOBS_HTML
<script>
var blobData = [MY_BLOBS_JSON];
// from https://github.com/processing/p5.js/blob/main/src/image/filters.js
function thresholdFilter(pixels, level) {
if (level === undefined) {
level = 0.5;
}
const thresh = Math.floor(level * 255);
for (let i = 0; i < pixels.length; i += 4) {
const r = pixels[i];
const g = pixels[i + 1];
const b = pixels[i + 2];
// const gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
const gray = r;
let val;
if (gray >= thresh) {
val = 255;
} else {
val = 0;
}
pixels[i] = pixels[i + 1] = pixels[i + 2] = val;
}
}
function preprocessImage(ctx, canvas) {
const processedImageData = ctx.getImageData(0,0,canvas.width, canvas.height);
thresholdFilter(processedImageData.data, level=0.5);
return processedImageData;
}
function Test1() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
var img1 = new Image();
img1.onload = function () {
ctx.drawImage(img1, 0, 0);
ctx.putImageData(preprocessImage(ctx, canvas), 0, 0);
blobData.forEach((d) => {
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
const halfSize = 20;
ctx.fillRect(d.x - halfSize, d.y - halfSize, halfSize*2, halfSize*2);
});
};
img1.src = '/frame-image/';
}
}
Test1();
</script>
</body>
</html>
}]
}} $matches]
}
|
