-
-
Notifications
You must be signed in to change notification settings - Fork 69
/
Copy pathfloor-distance-measure.html
95 lines (84 loc) · 4.01 KB
/
floor-distance-measure.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Kinect2 Example</title>
<link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="../assets/vendors/bootstrap-4.3.1-dist/css/docs.min.css">
</head>
<body class="container-fluid py-3">
<div class="d-flex align-items-baseline justify-content-between">
<h1 class="bd-title">Floor Distance Measure</h1>
<button onclick="require('electron').remote.getCurrentWebContents().openDevTools()">open dev tools</button>
</div>
<p>
This demo measures and displays the height of the left hand to the floor.<br />
Your Kinect needs to be pointed in an angle so that it can see the floor.
</p>
<canvas id="outputCanvas" width="1920" height="1080" class="img-fluid"></canvas>
<script>
{
const Kinect2 = require('kinect2');
const kinect = new Kinect2();
const $outputCanvas = document.getElementById('outputCanvas'),
outputCtx = $outputCanvas.getContext('2d'),
outputImageData = outputCtx.createImageData($outputCanvas.width, $outputCanvas.height);
const init = () => {
startKinect();
};
const getClosestBodyIndex = (bodies) => {
let closestZ = Number.MAX_VALUE;
let closestBodyIndex = -1;
for(let i = 0; i < bodies.length; i++) {
if(bodies[i].tracked && bodies[i].joints[Kinect2.JointType.spineMid].cameraZ < closestZ) {
closestZ = bodies[i].joints[Kinect2.JointType.spineMid].cameraZ;
closestBodyIndex = i;
}
}
return closestBodyIndex;
};
const startKinect = () => {
if (kinect.open()) {
kinect.on('multiSourceFrame', (frame) => {
if (frame.color && frame.color.buffer) {
renderColorFrame(outputCtx, outputImageData, frame.color.buffer);
}
const closestBodyIndex = getClosestBodyIndex(frame.body.bodies);
if(closestBodyIndex > -1 && frame.body.floorClipPlane) {
//get position of left hand
const joint = frame.body.bodies[closestBodyIndex].joints[Kinect2.JointType.handLeft];
//https://social.msdn.microsoft.com/Forums/en-US/594cf9ed-3fa6-4700-872c-68054cac5bf0/angle-of-kinect-device-and-effect-on-xyz-positional-data?forum=kinectv2sdk
const cameraAngleRadians= Math.atan(frame.body.floorClipPlane.z / frame.body.floorClipPlane.y);
const cosCameraAngle = Math.cos(cameraAngleRadians);
const sinCameraAngle = Math.sin(cameraAngleRadians);
const yprime = joint.cameraY * cosCameraAngle + joint.cameraZ * sinCameraAngle;
const jointDistanceFromFloor = frame.body.floorClipPlane.w + yprime;
//show height in canvas
outputCtx.beginPath();
outputCtx.fillStyle = "red";
outputCtx.arc(joint.colorX * 1920, joint.colorY * 1080, 10, 0, Math.PI * 2, true);
outputCtx.fill();
outputCtx.closePath();
outputCtx.font = "72px sans";
outputCtx.fillText(jointDistanceFromFloor.toFixed(2) + "m", 20 + joint.colorX * 1920, joint.colorY * 1080);
}
});
kinect.openMultiSourceReader({
frameTypes: Kinect2.FrameType.color | Kinect2.FrameType.depth | Kinect2.FrameType.body
});
}
};
const renderColorFrame = (ctx, canvasImageData, newPixelData) => {
const pixelArray = canvasImageData.data;
for (let i = 0; i < canvasImageData.data.length; i++) {
pixelArray[i] = newPixelData[i];
}
ctx.putImageData(canvasImageData, 0, 0);
};
// expose the kinect instance to the window object in this demo app to allow the parent window to close it between sessions
window.kinect = kinect;
init();
}
</script>
</body>
</html>