Skip to content

Commit 0c98e0a

Browse files
fireflightgfireflightg
authored
Ecobottle camera tracking software
1 parent 2ca28e0 commit 0c98e0a

File tree

11 files changed

+3556
-0
lines changed

11 files changed

+3556
-0
lines changed

‎build/data/eye-min.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/data/eye.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/data/face-min.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/data/face.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/data/mouth-min.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/data/mouth.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/tracking-min.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/tracking.js

+3,111
Large diffs are not rendered by default.

‎index.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>cool</title>
6+
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
7+
<style type="text/css">
8+
h2{
9+
color: white;
10+
11+
}
12+
video, canvas {
13+
position: absolute;
14+
}
15+
16+
pre{
17+
position: static;
18+
height: 500px;
19+
overflow-y: scroll;
20+
color: white;
21+
22+
23+
}
24+
.coll{
25+
margin-top: 225px;
26+
}
27+
li{
28+
margin-left: 600px;
29+
}
30+
</style>
31+
<script src="build/tracking.js"></script>
32+
33+
<link rel="stylesheet" type="text/css" href="my/call.css"></link>
34+
</head>
35+
<body>
36+
<div class="demo-frame">
37+
<div class="demo-container">
38+
<a onclick="printElem(lie)"><h2>print</h2></a>
39+
<button id=”snap” onclick="snap()">Take screenshot</button>
40+
<input id="input" type="number" name="" placeholder="input data max">
41+
<a id="btn" onclick="nad()"><h2>pause</h2></a>
42+
<h2 id="okey"></h2>
43+
<video controls id="video" width="600" height="450" preload autoplay loop muted controls></video>
44+
<canvas id="canvas" width="600" height="450"></canvas>
45+
<canvas id="cool"></canvas>
46+
47+
</div>
48+
</div>
49+
<a class="coll" onclick="fullscreen()"><h2 class="coll">fullscreen</h2></a>
50+
<pre id="lie">can</pre>
51+
<script src="build/tracking-min.js"></script>
52+
<script type="text/javascript" src="my/main.js"></script>
53+
54+
55+
</body>
56+
</html>

‎my/call.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
body{
2+
background-color: black;
3+
}
4+
h2,pre{
5+
font-family: 'PT Sans', sans-serif;
6+
font-size: 20px;
7+
}
8+
h2 {
9+
opacity: 1;
10+
transition: opacity .25s ease-in-out;
11+
-moz-transition: opacity .25s ease-in-out;
12+
-webkit-transition: opacity .25s ease-in-out;
13+
}
14+
15+
h2:hover{
16+
opacity: 0.5;
17+
}
18+
.coll{
19+
position: absolute;
20+
}
21+
#cool{
22+
margin-top: 900px;
23+
}

‎my/main.js

