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

Final Step

All that's left to do is call the initializer functions at the bottom of index.js:

initializeNNC();
initializeMBS();

The end result should look like:

import lampix from '@lampix/core';

import './styles.css';
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) {
      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);
};

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

initializeNNC();
initializeMBS();
PreviousMovementBasedSegmenterNextExtras

Last updated 6 years ago

Was this helpful?

Minus the next, optional step, this is the exact application in . If you're having trouble with this guide, see if the source code can help you out.

the fruits example on our GitHub