CopterExpress/clover
1
0
Fork 0
mirror of https://github.com/CopterExpress/clover.git synced 2026-05-28 22:19:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add using ROS with javascript article

Browse Source
This commit is contained in:
Oleg Kalachev
2020-05-08 16:51:15 +03:00
parent 1d48c79c52
commit 7f2cb1c63e
4 changed files with 111 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/en/SUMMARY.md
View File

@@ -41,7 +41,8 @@
* [Interfacing with a sonar](sonar.md)
* [Computer vision basics](camera.md)
* [Using rviz and rqt](rviz.md)
* [Software autorun](autolaunch.md)
* [Software autorun](autolaunch.md)
* [Using JavaScript](javascript.md)
* [ROS](ros.md)
* [MAVROS](mavros.md)
* Supplementary materials

54
docs/en/javascript.md Normal file
View File

@@ -0,0 +1,54 @@
# Work with ROS from browser
Using the [`roslibjs`](http://wiki.ros.org/roslibjs) library it's possible to work with all the ROS resources (topics, services, parameters) from JavaScript code within the browser, which allows creating various interactive web applications for drone.
All the required software is preinstalled in [RPi image](image.md) for Clover.
## Example
An example of a web page, working with `roslib.js`:
```html
<html>
<script src="js/roslib.js"></script>
<script type="text/javascript">
// Establish roslibjs connection
var ros = new ROSLIB.Ros({ url: 'ws://' + location.hostname + ':9090' });
ros.on('connection', function () {
// Connection callback
alert('Connected');
});
// Declare get_telemetry service
var getTelemetry = new ROSLIB.Service({ ros: ros, name : '/get_telemetry', serviceType : 'clover/GetTelemetry' });
// Call get_telemetry
getTelemetry.callService(new ROSLIB.ServiceRequest({ frame_id: 'map' }), function(result) {
// Service respond callback
alert('Telemetry: ' + JSON.stringify(result));
});
// Subscribe to `/mavros/state` topic
var stateSub = new ROSLIB.Topic({ ros : ros, name : '/mavros/state', messageType : 'mavros_msgs/State' });
stateSub.subscribe(function(msg) {
// Topic message callback
console.log('State: ', msg);
});
</script>
</html>
```
[Taking off, landing and all the rest operations](programming.md) can be implemented in a similar way.
The page should be placed in the `/home/pi/catkin_ws/src/clover/clover/www/` directory. After that, it will be available at `http://192.168.11.1/<page_name>.html`. When the page is opened, browser should show an alert with the drone telemetry and constantly print the state of the flight controller to the console.
<img src="../assets/js-ros.png" class="center zoom"/>
See additional information in [`roslibjs` tutorial](http://wiki.ros.org/roslibjs/Tutorials/BasicRosFunctionality).
## Web GCS
See an example of simplified web ground control station on Clover at http://192.168.11.1/gcs.html.
<img src="../assets/web-gcs.png" class="center zoom"/>

1
docs/ru/SUMMARY.md
View File

@@ -42,6 +42,7 @@
* [Компьютерное зрение](camera.md)
* [Визуализация с помощью rviz](rviz.md)
* [Автозапуск ПО](autolaunch.md)
* [Использование JavaScript](javascript.md)
* [ROS](ros.md)
* [MAVROS](mavros.md)
* Дополнительные материалы

54
docs/ru/javascript.md Normal file
View File

@@ -0,0 +1,54 @@
# Работа с ROS из браузера
С помощью библиотеки [`roslibjs`](http://wiki.ros.org/roslibjs) возможна работа со всеми ресурсами ROS (топики, сервисы, параметры) из JavaScript-кода внутри браузера, что позволяет создавать различные интерактивные браузерные приложения для коптера.
Все необходимое для работы с `roslibjs` предустановлено и настроено на [образе для RPi для Клевера](image.md).
## Пример
Пример HTML-кода страницы, работающей с `roslib.js`:
```html
<html>
<script src="js/roslib.js"></script>
<script type="text/javascript">
// Establish roslibjs connection
var ros = new ROSLIB.Ros({ url: 'ws://' + location.hostname + ':9090' });
ros.on('connection', function () {
// Connection callback
alert('Connected');
});
// Declare get_telemetry service
var getTelemetry = new ROSLIB.Service({ ros: ros, name : '/get_telemetry', serviceType : 'clover/GetTelemetry' });
// Call get_telemetry
getTelemetry.callService(new ROSLIB.ServiceRequest({ frame_id: 'map' }), function(result) {
// Service respond callback
alert('Telemetry: ' + JSON.stringify(result));
});
// Subscribe to `/mavros/state` topic
var stateSub = new ROSLIB.Topic({ ros : ros, name : '/mavros/state', messageType : 'mavros_msgs/State' });
stateSub.subscribe(function(msg) {
// Topic message callback
console.log('State: ', msg);
});
</script>
</html>
```
[Взлет, посадка и все остальные операции](programming.md) могут быть осуществлены аналогичным образом.
Страница должна быть помещена в каталог `/home/pi/catkin_ws/src/clover/clover/www/`. После этого она станет доступна по адресу `http://192.168.11.1/<имя_страницы>.html`. При открытии страницы браузер должен показать окно с телеметрией дрона, а также постоянно выводить состояние полетного контроллера в консоль.
<img src="../assets/js-ros.png" class="center zoom"/>
Более подробную информацию смотрите в [туториале по `roslibjs`](http://wiki.ros.org/roslibjs/Tutorials/BasicRosFunctionality).
## Браузерная GCS
Смотрите также пример реализации упрощенной браузерной наземной станции (GCS) на Клевере по адресу http://192.168.11.1/gcs.html.
<img src="../assets/web-gcs.png" class="center zoom"/>