+310
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
var pause = 0;
2+
window.onload = function nad(){
3+
var div = document.getElementById("lie")
4+
const headObject = document.getElementById('okey');
5+
var video = document.getElementById('video');
6+
var canvas = document.getElementById('canvas');
7+
var context = canvas.getContext('2d');
8+
var cc = 0;
9+
10+
var today = new Date();
11+
var dd = today.getDate();
12+
var mm = today.getMonth() + 1; //January is 0!
13+
var yyyy = today.getFullYear();
14+
if (dd < 10) {
15+
dd = '0' + dd;
16+
}
17+
18+
if (mm < 10) {
19+
mm = '0' + mm;
20+
}
21+
22+
tracking.ColorTracker.registerColor('brown', function(r, g, b) {
23+
var dx = r - 153;
24+
var dy = g - 126;
25+
var dz = b - 14;
26+
27+
if ((b - g) >= 100 && (r - g) >= 60) {
28+
return true;
29+
}
30+
return dx * dx + dy * dy + dz * dz < 3500;
31+
});
32+
tracking.ColorTracker.registerColor('goldfishbrown', function(r, g, b) {
33+
var dx = r - 150;
34+
var dy = g - 43;
35+
var dz = b - 0;
36+
37+
if ((b - g) >= 100 && (r - g) >= 60) {
38+
return true;
39+
}
40+
return dx * dx + dy * dy + dz * dz < 3500;
41+
});
42+
tracking.ColorTracker.registerColor('goldfishaccurate', function(r, g, b) {
43+
var dx = r - 182;
44+
var dy = g - 83;
45+
var dz = b - 0;
46+
47+
if ((b - g) >= 100 && (r - g) >= 60) {
48+
return true;
49+
}
50+
return dx * dx + dy * dy + dz * dz < 3500;
51+
});
52+
tracking.ColorTracker.registerColor('green', function(r, g, b) {
53+
var dx = r - 44;
54+
var dy = g - 44;
55+
var dz = b - 32;
56+
57+
if ((b - g) >= 100 && (r - g) >= 60) {
58+
return true;
59+
}
60+
return dx * dx + dy * dy + dz * dz < 3500;
61+
});
62+
tracking.ColorTracker.registerColor('goldfish', function(r, g, b) {
63+
var dx = r - 209;
64+
var dy = g - 83;
65+
var dz = b - 0;
66+
67+
if ((b - g) >= 100 && (r - g) >= 60) {
68+
return true;
69+
}
70+
return dx * dx + dy * dy + dz * dz < 3500;
71+
});
72+
tracking.ColorTracker.registerColor('Scanning', function(r, g, b) {
73+
var dx = r - 67;
74+
var dy = g - 63;
75+
var dz = b - 25;
76+
77+
if ((b - g) >= 100 && (r - g) >= 60) {
78+
return true;
79+
}
80+
return dx * dx + dy * dy + dz * dz < 3500;
81+
});
82+
tracking.ColorTracker.registerColor('goldfishcool', function(r, g, b) {
83+
var dx = r - 214;
84+
var dy = g - 90;
85+
var dz = b - 0;
86+
87+
if ((b - g) >= 100 && (r - g) >= 60) {
88+
return true;
89+
}
90+
return dx * dx + dy * dy + dz * dz < 3500;
91+
});
92+
tracking.ColorTracker.registerColor('goldfishwhite', function(r, g, b) {
93+
var dx = r - 152;
94+
var dy = g - 59;
95+
var dz = b - 0;
96+
97+
if ((b - g) >= 100 && (r - g) >= 60) {
98+
return true;
99+
}
100+
return dx * dx + dy * dy + dz * dz < 3500;
101+
});
102+
tracking.ColorTracker.registerColor('goldfishday', function(r, g, b) {
103+
var dx = r - 219;
104+
var dy = g - 159;
105+
var dz = b - 67;
106+
107+
if ((b - g) >= 100 && (r - g) >= 60) {
108+
return true;
109+
}
110+
return dx * dx + dy * dy + dz * dz < 3500;
111+
});
112+
tracking.ColorTracker.registerColor('goldfishdayz', function(r, g, b) {
113+
var dx = r - 219;
114+
var dy = g - 159;
115+
var dz = b - 67;
116+
117+
if ((b - g) >= 100 && (r - g) >= 60) {
118+
return true;
119+
}
120+
return dx * dx + dy * dy + dz * dz < 3500;
121+
});
122+
tracking.ColorTracker.registerColor('goldfishdayz', function(r, g, b) {
123+
var dx = r - 59;
124+
var dy = g - 37;
125+
var dz = b - 66;
126+
127+
if ((b - g) >= 100 && (r - g) >= 60) {
128+
return true;
129+
}
130+
return dx * dx + dy * dy + dz * dz < 3500;
131+
});
132+
tracking.ColorTracker.registerColor('led', function(r, g, b) {
133+
var dx = r - 64;
134+
var dy = g - 219;
135+
var dz = b - 199;
136+
137+
if ((b - g) >= 100 && (r - g) >= 60) {
138+
return true;
139+
}
140+
return dx * dx + dy * dy + dz * dz < 3500;
141+
});
142+
143+
144+
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow','brown','green', 'Scanning','goldfish','goldfishbrown','goldfishaccurate','goldfishcool','goldfishwhite','goldfishday','led']);
145+
146+
tracking.track('#video', colors, { camera: true });
147+
148+
149+
colors.on('track', function(event) {
150+
context.clearRect(0, 0, canvas.width, canvas.height);
151+
if (event.data.length === 0) {
152+
// No colors were detected in this frame.
153+
154+
} else {
155+
event.data.forEach(function(rect) {
156+
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
157+
headObject.innerText = rect.color
158+
if (rect.color == 'yellow'){
159+
headObject.innerText = "Plant or Sand or Gravel " + "X: "+ rect.x + ", " +"Y: "+ rect.y;
160+
161+
context.strokeStyle = rect.color;
162+
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
163+
context.font = '11px Helvetica';
164+
context.fillStyle = "#fff";
165+
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11 + rect.color);
166+
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22 + rect.color);
167+
168+
}
169+
if(rect.color == 'Scanning') {
170+
headObject.innerText = "Plant" + rect.x + ", " + rect.y;
171+
while(cc < 27){
172+
var Li = document.createElement("li");
173+
var time = new Date().toLocaleTimeString();
174+
today = yyyy + '-' + mm + '-' + dd + time;
175+
Li.innerText = today + ": " + rect.color + ", Plant";
176+
div.appendChild(Li);
177+
cc = cc + 1;
178+
}
179+
context.strokeStyle = rect.color;
180+
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
181+
context.font = ' 11px, Arial';
182+
context.fillStyle = "#0000";
183+
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5 , rect.y + 11);
184+
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22 );
185+
}
186+
187+
if(rect.color == 'goldfish' || rect.color == 'goldfishaccurate' || rect.color == "goldfishcool"|| rect.color == "goldfishwhite"|| rect.color == "goldfishbrown"|| rect.color == "goldfishday") {
188+
if(rect.color == 'goldfishbrown'){
189+
headObject.innerText = "goldfish or Gravel" + rect.x + ", " + rect.y;
190+
while(cc < 27){
191+
var Li = document.createElement("li");
192+
var time = new Date().toLocaleTimeString();
193+
today = yyyy + '-' + mm + '-' + dd + time;
194+
Li.innerText = today + ": " + rect.color + ", goldfish";
195+
div.appendChild(Li);
196+
cc = cc + 1;
197+
}
198+
context.strokeStyle = 'red'
199+
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
200+
context.font = ' 11px Arial';
201+
context.fillStyle = "#fff";
202+
context.fillText("goldfish", rect.x + rect.width + 5 , rect.y + 11);
203+
}
204+
else{
205+
headObject.innerText = "goldfish" + rect.x + ", " + rect.y;
206+
while(cc < 25){
207+
var Li = document.createElement("li");
208+
var time = new Date().toLocaleTimeString();
209+
today = yyyy + '-' + mm + '-' + dd + time;
210+
Li.innerText = today + ": " + rect.color + ", goldfish";
211+
div.appendChild(Li);
212+
cc = cc + 1;
213+
}
214+
context.strokeStyle = 'red'
215+
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
216+
context.font = '11px Arial';
217+
context.fillStyle = "#fff";
218+
context.fillText("goldfish", rect.x + rect.width + 5 , rect.y + 11);
219+
220+
}
221+
}
222+
if(rect.color == 'led'){
223+
context.strokeStyle = rect.color;
224+
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
225+
226+
227+
228+
}
229+
else{
230+
headObject.innerText = "Now " + rect.color;
231+
if(rect.color == 'goldfish' || rect.color == 'goldfishaccurate' || rect.color == "goldfishcool"|| rect.color == "goldfishwhite"|| rect.color == "goldfishbrown"|| rect.color == "goldfishday") {
232+
233+
headObject.innerText = "goldfish " + rect.x + ", " + rect.y;
234+
while(cc < 26){
235+
var Li = document.createElement("li");
236+
var time = new Date().toLocaleTimeString();
237+
today = yyyy + '-' + mm + '-' + dd + time;
238+
Li.innerText = today + ": " + rect.color + ", goldfish";
239+
div.appendChild(Li);
240+
}
241+
context.strokeStyle = 'red'
242+
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
243+
context.font = ' 11px Arial';
244+
context.fillStyle = "#fff";
245+
context.fillText("goldfish", rect.x + rect.width + 5 , rect.y + 11);
246+
247+
}
248+
}
249+
});
250+
}
251+
});
252+
253+
tracking.track('#video', colors);
254+
}
255+
function printElem(lie) {
256+
var content = document.getElementById('lie').innerHTML;
257+
var mywindow = window.open('', 'Print', 'height=600,width=800');
258+
259+
mywindow.document.write('<html><head><title>video data Collector beta 1.0.2</title>');
260+
mywindow.document.write('</head><body >');
261+
mywindow.document.write(content);
262+
mywindow.document.write('</body></html>');
263+
264+
mywindow.document.close();
265+
mywindow.focus()
266+
mywindow.print();
267+
mywindow.close();
268+
return true;
269+
}
270+
function fullscreen(){
271+
var elem = document.getElementById("video");
272+
if (elem.requestFullscreen) {
273+
elem.requestFullscreen();
274+
} else if (elem.mozRequestFullScreen) {
275+
elem.mozRequestFullScreen();
276+
} else if (elem.webkitRequestFullscreen) {
277+
elem.webkitRequestFullscreen();
278+
} else if (elem.msRequestFullscreen) {
279+
elem.msRequestFullscreen();
280+
}
281+
var elemt = document.getElementById("canvas");
282+
if (elemt.requestFullscreen) {
283+
elemt.requestFullscreen();
284+
} else if (elem.mozRequestFullScreen) {
285+
elemt.mozRequestFullScreen();
286+
} else if (elem.webkitRequestFullscreen) {
287+
elemt.webkitRequestFullscreen();
288+
} else if (elem.msRequestFullscreen) {
289+
elemt.msRequestFullscreen();
290+
}
291+
}
292+
293+
var video = document.getElementById('video');
294+
var canvass = document.getElementById('cool');
295+
var contexts = canvass.getContext('2d');
296+
var w, h, ratio;
297+
video.addEventListener('loadedmetadata', function() {
298+
ratio = video.videoWidth / video.videoHeight;
299+
w = video.videoWidth - 100;
300+
h = parseInt(w / ratio, 10);
301+
canvass.width = w;
302+
canvass.height = h;
303+
}, false);
304+
function snap() {
305+
contexts.fillRect(0, 0, w, h);
306+
contexts.drawImage(video, 0, 0, w, h);
307+
}
308+
function puas(){
309+
pause = pause + 1;
310+
}

0 commit comments

Comments
 (0)