Adding suppport for ros2 messages

package.json

@@ -46,7 +46,7 @@
     "three": "^0.117.0"
   },
   "scripts": {
-    "start": "webpack-dev-server --config webpack.app.dev.js --host 192.168.64.6",
+    "start": "webpack-dev-server --config webpack.app.dev.js --host 10.82.207.213",
     "build": "webpack --config webpack.app.prod.js",
     "build-lib": "webpack --config webpack.lib.prod.js",
     "lint": "eslint src/**/*.{js,jsx} --fix",

path.py

@@ -0,0 +1,25 @@
+#!/usr/bin/env python
+import rospy
+
+from nav_msgs.msg import Path
+from nav_msgs.msg import Odometry
+from geometry_msgs.msg import PoseStamped
+
+path = Path()
+
+def odom_cb(data):
+    global path
+    path.header = data.header
+    pose = PoseStamped()
+    pose.header = data.header
+    pose.pose = data.pose.pose
+    path.poses.append(pose)
+    path_pub.publish(path)
+
+rospy.init_node('path_node')
+
+odom_sub = rospy.Subscriber('/odom', Odometry, odom_cb)
+path_pub = rospy.Publisher('/path', Path, queue_size=10)
+
+if __name__ == '__main__':
+    rospy.spin()

src/panels/addModal/index.jsx

@@ -54,6 +54,7 @@ class AddModal extends React.Component {
       ros,
       rosParams,
       rosTopics,
+      rosVersion,
     } = this.props;
     const { selectedViz, tabType } = this.state;
     return (
@@ -87,12 +88,14 @@ class AddModal extends React.Component {
                   rosTopics={rosTopics}
                   rosParams={rosParams}
                   closeModal={closeModal}
+                  rosVersion={rosVersion}
                 />
               ) : (
                 <TabTopicName
                   selectViz={this.selectViz}
                   rosTopics={rosTopics}
                   closeModal={closeModal}
+                  rosVersion={rosVersion}
                 />
               )}
             </>

src/panels/addModal/tabTopicName.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { vizOptions } from '../../utils/vizOptions';
+import { ros2vizOptions } from '../../utils/vizOptions';
 import { ButtonPrimary, FlexGrow } from '../../components/styled';
 import {
   AddVizForm,
@@ -41,16 +42,17 @@ class TopicName extends React.Component {
   }
 
   render() {
-    const { closeModal, rosTopics } = this.props;
+    const { closeModal, rosTopics, rosVersion } = this.props;
     const { selectedViz } = this.state;
     return (
       <AddVizForm onSubmit={this.onSubmit}>
         <TypeContainer>
           <TypeSelection>
             {_.map(_.sortBy(rosTopics, 'name'), ({ name, messageType }) => {
-              const vizOption = _.find(vizOptions, v =>
+              const vizOption = _.find(rosVersion === 1 ? vizOptions : ros2vizOptions, v =>
                 _.includes(v.messageTypes, messageType),
               );
+              console.log(vizOptions);
               return vizOption ? (
                 <TopicRow
                   type="button"

src/panels/addModal/tabVizType.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { vizOptions } from '../../utils/vizOptions';
+import { ros2vizOptions } from '../../utils/vizOptions';
 import VizTypeItem from './vizTypeItem';
 import VizTypeDetails from './vizTypeDetails';
 import { ButtonPrimary, FlexGrow } from '../../components/styled';
@@ -43,12 +44,12 @@ class VizType extends React.PureComponent {
 
   render() {
     const { selectedViz } = this.state;
-    const { closeModal, rosParams, rosTopics } = this.props;
+    const { closeModal, rosParams, rosTopics, rosVersion } = this.props;
     return (
       <AddVizForm onSubmit={this.onSubmit}>
         <TypeContainer>
           <TypeSelection>
-            {_.map(vizOptions, op => {
+            {_.map(rosVersion === 1 ? vizOptions : ros2vizOptions, op => {
               return (
                 <VizTypeItem
                   selectViz={this.selectViz}

src/panels/index.jsx

@@ -34,6 +34,7 @@ class Wrapper extends React.Component {
       configurationModalOpen: false,
       rosTopics: [],
       rosParams: [],
+      rosVersion: 0,
       framesList: [],
       activeTool: TOOL_TYPE_CONTROLS,
       graphModalOpen: false,
@@ -58,6 +59,7 @@ class Wrapper extends React.Component {
 
     this.vizInstances = new Set();
     this.ros = new ROSLIB.Ros();
+    this.ros_version_service = new ROSLIB.Service({ros: this.ros, name: "/rosapi/get_ros_version", serviceType: "/rosapi_msgs/GetROSVersion"})
     this.viewer = new Amphion.TfViewer(this.ros, {
       onFramesListUpdate: this.updateFramesList,
     });
@@ -221,6 +223,9 @@ class Wrapper extends React.Component {
     this.ros.getParams(rosParams => {
       this.setState({ rosParams: _.map(rosParams, p => _.trimStart(p, '/')) });
     });
+    this.ros_version_service.callService(ROSLIB.ServiceRequest(), result => {
+      this.setState({ rosVersion: result.version });
+    });
   }
 
   componentWillUnmount() {
@@ -319,6 +324,7 @@ class Wrapper extends React.Component {
       graphModalOpen,
       rosEndpoint,
       rosParams,
+      rosVersion,
       rosStatus,
       rosTopics,
     } = this.state;
@@ -360,6 +366,7 @@ class Wrapper extends React.Component {
               ros={this.ros}
               rosTopics={rosTopics}
               rosParams={rosParams}
+              rosVersion={rosVersion}
               closeModal={this.toggleAddModal}
               addVisualization={this.addVisualization}
             />
@@ -380,6 +387,7 @@ class Wrapper extends React.Component {
               rosInstance={this.ros}
               rosTopics={rosTopics}
               rosStatus={rosStatus}
+              rosVersion={rosVersion}
               vizInstances={this.vizInstances}
               visualizations={visualizations}
               viewer={this.viewer}
@@ -420,6 +428,7 @@ class Wrapper extends React.Component {
               key={vizItem.key}
               viewer={this.viewer}
               rosTopics={rosTopics}
+              rosVersion={rosVersion}
               rosInstance={this.ros}
             />
           ))}

src/panels/info/index.jsx

@@ -27,15 +27,22 @@ import AddInfoPanelModal from './addInfoPanelModal';
 const MESSAGE_BUFFER_MAX_LENGTH = 1000;
 const compressionTypes = new Set([
   'sensor_msgs/Image',
+  'sensor_msgs/msg/Image',
   'sensor_msgs/PointCloud2',
+  'sensor_msgs/msg/PointCloud2',
   'sensor_msgs/PointCloud',
   'sensor_msgs/LaserScan',
+  'sensor_msgs/msg/LaserScan',
   'nav_msgs/Path',
+  'nav_msgs/msg/Path',
   'nav_msgs/OccupancyGrid',
+  'nav_msgs/msg/OccupancyGrid',
   'visualization_msgs/MarkerArray',
+  'visualization_msgs/msg/MarkerArray',
   'geometry_msgs/Polygon',
   'geometry_msgs/PolygonStamped',
   'geometry_msgs/PoseArray',
+  'geometry_msgs/msg/PoseArray',
 ]);
 const getTopicOptions = messageType => {
   if (compressionTypes.has(messageType)) {

src/panels/sidebar/index.jsx

@@ -3,6 +3,7 @@ import _ from 'lodash';
 
 import { ROS_SOCKET_STATUSES } from '../../utils';
 import { vizOptions } from '../../utils/vizOptions';
+import { ros2vizOptions } from '../../utils/vizOptions';
 import GlobalOptions from './globalOptions';
 import {
   ButtonPrimary,
@@ -73,6 +74,7 @@ class Sidebar extends React.Component {
       rosInstance,
       rosStatus,
       rosTopics,
+      rosVersion,
       toggleAddModal,
       toggleConfigurationModal,
       toggleVisibility,
@@ -120,7 +122,7 @@ class Sidebar extends React.Component {
                 )}
                 {_.map(visualizations, vizItem => {
                   const vizObject = _.find(
-                    vizOptions,
+                    rosVersion === 1 ? vizOptions : ros2vizOptions,
                     v => v.type === vizItem.vizType,
                   );
                   if (!vizObject) {