javascript - onKeyDown and on onKeyUp -
i'm working on app fly drone, having issues key bindings. we're using react , nodejs. onkeypress used connect, takeoff, , land drone (these work). however, onkeydown , onkeyup not working. i've thrown in few console.log , can see function running when keys pressed, seems backend recognizing when hold key down continue run function, front end switches onkeydown onkeypress onkeyup (thus canceling out initial function attached onkeydown event).
hopefully makes sense, can attach code needed or link github. i'm relatively new coding, not sure if i'm trying possible or if needs else (socket.io i've been seeing).
this our front end react code.
import react, { component } 'react'; import './drone.css' import axios 'axios' import request 'react-http-request' export default class drone extends component { constructor(props){ super(props) this.state = { droneaction: '' }, this.handlekeydown = this.handlekeydown.bind(this); this.handlekeyup = this.handlekeyup.bind(this); this.handlekeypress = this.handlekeypress.bind(this); // binding keyclick functions this.panleft = this.panleft.bind(this) this.panback = this.panback.bind(this) this.panright = this.panright.bind(this) this.panforward = this.panforward.bind(this) this.up = this.up.bind(this) this.down = this.down.bind(this) this.rotateleft = this.rotateleft.bind(this) this.rotateright = this.rotateright.bind(this) this.stop = this.stop.bind(this) // end of constructor } componentdidmount() { document.addeventlistener('keydown', this.handlekeydown); document.addeventlistener('keyup', this.handlekeyup); document.addeventlistener('keypress', this.handlekeypress); } componentwillunmount() { document.removeeventlistener('keydown', this.handlekeydown); document.removeeventlistener('keyup', this.handlekeyup); document.removeeventlistener('keypress', this.handlekeypress); } // click function groundwork connect(){ console.log('video stream') return axios.post('http://localhost:3000/connect').then(resp => { console.log(resp) }) } launch(){ console.log('launching') return axios.post('http://localhost:3000/launch').then(resp => { console.log(resp) }) } panleft(){ console.log('pan left') return axios.post('http://localhost:3000/pan-left').then(resp => { console.log(resp) }) } panback(){ console.log('pan back') return axios.post('http://localhost:3000/pan-back').then(resp => { console.log(resp) }) } panright(){ console.log('pan right') return axios.post('http://localhost:3000/pan-right').then(resp => { console.log(resp) }) } panforward(){ console.log('pan forward') return axios.post('http://localhost:3000/pan-forward').then(resp => { console.log(resp) }) } stop(){ console.log('hovering') return axios.post('http://localhost:3000/stop').then(resp => { console.log(resp) }) } land(){ console.log('landing') return axios.post('http://localhost:3000/land').then(resp => { console.log(resp) }) } // more movements rotateright(){ console.log('rotate right') return axios.post('http://localhost:3000/rotate-right').then(resp => { console.log(resp) }) } rotateleft(){ console.log('rotate left') return axios.post('http://localhost:3000/rotate-left').then(resp => { console.log(resp) }) } up(){ console.log('going up') return axios.post('http://localhost:3000/up').then(resp => { console.log(resp) }) } down(){ console.log('going down') return axios.post('http://localhost:3000/down').then(resp => { console.log(resp) }) } // keyboard function groundwork handlekeypress(e){ // console.log('keypress', e.key) switch(e.key) { case 'enter': return axios.post('http://localhost:3000/connect').then(resp => { console.log('connect: ', resp) }) break; case ' ': return axios.post('http://localhost:3000/land').then(resp => { console.log('land: ', resp) }) break; case '/': console.log('work please') return axios.post('http://localhost:3000/launch').then(resp => { console.log('take-off: ', resp) }) break; } } handlekeydown(e){ // console.log('keydown', e.key) switch(e.key) { case 'a': return axios.post('http://localhost:3000/key-pan-left').then(resp => { console.log('x-move: ', resp) }) break; case 's': return axios.post('http://localhost:3000/key-pan-back').then(resp => { console.log('x-move: ', resp) }) break; case 'd': return axios.post('http://localhost:3000/key-pan-right').then(resp => { console.log('x-move: ', resp) }) break; case 'w': return axios.post('http://localhost:3000/key-pan-forward').then(resp => { console.log('x-move: ', resp) }) break; case 'i': return axios.post('http://localhost:3000/key-up').then(resp => { console.log('y-move: ', resp) }) break; case 'k': return axios.post('http://localhost:3000/key-down').then(resp => { console.log('y-move: ', resp) }) break; case 'l': return axios.post('http://localhost:3000/key-rotate-right').then(resp => { console.log('y-move: ', resp) }) break; case 'j': return axios.post('http://localhost:3000/key-rotate-left').then(resp => { console.log('y-move: ', resp) }) break; } } handlekeyup(e){ // console.log('keyup', e.key) switch(e.key) { case 'a': return axios.post('http://localhost:3000/stop').then(resp => { console.log('x-move: ', resp) }) break; case 's': return axios.post('http://localhost:3000/stop').then(resp => { console.log('x-move: ', resp) }) break; case 'd': return axios.post('http://localhost:3000/stop').then(resp => { console.log('x-move: ', resp) }) break; case 'w': return axios.post('http://localhost:3000/stop').then(resp => { console.log('x-move: ', resp) }) break; case 'i': return axios.post('http://localhost:3000/stop').then(resp => { console.log('y-move: ', resp) }) break; case 'k': return axios.post('http://localhost:3000/stop').then(resp => { console.log('y-move: ', resp) }) break; case 'l': return axios.post('http://localhost:3000/stop').then(resp => { console.log('y-move: ', resp) }) break; case 'j': return axios.post('http://localhost:3000/stop').then(resp => { console.log('y-move: ', resp) }) break; } } render(){ return( <div classname="manualcontroller"> <div classname="pads"> <div classname="pad1"> <div onkeydown={event => this.handlekeydown(event.target.id)} onkeyup={event => this.handlekeyup(event.target.id)} onclick={event => this.panleft(event.target.id)} id="leftpan" classname="manualbutton pad1left"><p classname="diamondtext">←</p></div> <div onkeydown={event => this.handlekeydown(event.target.id)} onkeyup={event => this.handlekeyup(event.target.id)} onclick={event => this.panback(event.target.id)} id="backpan" classname="manualbutton pad1down"><p classname="diamondtext">←</p></div> <div onkeydown={event => this.handlekeydown(event.target.id)} onkeyup={event => this.handlekeyup(event.target.id)} onclick={event => this.panright(event.target.id)} id="rightpan" classname="manualbutton pad1right"><p classname="diamondtext">←</p></div> <div onkeydown={event => this.handlekeydown(event.target.id)} onkeyup={event => this.handlekeyup(event.target.id)} onclick={event => this.panforward(event.target.id)} id="forwardpan" classname="manualbutton pad1up"><p classname="diamondtext">←</p></div> </div> <div classname="pad2"> <div onkeydown={event => this.handlekeydown(event.target.id)} onkeyup={event => this.handlekeyup(event.target.id)} onclick={event => this.rotateleft(event.target.id)} classname="manualbutton pad1left"><p classname="counterclock">↺</p></div> <div onkeydown={event => this.handlekeydown(event.target.id)} onkeyup={event => this.handlekeyup(event.target.id)} onclick={event => this.down(event.target.id)} classname="manualbutton pad1down"><p classname="down">down</p><p classname="downarrow">⋁</p></div> <div onkeydown={event => this.handlekeydown(event.target.id)} onkeyup={event => this.handlekeyup(event.target.id)} onclick={event => this.rotateright(event.target.id)} classname="manualbutton pad1right"><p classname="clockwise">↻</p></div> <div onkeydown={event => this.handlekeydown(event.target.id)} onkeyup={event => this.handlekeyup(event.target.id)} onclick={event => this.up(event.target.id)} classname="manualbutton pad1up"><p classname="uparrow">⋀</p><p classname="up">up</p></div> </div> </div> <div onkeypress={event => this.handlekeypress(event.target.id)} onclick={event => this.launch(event.target.id)} classname="manualbutton take-off">take-off</div> <div onkeypress={event => this.handlekeypress(event.target.id)} onclick={event => this.land(event.target.id)} classname="manualbutton land">land</div> <div onkeypress={event => this.handlekeypress(event.target.id)} onclick={event => this.connect(event.target.id)}classname="manualbutton videofeed">connect</div> <div onclick={event => this.stop(event.target.id)} classname="manualbutton createdest">create destination</div> <div onclick={event => this.launch(event.target.id)} classname="manualbutton autopilot">auto-pilot destination</div> {/* <div classname="manualbutton scopein">+</div> <div classname="manualbutton scopeout">-</div> <div classname="manualbutton photo"><img src={require('./assets/camera.png')} alt="take photo" /></div> */} <div classname="ctrlparent"> <div classname="controls"> <div classname="ctrlheader">keyboard controls</div> <div>wasd = left pad</div> <div>arrow = right pad</div> <div>space bar = takeoff/land</div> <div>q = scope out</div> <div>w = scope in</div> <div>enter = take photo</div> </div> </div> </div> ) } } this backend node.
const bebop = require('node-bebop') var app = require('../../../server.js') const drone = bebop.createclient() module.exports = { connect: function (req, res){ // create client console.log('connected video') const drone = bebop.createclient() drone.connect(function() { // var output; // var stream = drone.getvideostream(); // stream.on('data', function(buf){ // output = buf; // }); // drone.emit('video', new buffer([0xff])); // // expect(output[0]).to.equal(0xff); }) res.status(200).send("i can fly!") }, launch: function(req, res){ console.log('tookoff') drone.takeoff(function(){ drone.stop() }) res.status(200).send("launching bebopboolopadoop.") }, pan_left: function(req, res){ console.log('panned left') drone.left(50) settimeout(function() { drone.stop(); console.log('stopped') }, 500); res.status(200).send("i can fly!") }, pan_back: function(req, res){ console.log('panned back') drone.back(50) settimeout(function() { drone.stop(); console.log('stopped') }, 500); res.status(200).send("i can fly!") }, pan_right: function(req, res){ console.log('panned right') drone.right(50) settimeout(function() { drone.stop(); console.log('stopped') }, 500); res.status(200).send("i can fly!") }, pan_forward: function(req, res){ console.log('panned forward') drone.forward(50) settimeout(function() { drone.stop(); console.log('stopped') }, 500); res.status(200).send("i can fly!") }, up: function(req, res){ console.log('going up') drone.up(50) settimeout(function() { drone.stop(); console.log('stopped') }, 500); res.status(200).send("i can fly!") }, down: function(req, res){ console.log('going down') drone.down(50) settimeout(function() { drone.stop(); console.log('stopped') }, 500); res.status(200).send("i can fly!") }, rotate_right: function(req, res){ console.log('rotate right') drone.clockwise(50) settimeout(function() { drone.stop(); console.log('stopped') }, 500); res.status(200).send("i can fly!") }, rotate_left: function(req, res){ console.log('rotate left') drone.counterclockwise(50) settimeout(function() { drone.stop(); console.log('stopped') }, 500); res.status(200).send("i can fly!") }, stop: function(req, res){ console.log('stopped') drone.stop() res.status(200).send("i can fly!") }, land: function(req, res){ console.log('landed') settimeout(function() { drone.land(); }, 100); settimeout(function() { drone.emergency(); }, 1300); res.status(200).send("i can fly!") }, ///////////////keyboard specific functions///////////////// ///pad 1/// a_pan_left: function(req, res){ console.log('key pan left') drone.left(50) res.status(200).send("i'm flying.") }, s_pan_back: function(req, res){ console.log('key pan back') drone.back(50) res.status(200).send("i'm flying.") }, d_pan_right: function(req, res){ console.log('key pan right') drone.right(50) res.status(200).send("i'm flying.") }, w_pan_forward: function(req, res){ console.log('key pan forward') drone.forward(50) res.status(200).send("i'm flying.") }, ///pad 2/// up_arrow: function(req, res){ console.log('key going up') drone.up(50) res.status(200).send("i'm flying.") }, down_arrow: function(req, res){ console.log('key going down') drone.down(50) res.status(200).send("i'm flying.") }, rotate_right_arrow: function(req, res){ console.log('key rotate right') drone.clockwise(50) res.status(200).send("i'm flying.") }, rotate_left_arrow: function(req, res){ console.log('key rotate left') drone.counterclockwise(50) res.status(200).send("i'm flying.") } // end of exports }
Comments
Post a Comment