Skip to content

Simple Demonstration of Vue + ROS Integration

License

Notifications You must be signed in to change notification settings

zmoth/vue-ros-demo

 
 

Repository files navigation

vue-ros-demo

Simple Demonstration of Vue + ROS Integration

Demonstration

gif showing a demo
Demonstration (As seen in Chrome)

Dependencies

  • Vue v3
  • roslib v1.3.0
  • ROS (compatible with ROS 1 and 2, see thanks section)
  • If you do not have rosbridge_server you need to install it with the following command
    apt search rosbridge_suite
    sudo apt install -y ros-<rosdistro>-rosbridge-suite # ros-humble-rosbridge-suite

Prerequisite

Make sure to run the following commands in the terminal

ROS1

roslaunch rosbridge_server rosbridge_websocket.launch
rostopic pub /listener std_msgs/String "Hello, World"
rosrun rospy_tutorials add_two_ints_server

ROS2

ros2 launch rosbridge_server rosbridge_websocket_launch.xml
ros2 run demo_nodes_py add_two_ints_server
ros2 run demo_nodes_py talker

After starting the node you can find the topic/service and its type with the following instructions.Then you need to modify the allowedMessageType/serviceType in file TopicSubscriber.vue/ServiceClient.vue to receive the message.

$ ros2 service list
/add_two_ints
$ ros2 service type /add_two_ints
example_interfaces/srv/AddTwoInts
$ ros2 topic list
/chatter
$ ros2 topic info /chatter
Type: std_msgs/msg/String
Publisher count: 1
Subscription count: 0

Installation

npm install

Incase of the folllowing error, please execute npm install --force

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/[email protected]
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/ravi/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ravi/.npm/_logs/2022-08-15T10_52_32_924Z-debug-0.log

Run (for development)

npm run serve

Linting

npm run lint

Compile (for production)

npm run build

Note

Thanks

Following authors are sincerely acknowledged for the improvements of this package-

About

Simple Demonstration of Vue + ROS Integration

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 81.2%
  • HTML 9.8%
  • JavaScript 9.0%