npm install @lampix/core @lampix/dom
import lampixDOM from '@lampix/dom';​// Behind the scenes, this will draw a button with a scaling animationconst x = window.innerWidth / 2;const y = window.innerHeight / 2;const callback = () => {console.log('Button activated!');};​// Minimum necessarylampixDOM.buttons.generate(x - 100, y, callback).then((firstButton) => console.log('Button ready to be used'));​// A little configuration goes a long wayconst options = {label: 'Generic button',labelPosition: 'top',scaleFactor: 1.2, // base animation is a simple scale animation to provide action feedbackanimationDuration: 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'));
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 itconst 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 itlampix.watchers.add(buttonWatcher).then((listOfButtons) => {console.log('Button ready to be used');console.log(listOfButtons[0]);});
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 itlampix.watchers.add(buttonWatcher).then((listOfButtons) => {console.log('Button ready to be used');console.log(listOfButtons[0]);});