MovementBasedSegmenter

MovementBasedSegmenter's turn to locate and classify fruits.
Let's create an initialization function for the MBS watcher.
1
const initializeMBS = () => {};
Copied!
Once again, retrieve the elements we'll be working with, along with the bounding rect of the element defining the watcher's contour.
1
const initializeMBS = () => {
2
  const mbsElement = document.getElementsByClassName('mbs')[0];
3
  const mbsBounds = mbsElement.getBoundingClientRect();
4
};
Copied!
Just like NeuralNetworkClassifier (and all watchers, for that matter), MBS also has its classification trigger on the onClassification callback.
However, MovementBasedSegmenter has a secondary callback, triggered prior to onClassification, named onLocation. This is because MBS first determines the location of an object and then it classifies it. onLocation is generally used to create a loading animation for a located, not yet classified object.
For the sake of simplicity, we will focus on onClassification in this guide.
1
const initializeMBS = () => {
2
  const mbsElement = document.getElementsByClassName('mbs')[0];
3
  const mbsBounds = mbsElement.getBoundingClientRect();
4
​
5
  const onClassification = (classifiedObjects) => classifiedObjects.forEach((classifiedObject) => {
6
    handleObjectClassified(classifiedObject, '#FFFFFF');
7
  });
8
​
9
  const onLocation = (locatedObjects) => {
10
    // This step fires before onClassification!
11
    console.log(locatedObjects);
12
  };
13
​
14
  const mbsFruitsWatcher = {
15
    name: 'MovementBasedSegmenter',
16
    shape: lampix.helpers.rectangle(
17
      mbsBounds.left,
18
      mbsBounds.top,
19
      mbsBounds.width,
20
      mbsBounds.height
21
    ),
22
    params: {
23
      neural_network_name: 'fruits'
24
    },
25
    onLocation,
26
    onClassification
27
  };
28
};
Copied!
Let's also add the utility mentioned above to add DOM elements for each classified object (remember to import it):
1
// handleObjectClassified.js
2
const handleObjectClassified = (obj, color) => {
3
  const el = document.createElement('div');
4
  el.classList.add('mbs-object');
5
  el.style.borderColor = color;
6
  el.style.left = `${obj.centerPoint.posX - 25}px`;
7
  el.style.top = `${obj.centerPoint.posY - 25}px`;
8
  el.textContent = obj.classTag;
9
​
10
  document.body.appendChild(el);
11
};
12
​
13
export default handleObjectClassified;
Copied!
All that's left is telling Lampix about this watcher too, by adding the following to the end of the initializeMBS function.
1
  // ...
2
  lampix.watchers.add(mbsFruitsWatcher);
Copied!
Now, initializeMBS should look like this:
1
const initializeMBS = () => {
2
  const mbsElement = document.getElementsByClassName('mbs')[0];
3
  const mbsBounds = mbsElement.getBoundingClientRect();
4
​
5
  const onClassification = (classifiedObjects) => classifiedObjects.forEach((classifiedObject) => {
6
    handleObjectClassified(classifiedObject, '#FFFFFF');
7
  });
8
​
9
  const onLocation = (locatedObjects) => {
10
    // This step fires before onClassification!
11
    console.log(locatedObjects);
12
  };
13
​
14
  const mbsFruitsWatcher = {
15
    name: 'MovementBasedSegmenter',
16
    shape: lampix.helpers.rectangle(
17
      mbsBounds.left,
18
      mbsBounds.top,
19
      mbsBounds.width,
20
      mbsBounds.height
21
    ),
22
    params: {
23
      neural_network_name: 'fruits'
24
    },
25
    onLocation,
26
    onClassification
27
  };
28
​
29
  lampix.watchers.add(mbsFruitsWatcher);
30
};
Copied!

NeuralNetworkClassifier

Final Step

Last modified 3yr ago

Copy link