Skip to content

N
node-drone
Commit d4f389ae authored by 15김건우's avatar 15김건우
Browse files
Options

Update resources

parent f660af37
Hide whitespace changes
Inline Side-by-side
Showing with 368 additions and 201 deletions
public.1/client.js 0 → 100644
View file @ d4f389ae
(function () {
var faye, keymap, speed;
faye = new Faye.Client("/faye", {
timeout: 120
});
faye.subscribe("/drone/navdata", function (data) {
$("#rawdata").text(JSON.stringify(data, null, 2));
["batteryPercentage", "clockwiseDegrees", "altitudeMeters", "frontBackDegrees", "leftRightDegrees", "xVelocity", "yVelocity", "zVelocity"].forEach(function (type) {
return $("#" + type).html(Math.round(data.demo[type], 4));
});
return showBatteryStatus(data.demo.batteryPercentage);
});
window.showBatteryStatus = function (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/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;
$(document).keydown(function (ev) {
var evData;
if (keymap[ev.keyCode] == null) {
return;
}
ev.preventDefault();
speed = speed >= 1 ? 1 : speed + 0.08 / (1 - speed);
evData = keymap[ev.keyCode];
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) {
return faye.publish("/drone/move", {
action: $(this).attr("data-param"),
speed: $(this).attr("data-action") === "move" ? 0 : void 0
});
});
$("*[rel=tooltip]").tooltip();
}).call(this);
\ No newline at end of file
public.1/index.html 0 → 100644
View file @ d4f389ae
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</link>
<link href="style.css" rel="stylesheet">
</link>
</head>
<body>
<div class="buttons">
<div class="btn-toolbar">
<div class="input-append btn-group">
<button class="btn btn-success" data-action="drone" data-param="takeoff"><i
class="icon-play icon-white"></i> takeoff</button>
<button class="btn btn-warning" data-action="drone" data-param="land"><i
class="icon-stop icon-white"></i> land</button>
<button class="btn btn-danger" data-action="drone" data-param="disableEmergency"><i
class="icon-wrench icon-white"></i> recover</button>
</div>
<div class="input-append btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Animations <span
class="caret"></span></button>
<ul class="dropdown-menu">
<li data-action="animate" data-param="phiM30Deg"><a href="#">phiM30Deg</a></li>
<li data-action="animate" data-param="phi30Deg"><a href="#">phi30Deg</a></li>
<li data-action="animate" data-param="thetaM30Deg"><a href="#">thetaM30Deg</a></li>
<li data-action="animate" data-param="theta30Deg"><a href="#">theta30Deg</a></li>
<li data-action="animate" data-param="theta20degYaw200deg"><a href="#">theta20degYaw200deg</a></li>
<li data-action="animate" data-param="theta20degYawM200deg"><a href="#">theta20degYawM200deg</a>
</li>
<li data-action="animate" data-param="turnaround"><a href="#">turnaround</a></li>
<li data-action="animate" data-param="turnaroundGodown"><a href="#">turnaroundGodown</a></li>
<li data-action="animate" data-param="yawShake"><a href="#">yawShake</a></li>
<li data-action="animate" data-param="yawDance"><a href="#">yawDance</a></li>
<li data-action="animate" data-param="phiDance"><a href="#">phiDance</a></li>
<li data-action="animate" data-param="thetaDance"><a href="#">thetaDance</a></li>
<li data-action="animate" data-param="vzDance"><a href="#">vzDance</a></li>
<li data-action="animate" data-param="wave"><a href="#">wave</a></li>
<li data-action="animate" data-param="phiThetaMixed"><a href="#">phiThetaMixed</a></li>
<li data-action="animate" data-param="doublePhiThetaMixed"><a href="#">doublePhiThetaMixed</a></li>
<li data-action="animate" data-param="flipAhead"><a href="#">flipAhead</a></li>
<li data-action="animate" data-param="flipBehind"><a href="#">flipBehind</a></li>
<li data-action="animate" data-param="flipLeft"><a href="#">flipLeft</a></li>
<li data-action="animate" data-param="flipRight"><a href="#">flipRight</a></li>
</ul>
<input class="span1" id="duration" size="3" type="number" value="2" rel="tooltip"
data-placement="bottom"
title="Trigger animations. You can change the duration of an animation. It defaults to 2 seconds.">
<span class="add-on"><i class="icon-time"></i></span>
</div>
</div>
</div>
<div id="batteryProgress" class="progress progress-success progress-striped" title="Battery status" rel="tooltip"
data-placement="right">
<div class="bar" id="batterybar" style="width: 100%;"></div>
</div>
<img id="cam" src="default.jpg" />
<div class="buttons">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn" data-action="move" data-param="front"><i class="icon-arrow-up"></i> Front</button>
<button class="btn" data-action="move" data-param="back"><i class="icon-arrow-down"></i> Back</button>
</div>
<div class="btn-group">
<button class="btn" data-action="move" data-param="left"><i class="icon-arrow-left"></i> Left</button>
<button class="btn" data-action="move" data-param="right"><i class="icon-arrow-right"></i>
Right</button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn" data-action="move" data-param="up"><i class="icon-chevron-up"></i> Up</button>
<button class="btn" class="btn" data-action="move" data-param="down"><i class="icon-chevron-down"></i>
Down</button>
</div>
<div class="btn-group">
<button class="btn" data-action="move" data-param="clockwise"><i class="icon-refresh"></i>
clockwise</button>
<button class="btn" data-action="move" data-param="counterClockwise"><i class="icon-refresh"></i>
counter-clockwise</button>
</div>
</div>
</div>
<div id="stats">
<div>Raw:
<pre id="rawdata"></pre>
</div>
<div>Battery: <span id="batteryPercentage">(Drone not connected)</span>%</div>
<div>Direction: <span id="clockwiseDegrees"></span>°</div>
<div>front/back: <span id="frontBackDegrees"></span>°</div>
<div>left/right: <span id="leftRightDegrees"></span>°</div>
<div>Altitude: <span id="altitudeMeters"></span>m</div>
<div>Velocity (x/y/z): <span id="xVelocity"></span> / <span id="yVelocity"></span> / <span
id="zVelocity"></span></div>
</div>
<script src="components/jquery/jquery.js"></script>
<script src="/faye/client.js"></script>
<script src="components/bootstrap/js/bootstrap.min.js"></script>
<script src="/client.js"></script>
</body>
</html>
\ No newline at end of file
public/client.js
View file @ d4f389ae
(function () {
var faye, keymap, speed;
faye = new Faye.Client("/faye", {
timeout: 120
});
const faye = new Faye.Client("/faye", { timeout: 120 });
faye.subscribe("/drone/navdata", function (data) {
["batteryPercentage", "clockwiseDegrees", "altitudeMeters", "frontBackDegrees", "leftRightDegrees", "xVelocity", "yVelocity", "zVelocity"].forEach(function (type) {
return $("#" + type).html(Math.round(data.demo[type], 4));
});
return showBatteryStatus(data.demo.batteryPercentage);
$("#navdata").text(JSON.stringify(data, null, 2));
});
window.showBatteryStatus = function (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/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;
$(document).keydown(function (ev) {
var evData;
if (keymap[ev.keyCode] == null) {
return;
}
ev.preventDefault();
speed = speed >= 1 ? 1 : speed + 0.08 / (1 - speed);
evData = keymap[ev.keyCode];
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'
});
$("#cam").attr({ src: src });
});
$("*[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())
});
if (!$(this).is("[data-state]"))
faye.publish("/drone/command", {
action: $(this).attr("data-action"),
speed: 0.3
});
else
faye.publish("/drone/command", {
action: $(this).attr("data-action")
});
});
$("*[data-action]").on("mouseup", function (ev) {
return faye.publish("/drone/move", {
action: $(this).attr("data-param"),
speed: $(this).attr("data-action") === "move" ? 0 : void 0
});
if (!$(this).is("[data-state]"))
faye.publish("/drone/command", {
action: $(this).attr("data-action"),
speed: 0
});
});
$("*[rel=tooltip]").tooltip();
}).call(this);
\ No newline at end of file
public/index.html
View file @ d4f389ae
<!DOCTYPE html>
<html lang="en">
<html lang="kr">
<head>
<meta charset="utf-8">
<link href="components/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="style.css" rel="stylesheet"></link>
<meta charset="utf-8">
<link href="components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
td {
text-align: center;
}
td button {
width: 12em;
}
</style>
</head>
<body>
<div class="buttons">
<div class="btn-toolbar">
<div class="input-append btn-group">
<button class="btn btn-success" data-action="drone" data-param="takeoff"><i class="icon-play icon-white"></i> takeoff</button>
<button class="btn btn-warning" data-action="drone" data-param="land"><i class="icon-stop icon-white"></i> land</button>
<button class="btn btn-danger" data-action="drone" data-param="disableEmergency"><i class="icon-wrench icon-white"></i> recover</button>
</div>
<div class="input-append btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Animations <span class="caret"></span></button>
<ul class="dropdown-menu">
<li data-action="animate" data-param="phiM30Deg"><a href="#">phiM30Deg</a></li>
<li data-action="animate" data-param="phi30Deg"><a href="#">phi30Deg</a></li>
<li data-action="animate" data-param="thetaM30Deg"><a href="#">thetaM30Deg</a></li>
<li data-action="animate" data-param="theta30Deg"><a href="#">theta30Deg</a></li>
<li data-action="animate" data-param="theta20degYaw200deg"><a href="#">theta20degYaw200deg</a></li>
<li data-action="animate" data-param="theta20degYawM200deg"><a href="#">theta20degYawM200deg</a></li>
<li data-action="animate" data-param="turnaround"><a href="#">turnaround</a></li>
<li data-action="animate" data-param="turnaroundGodown"><a href="#">turnaroundGodown</a></li>
<li data-action="animate" data-param="yawShake"><a href="#">yawShake</a></li>
<li data-action="animate" data-param="yawDance"><a href="#">yawDance</a></li>
<li data-action="animate" data-param="phiDance"><a href="#">phiDance</a></li>
<li data-action="animate" data-param="thetaDance"><a href="#">thetaDance</a></li>
<li data-action="animate" data-param="vzDance"><a href="#">vzDance</a></li>
<li data-action="animate" data-param="wave"><a href="#">wave</a></li>
<li data-action="animate" data-param="phiThetaMixed"><a href="#">phiThetaMixed</a></li>
<li data-action="animate" data-param="doublePhiThetaMixed"><a href="#">doublePhiThetaMixed</a></li>
<li data-action="animate" data-param="flipAhead"><a href="#">flipAhead</a></li>
<li data-action="animate" data-param="flipBehind"><a href="#">flipBehind</a></li>
<li data-action="animate" data-param="flipLeft"><a href="#">flipLeft</a></li>
<li data-action="animate" data-param="flipRight"><a href="#">flipRight</a></li>
</ul>
<input class="span1" id="duration" size="3" type="number" value="2" rel="tooltip" data-placement="bottom" title="Trigger animations. You can change the duration of an animation. It defaults to 2 seconds."> <span class="add-on"><i class="icon-time"></i></span>
</div>
</div>
<div class="buttons">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn" data-action="takeoff" data-state="1">takeoff</button>
<button class="btn" data-action="land" data-state="1">land</button>
<button class="btn" data-action="disableEmergency" data-state="1">disableEmergency</button>
</div>
<div class="btn-group">
<button class="btn" data-action="calibrate" data-state="1">calibrate</button>
</div>
</div>
<div id="batteryProgress" class="progress progress-success progress-striped" title="Battery status" rel="tooltip" data-placement="right">
<div class="bar" id="batterybar" style="width: 100%;"></div>
</div>
<img id="cam" src="default.jpg" />
<div class="buttons">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn" data-action="move" data-param="front"><i class="icon-arrow-up"></i> Front</button>
<button class="btn" data-action="move" data-param="back"><i class="icon-arrow-down"></i> Back</button>
</div>
<div class="btn-group">
<button class="btn" data-action="move" data-param="left"><i class="icon-arrow-left"></i> Left</button>
<button class="btn" data-action="move" data-param="right"><i class="icon-arrow-right"></i> Right</button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn" data-action="move" data-param="up"><i class="icon-chevron-up"></i> Up</button>
<button class="btn" class="btn" data-action="move" data-param="down"><i class="icon-chevron-down"></i> Down</button>
</div>
<div class="btn-group">
<button class="btn" data-action="move" data-param="clockwise"><i class="icon-refresh"></i> clockwise</button>
<button class="btn" data-action="move" data-param="counterClockwise"><i class="icon-refresh"></i> counter-clockwise</button>
</div>
</div>
</div>
<div id="stats">
<div>Battery: <span id="batteryPercentage">(Drone not connected)</span>%</div>
<div>Direction: <span id="clockwiseDegrees"></span>°</div>
<div>front/back: <span id="frontBackDegrees"></span>°</div>
<div>left/right: <span id="leftRightDegrees"></span>°</div>
<div>Altitude: <span id="altitudeMeters"></span>m</div>
<div>Velocity (x/y/z): <span id="xVelocity"></span> / <span id="yVelocity"></span> / <span id="zVelocity"></span></div>
</div>
<script src="components/jquery/jquery.js"></script>
<script src="/faye/client.js"></script>
<script src="components/bootstrap/js/bootstrap.min.js"></script>
<script src="/client.js"></script>
<table>
<tr>
<td><button class="col-3 btn" data-action="front"><i class="icon-arrow-up"></i> front</button></td>
<td><button class="col-3 btn" data-action="back"><i class="icon-arrow-down"></i> back</button></td>
</tr>
<tr>
<td><button class="col-3 btn" data-action="left"><i class="icon-arrow-left"></i> left</button></td>
<td><button class="col-3 btn" data-action="right"><i class="icon-arrow-right"></i> right</button></td>
</tr>
<tr>
<td><button class="col-3 btn" data-action="up"><i class="icon-chevron-up"></i> up</button></td>
<td><button class="col-3 btn" data-action="down"><i class="icon-chevron-down"></i> down</button></td>
</tr>
<tr>
<td><button class="col-3 btn" data-action="clockwise"><i class="icon-refresh"></i>clockwise</button></td>
<td><button class="col-3 btn" data-action="counterClockwise"><i
class="icon-refresh"></i>counterClockwise</button></td>
</tr>
</table>
</div>
<img id="cam" src="default.jpg" />
<pre id="navdata"></pre>
<script src="components/jquery/jquery.js"></script>
<script src="/faye/client.js"></script>
<script src="components/bootstrap/js/bootstrap.min.js"></script>
<script src="/client.js"></script>
</body>
</html>
\ No newline at end of file
test.js 0 → 100644
View file @ d4f389ae
const express = require('express');
const faye = require('faye');
const path = require('path');
// config drone
const drone = require('ar-drone').createClient();
drone.config('general:navdata_demo', 'TRUE');
// config express app
const app = express();
app.configure(() => {
app.set('port', process.env.PORT || 3001);
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.use('/components', express.static(path.join(__dirname, 'components')));
});
// create server and socket
const server = require('http').createServer(app);
new faye.NodeAdapter({ mount: '/faye', timeout: 45 }).attach(server);
const socket = new faye.Client(`http://localhost:${app.get('port')}/faye`);
// get request from socket -> set command to drone
socket.subscribe('/drone/command', cmd => {
console.log('command', cmd);
if (cmd.action == "calibrate") {
console.log("calibrate");
drone[cmd.action](0);
}
else if (typeof drone[cmd.action] === "function")
drone[cmd.action](cmd.speed);
});
// start server
server.listen(app.get('port'), () =>
console.log('Express server listening on port ' + app.get('port'))
);
// send navdata to socket
drone.on('navdata', data => socket.publish('/drone/navdata', data));
// save latest img from drone PngStream
let currentImg = null;
let imageSendingPaused = false;
drone.createPngStream().on('data', frame => {
currentImg = frame;
if (imageSendingPaused) return;
socket.publish('/drone/image', `/image/${Math.random()}`);
imageSendingPaused = true;
setTimeout(() => {
imageSendingPaused = false;
}, 100);
});
// send latest img to server
app.get('/image/:id', (req, res) => {
res.writeHead(200, { 'Content-Type': 'image/png' });
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