Lampix Apps API
  • Introduction
  • Application Development
    • Getting Started
      • Up and Running
      • Boilerplate
    • Step by step app
      • What We'll Build
      • Environment Setup
      • Styling
      • HTML Structure
      • NeuralNetworkClassifier
      • MovementBasedSegmenter
      • Final Step
      • Extras
    • LampixJS
      • API Reference
        • Watcher
        • RegisteredWatcher
        • .watchers.add
        • .watchers.remove
        • .watchers.pauseAll
        • .watchers.resumeAll
        • .presets.button
        • .helpers.rectangle
        • getLampixInfo
        • switchToApp
        • exit
        • getApps
        • getAppConfig
        • getAppMetadata
        • writeJsonToFile
        • readJsonFromFile
        • transformRectCoords
        • constants
      • Examples
        • NeuralNetworkClassifier: Buttons
        • MovementBasedSegmenter
        • Counter App
      • Migrating from v0.x.x to v1.0.0-beta.x
      • Ecosystem
    • Deploying
      • Application Structure (production)
      • Local Deploy
    • Standard Watchers
    • Custom Watchers
      • Description
      • Environment Setup
      • Directory Structure
      • End result
      • QRCodeDetector implementation
    • Community
  • Lampix Simulator
    • Installation
    • Usage
      • Basics
Powered by GitBook
On this page

Was this helpful?

  1. Application Development
  2. Step by step app

MovementBasedSegmenter

MovementBasedSegmenter's turn to locate and classify fruits.

Let's create an initialization function for the MBS watcher.

const initializeMBS = () => {};

Once again, retrieve the elements we'll be working with, along with the bounding rect of the element defining the watcher's contour.

const initializeMBS = () => {
  const mbsElement = document.getElementsByClassName('mbs')[0];
  const mbsBounds = mbsElement.getBoundingClientRect();
};

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.

const initializeMBS = () => {
  const mbsElement = document.getElementsByClassName('mbs')[0];
  const mbsBounds = mbsElement.getBoundingClientRect();

  const onClassification = (classifiedObjects) => classifiedObjects.forEach((classifiedObject) => {
    handleObjectClassified(classifiedObject, '#FFFFFF');
  });

  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
  };
};

Let's also add the utility mentioned above to add DOM elements for each classified object (remember to import it):

// handleObjectClassified.js
const handleObjectClassified = (obj, color) => {
  const el = document.createElement('div');
  el.classList.add('mbs-object');
  el.style.borderColor = color;
  el.style.left = `${obj.centerPoint.posX - 25}px`;
  el.style.top = `${obj.centerPoint.posY - 25}px`;
  el.textContent = obj.classTag;

  document.body.appendChild(el);
};

export default handleObjectClassified;

All that's left is telling Lampix about this watcher too, by adding the following to the end of the initializeMBS function.

  // ...
  lampix.watchers.add(mbsFruitsWatcher);

Now, initializeMBS should look like this:

const initializeMBS = () => {
  const mbsElement = document.getElementsByClassName('mbs')[0];
  const mbsBounds = mbsElement.getBoundingClientRect();

  const onClassification = (classifiedObjects) => classifiedObjects.forEach((classifiedObject) => {
    handleObjectClassified(classifiedObject, '#FFFFFF');
  });

  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);
};
PreviousNeuralNetworkClassifierNextFinal Step

Last updated 6 years ago

Was this helpful?