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

NeuralNetworkClassifier

Time to make NeuralNetworkClassifier watcher classify fruits.

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

const initializeNNC = () => {};

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

const initializeNNC = () => {
  // Get the elements we'll be working with...
  const nncElement = document.getElementsByClassName('nnc')[0];
  const nncRecognizedClassElement = document.getElementsByClassName('nnc-recognized-class')[0];

  // ...along with the bounding rect that defines the watcher size
  const nncBounds = nncElement.getBoundingClientRect();
};

Define the watcher data structure.

  // ...

  const nncFruitsWatcher = {
    name: 'NeuralNetworkClassifier',
    shape: lampix.helpers.rectangle(
      nncBounds.left,
      nncBounds.top,
      nncBounds.width,
      nncBounds.height
    ),
    params: {
      neural_network_name: 'fruits'
    }
  };

In case you're wondering, the above lampix.helpers.rectangle could be replaced with:

{
  type: 'rectangle',
  data: {
    posX: nncBounds.left,
    posY: nncBounds.top,
    width: nncBounds.width,
    height: nncBounds.height
  }
}

The watcher data structure above is almost complete, but it's missing one key component: what to actually do when classification is triggered.

  // ...

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

All that's left now is to inform Lampix of its existence, by adding the following to the end of the initializeNNC function.

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

Now, initializeNNC should look like this:

const initializeNNC = () => {
  // Get the elements we'll be working with...
  const nncElement = document.getElementsByClassName('nnc')[0];
  const nncRecognizedClassElement = document.getElementsByClassName('nnc-recognized-class')[0];

  // ...along with the bounding rect that defines the watcher size
  const nncBounds = nncElement.getBoundingClientRect();

  // 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) {
      nncElement.style.borderColor = '#FF0000';
    } 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);
};
PreviousHTML StructureNextMovementBasedSegmenter

Last updated 6 years ago

Was this helpful?