-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
148 lines (131 loc) · 5.26 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
.people_counter {
text-align:center;
}
</style>
</head>
<body>
<div style="width:100%; text-align:center;">
<canvas id="draw" height="500" width="1000" style="border: 1px solid #111111; margin: auto"/>
</div>
<div class="people_counter"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
frames.start();
});
var frames = {
socket: null,
start: function() {
var ip = window.location.search;
ip = ip.split('ip=')[1];
console.log(`connecting to ${ip}`);
// websocket connection location
var url = "ws://" + ip + "/frames";
// canvas object
var c = document.getElementById("draw");
var ctx = c.getContext("2d");
// all real-world units are in mm unless denoted by CM
var personRadiusCM = 30;
// origin (x,y)
var origin = [c.width/2, 0];
// subscribe to the /frames data
frames.socket = new WebSocket(url);
frames.socket.onmessage = function(event) {
let data = JSON.parse(event.data);
// clear the canvas
ctx.clearRect(0, 0, c.width, c.height);
// draw the camera on the top of the screen
drawEnv(ctx, origin);
// draw each person as a circle
var i = 0;
if (data.people) {
var num_people = Object.keys(data.people).length;
$('.people_counter').text(`I see ${num_people} people`);
//console.log(num_people);
for (const [idx, person] of Object.entries(data.people)) {
// we want the data on the x,z plane from the camera's frame, so use indicies and 0 (x), 2 (Z)
// see: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#arcs
// function definition is: arc(x, y, radius, startAngle, endAngle, counterclockwise)
ctx.strokeStyle = ctx.fillStyle = colors[i++];
ctx.beginPath();
let person_x = -1 * toCM(person.avg_position[0]) + origin[0]
let person_y = toCM(person.avg_position[2]) + origin[1]
ctx.arc(person_x, person_y, personRadiusCM, 0, 2 * Math.PI);
ctx.stroke();
// draw an arrow for the person, if we have detected an angle
if (person.theta) {
ctx.beginPath();
let th = person.theta;
let arrow_x = person_x + Math.cos(th) * personRadiusCM;
let arrow_y = person_y - Math.sin(th) * personRadiusCM;
//console.log(arrow_x);
//console.log(arrow_y);
canvas_arrow(ctx, person_x, person_y, arrow_x, arrow_y);
ctx.stroke();
}
}
}
}
}
};
// Helper Functions
// Convert MM to CM
function toCM(mm) {
return mm/10;
}
// Draw an arrow
// from: https://stackoverflow.com/questions/808826/draw-arrow-on-canvas-tag#answer-6333775
function canvas_arrow(context, fromx, fromy, tox, toy) {
var headlen = 10; // length of head in pixels
var dx = tox - fromx;
var dy = toy - fromy;
var angle = Math.atan2(dy, dx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
context.moveTo(tox, toy);
context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}
// Setup an array of colors
var tc = tinycolor({
r: Math.floor(Math.random() * 0xFF),
g: Math.floor(Math.random() * 0xFF),
b: Math.floor(Math.random() * 0xFF)
});
colors = [];
var parts = 2 + Math.floor(Math.random() * 5);
for (var i = 0; i < parts; i++) {
tc = tc.spin(360 / parts);
colors.push('#' + tc.toHex());
}
// Draw the environment
function drawEnv(ctx, origin) {
var cameraSizeCM = [15, 5];
ctx.strokeStyle = ctx.fillStyle = '#333333';
ctx.fillRect(origin[0], origin[1]-cameraSizeCM[1]/2, cameraSizeCM[0], cameraSizeCM[1])
ctx.font = "25px Arial";
ctx.fillText("x", 90, 20);
ctx.fillText("y", 8, 100);
ctx.beginPath();
canvas_arrow(ctx, 14, 14, 14, 80);
canvas_arrow(ctx, 14, 14, 80, 14);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = ctx.fillStyle = '#0000FF';
canvas_arrow(ctx, origin[0]+cameraSizeCM[0]/2, 1.5, origin[0]+cameraSizeCM[0]/2, 20);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = ctx.fillStyle = '#FF0000';
canvas_arrow(ctx, origin[0]+cameraSizeCM[0]/2, 1.5, origin[0]+cameraSizeCM[0]/2-20, 1.5);
ctx.stroke();
}
</script>
</body>
</html>