Extras

Last updated 29 days ago

Random color

Use a utility function to generate a random color for the border of the NNC and the elements of the MBS.

// randomColor.js
export default () => `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`;

Import it in index.js.

// ...
import randomColor from './randomColor';

Use it for both NNC and MBS.

// ...
nncElement.style.borderColor = randomColor();
// ...
// ...
// Associate one class to one color
const classColorMap = {};
const onClassification = (classifiedObjects) => classifiedObjects.forEach((classifiedObject) => {
let color = classColorMap[classifiedObject.classTag];
if (!color) {
color = randomColor();
classColorMap[classifiedObject.classTag] = color;
}
handleObjectClassified(classifiedObject, color);
});
// ...

End result:

import lampix from '@lampix/core';
import './styles.css';
import randomColor from './randomColor';
import handleObjectClassified from './handleObjectClassified';
const initializeNNC = () => {
const nncElement = document.getElementsByClassName('nnc')[0];
const nncBounds = nncElement.getBoundingClientRect();
const nncRecognizedClassElement = document.getElementsByClassName('nnc-recognized-class')[0];
// All Lampix classifiers return a list of recognized objects
// NNClassifier only recognizes one at a time, hence expecting
// an array with one element and destructuring it
const nncCallback = ([recognizedObject]) => {
nncRecognizedClassElement.textContent = `Recognized: ${recognizedObject.classTag}`;
if (Number(recognizedObject.classTag) === 1) {
// Change border color on each new detection
nncElement.style.borderColor = randomColor();
} else {
// Go back to white if object no longer there
nncElement.style.borderColor = '#FFFFFF';
}
};
const nncFruitsWatcher = {
name: 'NeuralNetworkClassifier',
shape: lampix.helpers.rectangle(
nncBounds.left,
nncBounds.top,
nncBounds.width,
nncBounds.height
),
params: {
neural_network_name: 'fruits'
},
onClassification: nncCallback
};
lampix.watchers.add(nncFruitsWatcher);
};
const initializeMBS = () => {
const mbsElement = document.getElementsByClassName('mbs')[0];
const mbsBounds = mbsElement.getBoundingClientRect();
// Associate one class to one color
const classColorMap = {};
const onClassification = (classifiedObjects) => classifiedObjects.forEach((classifiedObject) => {
let color = classColorMap[classifiedObject.classTag];
if (!color) {
color = randomColor();
classColorMap[classifiedObject.classTag] = color;
}
handleObjectClassified(classifiedObject, color);
});
const onLocation = (locatedObjects) => {
// This step fires before onClassification!
console.log(locatedObjects);
};
const mbsFruitsWatcher = {
name: 'MovementBasedSegmenter',
shape: lampix.helpers.rectangle(
mbsBounds.left,
mbsBounds.top,
mbsBounds.width,
mbsBounds.height
),
params: {
neural_network_name: 'fruits'
},
onLocation,
onClassification
};
lampix.watchers.add(mbsFruitsWatcher);
};
initializeNNC();
initializeMBS();