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
  • The easiest way
  • Hooking up your own button using the button preset
  • Hooking up your own button creating the watcher data structure yourself

Was this helpful?

  1. Application Development
  2. LampixJS
  3. Examples

NeuralNetworkClassifier: Buttons

The easiest way

npm install @lampix/core @lampix/dom

import lampixDOM from '@lampix/dom';

// Behind the scenes, this will draw a button with a scaling animation
const x = window.innerWidth / 2;
const y = window.innerHeight / 2;
const callback = () => {
  console.log('Button activated!');
};

// Minimum necessary
lampixDOM.buttons.generate(x - 100, y, callback)
  .then((firstButton) => console.log('Button ready to be used'));

// A little configuration goes a long way
const options = {
  label: 'Generic button',
  labelPosition: 'top',
  scaleFactor: 1.2, // base animation is a simple scale animation to provide action feedback
  animationDuration: 350 // enables a circle-filling style loader and syncs the scaling animation to this value as well
};

lampixDOM.buttons.generate(x + 100, y, callback, options)
  .then((secondButton) => console.log('Another button ready to be used'));

Hooking up your own button using the button preset

npm install @lampix/core

import lampix from '@lampix/core';

// Assuming there is an element with an ID of 'superb-btn`
const btn = document.getElementById('superb-btn');
const btnBounds = btn.getBoundingClientRect();
const x = btnBounds.left;
const y = btnBounds.top;
const callback = () => {
  console.log('Button activated!');
};

// Use the button preset  
// This automatically takes care of creating the proper watcher data structure for you  
// It also specifies the correct watcher to load and the correct neural network to use with it
const buttonWatcher = lampix.presets.button(x, y, callback);

// Remember: .watchers.add always returns an array of registered watchers
// of the same length as the number of arguments passed to it
lampix.watchers.add(buttonWatcher)
  .then((listOfButtons) => {
    console.log('Button ready to be used');
    console.log(listOfButtons[0]);
  });

Hooking up your own button creating the watcher data structure yourself

import lampix from '@lampix/core';

// Assuming there is an element with an ID of 'superb-btn`
const btn = document.getElementById('superb-btn');
const btnBounds = btn.getBoundingClientRect();
const x = btnBounds.left;
const y = btnBounds.top;
const callback = () => {
  console.log('Button activated!');
};

const buttonWatcher = {
  name: 'NeuralNetworkClassifier',
  shape: {
    type: 'rectangle',
    data: {
      posX: x,
      posY: y,
      width: 50,
      height: 50
    }
  },
  onClassification: callback,
  params: {
    neural_network_name: 'fingers'
  }
};

// Remember: .watchers.add always returns an array of registered watchers
// of the same length as the number of arguments passed to it
lampix.watchers.add(buttonWatcher)
  .then((listOfButtons) => {
    console.log('Button ready to be used');
    console.log(listOfButtons[0]);
  });
PreviousExamplesNextMovementBasedSegmenter

Last updated 6 years ago

Was this helpful?