Skip to content

N
node-drone
Commit 655e8293 authored by catdog's avatar catdog
Browse files
Options

레 거 시

parent 2f4fcb5c
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 85 deletions
public/client.bak.js 0 → 100644
View file @ 655e8293
const faye = new Faye.Client('/faye', { timeout: 120 });
// get data from socket end set UI text
faye.subscribe('/drone/navdata', data => {
[
'batteryPercentage',
'clockwiseDegrees',
'altitudeMeters',
'frontBackDegrees',
'leftRightDegrees',
'xVelocity',
'yVelocity',
'zVelocity'
].forEach(type => $('#' + type).html(Math.round(data.demo[type], 4)));
return showBatteryStatus(data.demo.batteryPercentage);
});
window.showBatteryStatus = batteryPercentage => {
$('#batterybar').width(`${batteryPercentage}%`);
if (batteryPercentage < 30)
$('#batteryProgress')
.removeClass('progress-success')
.addClass('progress-warning');
if (batteryPercentage < 15)
$('#batteryProgress')
.removeClass('progress-warning')
.addClass('progress-danger');
return $('#batteryProgress').attr({
'data-original-title': `Battery status: ${batteryPercentage}%`
});
};
// get image stream from server and set UI
faye.subscribe('/drone/image', src => $('#cam').attr({ src: src }));
// get keyinput
const keymap = {
87: { ev: 'move', action: 'front' }, // W
83: { ev: 'move', action: 'back' }, // S
65: { ev: 'move', action: 'left' }, // A
68: { ev: 'move', action: 'right' }, // D
38: { ev: 'move', action: 'up' }, // up
40: { ev: 'move', action: 'down' }, // down
37: { ev: 'move', action: 'counterClockwise' }, // left
39: { ev: 'move', action: 'clockwise' }, // right
32: { ev: 'drone', action: 'takeoff' }, // space
27: { ev: 'drone', action: 'land' }, // esc
49: { ev: 'animate', action: 'flipAhead', duration: 15 }, // 1
50: { ev: 'animate', action: 'flipLeft', duration: 15 }, // 2
51: { ev: 'animate', action: 'yawShake', duration: 15 }, // 3
52: { ev: 'animate', action: 'doublePhiThetaMixed', duration: 15 }, // 4
53: { ev: 'animate', action: 'wave', duration: 15 }, // 5
69: { ev: 'drone', action: 'disableEmergency' } // E
};
let speed = 0;
$(document).keydown(ev => {
if (keymap[ev.keyCode] == null) return;
ev.preventDefault();
speed = speed >= 1 ? 1 : speed + 0.08 / (1 - speed);
const evData = keymap[ev.keyCode];
return faye.publish('/drone/' + evData.ev, {
action: evData.action,
speed: speed,
duration: evData.duration
});
});
$(document).keyup(ev => {
speed = 0;
return faye.publish('/drone/drone', { action: 'stop' });
});
// get mouse event
$('*[data-action]').on('mousedown', ev =>
faye.publish('/drone/' + $(this).attr('data-action'), {
action: $(this).attr('data-param'),
speed: 0.3,
duration: 1000 * parseInt($('#duration').val())
})
);
$('*[data-action]').on('mouseup', ev =>
faye.publish('/drone/move', {
action: $(this).attr('data-param'),
speed: $(this).attr('data-action') === 'move' ? 0 : undefined
})
);
$('*[rel=tooltip]').tooltip();
public/client.js
View file @ 655e8293
const faye = new Faye.Client('/faye', { timeout: 120 }); (function () {
var faye, keymap, speed;
// get data from socket end set UI text faye = new Faye.Client("/faye", {
faye.subscribe('/drone/navdata', data => { timeout: 120
[
'batteryPercentage',
'clockwiseDegrees',
'altitudeMeters',
'frontBackDegrees',
'leftRightDegrees',
'xVelocity',
'yVelocity',
'zVelocity'
].forEach(type => $('#' + type).html(Math.round(data.demo[type], 4)));
return showBatteryStatus(data.demo.batteryPercentage);
});
window.showBatteryStatus = batteryPercentage => {
$('#batterybar').width(`${batteryPercentage}%`);
if (batteryPercentage < 30)
$('#batteryProgress')
.removeClass('progress-success')
.addClass('progress-warning');
if (batteryPercentage < 15)
$('#batteryProgress')
.removeClass('progress-warning')
.addClass('progress-danger');
return $('#batteryProgress').attr({
'data-original-title': `Battery status: ${batteryPercentage}%`
}); });
}; faye.subscribe("/drone/navdata", function (data) {
["batteryPercentage", "clockwiseDegrees", "altitudeMeters", "frontBackDegrees", "leftRightDegrees", "xVelocity", "yVelocity", "zVelocity"].forEach(function (type) {
// get image stream from server and set UI return $("#" + type).html(Math.round(data.demo[type], 4));
faye.subscribe('/drone/image', src => $('#cam').attr({ src: src })); });
return showBatteryStatus(data.demo.batteryPercentage);
// get keyinput
const keymap = {
87: { ev: 'move', action: 'front' }, // W
83: { ev: 'move', action: 'back' }, // S
65: { ev: 'move', action: 'left' }, // A
68: { ev: 'move', action: 'right' }, // D
38: { ev: 'move', action: 'up' }, // up
40: { ev: 'move', action: 'down' }, // down
37: { ev: 'move', action: 'counterClockwise' }, // left
39: { ev: 'move', action: 'clockwise' }, // right
32: { ev: 'drone', action: 'takeoff' }, // space
27: { ev: 'drone', action: 'land' }, // esc
49: { ev: 'animate', action: 'flipAhead', duration: 15 }, // 1
50: { ev: 'animate', action: 'flipLeft', duration: 15 }, // 2
51: { ev: 'animate', action: 'yawShake', duration: 15 }, // 3
52: { ev: 'animate', action: 'doublePhiThetaMixed', duration: 15 }, // 4
53: { ev: 'animate', action: 'wave', duration: 15 }, // 5
69: { ev: 'drone', action: 'disableEmergency' } // E
};
let speed = 0;
$(document).keydown(ev => {
if (keymap[ev.keyCode] == null) return;
ev.preventDefault();
speed = speed >= 1 ? 1 : speed + 0.08 / (1 - speed);
const evData = keymap[ev.keyCode];
faye.publish('/drone/' + evData.ev, {
action: evData.action,
speed: speed,
duration: evData.duration
}); });
}); window.showBatteryStatus = function (batteryPercentage) {
$(document).keyup(ev => { $("#batterybar").width("" + batteryPercentage + "%");
if (batteryPercentage < 30) {
$("#batteryProgress").removeClass("progress-success").addClass("progress-warning");
}
if (batteryPercentage < 15) {
$("#batteryProgress").removeClass("progress-warning").addClass("progress-danger");
}
return $("#batteryProgress").attr({
"data-original-title": "Battery status: " + batteryPercentage + "%"
});
};
faye.subscribe("/drone/image", function (src) {
return $("#cam").attr({
src: src
});
});
keymap = {
87: {
ev: 'move',
action: 'front'
},
83: {
ev: 'move',
action: 'back'
},
65: {
ev: 'move',
action: 'left'
},
68: {
ev: 'move',
action: 'right'
},
38: {
ev: 'move',
action: 'up'
},
40: {
ev: 'move',
action: 'down'
},
37: {
ev: 'move',
action: 'counterClockwise'
},
39: {
ev: 'move',
action: 'clockwise'
},
32: {
ev: 'drone',
action: 'takeoff'
},
27: {
ev: 'drone',
action: 'land'
},
49: {
ev: 'animate',
action: 'flipAhead',
duration: 15
},
50: {
ev: 'animate',
action: 'flipLeft',
duration: 15
},
51: {
ev: 'animate',
action: 'yawShake',
duration: 15
},
52: {
ev: 'animate',
action: 'doublePhiThetaMixed',
duration: 15
},
53: {
ev: 'animate',
action: 'wave',
duration: 15
},
69: {
ev: 'drone',
action: 'disableEmergency'
}
};
speed = 0; speed = 0;
faye.publish('/drone/drone', { action: 'stop' }); $(document).keydown(function (ev) {
}); var evData;
if (keymap[ev.keyCode] == null) {
// get mouse event return;
$('*[data-action]').on('mousedown', ev => { }
faye.publish('/drone/' + $(this).attr('data-action'), { ev.preventDefault();
action: $(this).attr('data-param'), speed = speed >= 1 ? 1 : speed + 0.08 / (1 - speed);
speed: 0.3, evData = keymap[ev.keyCode];
duration: 1000 * parseInt($('#duration').val()) return faye.publish("/drone/" + evData.ev, {
action: evData.action,
speed: speed,
duration: evData.duration
});
});
$(document).keyup(function (ev) {
speed = 0;
return faye.publish("/drone/drone", {
action: 'stop'
});
});
$("*[data-action]").on("mousedown", function (ev) {
return faye.publish("/drone/" + $(this).attr("data-action"), {
action: $(this).attr("data-param"),
speed: 0.3,
duration: 1000 * parseInt($("#duration").val())
});
}); });
}); $("*[data-action]").on("mouseup", function (ev) {
$('*[data-action]').on('mouseup', ev => { return faye.publish("/drone/move", {
faye.publish('/drone/move', { action: $(this).attr("data-param"),
action: $(this).attr('data-param'), speed: $(this).attr("data-action") === "move" ? 0 : void 0
speed: $(this).attr('data-action') === 'move' ? 0 : undefined });
}); });
}); $("*[rel=tooltip]").tooltip();
$('*[rel=tooltip]').tooltip(); }).call(this);
\ No newline at end of file
server.js
View file @ 655e8293
...@@ -23,15 +23,17 @@ const socket = new faye.Client(`http://localhost:${app.get('port')}/faye`); ...@@ -23,15 +23,17 @@ const socket = new faye.Client(`http://localhost:${app.get('port')}/faye`);
// get request from socket -> set command to drone // get request from socket -> set command to drone
socket.subscribe('/drone/move', cmd => { socket.subscribe('/drone/move', cmd => {
console.log('move', cmd); console.log('move', cmd);
if (drone[cmd.action]) drone[cmd.action](cmd.speed); if (typeof drone[cmd.action] === "function")
return drone[cmd.action](cmd.speed);
}); });
socket.subscribe('/drone/animate', cmd => { socket.subscribe('/drone/animate', cmd => {
console.log('animate', cmd); console.log('animate', cmd);
drone.animate(cmd.action, cmd.duration); return drone.animate(cmd.action, cmd.duration);
}); });
socket.subscribe('/drone/drone', cmd => { socket.subscribe('/drone/drone', cmd => {
console.log('drone command: ', cmd); console.log('drone command: ', cmd);
if (drone[cmd.action]) drone[cmd.action](); if (typeof drone[cmd.action] === "function")
return drone[cmd.action]();
}); });
// start server // start server
...@@ -58,5 +60,5 @@ drone.createPngStream().on('data', frame => { ...@@ -58,5 +60,5 @@ drone.createPngStream().on('data', frame => {
// send latest img to server // send latest img to server
app.get('/image/:id', (req, res) => { app.get('/image/:id', (req, res) => {
res.writeHead(200, { 'Content-Type': 'image/png' }); res.writeHead(200, { 'Content-Type': 'image/png' });
res.end(currentImg, 'binary'); return res.end(currentImg, 'binary');
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment