Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save sidorares/28ef793fe258e71c32358443cee5ff23 to your computer and use it in GitHub Desktop.
Save sidorares/28ef793fe258e71c32358443cee5ff23 to your computer and use it in GitHub Desktop.
import React, {Component} from 'react';
import ReactHardware from 'react-hardware';
import {createStore} from 'redux';
import Leap from 'leapjs';
import {Provider, connect} from 'react-redux';
class LeapServo extends Component {
componentDidMount() {
const controller = new Leap.Controller();
controller.on('frame', frame => {
if (frame.hands && frame.hands[0]) {
const n = frame.hands[0].palmNormal;
const angle = n[0]*50 + 80;
this.props.setAngle(angle);
}
});
controller.connect();
}
render() {
return (
<pin
pin={this.props.pin}
value={this.props.value}
mode={'PWM'}
/>
);
}
}
const hand = (state, action) => {
if (typeof state === 'undefined') {
return 0;
}
switch (action.type) {
case 'SET_ANGLE':
return action.payload;
default:
return state;
}
};
const mapStateToProps = state => {
return {angle: state, pin: 10};
};
const mapDispatchToProps = (dispatch) => {
return ({
setAngle: angle => dispatch({
type: 'SET_ANGLE',
payload: angle
})
});
};
const Application = connect(mapStateToProps, mapDispatchToProps)(
({angle, pin, setAngle}) => (<LeapServo value={angle} pin={pin} setAngle={setAngle}/>)
);
const store = createStore(hand);
ReactHardware.render(
<Provider store={store}>
<Application />
</Provider>,
process.env.PORT,
(inst) => {
console.log('Rendered <%s />', 'leap motion + react + react-redux + react-devtools demonstration');
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment