ROS与web入门教程-整合keyboardteleopjs

ROS与web入门教程-整合keyboardteleopjs

说明：

介绍如何在页码上进行键盘控制

步骤：

下载keyboardteleopjs

cd ~/web/ros/
git clone https://github.com/GT-RAIL/keyboardteleopjs

修改keyboardteleop.html

cd /home/ubuntu/web/ros/keyboardteleopjs/examples
vim keyboardteleop.html

内容如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script src="https://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
    <script src="../build/keyboardteleop.js"></script>

    <script>
        /**
         * Setup all GUI elements when the page is loaded. 
         */
        function init() {
            // Connecting to ROS.
            var ros = new ROSLIB.Ros({
                url: 'ws://192.168.0.139:9090'
            });

            // Initialize the teleop.
            var teleop = new KEYBOARDTELEOP.Teleop({
                ros: ros,
                topic: '/turtle1/cmd_vel'
            });

            // Create a UI slider using JQuery UI.
            $('#speed-slider').slider({
                range: 'min',
                min: 0,
                max: 100,
                value: 90,
                slide: function(event, ui) {
                    // Change the speed label.
                    $('#speed-label').html('Speed: ' + ui.value + '%');
                    // Scale the speed.
                    teleop.scale = (ui.value / 100.0);
                }
            });

            // Set the initial speed .
            $('#speed-label').html('Speed: ' + ($('#speed-slider').slider('value')) + '%');
            teleop.scale = ($('#speed-slider').slider('value') / 100.0);
        }
    </script>
</head>

<body onload="init()">
    <h1>Simple Keyboard Teleop Example</h1>
    <p>Run the following commands in the terminal then refresh this page. Check the JavaScript console for the output.</p>
    <ol>
        <li><tt>roslaunch pr2_gazebo pr2_empty_world.launch</tt></li>
        <li><tt>roslaunch rosbridge_server rosbridge_websocket.launch</tt></li>
        <li>Use your arrow keys on your keyboard to move the robot (must have this browser window focused).
        </li>
    </ol>
    <div id="speed-label"></div>
    <div id="speed-slider"></div>
</body>

</html>

测试：

启动rosbridge_server

roslaunch rosbridge_server rosbridge_websocket.launch

启动turtlesim

rosrun turtlesim turtlesim_node

打开页面：http://192.168.0.139:81/ros/keyboardteleopjs/examples/keyboardteleop.html
效果如下：

请输入图片描述

鼠标在点在页面上才能控制
控制键盘

w前进，
s后退，
q横向前进，
e横向后退，
a左转，
d右转

获取最新文章: 扫一扫右上角的二维码加入“创客智造”公众号