< >
Home » ROS与Web入门教程 » ROS与web入门教程-整合keyboardteleopjs

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右转

纠错,疑问,交流: 请进入讨论区点击加入Q群

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


标签: ros与web入门教程