ROS Resources: Documentation | Support | Discussion Forum | Index | Service Status | Q&A answers.ros.org
Ask Your Question
3

How to subscribe to map and markers and display on web GUI using roslibjs?

asked 2021-03-22 06:18:58 -0600

Py gravatar image

updated 2021-03-23 05:54:53 -0600

I am looking to display a map of type nav_msgs/OccupancyGrid on a web GUI with markers overlaid on it using tools like roslibjs, ros2djs or ros3djs and vue on noetic.

Inspired by the example here, I have created an index.html and main.js file in an attempt to subscribe to my /map topic and display that in the web GUI as it grows.

index.html:

<!DOCTYPE html>
<html lang="en-GB">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script type="text/javascript" src="https://static.robotwebtools.org/EaselJS/current/easeljs.js"></script>
    <script type="text/javascript" src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.js"></script>
    <script type="text/javascript" src="https://static.robotwebtools.org/roslibjs/current/roslib.js"></script>
    <script type="text/javascript" src="https://static.robotwebtools.org/ros2djs/current/ros2d.js"></script>
</head>

<body>
    <main id="vueApp">
        <button class="mt-2 btn btn-danger btn-lg my-auto" v-if="connected === false" @click="init" style="width: 100%;">Connect GUI To Robot</button>
        <div id="map"></div>
        <script type="text/javascript" src="main.js"></script>
    </main>
</body>

</html>

main.js:

new Vue({
    el: '#vueApp',

    data: {
        ros: null,
        connected: false,
        pubInterval: null,
        mapGridClient: null,
        mapViewer: null,
    },

    methods: {

        init: function () {

            // ROSBridge Connection Object
            this.ros = new ROSLIB.Ros({
                url: 'ws://' + window.location.hostname + ':9090'
            })

            // ROSBridge Connection Object Callbacks
            this.ros.on('connection', () => {
                this.connected = true
                console.log('Connection to ROSBridge established')
                this.pubInterval = setInterval(this.publish, 100)
            })
            this.ros.on('error', (error) => {
                console.log('Something went wrong when trying to connect')
                console.log(error)
            })
            this.ros.on('close', () => {
                this.connected = false
                console.log('Connection to ROSBridge was closed')
                clearInterval(this.pubInterval)
            })

            // Map Viewer
            this.mapViewer = new ROS2D.Viewer({
                divID : 'map',
                width : 400,
                height : 400
            })
            this.mapGridClient = new ROS2D.OccupancyGridClient({
                ros : this.ros,
                rootObject : this.mapViewer.scene,
                continuous : true
            })
            this.mapGridClient.on('change', function(){
                this.mapViewer.scaleToDimensions(this.mapGridClient.currentGrid.width, this.mapGridClient.currentGrid.height);
            })

        }
    }
})

This seems to be subscribing to the map and displaying it but only a small fraction of it appears as expected. See below for a comparison between the map viewed in RViz and the map view on the web GUI.

image description

image description

Also, I need to work out how to subscribe to my /visualization_marker topic of type visualization_msgs/Markeroverlay and display these markers as they become available on top of the map.

Any ideas how to solve these issues?

edit retag flag offensive close merge delete

Comments

Same issue here . Were you able to find a solution ?

ZainMehdi gravatar image ZainMehdi  ( 2021-09-07 22:10:42 -0600 )edit

1 Answer

Sort by ยป oldest newest most voted
2

answered 2021-09-13 06:08:56 -0600

Py gravatar image

The code snippet I ended up to solve this is as follows. This uses ros3djs instead of ros2djs.

let viewer = new ROS3D.Viewer({
    divID : 'map',
    width : 600,
    height : 600,
    antialias : true,
    intensity : 1.0,
    cameraPose : {x : -1, y : 0, z : 20},
    displayPanAndZoomFrame : true
});

let tfClient = new ROSLIB.TFClient({
    ros : this.ros,
    angularThres : 0.01,
    transThres : 0.01,
    rate : 10.0,
    fixedFrame : '/map'
});

let mapClient = new ROS3D.OccupancyGridClient({
    ros : this.ros,
    rootObject : viewer.scene,
    continuous : true
});
edit flag offensive delete link more

Comments

Thanks alot for your answer but I am having the same issue. When continuous : true is set it doesn't display anything in the browser.

ZainMehdi gravatar image ZainMehdi  ( 2021-09-14 21:32:43 -0600 )edit

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

1 follower

Stats

Asked: 2021-03-22 06:18:58 -0600

Seen: 870 times

Last updated: Sep 13 '21