This project demonstrates how to communicate between a Vue 3 frontend and ROS (Robot Operating System). With this demo, users can control a simulated TurtleBot3 robot using buttons on a web page and view the robot's position and speed information in real time.
- ROS (Robot Operating System): Noetic
- rosbridge_suite: 0.11.13
- roslibjs: 1.3.0
- Vue: 3.x
- Node.js: 14.x or higher
-
Install ROS Noetic and set up the environment.
-
Install
rosbridge_suite
:sudo apt-get install ros-noetic-rosbridge-server
-
Install TurtleBot3 simulation package:
sudo apt-get install ros-noetic-turtlebot3-simulations
-
Start the rosbridge server (this will automatically start
roscore
):roslaunch rosbridge_server rosbridge_websocket.launch
-
Start the Gazebo simulation environment:
export TURTLEBOT3_MODEL=burger roslaunch turtlebot3_gazebo turtlebot3_world.launch
-
Clone this repository and navigate to the project directory:
git clone https://github.com/jjhhyyg/ros-vue-demo.git cd ros-vue-demo
-
Install dependencies:
npm install
-
Start the Vue development server:
npm run dev
Once the Vue application is opened in the browser, you can control the robot using the following keys:
- W: Increase linear speed
- X: Decrease linear speed
- A: Increase angular speed
- D: Decrease angular speed
- S / Space: Stop the robot
- Robot Position: Displays the current position of the robot (x, y, z).
- Current Speed: Displays the current linear speed (linear) and angular speed (angular) of the robot.
Follow these steps to successfully start and run this demo, experiencing the full process of using a Vue frontend to communicate with ROS and control a robot.