Lampix Apps API
Search…
NeuralNetworkClassifier: Buttons
The easiest way
npm install @lampix/core @lampix/dom1
import lampixDOM from '@lampix/dom';
2
​
3
// Behind the scenes, this will draw a button with a scaling animation
4
const x = window.innerWidth / 2;
5
const y = window.innerHeight / 2;
6
const callback = () => {
7
console.log('Button activated!');
8
};
9
​
10
// Minimum necessary
11
lampixDOM.buttons.generate(x - 100, y, callback)
12
.then((firstButton) => console.log('Button ready to be used'));
13
​
14
// A little configuration goes a long way
15
const options = {
16
label: 'Generic button',
17
labelPosition: 'top',
18
scaleFactor: 1.2, // base animation is a simple scale animation to provide action feedback
19
animationDuration: 350 // enables a circle-filling style loader and syncs the scaling animation to this value as well
20
};
21
​
22
lampixDOM.buttons.generate(x + 100, y, callback, options)
23
.then((secondButton) => console.log('Another button ready to be used'));
Copied!
Hooking up your own button using the button preset
npm install @lampix/core1
import lampix from '@lampix/core';
2
​
3
// Assuming there is an element with an ID of 'superb-btn`
4
const btn = document.getElementById('superb-btn');
5
const btnBounds = btn.getBoundingClientRect();
6
const x = btnBounds.left;
7
const y = btnBounds.top;
8
const callback = () => {
9
console.log('Button activated!');
10
};
11
​
12
// Use the button preset
13
// This automatically takes care of creating the proper watcher data structure for you
14
// It also specifies the correct watcher to load and the correct neural network to use with it
15
const buttonWatcher = lampix.presets.button(x, y, callback);
16
​
17
// Remember: .watchers.add always returns an array of registered watchers
18
// of the same length as the number of arguments passed to it
19
lampix.watchers.add(buttonWatcher)
20
.then((listOfButtons) => {
21
console.log('Button ready to be used');
22
console.log(listOfButtons[0]);
23
});
Copied!
Hooking up your own button creating the watcher data structure yourself
1
import lampix from '@lampix/core';
2
​
3
// Assuming there is an element with an ID of 'superb-btn`
4
const btn = document.getElementById('superb-btn');
5
const btnBounds = btn.getBoundingClientRect();
6
const x = btnBounds.left;
7
const y = btnBounds.top;
8
const callback = () => {
9
console.log('Button activated!');
10
};
11
​
12
const buttonWatcher = {
13
name: 'NeuralNetworkClassifier',
14
shape: {
15
type: 'rectangle',
16
data: {
17
posX: x,
18
posY: y,
19
width: 50,
20
height: 50
21
}
22
},
23
onClassification: callback,
24
params: {
25
neural_network_name: 'fingers'
26
}
27
};
28
​
29
// Remember: .watchers.add always returns an array of registered watchers
30
// of the same length as the number of arguments passed to it
31
lampix.watchers.add(buttonWatcher)
32
.then((listOfButtons) => {
33
console.log('Button ready to be used');
34
console.log(listOfButtons[0]);
35
});
Copied!
Last modified 3yr ago