Skip to content

Commit 50f61ec

Browse files
eduardolundgreneduardolundgren
committed
Source formatting
1 parent ed2be6b commit 50f61ec

4 files changed

Lines changed: 106 additions & 102 deletions

File tree

‎examples/assets/color_camera_gui.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
function initGUIControllers(tracker) {
2+
// GUI Controllers
3+
4+
var gui = new dat.GUI();
5+
6+
var trackedColors = {
7+
cyan: true,
8+
magenta: true,
9+
yellow: true,
10+
custom: false
11+
};
12+
13+
tracker.customColor = '#000000';
14+
15+
function createCustomColor(value) {
16+
var components = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
17+
var customColorR = parseInt(components[1], 16);
18+
var customColorG = parseInt(components[2], 16);
19+
var customColorB = parseInt(components[3], 16);
20+
21+
var colorTotal = customColorR + customColorG + customColorB;
22+
23+
if (colorTotal === 0) {
24+
tracking.ColorTracker.registerColor('custom', function(r, g, b) {
25+
return r + g + b < 10;
26+
});
27+
} else {
28+
var rRatio = customColorR / colorTotal;
29+
var gRatio = customColorG / colorTotal;
30+
31+
tracking.ColorTracker.registerColor('custom', function(r, g, b) {
32+
var colorTotal2 = r + g + b;
33+
34+
if (colorTotal2 === 0) {
35+
if (colorTotal < 10) {
36+
return true;
37+
}
38+
return false;
39+
}
40+
41+
var rRatio2 = r / colorTotal2,
42+
gRatio2 = g / colorTotal2,
43+
deltaColorTotal = colorTotal / colorTotal2,
44+
deltaR = rRatio / rRatio2,
45+
deltaG = gRatio / gRatio2;
46+
47+
return deltaColorTotal > 0.9 && deltaColorTotal < 1.1 &&
48+
deltaR > 0.9 && deltaR < 1.1 &&
49+
deltaG > 0.9 && deltaG < 1.1;
50+
});
51+
}
52+
53+
updateColors();
54+
}
55+
56+
function updateColors() {
57+
var colors = [];
58+
59+
for (var color in trackedColors) {
60+
if (trackedColors[color]) {
61+
colors.push(color);
62+
}
63+
}
64+
65+
tracker.setColors(colors);
66+
}
67+
68+
var colorsFolder = gui.addFolder('Colors');
69+
70+
colorsFolder.add(trackedColors, 'cyan').onFinishChange(updateColors);
71+
colorsFolder.add(trackedColors, 'magenta').onFinishChange(updateColors);
72+
colorsFolder.add(trackedColors, 'yellow').onFinishChange(updateColors);
73+
colorsFolder.add(trackedColors, 'custom').onFinishChange(function(value) {
74+
if (value) {
75+
this.customColorElement = colorsFolder.addColor(tracker, 'customColor').onChange(createCustomColor);
76+
} else {
77+
colorsFolder.remove(this.customColorElement);
78+
}
79+
});
80+
81+
var parametersFolder = gui.addFolder('Parameters');
82+
83+
parametersFolder.add(tracker, 'minDimension', 1, 100);
84+
parametersFolder.add(tracker, 'minGroupSize', 1, 100);
85+
86+
colorsFolder.open();
87+
parametersFolder.open();
88+
89+
updateColors();
90+
}

‎examples/assets/demo.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,8 @@
5050
border-bottom-right-radius: 10px;
5151
border-bottom-left-radius: 10px;
5252
}
53+
54+
.dg.ac {
55+
z-index: 100 !important;
56+
top: 50px !important;
57+
}

‎examples/color_camera.html‎

Lines changed: 2 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<script src="../build/tracking-min.js"></script>
99
<script src="../../dat-gui/build/dat.gui.min.js"></script>
1010
<script src="assets/stats.min.js"></script>
11+
<script src="assets/color_camera_gui.js"></script>
1112

1213
<style>
1314
video, canvas {
@@ -52,95 +53,7 @@
5253
});
5354
});
5455

