如何通过自制HTML/Bootstrap网页在Gazebo中控制仿真Turtlebot3？

Hey there! I’ve been working with TurtleBot3 and web-based control lately, so I can walk you through the latest, reliable setup to connect your simulated robot to an HTML/Bootstrap interface. Old tutorials often rely on deprecated packages or outdated ROS versions, so this approach uses modern, supported tools that work with ROS Noetic (or Humble, if you’re on the newer distro):

We’ll use rosbridge_suite (the official ROS web communication tool) and roslibjs (a JavaScript library to interact with ROS from the browser) to bridge your HTML interface to the simulated TurtleBot3. Bootstrap will handle the responsive UI controls.

First, make sure you have the necessary ROS packages installed. Open a terminal and run:

# For ROS Noetic
sudo apt install ros-noetic-rosbridge-server ros-noetic-turtlebot3-gazebo

# For ROS Humble
sudo apt install ros-humble-rosbridge-server ros-humble-turtlebot3-gazebo

Don’t forget to set your TurtleBot3 model environment variable (run this in every terminal you use for the simulation):

# For Burger model (adjust to waffle/waffle_pi if needed)
export TURTLEBOT3_MODEL=burger

Start the ROS core, simulation, and rosbridge server in separate terminals:

1. Terminal 1: Start ROS core

   roscore
   

2. Terminal 2: Launch TurtleBot3 in an empty Gazebo world

   # Noetic
   roslaunch turtlebot3_gazebo turtlebot3_empty_world.launch
   
   # Humble
   ros2 launch turtlebot3_gazebo empty_world.launch.py
   

3. Terminal 3: Start the rosbridge websocket server (this lets your browser connect to ROS)

   # Noetic
   roslaunch rosbridge_server rosbridge_websocket.launch
   
   # Humble
   ros2 launch rosbridge_server rosbridge_websocket_launch.xml
   

Save this code as turtlebot3_web_control.html — it includes a responsive Bootstrap UI and the JavaScript logic to send movement commands to the robot:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TurtleBot3 Web Controller</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- ROSLIB JS (official ROS JavaScript library) -->
    <script src="https://cdn.jsdelivr.net/npm/roslib@1.3.0/build/roslib.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">TurtleBot3 Web Control</h1>
        <!-- Forward/Backward Buttons -->
        <div class="d-flex justify-content-center gap-3 mb-3">
            <button class="btn btn-primary btn-lg" id="forward">Forward</button>
            <button class="btn btn-danger btn-lg" id="backward">Backward</button>
        </div>
        <!-- Left/Right/Stop Buttons -->
        <div class="d-flex justify-content-center gap-3">
            <button class="btn btn-success btn-lg" id="left">Turn Left</button>
            <button class="btn btn-secondary btn-lg" id="stop">Stop</button>
            <button class="btn btn-warning btn-lg" id="right">Turn Right</button>
        </div>
    </div>

    <script>
        // Connect to ROS bridge (websocket runs on port 9090 by default)
        const ros = new ROSLIB.Ros({
            url: 'ws://localhost:9090'
        });

        // Connection status logs
        ros.on('connection', () => console.log('Connected to ROS bridge!'));
        ros.on('error', (err) => console.log('Connection error:', err));
        ros.on('close', () => console.log('ROS bridge connection closed'));

        // Create publisher for the /cmd_vel topic (controls robot movement)
        const cmdVelPub = new ROSLIB.Topic({
            ros: ros,
            name: '/cmd_vel', // For ROS2, use '/cmd_vel' too
            messageType: 'geometry_msgs/Twist'
        });

        // Define movement messages
        const moveForward = new ROSLIB.Message({
            linear: { x: 0.2, y: 0, z: 0 },
            angular: { x: 0, y: 0, z: 0 }
        });

        const moveBackward = new ROSLIB.Message({
            linear: { x: -0.2, y: 0, z: 0 },
            angular: { x: 0, y: 0, z: 0 }
        });

        const turnLeft = new ROSLIB.Message({
            linear: { x: 0, y: 0, z: 0 },
            angular: { x: 0, y: 0, z: 0.5 }
        });

        const turnRight = new ROSLIB.Message({
            linear: { x: 0, y: 0, z: 0 },
            angular: { x: 0, y: 0, z: -0.5 }
        });

        const stopRobot = new ROSLIB.Message({
            linear: { x: 0, y: 0, z: 0 },
            angular: { x: 0, y: 0, z: 0 }
        });

        // Attach button click listeners
        document.getElementById('forward').addEventListener('click', () => cmdVelPub.publish(moveForward));
        document.getElementById('backward').addEventListener('click', () => cmdVelPub.publish(moveBackward));
        document.getElementById('left').addEventListener('click', () => cmdVelPub.publish(turnLeft));
        document.getElementById('right').addEventListener('click', () => cmdVelPub.publish(turnRight));
        document.getElementById('stop').addEventListener('click', () => cmdVelPub.publish(stopRobot));
    </script>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

1. Serve the HTML file (to avoid browser cross-origin issues, don’t open it directly):

   python3 -m http.server 8000
   

2. Open your browser and go to http://localhost:8000/turtlebot3_web_control.html
3. Click the buttons — your TurtleBot3 in Gazebo should move accordingly!

• If the robot doesn’t move: Check if the /cmd_vel topic is receiving messages with rostopic echo /cmd_vel (ROS1) or ros2 topic echo /cmd_vel (ROS2).
• Connection errors: Make sure the rosbridge server is running on port 9090, and your browser has access to localhost.
• Simulation issues: Verify the TurtleBot3 model environment variable is set correctly, and the Gazebo simulation loads without errors.

内容的提问来源于stack exchange，提问作者saintdere