Extras

Random color

Use a utility function to generate a random color for the border of the NNC and the elements of the MBS.
1
// randomColor.js
2
export default () => `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`;
Copied!
Import it in index.js.
1
// ...
2
import randomColor from './randomColor';
Copied!
Use it for both NNC and MBS.
1
// ...
2
nncElement.style.borderColor = randomColor();
3
// ...
Copied!
1
// ...
2
// Associate one class to one color
3
const classColorMap = {};
4
5
const onClassification = (classifiedObjects) => classifiedObjects.forEach((classifiedObject) => {
6
let color = classColorMap[classifiedObject.classTag];
7
8
if (!color) {
9
color = randomColor();
10
classColorMap[classifiedObject.classTag] = color;
11
}
12
13
handleObjectClassified(classifiedObject, color);
14
});
15
// ...
Copied!
End result:
1
import lampix from '@lampix/core';
2
3
import './styles.css';
4
import randomColor from './randomColor';
5
import handleObjectClassified from './handleObjectClassified';
6
7
const initializeNNC = () => {
8
const nncElement = document.getElementsByClassName('nnc')[0];
9
const nncBounds = nncElement.getBoundingClientRect();
10
const nncRecognizedClassElement = document.getElementsByClassName('nnc-recognized-class')[0];
11
12
// All Lampix classifiers return a list of recognized objects
13
// NNClassifier only recognizes one at a time, hence expecting
14
// an array with one element and destructuring it
15
const nncCallback = ([recognizedObject]) => {
16
nncRecognizedClassElement.textContent = `Recognized: ${recognizedObject.classTag}`;
17
18
if (Number(recognizedObject.classTag) === 1) {
19
// Change border color on each new detection
20
nncElement.style.borderColor = randomColor();
21
} else {
22
// Go back to white if object no longer there
23
nncElement.style.borderColor = '#FFFFFF';
24
}
25
};
26
27
const nncFruitsWatcher = {
28
name: 'NeuralNetworkClassifier',
29
shape: lampix.helpers.rectangle(
30
nncBounds.left,
31
nncBounds.top,
32
nncBounds.width,
33
nncBounds.height
34
),
35
params: {
36
neural_network_name: 'fruits'
37
},
38
onClassification: nncCallback
39
};
40
41
lampix.watchers.add(nncFruitsWatcher);
42
};
43
44
const initializeMBS = () => {
45
const mbsElement = document.getElementsByClassName('mbs')[0];
46
const mbsBounds = mbsElement.getBoundingClientRect();
47
48
// Associate one class to one color
49
const classColorMap = {};
50
51
const onClassification = (classifiedObjects) => classifiedObjects.forEach((classifiedObject) => {
52
let color = classColorMap[classifiedObject.classTag];
53
54
if (!color) {
55
color = randomColor();
56
classColorMap[classifiedObject.classTag] = color;
57
}
58
59
handleObjectClassified(classifiedObject, color);
60
});
61
62
const onLocation = (locatedObjects) => {
63
// This step fires before onClassification!
64
console.log(locatedObjects);
65
};
66
67
const mbsFruitsWatcher = {
68
name: 'MovementBasedSegmenter',
69
shape: lampix.helpers.rectangle(
70
mbsBounds.left,
71
mbsBounds.top,
72
mbsBounds.width,
73
mbsBounds.height
74
),
75
params: {
76
neural_network_name: 'fruits'
77
},
78
onLocation,
79
onClassification
80
};
81
82
lampix.watchers.add(mbsFruitsWatcher);
83
};
84
85
initializeNNC();
86
initializeMBS();
Copied!
Last modified 3yr ago
Copy link