55-
// GUI Controllers
56-
57-
var gui = new dat.GUI();
58-
59-
var trackedColors = {
60-
cyan: true,
61-
magenta: true,
62-
yellow: true,
63-
custom: false
64-
};
65-
66-
tracker.customColor = '#000000';
67-
68-
function createCustomColor(value) {
69-
var components = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
70-
var customColorR = parseInt(components[1], 16);
71-
var customColorG = parseInt(components[2], 16);
72-
var customColorB = parseInt(components[3], 16);
73-
74-
var colorTotal = customColorR + customColorG + customColorB;
75-
76-
if(colorTotal === 0) {
77-
tracking.ColorTracker.registerColor('custom', function(r, g, b) {
78-
return r + g + b < 10;
79-
});
80-
}
81-
else {
82-
var rRatio = customColorR/colorTotal;
83-
var gRatio = customColorG/colorTotal;
84-
85-
tracking.ColorTracker.registerColor('custom', function(r, g, b) {
86-
var colorTotal2 = r + g + b;
87-
88-
if (colorTotal2 === 0) {
89-
if (colorTotal < 10) {
90-
return true;
91-
}
92-
return false;
93-
}
94-
95-
var rRatio2 = r/colorTotal2,
96-
gRatio2 = g/colorTotal2,
97-
deltaColorTotal = colorTotal/colorTotal2,
98-
deltaR = rRatio/rRatio2,
99-
deltaG = gRatio/gRatio2;
100-
101-
return deltaColorTotal > 0.9 && deltaColorTotal < 1.1 &&
102-
deltaR > 0.9 && deltaR < 1.1 &&
103-
deltaG > 0.9 && deltaG < 1.1;
104-
});
105-
}
106-
107-
updateColors();
108-
}
109-
110-
function updateColors() {
111-
var colors = [];
112-
113-
for (color in trackedColors) {
114-
if (trackedColors[color]) {
115-
colors.push(color);
116-
}
117-
}
118-
119-
tracker.setColors(colors);
120-
};
121-
122-
var colorsFolder = gui.addFolder('Colors');
123-
124-
colorsFolder.add(trackedColors, 'cyan').onFinishChange(updateColors);
125-
colorsFolder.add(trackedColors, 'magenta').onFinishChange(updateColors);
126-
colorsFolder.add(trackedColors, 'yellow').onFinishChange(updateColors);
127-
colorsFolder.add(trackedColors, 'custom').onFinishChange(function(value) {
128-
if (value) {
129-
this.customColorElement = colorsFolder.addColor(tracker, 'customColor').onChange(createCustomColor);
130-
} else {
131-
colorsFolder.remove(this.customColorElement);
132-
}
133-
});
134-
135-
var parametersFolder = gui.addFolder('Parameters');
136-
137-
parametersFolder.add(tracker, 'minDimension', 1, 100);
138-
parametersFolder.add(tracker, 'minGroupSize', 1, 100);
139-
140-
colorsFolder.open();
141-
parametersFolder.open();
142-
143-
updateColors();
56+
initGUIControllers(tracker);
14457
};
14558
</script>
14659

‎examples/face_camera.html‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,10 @@
1212

1313
<style>
1414
video, canvas {
15-
padding-left: 100px;
16-
padding-top: 35px;
15+
margin-left: 230px;
16+
margin-top: 120px;
1717
position: absolute;
1818
}
19-
#rect {
20-
border: 2px solid green;
21-
left: -1000px;
22-
position: absolute;
23-
top: -1000px;
24-
}
2519
</style>
2620
</head>
2721
<body>
@@ -31,8 +25,8 @@
3125

3226
<div class="demo-frame">
3327
<div class="demo-container">
34-
<video id="video" width="600" height="450" preload autoplay loop muted controls></video>
35-
<canvas id="canvas" width="600" height="450"></canvas>
28+
<video id="video" width="320" height="240" preload autoplay loop muted></video>
29+
<canvas id="canvas" width="320" height="240"></canvas>
3630
</div>
3731
</div>
3832

@@ -43,6 +37,8 @@
4337
var context = canvas.getContext('2d');
4438

4539
var tracker = new tracking.ObjectTracker('face');
40+
tracker.setInitialScale(4);
41+
tracker.setStepSize(2);
4642

4743
tracking.track('#video', tracker, { camera: true });
4844

@@ -55,10 +51,10 @@
5551
});
5652
});
5753

54+
5855
var gui = new dat.GUI();
59-
gui.add(tracker, 'edgesDensity', 0, 1).step(0.1);
60-
gui.add(tracker, 'initialScale', 1, 5);
61-
gui.add(tracker, 'scaleFactor', 1.1, 3).step(0.1);
56+
gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
57+
gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
6258
gui.add(tracker, 'stepSize', 1, 5).step(0.1);
6359
};
6460
</script>

0 commit comments

Comments
 (0)